0.3Découverte de l'éditeur
L'essentiel en 30 secondes
- Canvas = la zone d'aperçu où l'on voit et construit la page en direct.
- Panneau (à gauche) = soit la bibliothèque de widgets (à glisser), soit les réglages de l'élément sélectionné.
- Flux de base : glisser un widget → le sélectionner → le configurer (dans le panneau).
Mini-cas filé — Nadia ouvre l'éditeur
Nadia clique « Modifier avec Elementor » sur la page d'accueil du menuisier. L'écran se divise : à gauche un panneau, au centre la page. Au début elle cherche où sont les choses, clique partout. Cette section lui donne la carte : où déposer, où régler, comment retrouver un élément perdu dans une mise en page chargée.
Suite du cas 0.2 — Nadia passe de l'installation à la construction.
1. La carte de l'éditeur
L'éditeur se compose de deux zones. Le canvas (aperçu) occupe le centre : c'est la page telle qu'elle s'affichera, qu'on construit en direct. Le panneau (à gauche) a deux visages : soit la bibliothèque de widgets qu'on glisse vers le canvas, soit les réglages de l'élément actuellement sélectionné. On passe de l'un à l'autre selon qu'on ajoute un élément ou qu'on le configure.
En bas du panneau, des outils : bibliothèque de modèles, Navigator (navigation par structure), aperçu responsive, historique, enregistrement/publication. Le Navigator est précieux quand la page devient complexe : il liste tous les conteneurs et widgets en arbre.
2. Le flux de base
Le geste fondamental se répète pour tout : GLISSER un widget du panneau vers le canvas → le SÉLECTIONNER (clic) → le CONFIGURER dans le panneau. Nadia glisse un widget Titre, clique dessus, et le panneau affiche aussitôt ses réglages (contenu, style, avancé).
Quand un élément est « perdu » dans une mise en page chargée, le Navigator permet de le retrouver et de le sélectionner par son nom dans l'arbre, sans chasser au clic. C'est l'un des premiers réflexes de confort à prendre.
🔎 Exemple concret — Poser un premier titre (cas Nadia)
1. Panneau → chercher « Titre » → glisser sur le canvas.
2. Clic sur le titre → le panneau montre ses réglages.
3. Onglet Contenu : saisir « Menuiserie Benali ».
→ Besoin de retrouver un bouton perdu plus bas ? Ouvrir le Navigator.Résultat : on sait ajouter et régler n'importe quel élément.
Leçon : le Navigator fait gagner un temps fou sur les pages chargées.
Vocabulaire de la section
- Modifier avec Elementor
- Le bouton (depuis une page/un article) qui ouvre l'éditeur visuel.
Exemple simple : Nadia clique « Modifier avec Elementor » sur la page d'accueil.
Ce que ce n'est pas : rester dans l'éditeur WordPress classique (Gutenberg).
Réflexe : pour concevoir visuellement, on ouvre l'éditeur Elementor.
- Canvas (aperçu)
- La zone centrale où l'on voit et construit la page en direct, telle qu'elle s'affichera.
Exemple simple : Nadia voit le titre s'afficher immédiatement après l'avoir réglé.
Ce que ce n'est pas : imaginer le rendu sans le voir, comme en code.
Réflexe : ce qui est au centre et ressemble à la page = le canvas.
- Panneau
- Le volet de gauche : bibliothèque de widgets à glisser, ou réglages de l'élément sélectionné.
Exemple simple : le panneau bascule des widgets aux réglages quand Nadia sélectionne un titre.
Ce que ce n'est pas : croire que le panneau est un menu figé.
Réflexe : j'ajoute → bibliothèque ; je sélectionne → réglages.
- Navigator (structure)
- L'arbre des conteneurs et widgets de la page, pour naviguer et sélectionner par structure.
Exemple simple : Nadia retrouve un bouton enfoui en le cliquant dans le Navigator.
Ce que ce n'est pas : chasser l'élément au clic dans une page très chargée.
Réflexe : élément introuvable au clic → ouvrir le Navigator.
- Flux de base
- Glisser un widget → le sélectionner → le configurer : le geste répété pour tout élément.
Exemple simple : Nadia applique le même flux pour un titre, une image, un bouton.
Ce que ce n'est pas : chercher une méthode différente pour chaque type de widget.
Réflexe : toujours : glisser, sélectionner, configurer.
En pratique — Prendre ses repères dans l'éditeur
- Ouvrez une page avec « Modifier avec Elementor ».
- Glissez un widget Titre sur le canvas, puis sélectionnez-le.
- Repérez les trois onglets de réglages (Contenu, Style, Avancé).
- Ouvrez le Navigator et repérez la structure de la page (conteneurs, widgets).
Script prêt à dire — montrer l'éditeur au client (30 s)
« Voici l'éditeur : au centre, votre page en vrai ; à gauche, soit la liste des éléments à ajouter, soit les réglages de l'élément sur lequel j'ai cliqué. Je construis en direct, vous voyez le résultat tout de suite. Rien n'est publié tant que je ne clique pas sur Publier. »
Rassurer : le brouillon n'est pas en ligne tant qu'on n'a pas publié.
Modèle copier-coller — repères de l'éditeur
OUVRIR : bouton « Modifier avec Elementor »
CANVAS : zone centrale (aperçu en direct)
PANNEAU GAUCHE : bibliothèque (ajouter) OU réglages (configurer)
FLUX : glisser → sélectionner → configurer
RETROUVER UN ÉLÉMENT : Navigator (arbre de structure)
PUBLIER : bouton vert en bas du panneauPage simple
Peu d'éléments : le clic direct suffit, le Navigator est optionnel.
Page chargée
Beaucoup de conteneurs imbriqués : le Navigator devient indispensable pour sélectionner précisément.
Écran étroit
Replier le panneau pour voir le canvas en grand, puis le rouvrir pour régler.
Travail à plusieurs
Nommer les conteneurs dans le Navigator aide l'équipe à s'y retrouver.
✓ Bonnes pratiques
- Mémoriser le flux glisser → sélectionner → configurer.
- Utiliser le Navigator sur les pages chargées.
- Ne publier qu'une fois satisfait (le brouillon n'est pas en ligne).
✗ Pièges fréquents
- Chasser un élément au clic au lieu d'ouvrir le Navigator.
- Oublier que le panneau change de rôle selon le contexte.
- Croire que les modifications sont en ligne avant publication.
Points clés à retenir
- Canvas = aperçu en direct ; panneau = bibliothèque ou réglages.
- Flux de base : glisser → sélectionner → configurer.
- Navigator = arbre de structure pour retrouver un élément.
- Rien n'est publié tant qu'on n'a pas cliqué sur Publier.
Défi 48h — appliquez demain
Ouvrez une page dans Elementor, ajoutez un titre, une image et un bouton via le flux glisser → sélectionner → configurer, puis retrouvez chacun dans le Navigator. 15 minutes, sans publier.
- Je sais ouvrir l'éditeur et repérer canvas et panneau.
- J'applique le flux glisser → sélectionner → configurer.
- Je retrouve un élément via le Navigator.
Questions fréquentes
Mes modifications sont-elles en ligne en direct ?
Non : vous travaillez sur un brouillon. Rien n'est publié tant que vous n'avez pas cliqué sur « Publier » (ou « Mettre à jour »).
Je ne retrouve plus un élément, que faire ?
Ouvrez le Navigator (icône de structure en bas du panneau) : il liste tous les conteneurs et widgets en arbre ; cliquez l'élément pour le sélectionner.
Puis-je annuler une action ?
Oui : l'historique (en bas du panneau) permet d'annuler/rétablir et de revenir à des états antérieurs de la page.
Dans une page d'accueil très chargée, Nadia ne retrouve plus le bouton « Demander un devis ». Quel est le bon réflexe ?