Chapitre 07 · Le constructeur visuel

Elementor

Le constructeur qui donne son apparence à votre site : l'interface, les conteneurs, les widgets, les réglages globaux, le Theme Builder, les formulaires, jusqu'aux fonctionnalités avancées de l'Editor V4 (classes, variables, composants). Le chapitre le plus complet du guide.

~45 min de lecture Niveau avancé

Objectifs de ce chapitre

Ce que vous saurez faire à la fin

Vous repérer dans l'éditeur Elementor : panneau, canvas, navigateur
Comprendre la logique conteneurs → widgets et modifier une mise en page
Utiliser les couleurs et polices globales au lieu de valeurs "en dur"
Savoir où se modifient le header, le footer et les modèles de pages
Modifier un formulaire sans casser la réception des messages
Vérifier et ajuster l'affichage mobile de vos pages
Tirer parti de l'Editor V4 : édition directe, classes, variables et composants

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

	Elementor (gratuit)	Elementor Pro (licence annuelle)
Éditeur visuel	✅ Complet	✅ Complet
Widgets	~40 widgets de base (titre, texte, image, bouton…)	+ 80 widgets avancés (formulaire, posts, slides, menu…)
Theme Builder (header, footer, modèles)	❌	✅
Formulaires	❌	✅
Popups	❌	✅
WooCommerce Builder (pages boutique)	❌	✅
CSS personnalisé	❌	✅

Votre site utilise très probablement Elementor Pro

Les sites BrandID sont construits avec la version Pro : header, footer et formulaires en dépendent. La licence Pro se renouvelle chaque année : si elle expire, le site continue de fonctionner mais ne reçoit plus les mises à jour de sécurité, et certains widgets peuvent se bloquer. C'est typiquement couvert par votre contrat de maintenance (voir chapitre 06).

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 :

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).
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.
La barre du haut : les commandes générales. À gauche, le menu de l'éditeur (le logo Elementor), le bouton + qui ajoute un élément, les réglages de la page et l'historique. Au centre, les trois appareils (ordinateur, tablette, mobile). À droite, la Structure, l'aperçu (icône œil), puis le bouton "Publier" (mettre en ligne) tout au bout.

L'éditeur Elementor ouvert sur une page : panneau des éléments à gauche, aperçu de la page au centre, barre de commandes en haut. — **Fig. EL-01** : Les zones de l'éditeur. ① le panneau, qui affiche tantôt les éléments à poser, tantôt les réglages de l'élément sélectionné ; ② l'aperçu, la page telle qu'elle sera ; ③ la barre du haut et ses commandes, "Publier" tout au bout ; ④ le logo Elementor, qui ouvre le menu de l'éditeur.

Fig. EL-V01 : La visite guidée de l'éditeur. Les deux zones, puis la barre du haut commande par commande — ajouter, réglages de la page, historique, appareils, Structure, aperçu, Publier — et le menu caché sous le logo.

La Structure : la radiographie de la page

Une page Elementor peut empiler des dizaines d'éléments imbriqués. La Structure (le bouton en forme de calques, dans la barre du haut, ou le 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. Sur les sites plus anciens, ce panneau s'appelait le navigateur : c'est le même outil.

Le panneau Structure ouvert sur l'arborescence de la page : six conteneurs, dont un déplié sur un élément Titre sélectionné. — **Fig. EL-02** : La Structure, ouverte sur l'arborescence de la page. ① le chevron déplie un conteneur pour voir ce qu'il contient ; ② la ligne sélectionnée — l'élément correspondant se cerne dans l'aperçu et ses réglages s'ouvrent à gauche ; ③ l'œil masque l'élément dans l'éditeur sans rien supprimer.

