0.3Découverte de l'éditeur (canvas, panneau, navigateur)
Pour créer une page avec Elementor, on l'ouvre dans l'ÉDITEUR : depuis une page/un article WordPress, on clique sur « Modifier avec Elementor ». L'éditeur Elementor s'ouvre alors, remplaçant l'éditeur WordPress classique par une interface VISUELLE en deux zones principales. (1) Le CANVAS (zone d'aperçu, à droite/au centre) : c'est votre page telle qu'elle apparaîtra — la zone de travail où l'on VOIT et construit le contenu EN DIRECT. On y dépose les éléments, on les sélectionne, on les déplace. (2) Le PANNEAU (à gauche) : le volet d'options. Il affiche soit la BIBLIOTHÈQUE DE WIDGETS (tous les éléments qu'on peut ajouter, à faire glisser vers le canvas), soit les RÉGLAGES de l'élément SÉLECTIONNÉ (ses options de contenu, de style, avancées). Le principe : on GLISSE un widget du panneau vers le canvas, on le SÉLECTIONNE, et on le CONFIGURE via le panneau — en voyant le résultat en direct dans le canvas. C'est l'essence de l'édition visuelle d'Elementor.
Les autres éléments de l'interface à connaître. (1) L'icône de la BIBLIOTHÈQUE de modèles (pour insérer des blocs/pages prédéfinis). (2) La navigation par structure (Navigator/Structure) : une vue arborescente de tous les éléments de la page (utile pour se repérer et sélectionner dans une page complexe). (3) L'APERÇU RESPONSIVE : basculer entre les vues bureau, tablette et mobile pour voir et adapter l'affichage (niveau 1-5). (4) Les commandes en bas du panneau : PUBLIER/METTRE À JOUR (enregistrer et publier), l'historique (annuler/refaire, revenir à une version), les réglages de la page, l'aperçu. (5) Les RÉGLAGES DU SITE (Site Settings) : accessibles depuis le menu (hamburger) en haut du panneau, ils gèrent les couleurs et polices GLOBALES, l'identité du site, etc. (niveau 2-3). Points importants. (1) On ouvre une page avec « Modifier avec Elementor » : l'éditeur remplace l'éditeur WordPress par une interface VISUELLE. (2) Deux zones : le CANVAS (aperçu en direct — la page qu'on construit) et le PANNEAU (widgets à glisser / réglages de l'élément sélectionné). (3) Le flux de base : GLISSER un widget → le SÉLECTIONNER → le CONFIGURER dans le panneau, en voyant le résultat en direct. (4) Outils utiles : bibliothèque de modèles, navigation par structure, aperçu RESPONSIVE (bureau/tablette/mobile), publier/mettre à jour, historique (annuler), réglages de page et du site. (5) L'édition est WYSIWYG (ce qu'on voit est ce qu'on obtient). Maîtriser l'éditeur — canvas, panneau, le flux glisser/sélectionner/configurer, et les outils clés (responsive, historique, publier) — est la base de tout le travail dans Elementor. Avec cette interface en main, on aborde la STRUCTURE d'une page (conteneurs et widgets).
Vocabulaire de la section
- Modifier avec Elementor
- Le bouton (depuis une page/un article WordPress) qui ouvre l'éditeur visuel d'Elementor, remplaçant l'éditeur WordPress classique.
- Canvas (aperçu)
- La zone de travail où l'on VOIT et construit la page EN DIRECT (telle qu'elle apparaîtra) : on y dépose, sélectionne et déplace les éléments.
- Panneau
- Le volet (à gauche) qui affiche soit la BIBLIOTHÈQUE de widgets (à glisser vers le canvas), soit les RÉGLAGES de l'élément sélectionné (contenu, style, avancé).
- Flux de base
- GLISSER un widget du panneau vers le canvas → le SÉLECTIONNER → le CONFIGURER via le panneau, en voyant le résultat en direct (édition WYSIWYG).
- Outils de l'éditeur
- Bibliothèque de modèles, navigation par structure (Navigator), aperçu RESPONSIVE (bureau/tablette/mobile), Publier/Mettre à jour, historique (annuler/refaire), réglages de page et du site (Site Settings).
À quoi servent le CANVAS et le PANNEAU dans l'éditeur Elementor ?
En pratique — Découvrir l'éditeur Elementor
- Ouvrez une page avec « Modifier avec Elementor » : repérez les deux zones — le CANVAS (aperçu en direct) et le PANNEAU (widgets / réglages).
- Appliquez le flux de base : GLISSEZ un widget (ex. Titre) du panneau vers le canvas, SÉLECTIONNEZ-le, et CONFIGUREZ-le dans le panneau — observez le résultat en direct.
- Explorez les outils : bibliothèque de modèles, navigation par structure, aperçu RESPONSIVE (bureau/tablette/mobile), historique (annuler/refaire).
- Repérez PUBLIER/METTRE À JOUR (enregistrer) et les réglages de page et du site (Site Settings, via le menu).
Points clés à retenir
- On ouvre une page avec « MODIFIER AVEC ELEMENTOR » : l'éditeur remplace l'éditeur WordPress par une interface VISUELLE en deux zones.
- Le CANVAS (aperçu) = la page qu'on construit EN DIRECT (voir/déposer/sélectionner/déplacer). Le PANNEAU (à gauche) = la BIBLIOTHÈQUE de widgets (à glisser) OU les RÉGLAGES de l'élément sélectionné (contenu, style, avancé).
- FLUX DE BASE : GLISSER un widget → le SÉLECTIONNER → le CONFIGURER dans le panneau, en voyant le résultat en direct (édition WYSIWYG — ce qu'on voit est ce qu'on obtient).
- Outils clés : bibliothèque de MODÈLES, navigation par STRUCTURE (Navigator), aperçu RESPONSIVE (bureau/tablette/mobile), PUBLIER/mettre à jour, HISTORIQUE (annuler/refaire), réglages de page et du SITE (Site Settings).
Questions fréquentes
Comment se repérer et travailler efficacement dans l'éditeur Elementor ?
Travailler efficacement dans Elementor repose sur la compréhension des deux zones (canvas et panneau), la maîtrise du flux glisser/sélectionner/configurer, et l'usage des outils clés (navigation par structure, responsive, historique). Comprendre les deux zones : (1) Le CANVAS (aperçu, la grande zone) est votre PAGE en direct : vous y voyez le résultat, vous y déposez et manipulez les éléments. (2) Le PANNEAU (à gauche) est votre boîte à outils : il affiche soit la BIBLIOTHÈQUE de widgets (à glisser vers le canvas), soit les RÉGLAGES de l'élément SÉLECTIONNÉ. (3) Le va-et-vient entre les deux est le cœur du travail : on ajoute depuis le panneau, on voit dans le canvas, on règle dans le panneau. Le flux de base (à automatiser) : (1) GLISSER un widget depuis le panneau vers l'endroit voulu du canvas. (2) Le SÉLECTIONNER (cliquer dessus) — le panneau affiche alors ses réglages. (3) Le CONFIGURER via les onglets Contenu/Style/Avancé (niveau 1-3), en voyant le résultat EN DIRECT dans le canvas. Ce cycle « glisser → sélectionner → configurer » se répète pour chaque élément. Les outils pour se repérer et gagner du temps : (1) La NAVIGATION PAR STRUCTURE (Navigator). Une vue ARBORESCENTE de tous les éléments de la page (conteneurs, widgets imbriqués). Indispensable dès qu'une page se complexifie : on VOIT la structure, on SÉLECTIONNE précisément un élément (même caché ou imbriqué), on RÉORGANISE (glisser dans l'arbre). Bien plus fiable que de cliquer à l'aveugle dans le canvas. (2) L'APERÇU RESPONSIVE. Basculer entre bureau, tablette et mobile pour VOIR et ADAPTER l'affichage sur chaque taille d'écran (niveau 1-5). Essentiel : un site doit être bon sur mobile. (3) L'HISTORIQUE (annuler/refaire, versions). Annuler une action (raccourci Ctrl+Z), refaire, ou revenir à une version antérieure. Permet d'expérimenter sans crainte (on peut toujours revenir en arrière). (4) La bibliothèque de MODÈLES. Insérer des blocs/pages prédéfinis pour partir d'une base plutôt que de tout construire (niveau 2-4). (5) Le COPIER-COLLER de styles/éléments (clic droit sur un élément) : dupliquer un élément, copier sa mise en forme vers un autre — gain de temps et cohérence. (6) Les réglages de PAGE et de SITE. Réglages de la page (mise en page, en cours) et Site Settings (couleurs/polices globales — niveau 2-3). Les bonnes pratiques d'efficacité : (1) Utilisez la NAVIGATION PAR STRUCTURE pour vous repérer et sélectionner dans les pages complexes (évite de chercher à l'aveugle). (2) Vérifiez le RESPONSIVE régulièrement (pas seulement à la fin). (3) Servez-vous de l'HISTORIQUE pour expérimenter sans risque. (4) COPIEZ-COLLEZ les éléments et les styles pour aller vite et rester cohérent. (5) PUBLIEZ/enregistrez régulièrement (ne pas perdre son travail). (6) Nommez/organisez vos éléments (surtout conteneurs) pour vous y retrouver. (7) Apprenez quelques RACCOURCIS (annuler, sauvegarder, navigateur). En résumé : travaillez efficacement dans Elementor en maîtrisant les deux zones (CANVAS = la page en direct, PANNEAU = widgets/réglages) et le flux « GLISSER → SÉLECTIONNER → CONFIGURER » (en voyant le résultat en direct). Servez-vous des outils clés : la NAVIGATION PAR STRUCTURE (pour se repérer et sélectionner précisément dans les pages complexes), l'APERÇU RESPONSIVE (adapter chaque taille d'écran), l'HISTORIQUE (annuler/refaire, expérimenter sans risque), la bibliothèque de MODÈLES (partir d'une base) et le COPIER-COLLER de styles (rapidité, cohérence). Vérifiez le responsive au fil de l'eau, publiez régulièrement, et apprenez quelques raccourcis. L'édition visuelle en direct rend le travail intuitif ; c'est en automatisant le flux de base et en exploitant les outils de navigation et d'historique qu'on gagne en efficacité et en confort.
À quoi sert la navigation par structure (Navigator) dans Elementor ?
La navigation par structure (Navigator) offre une vue ARBORESCENTE de tous les éléments d'une page, indispensable pour se repérer, sélectionner précisément et réorganiser — surtout quand une page devient complexe. Le problème qu'elle résout : (1) Une page Elementor est faite d'éléments IMBRIQUÉS : des conteneurs qui contiennent d'autres conteneurs et des widgets. Dans le canvas (l'aperçu), cliquer sur le bon élément peut être difficile — on sélectionne parfois le widget alors qu'on voulait son conteneur parent, ou on peine à atteindre un élément caché, superposé, ou vide. (2) Plus la page est complexe (nombreux conteneurs imbriqués, superpositions, éléments masqués), plus il est laborieux de naviguer à l'aveugle dans le canvas. Ce qu'offre le Navigator : (1) Une vue ARBORESCENTE (comme un plan) de la page : tous les éléments (conteneurs et widgets) affichés dans leur hiérarchie d'imbrication (parent → enfants). On VOIT d'un coup d'œil la STRUCTURE de la page. (2) Une SÉLECTION précise : cliquer sur un élément dans l'arbre le sélectionne dans le canvas (et affiche ses réglages), même s'il est imbriqué, superposé, caché ou vide. On atteint exactement l'élément voulu. (3) Une RÉORGANISATION facile : on peut GLISSER les éléments dans l'arbre pour les déplacer, réordonner, changer leur imbrication — plus fiable que de les traîner dans le canvas. (4) Le MASQUAGE/affichage et le repérage : on voit quels éléments existent, on peut en masquer temporairement pour travailler. (5) On peut NOMMER les éléments (surtout les conteneurs) pour s'y retrouver (« Section héros », « Colonne texte »…). À quoi ça sert concrètement : (1) SE REPÉRER dans une page complexe (comprendre sa structure d'imbrication d'un coup d'œil). (2) SÉLECTIONNER précisément un élément difficile à atteindre dans le canvas (un conteneur parent, un élément caché derrière un autre, un conteneur vide). (3) RÉORGANISER la structure (déplacer, réordonner, réimbriquer). (4) VÉRIFIER l'organisation (repérer un empilement inutile, une structure à simplifier — utile pour la performance, niveau 5-2). (5) GÉRER les éléments masqués/conditionnels. Quand l'utiliser : (1) Dès qu'une page a plusieurs niveaux de conteneurs imbriqués. (2) Quand on peine à sélectionner un élément dans le canvas. (3) Pour réorganiser proprement la structure. (4) Pour vérifier/nettoyer l'imbrication (éviter les conteneurs superflus). Les bonnes pratiques : (1) OUVREZ le Navigator sur les pages complexes (il se détache/s'ancre). (2) NOMMEZ vos conteneurs clés pour vous y retrouver. (3) Utilisez-le pour SÉLECTIONNER (plus fiable que le canvas sur les éléments imbriqués). (4) Servez-vous-en pour SIMPLIFIER la structure (repérer et supprimer les conteneurs inutiles). En résumé : la navigation par structure (Navigator) sert à afficher la page sous forme d'ARBRE HIÉRARCHIQUE de tous ses éléments (conteneurs et widgets imbriqués), ce qui permet de SE REPÉRER dans la structure, de SÉLECTIONNER précisément n'importe quel élément (même imbriqué, superposé, caché ou vide — là où le canvas est peu pratique), et de RÉORGANISER facilement (glisser dans l'arbre pour déplacer/réordonner/réimbriquer). Elle est indispensable sur les pages complexes (nombreux conteneurs imbriqués) et utile pour vérifier et simplifier la structure (éviter les empilements inutiles, un enjeu de performance). Nommez vos conteneurs pour vous y retrouver, et utilisez le Navigator pour sélectionner de façon fiable plutôt que de cliquer à l'aveugle dans le canvas. C'est un outil de repérage et d'organisation essentiel pour travailler proprement et efficacement dans Elementor.