Elementor

Elementor : c'est quoi ?

Elementor est un constructeur de pages (page builder) : il remplace l'éditeur standard de WordPress par un éditeur 100 % visuel, en glisser-déposer, où ce que vous voyez est ce que les visiteurs verront.

WordPress gère le moteur (contenus, utilisateurs, réglages, chapitres 02 et 03) ; Elementor gère la mise en forme : la disposition des blocs, les couleurs, les polices, les espacements. C'est avec lui que votre prestataire a construit vos pages, et c'est dans son éditeur que vous ferez la plupart de vos modifications visuelles.

Elementor gratuit vs Elementor Pro

L'interface de l'éditeur

Pour ouvrir l'éditeur : Pages → survolez la page → "Modifier avec Elementor" (ou le bouton bleu du même nom en haut de l'éditeur WordPress classique).

L'éditeur Elementor s'organise en trois grandes zones :

1. Le panneau latéral (à gauche), la boîte à outils. Il affiche soit la liste des widgets à glisser-déposer, soit les réglages de l'élément sélectionné, répartis en trois onglets : Contenu (le quoi : texte, image, lien), Style (le comment : couleurs, typographie, bordures) et Avancé (marges, espacements, animations, visibilité responsive).
2. Le canvas (au centre), votre page, telle que les visiteurs la verront. Cliquez sur un élément pour le sélectionner et afficher ses réglages dans le panneau. Survolez : des poignées bleues apparaissent pour déplacer, dupliquer ou supprimer.
3. La barre inférieure du panneau : les commandes générales : réglages de la page, navigateur, historique, mode responsive, aperçu. Le bouton "Publier" (mettre en ligne) est en haut à droite de l'écran.

Le navigateur : la radiographie de la page

Une page Elementor peut empiler des dizaines d'éléments imbriqués. Le navigateur (icône en barre inférieure, ou raccourci Ctrl/Cmd + I) affiche l'arborescence complète de la page : chaque conteneur, chaque widget, dans l'ordre. C'est le moyen le plus fiable de sélectionner précisément un élément, bien plus sûr que de cliquer dans le canvas quand des blocs se superposent.

Les raccourcis qui sauvent

• Ctrl/Cmd + Z, annuler la dernière action (le plus important de tous).
• Ctrl/Cmd + S, enregistrer.
• Ctrl/Cmd + I, ouvrir/fermer le navigateur.
• Ctrl/Cmd + E, le "Finder" : recherche rapide pour sauter vers une autre page ou un réglage.
• Clic droit sur un élément, dupliquer, copier, coller le style, supprimer.

Conteneurs & Flexbox : la logique de mise en page