Fig. EL-V02 : Survoler une ligne cerne l'élément dans l'aperçu, cliquer le sélectionne, l'œil le masque, et on réordonne la page en déplaçant une ligne : la dernière carte passe en tête.

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 la Structure.
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 se trouvent dans sa mise en page — onglet "Mise en page" sur un conteneur classique, section du même nom dans l'onglet "Style" sur un conteneur récent :

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).
Écarts (le "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 la Structure et dépliez l'arborescence.

Une rangée de trois cartes dans l'éditeur : le conteneur parent encadré, les trois conteneurs enfants en pointillés, et le panneau Mise en page ouvert à gauche. — **Fig. EL-03** : Une rangée de trois cartes, ouverte sur ses réglages. ① le conteneur parent, en direction "ligne" ; ② l'un des trois conteneurs enfants, en direction "colonne", qui tient une icône, un titre et un texte ; ③ la **Direction**, qui décide du sens ; ④ les **Écarts**, ici 28 pixels entre les cartes.

Fig. EL-V03 : Le conteneur, en deux temps. Vidéo 1 : sur une page neuve, créer un conteneur Flexbox et y déposer un titre, un paragraphe et un bouton. Vidéo 2 : les mêmes trois éléments, repris par les réglages du conteneur — la direction passe de colonne à ligne, l'écart s'ouvre à 48 pixels, puis "Justifier le contenu" les répartit dans le sens de la ligne et "Aligner" agit en hauteur. Rien n'est touché élément par élément : c'est la boîte qui range.

Sites plus anciens : sections et colonnes

Avant les conteneurs, Elementor structurait les pages en sections / colonnes. Si votre site date d'avant 2023, vous verrez peut-être cette ancienne structure : le principe reste le même (des boîtes qui contiennent des widgets), seuls les réglages de disposition diffèrent. Ne convertissez pas les sections en conteneurs vous-même, c'est une opération de migration à confier à votre prestataire.

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.

Widget	Sert à	Le réglage à connaître
Titre	Les titres de sections	La "balise HTML" (H1-H6) : un seul H1 par page, puis H2, H3 en cascade, Google s'en sert pour comprendre la page
Éditeur de texte	Les paragraphes	Mini traitement de texte intégré (gras, listes, liens)
Image	Photos, illustrations	Choisir une "taille d'image" adaptée (pas systématiquement "Pleine") + texte alternatif dans la médiathèque
Bouton	Appels à l'action	Le champ "Lien" accepte une URL, un `mailto:` ou un `tel:`
Vidéo	YouTube, Vimeo, fichier	Préférez YouTube/Vimeo à un fichier hébergé sur le site (poids)
Icône / Liste d'icônes	Pictogrammes, listes à puces visuelles	Bibliothèque Font Awesome intégrée
Espaceur / Séparateur	Aérer, séparer	Sur les conteneurs récents, préférez le réglage "gap" du conteneur
Formulaire Pro	Contact, devis	Section formulaires ci-dessous
Posts Pro	Afficher les derniers articles	Réglage "Requête" : quelles catégories afficher
Menu de navigation Pro	Le menu du header	Affiche un menu créé dans WordPress (voir chapitre 03)

Marges et espacements : toujours dans l'onglet "Avancé"

Quel que soit le widget, ses marges externes (margin) et internes (padding) se règlent dans l'onglet Avancé. Le petit cadenas 🔗 lie les 4 côtés : décochez-le pour ne modifier qu'un côté (ex. seulement l'espace au-dessus).

Éditer une page en sécurité

5 min Difficulté : facile

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

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

L'historique : votre machine à remonter le temps

L'icône horloge, dans la barre du haut, 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.

Le panneau Historique ouvert sur l'onglet Actions : la liste des gestes de la session, du plus récent au plus ancien. — **Fig. EL-04** : L'historique de la session. ① l'icône horloge, dans la barre du haut, qui l'ouvre ; ② l'onglet **Actions**, les gestes de la session en cours ; ③ l'onglet **Révisions**, les versions enregistrées de la page ; ④ une ligne de la liste — cliquer dessus ramène la page dans l'état où elle était juste après ce geste. La coche marque l'état actuel.

Rien n'est perdu tant que vous n'avez pas cliqué "Publier"

Vous avez tout cassé et vous ne savez plus comment revenir ? Fermez l'onglet sans enregistrer. La page publiée n'a pas bougé. Rouvrez l'éditeur : vous repartez de la version en ligne. (Si Elementor propose de "restaurer un brouillon" à la réouverture, refusez.)

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 logo Elementor en haut à gauche de la barre → "Réglages du site" (Site Settings).

Réglage	Ce qu'il contrôle
Couleurs globales	La palette du site : Primaire, Secondaire, Texte, Accentuation + vos couleurs personnalisées. Modifier une couleur ici la change partout où elle est utilisée.
Polices globales	Les typographies : Primaire (titres), Secondaire, Texte, Accentuation, famille, graisse, taille, interlignage.
Typographie	Le style par défaut des textes et des titres H1-H6 sur tout le site.
Boutons	L'apparence par défaut de tous les boutons (couleur, rayon, typo).
Identité du site	Nom, description, logo et favicon : c'est ici qu'on change le logo du site.
Mise en page	La largeur de contenu par défaut (souvent 1140 px) et l'espacement entre éléments, ne pas modifier sans votre prestataire : impact sur tout le site.
Arrière-plan, Visionneuse, Champs de formulaire, Images…	Réglages d'ambiance globaux, rarement à toucher. La liste se termine par CSS personnalisé et Réglages supplémentaires : deux entrées de prestataire.

Le panneau Réglages du site ouvert sur Couleurs globales : quatre couleurs système et deux couleurs personnalisées, avec leur code hexadécimal. — **Fig. EL-05** : La palette du site, dans les Réglages du site. ① les quatre **couleurs système** — Principale, Secondaire, Texte, Accent — que tous les widgets peuvent reprendre ; ② les **couleurs personnalisées** ajoutées pour ce site, ici deux beiges ; ③ le bouton qui en ajoute une ; ④ "Enregistrer les modifications", grisé tant que rien n'a changé.

Fig. EL-V05 : Quatre titres de la même couleur, qu'aucun d'eux ne porte en propre. On ouvre les Réglages du site, on remplace la couleur Principale par un vert : les quatre changent pendant qu'on tape le code. Une valeur modifiée à un seul endroit, et tout le site suit.

La règle d'or : global d'abord, valeur "en dur" en dernier recours

Dans chaque réglage de couleur ou de typo d'un widget, l'icône globe 🌐 permet de choisir une valeur globale plutôt qu'une valeur fixe. Utilisez-la systématiquement : le jour où vous rafraîchissez votre charte, tout le site suit en un clic. Un site truffé de couleurs "en dur" doit être repris widget par widget.

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 : Elementor → Constructeur de thème (dans le menu latéral WordPress ; en anglais, Theme Builder). 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…

Schéma du Constructeur de thème : les six parties du site en vignettes, et la condition d'affichage de l'en-tête, qui inclut tout le site sauf une page. — **Fig. EL-06** : les parties du site, dessinées une fois et rangées à part des pages. En bas, la **condition d'affichage** de l'en-tête : elle inclut tout le site et exclut une page — sans condition, une partie n'apparaîtrait nulle part.

Un header modifié = tout le site modifié

Toute retouche du header ou du footer s'applique instantanément sur toutes les pages. Changer un numéro de téléphone dans le footer : allez-y. Réorganiser le menu, déplacer le logo, toucher aux conditions d'affichage : demandez d'abord à votre prestataire, une erreur ici se voit partout.

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 dans le conteneur — dans un espace vide entre ses éléments, jamais sur l'un d'eux, sinon c'est l'élément qui est visé — puis "Enregistrer comme modèle", en bas du menu ; 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, en trois onglets : Blocs et Pages pour les modèles prêts à l'emploi d'Elementor, Modèles pour les vôtres.
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.

Fig. EL-V08 : Une rangée de trois arguments enregistrée sous un nom qu'on reconnaîtra dans six mois, puis réinsérée sur une autre page depuis l'onglet Modèles de la bibliothèque. Le bloc arrive entier, mise en forme comprise — et la copie est indépendante : la retoucher ici ne touche pas l'originale.

N'importez jamais un "kit" complet sur votre site en production

La bibliothèque Elementor propose des kits de site complets (toutes les pages + réglages). Importer un kit peut écraser vos Site Settings (couleurs, polices) et polluer le site de pages de démonstration. Insérer un bloc ou une page individuelle : oui. Un kit complet : jamais sans votre prestataire.

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) Pro

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 la colonne de droite de l'éditeur de formulaire → Notifications par email.
Retrouver les demandes : Forminator garde une copie de chaque envoi dans Forminator → Entrées. Utile en cas de doute sur un e-mail non reçu — et à vider régulièrement, ce sont des données personnelles.
Une interface à moitié traduite : certains boutons restent en anglais (Insert Form Fields, Publish Changes). C'est normal, et sans conséquence.

L'éditeur de formulaire Forminator : la liste des champs au centre, le bouton d'ajout de champs au-dessus, la colonne des réglages à droite. — **Fig. EL-07** : Un formulaire de contact dans l'éditeur Forminator. ① les champs, dans l'ordre où le visiteur les rencontrera — l'astérisque rouge marque les obligatoires ; ② le bouton qui en ajoute un ; ③ la colonne des réglages, dont **Notifications par email**, où se trouve l'adresse qui reçoit les demandes ; ④ le bouton de publication : tant qu'il n'est pas cliqué, rien ne change en ligne.

Fig. EL-V07 : Modifier un formulaire, puis le tester. Vidéo 1 : rendre le champ "Téléphone" obligatoire — la règle est dans l'onglet Réglages de la fiche du champ, pas dans le premier onglet — puis vérifier l'adresse de Notifications par email et publier. Vidéo 2 : le même formulaire côté visiteur, rempli et envoyé ; l'accusé de réception s'affiche, et l'envoi se retrouve dans Entrées, indépendamment de l'e-mail qui, lui, peut se perdre.

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

Après TOUTE modification d'un formulaire : testez-le

Envoyez un vrai message de test depuis le site public et vérifiez qu'il arrive dans votre boîte (regardez aussi les spams). Un formulaire cassé, c'est des demandes de clients perdues en silence pendant des semaines. Si les emails ne partent pas : c'est presque toujours le rôle du plugin WP Mail SMTP (voir chapitre 06), parlez-en à votre prestataire.

Les popups Pro

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

Création : depuis le menu Elementor de l'administration, entrée Popups (sur les sites plus anciens : Templates → Popups). Une popup se construit comme une mini-page Elementor : elle n'appartient à aucune page, et c'est elle qui décide où et quand elle apparaît, 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.

Les popups plein écran sur mobile pénalisent votre référencement

Google sanctionne les "interstitiels intrusifs" qui masquent le contenu à l'arrivée sur mobile. Restez sur des formats discrets (bandeau, coin d'écran), un déclenchement différé, et une croix de fermeture bien visible.

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.

