05. Visite guidée de l’éditeur

Avant de poser le moindre élément, il faut savoir où l’on est. Ce chapitre décrit l’écran d’Elementor tel qu’il se présente en 2026 : trois zones, une barre supérieure, un panneau et une toile. Tout le reste du support renvoie à ce vocabulaire.

5.1 — Ouvrir une page dans Elementor

Elementor ne remplace pas l’administration de WordPress : il s’y ajoute. On crée toujours la page dans WordPress, puis on l’ouvre dans Elementor pour la dessiner. Deux chemins mènent à l’éditeur.

1. Depuis la liste des pages. Dans l’administration, ouvrez Pages › Toutes les pages. Survolez le titre de la page : un lien Modifier avec Elementor apparaît sous le titre. Cliquez.
2. Depuis l’éditeur de WordPress. Si la page est ouverte dans l’éditeur de blocs (Gutenberg), un grand bouton Modifier avec Elementor est affiché en haut. Il fait la même chose.
3. Depuis Elementor lui-même. Une fois dans l’éditeur, le raccourci Ctrl+E (Cmd+E sur Mac) ouvre le Finder, une barre de recherche qui permet de sauter vers n’importe quelle page, article ou modèle sans repasser par l’administration.

5.2 — Les trois zones de l’écran

L’écran d’Elementor est découpé en trois zones fixes. Le Centre d’aide Elementor les nomme Top Bar, Panel et Canvas ; nous dirons la barre supérieure, le panneau et la toile.

La barre supérieure

C’est la bande sombre qui court tout en haut. Elle rassemble les commandes qui concernent la page entière ou le site entier, jamais un élément précis. De gauche à droite, on y trouve : le logo Elementor, qui ouvre un menu (Réglages du site, Constructeur de thème, Notes, Préférences de compte, Raccourcis clavier, Centre d’aide, Sortir vers WordPress) ; le bouton + Ajouter un élément, qui affiche ou masque le panneau des éléments ; les Réglages de page (engrenage) ; l’Historique ; le nom de la page en cours, qui donne aussi accès aux cinq dernières pages modifiées ; les trois icônes du mode responsive (ordinateur, tablette, mobile) ; le Finder ; la Structure ; l’Aperçu (œil) ; et enfin le bouton Publier, dont la petite flèche propose Enregistrer le brouillon et Enregistrer comme modèle. Depuis la version 4.1, une icône Système de conception (Design System) donne accès aux Variables et aux Classes, dont nous parlerons au chapitre 18.

Le panneau

C’est la colonne de gauche. Elle a deux visages, et c’est la première chose qui déroute les débutants. Quand aucun élément n’est sélectionné sur la toile, le panneau montre la liste des éléments disponibles : en tête, les éléments atomiques (Bloc Div, Flexbox, Grille, Titre, Paragraphe, Bouton, Image, SVG, Vidéo, Onglets…), puis les widgets classiques rangés par catégories (Basique, Général, Site, Pro…). Dès que vous cliquez sur un élément de la toile, le panneau se transforme en fiche de réglages de cet élément : pour un élément atomique, deux onglets, Général et Style (plus Interactions) ; pour un widget classique, trois onglets, Contenu, Style et Avancé. Pour retrouver la liste des éléments, cliquez sur le + de la barre supérieure ou sur la petite grille en haut du panneau.

La toile

C’est la grande zone claire à droite, que le Centre d’aide appelle aussi Content Area. Elle affiche la page telle que le visiteur la verra, à une différence près : ici, tout est cliquable pour être modifié. Quand vous survolez un élément, un liseré coloré et une petite poignée apparaissent ; un clic sélectionne l’élément et ouvre ses réglages dans le panneau ; un clic droit ouvre un menu contextuel (Modifier, Dupliquer, Copier, Coller, Coller le style, Réinitialiser le style, Structure, Enregistrer comme modèle, Supprimer). Si l’en-tête ou le pied de page du site sont construits avec le Constructeur de thème (Pro), ils s’affichent aussi sur la toile ; cliquer dessus bascule vers leur modèle.

5.3 — Le mouvement de base : choisir, déposer, régler

