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
Interface d'Elementor Page Builder

Panneau latéral des paramètres d’Elementor

Il s’agit du panneau latérale de l’interface d’Elementor :

barre latérale parametres 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.

widgets elementor

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 :

icone hamburger menu elementor

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.

parametres de navigation elementor interface

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 :

icone hamburger menu elementor

Puis sur le bouton Revenir à l’éditeur WordPress.

bouton revenir a l'editeur wordpress elementor

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 :

barre des parametres acces rapides 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.

icone réglages elementor

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.

Navigateur Elementor

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 :

Historique Elementor

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 :

mode responsive 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.

prévisualiser la page dans Elementor

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.
enregistrer page elementor brouillon et 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 :

fermeture volet latérale paramètres 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 :

previsualiser 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.

fenetre de rendu page elementor wysiwyg

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 +

ajouter nouvelle section elementor

En cliquant dessus on ajoute une section et Elementor nous demande combien de colonnes est ce qu’on souhaite avoir dans notre section.

nouvelle section nombre de colonnes

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.

ajouter une nouvelle section au dessus elementor

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 :

déplacer une section elementor

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 :

supprimer une section elementor

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é

ajouter une nouvelle colonne elementor

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 :

déplacer une colonne elementor

Supprimer une colonne Elementor

Pour supprimer une colonne dans Elementor il suffit de faire clic droit > Effacer

supprimer une colonne elementor

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 :

section interne elementor

Pour ajouter une section interne dans une colonne Elementor, il suffit de sélectionner le Widget et de le faire glisser à l’endroit voulu.

elementor section interne

On a ainsi une section interne avec deux nouvelles colonnes de la section interne qui s’affiche à l’intérieur de la colonne principale :

elementor section interne

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
options clic droit elementor

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.

navigateur elementor

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 :

bouton navigateur afficher elementor

Soit en faisant clic droit sur n’importe quel élément > Navigateur :

clic droit afficher le navigateur elementor

Le navigateur apparaît, il suffit alors de cliquer sur n’importe quel élément pour l’éditer ou le déplacer :

déplacer element dans le navigateur elementor

Donc apprenez à bien utiliser l’interface d’Elementor pour construire le plus efficacement possible les pages de votre site.

Partagez le hub Elementor :