Au centre de la barre du haut, trois icônes d'appareil font basculer l'aperçu : Ordinateur (> 1024 px), Tablette (jusqu'à 1024 px) et Mobile (jusqu'à 767 px). Le contenu ne change pas d'un appareil à l'autre : c'est la largeur de l'aperçu qui change, et la page s'y réorganise.

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.

La même rangée de trois arguments, capturée dans une fenêtre d'ordinateur puis dans une fenêtre de téléphone : côte à côte d'un côté, empilées de l'autre. — **Fig. EL-08** : la même rangée, dans deux largeurs de fenêtre. ① sur un écran d'ordinateur, les trois arguments tiennent côte à côte ; ② sur un téléphone, ils s'empilent — sans qu'aucun réglage mobile ait été posé. On n'intervient que là où le résultat ne va pas.

Fig. EL-V04 : Le responsive, en deux temps. Vidéo 1 : les trois appareils de la barre du haut — l'aperçu rétrécit, le contenu ne bouge pas, et le titre d'accueil finit par tenir sur quatre lignes au téléphone, parce qu'il y garde sa taille d'ordinateur. Vidéo 2 : la petite icône d'appareil à côté du réglage de taille dit à quel appareil la valeur s'applique. On passe le titre à 30 px en vue mobile, puis on revient en vue Ordinateur : il y est toujours à 52 px. Un réglage responsive ne touche que l'appareil choisi.

