Retour au guide

Elementor

Naviguer

Navigation rapide par section dans la page

Vous pouvez ouvrir le Navigateur pour passer rapidement d’une section à une autre. Il suffit de nommer les sections à même le navigateur pour faciliter le tout. Cette manière de procéder éviter de scroller longtemps pour les pages plus longues.

Historique de vos actions et révisions

Lorsque vous apportez des modifications dans un page ou un article, vous pouvez visualiser l’historique de vos actions en cliquant sur le bouton « Historique ».

Dans cette interface, vous pouvez revenir dans le passé en cliquant sur l’historique de vos actions:

Bouton responsive & ajustements

Lorsque vous apportez des modifications dans un page ou un article, il est important de visualiser le contenu en version tablette et mobile afin de s’assurer qu’il s’affichera bien sur ces appareils.

Cliquer sur l’écran dans le bas à gauche et sélectionner le périphérique désiré. Vous pourrez procéder à la validation et modification du contenu sur chacun des appareils sans affecter les autres.

Prévisualiser vos changements sans sauvegarder

Lorsque vous apportez des modifications à une page ou un article, vous pouvez les prévisualiser sans faire une sauvegarde en cliquant sur le bouton « Prévisualiser ».

Quitter Elementor et retourner à l’interface WordPress

Dans l’onglet Elementor à gauche, cliquez sur le menu hamburger. Puis cliquez sur le bouton bleu Exit to dashboard dans le bas du menu.

Créer/ajouter une section

Dans le bas de la page, cliquer sur le + afin d’ajouter une nouvelle section.

Par la suite, sélectionner la structure de la section selon le nombre de colonnes désirées.

Éditer une section et son contenu

  • + pour ajouter une nouvelle section sur la page.
  • 6 points pour ouvrir le menu de modification des paramètres de la section.
  • x pour supprimer la section.
    Un clic droit sur le menu bleu offre les mêmes options.
  • Clic gauche sur l’icône = ouvre le menu de modification du contenant / colonne.
  • Clic droit sur l’icône = permet de modifier des paramètres, ajouter ou supprimer des colonnes.
  • Clic gauche sur l’icône = ouvre le menu de modification du contenu.
  • Clic droit sur l’icône = permet de modifier, dupliquer ou supprimer le contenu.

Il est possible de déplacer des sections de contenu dans la page. Il suffit de glisser et déposer (drag & drop) la section à l’endroit où elle doit être positionnée.

TRUC : Faites un zoom négatif (CTRL + [-]) pour voir plus facilement où déplacer la section.

Ajouter/Modifier un titre

  1. Dans le menu principal Elementor, trouvez Titrage sous Éléments.
  2. Glissez et déposez à l’endroit désiré sur la page.
  3. Assurez-vous de sélectionner le bon HTML Tag (H1 à H6) pour la priorité de ce titre dans votre page.

Le titre de la page doit être classé H1 (titre principal). Les autres titres doivent être classés de H2 à H6 selon leur importance/priorité.

Ajouter/Modifier le texte

1. Cliquez sur le bloc de texte qui doit être modifié.

2. Modifiez le texte dans l’onglet Contenu du menu Éditeur de texte. La mise en page du texte (gras, italique, couleur d’un mot, etc.) se fait à partir de cet onglet.Dans le cas de texte à copier de Word, passer par l’onglet Texte pour éviter de copier des balises non souhaitées.

 

3. Pour changer la taille, la couleur, la police d’un texte, cliquez sur l’onglet Style puis Typographie dans le menu à gauche.

 

4. Dans Style, il est possible de définir un aspect spécifique pour chaque type d’appareils (ordinateur, tablette, mobile). Cliquez sur l’icône dans le menu Éditeur de texte ou dans le menu gris dans le bas de la colonne d’édition.

 

5. L’onglet Advanced permet d’effectuer une mise en forme par rapport aux objets de la page.

Note : La mise en forme suggérée a été définie lors de la création.

  • Margin : permet de créer de l’espace à l’extérieur d’une boîte de texte (ex. : créer un espace entre une boîte Titre et une boîte Texte).
  • Padding : permet de créer de l’espace à l’intérieur d’une boîte de texte (ex. : éviter que le texte soit collé directement sur le cadre).
  • Entrance Animation : permet d’animer le texte lors de son apparition (même principe que des diapositives animées dans PowerPoint).
  • Background : permet d’ajouter un background autour d’un objet/boîte de texte. Utile pour mettre un paragraphe en évidence.
  • Border : permet d’ajouter une bordure autour d’un objet/boîte de texte.
  • Responsive : permet d’afficher/cacher des sections selon le type d’appareil.
  •  

Ajouter un hyperlien dans le texte

  1. Dans l’onglet Contenu du menu Éditeur de texte, sélectionnez le texte de l’hyperlien.
  2. Cliquez sur l’icône Insérer/modifier un lien. Inscrivez l’URL dans la boîte, et cliquez sur l’engrenage pour plus d’options.
  3. Cochez la case Ouvrir le lien dans un nouvel onglet pour éviter qu’un clic sur le lien permette à l’usager de quitter votre site.