Tout dans Elementor repose sur une hiérarchie simple : la page contient des conteneurs, qui contiennent des widgets (ou d'autres conteneurs).

Un conteneur est une boîte invisible qui organise ce qu'elle contient grâce à la technologie Flexbox. Ses réglages clés (onglet "Mise en page" du conteneur) :

• Direction : les éléments s'empilent en colonne (verticalement) ou s'alignent en ligne (horizontalement).
• Justifier le contenu : la répartition dans le sens de la direction : début, centre, fin, espacé.
• Aligner les éléments : l'alignement perpendiculaire (ex. centrer verticalement des blocs en ligne).
• Espacement (gap) : l'espace entre les éléments, sans toucher aux marges de chacun.

Une rangée "3 services côte à côte" est donc typiquement : un conteneur en ligne, contenant 3 conteneurs en colonne (icône + titre + texte chacun). Pour comprendre n'importe quelle page : ouvrez le navigateur et dépliez l'arborescence.

Les widgets essentiels

Le widget est la brique de contenu : un titre, une image, un bouton… On le glisse depuis le panneau vers un conteneur du canvas.

Éditer une page en sécurité

Le réflexe pour toute modification (les gestes du quotidien, changer un texte, une image, sont détaillés pas à pas au chapitre 04) :

1. Ouvrez la page avec "Modifier avec Elementor".
2. Faites vos modifications : en cas de fausse manœuvre : Ctrl/Cmd + Z.
3. Prévisualisez : icône œil 👁 en barre inférieure : la page s'ouvre dans un nouvel onglet, telle qu'elle sera publiée.
4. Vérifiez le mobile : icônes d'appareils en barre inférieure (voir responsive).
5. Cliquez "Publier" (en haut à droite) : la modification est en ligne immédiatement.

L'historique : votre machine à remonter le temps

L'icône horloge en barre inférieure ouvre deux onglets :

• Actions : chaque geste de votre session en cours (déplacé, modifié, supprimé…). Cliquez sur une ligne pour revenir à cet état.
• Révisions : les versions enregistrées de la page (à chaque "Publier"). Pour restaurer la page telle qu'elle était hier ou la semaine dernière.

Site Settings : les réglages globaux

Comme vu au chapitre 05 : avec le thème Hello Elementor, ce n'est pas le thème qui pilote l'apparence, c'est ici. Réglages du site = la charte graphique centrale de votre site.

Pour y accéder : dans l'éditeur, cliquez le menu ☰ en haut à gauche du panneau → "Réglages du site" (Site Settings).

Theme Builder : header, footer & modèles Pro

Le header et le footer n'appartiennent à aucune page : ils sont construits une fois dans le Theme Builder et affichés partout. C'est pour ça qu'on ne peut pas les modifier en éditant une page.

Accès : Templates → Theme Builder (dans le menu latéral WordPress). Le tableau de bord montre chaque "partie" du site :

• Header : l'en-tête : logo, menu, bouton de contact.
• Footer : le pied de page : coordonnées, liens, mentions légales.
• Single Post : le modèle des articles de blog (la mise en page qu'ils partagent tous).
• Archive : le modèle des pages de liste (blog, catégories, résultats de recherche).
• Page 404 : la page "introuvable".
• Produits E-com, les modèles boutique (voir chapitre 08).

Chaque partie s'édite avec le même éditeur Elementor que les pages. La différence : à l'enregistrement, une condition d'affichage détermine où elle s'applique, "Tout le site", seulement certaines pages, toutes les archives d'une catégorie…

Templates & bibliothèque

Un template est un bloc réutilisable : une section, une page entière, enregistrée une fois et réinsérée à volonté.

• Enregistrer : clic droit sur la poignée d'un conteneur → "Enregistrer comme template" ; ou la flèche à côté de "Publier" pour enregistrer la page entière.
• Réutiliser : l'icône dossier 📁 dans un conteneur vide ouvre la bibliothèque : onglet "Mes templates" pour vos blocs, onglets Pages/Blocs pour les modèles prêts à l'emploi d'Elementor.
• Exemple concret : votre prestataire a probablement enregistré des sections types ("bandeau appel à l'action", "bloc témoignages") : insérez-les au lieu de reconstruire à la main, la cohérence graphique est garantie.

Les formulaires

Vos formulaires de contact et de devis reposent sur deux outils : le nouveau widget Formulaire atomique d'Elementor pour les cas courants, et l'extension Forminator pour les formulaires plus complexes. Dans les deux cas, un réflexe : tester après chaque modification.

Le widget « Formulaire atomique » (Elementor)

C'est le formulaire intégré à l'éditeur, arrivé avec l'Editor V4. Vous le modifiez comme n'importe quel élément : cliquez dessus dans la page, ses réglages s'ouvrent dans le panneau de gauche.

• Les champs : chaque champ a un type (texte, e-mail, téléphone, zone de texte, liste déroulante, case à cocher…), un libellé et une option « Requis ». Pour ajouter une question, dupliquez un champ existant et changez son libellé.
• L'envoi (le réglage vital) : dans les réglages du formulaire, l'adresse destinataire (le champ « À » de l'e-mail de notification) doit contenir votre adresse. C'est LE point à vérifier si vous ne recevez plus les demandes.
• Après l'envoi : le message de confirmation affiché au visiteur, ou une redirection vers une page « Merci » (pratique pour mesurer les conversions).

Forminator : pour les formulaires complexes

Dès qu'un formulaire dépasse le simple contact (plusieurs étapes, calcul de devis, logique conditionnelle « si… alors… », quiz, sondage, paiement), votre site utilise l'extension Forminator. Ses formulaires ne se gèrent pas dans Elementor, mais dans leur propre menu « Forminator » de l'administration ; on les insère ensuite dans une page.

• Où les trouver : menu Forminator dans la colonne de gauche de l'admin, avec la liste de vos formulaires.
• Le réglage à surveiller : là aussi, l'adresse de notification qui reçoit les demandes, dans Réglages du formulaire → E-mails / Notifications.
• Retrouver les demandes : Forminator garde une copie de chaque envoi dans Forminator → Soumissions. Utile en cas de doute sur un e-mail non reçu.

L'anti-spam et le RGPD (dans les deux cas)

• Anti-spam : un honeypot (champ invisible qui piège les robots) est activé par défaut ; si le spam persiste, on ajoute un reCAPTCHA (vérification Google). Forminator intègre nativement les deux.
• Case RGPD : une case d'acceptation « J'accepte que mes données soient utilisées pour me recontacter » est obligatoire (voir chapitre 10).

Les popups Pro

Fenêtres qui s'affichent par-dessus le site : inscription newsletter, annonce ponctuelle (fermeture exceptionnelle, promo), bandeau d'information.

Création : Templates → Popups. Un popup se construit comme une mini-page Elementor, puis se paramètre sur trois axes :

• Conditions : sur quelles pages il peut apparaître (tout le site, la page d'accueil…).
• Déclencheurs : quand : au chargement, après X secondes, à X % de défilement, à l'intention de sortie, au clic sur un bouton.
• Règles avancées : la fréquence : "ne plus montrer pendant X jours après fermeture", "maximum 3 affichages par visiteur"… Toujours en régler une : un popup qui revient à chaque page fait fuir.

Le responsive : votre site sur mobile

Plus de 60 % de vos visiteurs sont sur téléphone. Elementor permet d'ajuster chaque réglage par appareil : encore faut-il vérifier.

En barre inférieure du panneau, l'icône écran/mobile active le mode responsive : le canvas bascule entre Desktop (> 1024 px), Tablette (jusqu'à 1024 px) et Mobile (jusqu'à 767 px).

• Valeurs par appareil : dans le panneau, chaque réglage marqué d'une petite icône d'écran (taille de police, marges, colonnes, gap…) peut prendre une valeur différente par appareil. Une modification faite en vue mobile ne s'applique qu'au mobile.
• Empilement : un conteneur en ligne (3 blocs côte à côte) doit généralement passer en colonne sur mobile : réglage "Direction" en vue mobile.
• Masquer par appareil : onglet Avancé → Responsive : "Masquer sur mobile / tablette / ordinateur". Pratique pour une grande image décorative inutile sur mobile.

Performance & CSS personnalisé

Garder un site rapide

• Les images d'abord : 80 % du poids d'une page. Compressées et bien dimensionnées avant upload (voir chapitre 04), converties en WebP/AVIF par votre plugin d'optimisation (chapitre 06).
• Sobriété : chaque widget, chaque animation, chaque niveau d'imbrication de conteneurs ajoute du code. Une page sobre et claire bat une page surchargée, pour les visiteurs comme pour Google.
• Pas de vidéo en arrière-plan sur mobile : désactivez-la en vue mobile (image de remplacement).
• Le premier réflexe si l'affichage déraille (styles perdus, mise en page cassée après une mise à jour) : Elementor → Outils → "Régénérer les fichiers CSS et données", puis videz le cache. Détail au chapitre 09.

Le CSS personnalisé Pro

Pour les ajustements que les réglages ne couvrent pas, Elementor Pro accepte du code CSS : sur un élément (onglet Avancé → CSS personnalisé, où selector désigne l'élément courant) ou sur tout le site (Site Settings → CSS personnalisé).

L'Editor V4 : votre éditeur en détail

Votre site utilise l'Editor V4 d'Elementor, la génération d'éditeur déployée depuis 2026. Voici ce qui le caractérise.

Les points clés

• Édition directe dans la page : cliquez sur un texte et tapez, plus besoin de passer par le panneau pour le contenu courant. Le bouton "Publier" est en haut à droite de l'écran.
• Éléments "atomiques" : une nouvelle génération de widgets unifiés (Div Block, Heading, Paragraph, Image, Button, SVG…), plus légers et plus rapides, avec un panneau de style repensé.
• Classes : le grand changement : un style se définit une fois dans une classe ("carte-service", "bouton-principal") et s'applique à autant d'éléments que voulu. Modifier la classe = tous les éléments suivent. Fini le copier-coller de style.
• Variables : couleurs, tailles et espacements nommés ("bleu-marque", "espace-section"), réutilisables partout, l'évolution des couleurs globales.
• Components : des blocs réutilisables synchronisés : modifiez le composant, toutes ses copies dans le site se mettent à jour (contrairement aux templates classiques, qui sont des copies indépendantes).

Erreurs fréquentes & réflexes

• "Mes modifications n'apparaissent pas sur le site" : c'est le cache. Videz le cache du site (bouton du plugin de cache dans la barre d'admin) puis rechargez la page en forçant : Ctrl + F5 (PC) / Cmd + Maj + R (Mac). Toujours rien : Elementor → Outils → Régénérer les CSS.
• "Je ne peux pas modifier le menu ou le footer depuis ma page" : normal : ils vivent dans le Theme Builder.
• "J'ai supprimé un bloc par erreur" : Ctrl/Cmd + Z immédiatement. Trop tard ? Historique → Actions. Déjà enregistré ? Historique → Révisions.
• "Sur mobile, le texte colle aux bords" : passez en vue mobile et donnez un padding gauche/droite au conteneur (souvent 16-20 px).
• "Un widget affiche 'Ce widget nécessite Elementor Pro'" : la licence Pro est expirée ou désactivée. Contactez votre prestataire sans toucher au widget.
• "La page est cassée depuis une mise à jour" : procédure complète au chapitre 09.
• Coller du texte depuis Word : collez toujours sans mise en forme (Ctrl/Cmd + Maj + V) : le collage normal embarque des styles parasites qui dérèglent la typographie.