"Masqué" ne veut pas dire "supprimé"

Un élément masqué sur mobile se charge quand même (il est juste invisible) : dupliquer chaque section en version desktop + version mobile double le poids de la page. Et ne masquez jamais du contenu important sur mobile, Google indexe d'abord la version mobile de votre site. Enfin, l'aperçu Elementor reste une simulation : vérifiez sur un vrai téléphone après publication.

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é).

Le CSS, c'est le territoire de votre prestataire

Si vous trouvez un bout de CSS déjà en place, il y est pour une raison : ne le supprimez pas. Et si un tutoriel vous propose de "coller ce code CSS" pour obtenir un effet, faites-le valider, un sélecteur trop large peut modifier l'apparence de tout le site.

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 (Bloc Div, Flexbox, Titre, Paragraphe, Image, Bouton, SVG…), plus légers et plus rapides. Leur panneau n'a plus les trois onglets Contenu / Style / Avancé, mais Général / Style / Interactions — et l'onglet Style commence par le champ Classes.
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).

L'Editor V4 : un titre de page en cours d'édition directement dans l'aperçu, et le panneau de style ouvert sur son champ Classes. — **Fig. EL-09** : trois nouveautés sur un seul écran. ① le bouton **Publier**, passé en haut à droite ; ② le titre, ouvert en édition *dans la page* — le texte se tape là, pas dans un champ du panneau ; ③ le champ **Classes**, en tête de l'onglet Style, où se range une mise en forme réutilisable.