Ajouter/Modifier une liste à puce

  1. Dans le menu principal Elementor, trouvez Liste d’icône sous Elements.
  2. Glissez et déposez à l’endroit désiré sur la page.
  3. Dans le menu Elementor, cliquez sur chacun des items pour les modifier.
    • Layout : choisir une liste à puce “régulière” ou “côte à côte”
    • Text : le texte qui doit apparaître dans la liste
    • Icon : le format de la puce
    • Link : si un URL doit être lié à ce item. Assurez-vous de cocher “Open in new window” si le lien est externe au site OU pour que l’usager ne quitte pas la page en cours lorsqu’il clique sur le lien.
    • Dupliquer un item : cliquez sur
    • Supprimer un item : cliquez sur
    • Ajouter un item :  cliquez sur + Ajouter un élément

Ajouter un bouton Call-to-Action (CTA)

  1. Dans le menu principal Elementor, trouvez Bouton  sous Elements
  2. Glissez et déposez à l’endroit désiré sur la page
  3. Dans le menu Contenu, personnalisez le bouton :
    • Text : le CTA de votre bouton
    • Link : le lien vers lequel le bouton redirige l’usager. N’oubliez pas de faire ouvrir un lien externe dans un nouvel onglet (via l’icône d’engrenage)!
    • Alignement : position de l’objet dans sa boîte sur la page
    • Size : la taille du bouton
    • Icon : Sélectionnez un icône dans la liste (si applicable)
  4. Dans le menu Style, personnalisez le bouton :
    • Typography : police à utiliser
    • Normal : bouton à l’état initial / Hover : bouton à l’état survolé
      • Définissez le look du bouton pour les 2 états.
    • Text color : couleur du texte
    • Background color : couleur du bouton
    • Hover Animation : mouvement du bouton lorsqu’il est survolé
    • Border : bordure ajoutée au bouton

Ajouter une image ou carrousel d’images

  1. Dans le menu principal Elementor, trouvez Image ou Carrousel d’images de médias sous Elements..
  2. Glissez et déposez à l’endroit désiré sur la page.
  3. Dans le menu Elementor, cliquez sur Choose Your Image.
  4. Sélectionnez l’image et cliquez sur Insérez un média.
    • Pour ajouter une image à la bibliothèque de médias, glissez et déposez un fichier à partir de votre ordinateur ou ajoutez un fichier à partir de l’onglet Envoyer des fichiers.
  5. Pour ajouter un crédit photo ou une légende, indiquez-le directement dans la bibliothèque de médias.
  6. Dans Elementor, sélectionnez Légende de fichier joint pour afficher le crédit photo.
  7. Ajoutez un hyperlien à l’image sous Lien. N’oubliez pas de faire ouvrir un lien externe dans un nouvel onglet (via l’icône d’engrenage)!
  8. Pour ajouter l’option de visionneuse sur la galerie d’image, modifier le champ Lien pour Fichier média. La possibilité d’afficher la visionneuse est alors disponible.
  9. Pour éditer/modifier l’image dans un emplacement sur la page, il suffit de cliquer sur l’image en question, et d’effectuer les même étapes (3 à 6) que pour l’ajout d’une image.

Ajouter une vidéo

  1. Dans le menu principal Elementor, trouvez Vidéo sous Elements.
  2. Glissez et déposez à l’endroit désiré sur la page.
  3. Dans le menu Elementor, sélectionnez la source de la vidéo (YouTube ou Viméo).
  4. Indiquez l’URL de la vidéo.
  5. Activez les options vidéo de votre choix (autoplay, affichage des boutons de contrôle, etc.).

Ajouter/Modifier un témoignage

  1. Dans le menu principal Elementor, trouvez le module Testimonial Carousel.
    • Dupliquer un item : cliquez sur
    • Supprimer un item : cliquez sur
    • Ajouter un item :  cliquez sur + Ajouter un élément
  2. Ajuster chaque item :
    • Texte dans la boîte Contenu
    • Ajouter une image si dispo
    • Nom du critique
    • Titre = lien vers l’article

Utiliser le widget Bascule (accordéon)

  1. Dans le menu principal Elementor, trouvez le module Bascule.
    • Dupliquer un item : cliquez sur
    • Supprimer un item : cliquez sur
    • Ajouter un item :  cliquez sur + Ajouter un élément
  2. Utilisez l’onglet Texte si le contenu est copié/collé de Word pour éviter les balises superflues. La mise en page se fait dans l’onglet Visuel.

Ajout de lien interne (Dynamic Tags)

Lors d’un ajout d’un bouton ou d’un lien, cliquer sur la petite boîte Dynamic Tags et sélectionner Internal URL dans la liste déroulante.

Cliquer sur la clé et sélectionner Contenu dans le type. Dans Search & Select, taper le nom de la page désirée; elle s’affichera. Ceci permettra de ne pas avoir à modifier le lien si jamais le nom de la page venait à changer.

Ceci permettra de ne pas avoir à modifier le lien si jamais le nom de la page venait à changer.

Retour au guide