L'interface d'Elementor
Elementor est relativement intuitif, cependant certaines options sont parfois bien cachées.
L’interface d’Elementor se compose :
- D’une barre latérale d’option à gauche,
- D’une fenêtre de rendu de la page web à droite
- D’options rapides au clic droit
- D’un navigateur pour sélectionner rapidement les éléments de la page
Sommaire
Panneau latéral des paramètres d’Elementor
Il s’agit du panneau latérale de l’interface d’Elementor :
Sur cette section de l’interface d’Elementor, on retrouve :
Les Widgets
Les widgets Elementor sont les blocs d’éléments pour construire sa page.
Tels que les titres, les textes, les images, les icones etc.
On y retrouve également les options d’Elementor et le bouton de retour à l’éditeur WordPress :
Les paramètres du thème :
En cliquant sur l’icône hamburger :
On retrouve des paramètres liés au thème comme la couleur par défaut, la police par défaut ou le modèle de page que l’on peut changer directement ici.
Généralement il s’agit des options de votre thème.
Lorsqu’on ajoute un widget titre ou bouton par exemple, Elementor reprend par défaut la police, les couleurs et les tailles de votre thème.
Ici on peut modifier le rendu par défaut de ces éléments dans Style du Thème.
Revenir au tableau de bord WordPress depuis Elementor
Depuis une page Elementor, pour revenir au tableau de bord de WordPress, il suffit de cliquer sur le menu hamburger :
Puis sur le bouton Revenir à l’éditeur WordPress.
La barre inférieure des paramètres d’Elementor
En dessous de la barre latérale se trouve une barre de paramètres qui va nous donner des options comme : Sauvegarder la page, enregistrer en brouillon, les historiques, le navigateur ou encore le mode responsive mobile et tablette d’Elementor :
Icône réglages d'Elementor
L’icône réglage de l’engrenage permet de paramétrer le titre de la page, l’état, publié ou non ainsi que l’image de mise en avant s’il s’agit d’un article WordPress.
Icône Navigateur d’Elementor
Le navigateur d’Elementor est extrêmement pratique pour aller sélectionner un élément précis sur la page.
On peut y accéder depuis cette icône Navigateur pour le faire apparaître.
Icône Historique d’Elementor
L’icône historique d’Elementor permet de revenir en arrière et d’annuler des modifications effectuées sur la page :
Icône Responsive Mobile et Tablette d’Elementor
Cette Icône Responsive nous permet de passer l’éditeur Elementor en mode responsive.
On peut ainsi voir le rendu de sa page sur tablette et Mobile et faire des modifications directement sur la version responsive de sa page Elementor :
Icône Voir la Page / prévisualiser les modifications sur Elementor
Cette icône nous permet de prévisualiser nos modifications en ligne.
Elementor est un WYSIWYG (What you see is what you get), donc le rendu de droite est quasi similaire au rendu en ligne.
Il peut y avoir parfois des différences et voir la page telle qu’elle apparaît en ligne est une manière de s’assurer du rendu final de la page.
Bouton Mettre à jour la page Elementor et Enregistrer comme brouillon
Le bouton en bas sert à enregistrer la page Elementor et publier les modifications.
En cliquant sur la flèche à gauche du Bouton Mettre à jour, des options apparaissent également.
Enregistrer comme brouillon la page :
Les modifications sont enregistrées mais ne sont pas publiées.
Enregistrer comme modèle :
Vous pouvez enregistrer votre page complète dans votre bibliothèque de modèle Elementor et importer l’ensemble de vos sections, colonnes et Widget sur n’importe quelle autre page Elementor depuis votre bibliothèque de modèle.
Fermeture et ouverture du volet latérale d’Elementor
Enfin il existe une petite flèche sur le bord droit du volet d’Elementor :
Cette flèche permet d’ouvrir et de fermer la barre latérale de paramètre d’Elementor.
Cela permet de prévisualiser en direct le rendu de la page Elementor :
Voilà pour la partie Barre latérale.
Voyons maintenant la fenêtre de rendu de la page :
Fenêtre de rendu de la page Elementor
Au centre de l’interface d’Elementor se trouve la fenêtre de rendu de la page.
Elementor Page Builder est un Wysiwyg pour WordPress.
C’est à dire, ce qu’on voit à l’écran est ce qu’on va avoir en ligne à peu de chose près.
Donc on utilise la fenêtre de rendu de la page Elementor pour construire ses pages et les publier sur son site WordPress.
Pour construire une page on peut soit
- Ajouter une nouvelle section a la page Elementor
- Ajouter une nouvelle colonne à une section Elementor
- Ajouter un Widget : titre, texte, image, etc dans une colonne Elementor
Ajouter une nouvelle section à une page Elementor
Il y a deux manières d’ajouter une nouvelle section à une page Elementor :
En dessous de la dernière section de la page, il y a une option avec un bouton +
En cliquant dessus on ajoute une section et Elementor nous demande combien de colonnes est ce qu’on souhaite avoir dans notre section.
La seconde manière d’ajouter une section c’est en cliquant sur l’icône + lorsque l’on passe la souris sur une section.
On a alors l’option d’ajouter une nouvelle section qui apparaît et la section va apparaître automatiquement au-dessus de la section sur laquelle on a cliqué.
Déplacer une section Elementor
Pour déplacer une section il suffit de cliquer sur les 6 points sur la section et de faire un glisser déposer n’importe où sur la page, au-dessus ou en dessous d’une autre section :
Supprimer une section Elementor
Enfin pour supprimer une section Elementor il suffit de cliquer sur la croix lorsque l’on passe la souris sur la section :
Ajouter une nouvelle colonne à une section Elementor
Les sections contiennent au moins une colonne.
Pour ajouter une nouvelle colonne à une section il suffit de faire clic droit sur une colonne de la section et de :
Dupliquer la colonne :
Idéal pour éviter de refaire tous le paramétrage de la nouvelle colonne
+ Ajouter une nouvelle colonne :
Pour avoir une colonne vide juste à côté
Déplacer une colonne Elementor
Pour déplacer une colonne Elementor, il suffit de cliquer sur l’icône de la colonne et de la glisser à l’endroit voulu :
Supprimer une colonne Elementor
Pour supprimer une colonne dans Elementor il suffit de faire clic droit > Effacer
Ajouter une section à interne avec Elementor
Les sections internes dans Elementor permettent d’afficher plusieurs colonnes à l’intérieur d’une même colonne.
Elles sont représentées par le Widget Section Interne disponible dans la barre latérale gauche :
Pour ajouter une section interne dans une colonne Elementor, il suffit de sélectionner le Widget et de le faire glisser à l’endroit voulu.
On a ainsi une section interne avec deux nouvelles colonnes de la section interne qui s’affiche à l’intérieur de la colonne principale :
Clic droit sur Elementor
Autre élément important de l’interface d’Elementor : le clic droit.
Elementor offre un menu rapide lorsqu’on fait un clic droit sur n’importe quel élément.
Le clic droit dans Elementor offre la possibilité de
- Copier
- Coller
- Coller le style : la mise en forme seulement
- Réinitialiser le style : le remet au style par défaut du template
- Navigateur : affiche le navigateur
- Effacer pour supprimer l’élément
Le navigateur Elementor
Elementor propose un navigateur dans la fenêtre d’édition de la page.
Il est possible d’afficher le navigateur n’importe ou sur l’interface d’Elementor.
Par défaut, il s’affiche généralement sur la droite mais vous pouvez le déplacer n’importe où sur l’interface.
Le navigateur est très pratique pour sélectionner des éléments sur une page ou pour déplacer des sections entières par exemple.
Pour afficher le navigateur il y a deux possibilités :
Dans la barre latérale gauche en cliquant sur l’icône navigateur :
Soit en faisant clic droit sur n’importe quel élément > Navigateur :
Le navigateur apparaît, il suffit alors de cliquer sur n’importe quel élément pour l’éditer ou le déplacer :
Donc apprenez à bien utiliser l’interface d’Elementor pour construire le plus efficacement possible les pages de votre site.