Fig. EL-V10 : Les mêmes nouveautés en gestes : un clic dans le titre l'ouvre là où il est, on écrit sans rien remplir dans le panneau, puis l'onglet Style montre le champ Classes et les réglages rangés par sujet. Le bouton Publier s'éteint : tout est enregistré.

Classes et composants : un réflexe de pro

Classes, variables et composants sont puissants mais structurants : une classe modifiée se répercute partout. Pour les créer ou les réorganiser, mieux vaut passer par votre prestataire. Au quotidien, vous les réutilisez simplement, sans avoir à les redéfinir.

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.

Récapitulatif

L'essentiel de ce chapitre

Elementor construit vos pages : conteneurs (boîtes Flexbox) → widgets. La Structure (Ctrl/Cmd + I) montre l'arborescence exacte.
Les réglages d'un élément sont rangés par onglets : Contenu (quoi), Style (comment), Avancé (marges, responsive) — Général / Style / Interactions sur les éléments atomiques.
Couleurs et polices : toujours les valeurs globales (Site Settings), jamais "en dur".
Header, footer et modèles vivent dans le Constructeur de thème (Theme Builder) : une retouche s'y applique à tout le site.
Après toute modification d'un formulaire : test d'envoi réel + vérification de réception.
Vérifiez chaque page en vue mobile, et sur un vrai téléphone après publication.
Affichage cassé ? Régénérer les CSS (Elementor → Outils) + vider le cache, avant de paniquer.
Votre éditeur (Editor V4) apporte l'édition directe dans la page, plus les classes, variables et composants réutilisables.