Toute l’utilisation d’Elementor tient dans un geste en trois temps. On choisit un élément dans le panneau, on le dépose sur la toile en le faisant glisser (on dit « glisser-déposer »), puis on le règle dans le panneau, qui affiche désormais ses options. Ce geste est le même pour un titre, une image, un formulaire ou une grille de trois colonnes. Les chapitres suivants ne feront que le répéter avec des éléments différents.

1. Choisir. Dans le panneau, repérez l’élément Titre (catégorie Éléments atomiques). Cliquez dessus et maintenez le bouton de la souris enfoncé.
2. Déposer. Sans relâcher, déplacez la souris vers la toile. Une ligne bleue indique l’endroit où l’élément va se poser. Relâchez. Sur une page vide, Elementor crée automatiquement un conteneur autour de l’élément.
3. Régler. Le panneau affiche maintenant les réglages du Titre : le texte, la balise (H1 à H6), le lien, puis dans l’onglet Style la typographie, la couleur, l’espacement. Modifiez le texte : la toile se met à jour instantanément.
4. Enregistrer. Rien n’est visible par les visiteurs tant que vous n’avez pas cliqué sur Publier (ou Mettre à jour si la page était déjà publiée). Le raccourci Ctrl+S enregistre sans quitter l’éditeur.

5.4 — Les outils qui font gagner du temps

Quatre fenêtres secondaires méritent d’être connues dès le premier jour, parce qu’elles évitent les erreurs les plus fréquentes.

La Structure

Ouverte par l’icône de la barre supérieure, par un clic droit sur la toile ou par Ctrl+I, la Structure (anciennement Navigator) montre la page sous forme d’arborescence : chaque conteneur, chaque élément, avec leur imbrication. C’est là que l’on comprend enfin « où » se trouve un élément récalcitrant, que l’on renomme un conteneur par double-clic (« Bandeau d’accueil » est plus parlant que « Flexbox »), et que l’on réordonne des blocs par glisser-déposer sans risquer de les déposer au mauvais endroit sur la toile. La Structure peut flotter ou être ancrée sur le côté.

L’Historique

L’icône Historique ouvre deux onglets. Actions liste tout ce que vous avez fait depuis l’ouverture de la page ; cliquer sur une ligne ramène la page à cet état. Révisions liste les versions enregistrées : chaque clic sur Publier ou Mettre à jour en crée une, et l’on peut revenir à la version d’hier en deux clics. Ctrl+Z annule, Ctrl+Shift+Z rétablit.

Les Réglages de page

L’engrenage de la barre supérieure ouvre les réglages de la page elle-même, et non d’un élément : titre, statut (brouillon, publié), image mise en avant, et surtout la mise en page (Page Layout). Trois valeurs possibles : Par défaut (la page garde l’en-tête et le pied de page du thème), Elementor pleine largeur (idem, mais le contenu occupe toute la largeur) et Canevas Elementor (page entièrement vierge, sans en-tête ni pied de page — utile pour une page d’atterrissage ou une page « en construction »).

Le mode responsive

Les trois icônes ordinateur / tablette / mobile de la barre supérieure, ou le raccourci Ctrl+Shift+M, rétrécissent la toile à la taille d’un écran de tablette ou de téléphone. Ce n’est pas seulement un aperçu : les réglages que vous faites dans une de ces vues ne s’appliquent qu’à elle. Le chapitre 12 y est entièrement consacré.

5.5 — Ce qui ne se passe pas dans l’éditeur

Pour ne pas chercher au mauvais endroit, retenez ce qu’Elementor ne gère pas depuis son écran d’édition. Les menus de navigation se composent dans Apparence › Menus de WordPress (Elementor ne fait que les afficher, via le widget Menu WordPress en Pro ou le Customizer du thème Hello en gratuit). Les utilisateurs et leurs droits, les extensions, les réglages de lecture (quelle page sert d’accueil) et les permaliens (la forme des adresses) restent dans l’administration WordPress. Les images sont stockées dans la Médiathèque de WordPress : Elementor y puise, mais c’est WordPress qui les conserve. Enfin, les réglages généraux d’Elementor (types de contenu autorisés, méthode de chargement du CSS, activation de l’Éditeur atomique) se trouvent dans Elementor › Éditeur › Réglages, pas dans l’éditeur.