LEÇON

22. Composants (Pro) : construire une fois, réutiliser partout

Le chapitre précédent a montré la limite des modèles : chaque insertion est une copie, et cinq copies d’un même bandeau font cinq corrections le jour où le numéro de téléphone change. Les Composants d’Elementor Pro règlent ce problème : un bloc construit une fois, affiché sur autant de pages qu’on veut, mis à jour partout d’un seul geste, et pourtant personnalisable page par page. Ce chapitre s’appuie sur les éléments atomiques du chapitre 09 et sur le système de design du chapitre 18.

En bref

Public: Utilisateurs d’Elementor Pro qui gèrent un site de plusieurs pages, seuls ou avec un collègue.
Enjeu: Modifier une fois, mettre à jour partout, sans interdire les variations locales utiles.
Idée clé: Un composant n’est pas une copie mais un lien vivant entre un maître et ses instances.
Prérequis: Chapitres 06, 09, 18 et 21.
Lecture: Environ 13 minutes (+ 25 minutes d’exercice).

22.1 — Copie ou lien : la différence qui change tout

Le Centre d’aide Elementor définit les Composants (Components) comme des blocs de conception réutilisables qui restent synchronisés globalement. Tout est dans ce dernier mot. Quand vous insérez un modèle (chapitre 21), Elementor fabrique une copie qui vit sa vie ; quand vous insérez un composant, la page affiche une instance reliée à un maître. Corrigez le maître : chaque instance change. Cette logique, courante dans les logiciels de maquettage, est arrivée dans Elementor avec la version 3.35, en février 2026.

Définition

Composant — un bloc construit en éléments atomiques, enregistré comme source unique (le maître) et affiché sur les pages sous forme d’instances qui lui restent liées. Le maître décide de la structure et du style ; chaque instance peut modifier uniquement les propriétés que le maître a choisi d’exposer (un texte, une image…).

Modèle (copie)

Inséré depuis la bibliothèque, il devient un bloc ordinaire. Tout y est modifiable, et c’est justement le problème : cinq copies du bandeau d’appel au devis dérivent en cinq versions, et une correction se fait cinq fois. Idéal pour un point de départ que l’on va transformer.

Composant (instance)

Inséré depuis l’onglet Composants, il reste relié à son maître. Le style et la structure sont verrouillés et synchronisés ; seuls les textes et images exposés varient d’une page à l’autre. Idéal pour tout ce qui se répète à l’identique : appel à l’action, carte prestation, bloc d’avis.

La bonne question devant un bloc est donc : « Sera-t-il le même partout, à quelques mots près ? » Si oui, c’est un composant ; s’il sera remanié à chaque usage, c’est un modèle. Sur cinq pages, deux ou trois composants suffisent ; sur cinquante, ils deviennent la colonne vertébrale du site.

22.2 — Trois conditions avant de commencer

Les Composants ne sont pas disponibles partout ni pour tout le monde. Le Centre d’aide fixe trois prérequis, et l’éditeur refuse la création si l’un d’eux manque.

Elementor Pro

Les Composants font partie d’Elementor Pro. La page d’aide ne mentionne pas de restriction selon le plan ; la version gratuite, elle, n’en dispose pas. Sans Pro, la solution de repli reste le code court [elementor-template id="…"] du chapitre 21, qui synchronise mais ne personnalise pas.

Deuxième condition : il faut être administrateur du site WordPress. Un utilisateur au rôle Éditeur peut utiliser les composants, nous le verrons, mais ne peut pas en créer ni en modifier le maître. Troisième condition, la plus contraignante au quotidien : le bloc doit être construit uniquement en éléments atomiques — Flexbox, Bloc Div, Grille, Titre, Paragraphe, Bouton, Image, SVG et leurs semblables (chapitre 06).

Attention

Un conteneur qui contient un seul widget classique (une Boîte d’icône, un Google Maps, un widget Formulaire V3) ne peut pas devenir un composant. Avant de créer, ouvrez la Structure (Ctrl+I, Cmd+I sur Mac) et vérifiez que chaque ligne porte l’icône atomique. Une Boîte d’icône se remplace par un Flexbox contenant un SVG, un Titre et un Paragraphe : cinq minutes de travail, et le composant y gagne en légèreté.

22.3 — Créer un composant pas à pas

Prenons le bandeau d’appel au devis de la Menuiserie Roche : un Flexbox à fond vert sauge, un Titre H2 « Un projet d’escalier, de cuisine ou d’agencement ? », un Paragraphe d’une phrase et le Bouton « Demander un devis ». Il doit apparaître en bas de l’accueil, des prestations, des réalisations et de la page « À propos ».

Construisez le bloc en atomique, et stylez-le avec vos classes. Le Flexbox reçoit la classe « section », le bouton la classe « btn-primaire », le titre la classe « titre-section » (chapitre 18). Un composant bâti sur des classes globales suit ensuite toute évolution du système de design.
Faites un clic droit sur le conteneur — sur sa poignée dans la toile ou sur sa ligne dans la Structure — et choisissez Créer un composant (Create component).
Nommez-le et validez. Saisissez « Appel à devis » et cliquez sur Créer (Create). Un nom court et parlant compte : il apparaîtra dans le panneau à côté des autres composants.
Observez le mode édition. L’éditeur passe en mode Edit : un voile sombre recouvre le reste de la page et seul le composant reste actif. Vous êtes en train de modifier le maître, pas la page.
Publiez le composant. Dans ce mode, le bouton Publier (Publish) n’enregistre que le composant, pas la page. Cliquez, puis quittez le mode édition : le bloc sur la toile est maintenant une instance, signalée comme telle dans la Structure.

Le bloc d’origine ne disparaît pas : il est converti en première instance du composant. Si vous vouliez garder une copie libre, dupliquez le conteneur avant l’étape 2.

22.4 — Exposer des propriétés : ce que chaque page peut changer

Un composant dont rien ne varie serait un simple modèle synchronisé. Son intérêt vient des propriétés exposées (properties) : des champs du maître que l’on autorise chaque instance à remplir à sa façon. Sur la page « Prestations », le bandeau dira « Une cuisine sur mesure ? » ; sur la page « Contact », « Parlons de votre projet » ; le reste — couleur, bouton, espacement — restera strictement identique.

L’exposition se fait en mode édition du composant. Sélectionnez l’élément concerné, par exemple le Titre : dans son onglet Général, les champs qui peuvent être exposés — le texte, une image, et les autres champs de contenu marqués par l’icône propriétés — portent cette petite icône. Cliquez dessus, donnez un nom compréhensible par un non-technicien (« Titre du bandeau », « Photo de la carte ») et validez. Vous pouvez rassembler plusieurs propriétés dans un groupe (« Textes », « Images ») pour que le panneau de l’instance reste lisible. Publiez de nouveau le composant.

Figure 22.1 — Un composant maître, trois instances : la structure et le style descendent du maître, le titre exposé se règle sur chaque page.

Bonne pratique

Exposez le minimum. Chaque propriété exposée est une porte ouverte à la divergence : si la couleur du bouton devient une propriété, un jour quelqu’un la passera en rouge sur une page. Le texte du titre, une photo, parfois le libellé du bouton : voilà ce qui varie légitimement. Tout ce qui relève de l’identité visuelle reste dans le maître et dans les classes globales.

22.5 — Insérer, modifier, détacher, supprimer

Une fois publié, le composant rejoint l’onglet Composants (Components) du panneau des éléments, à côté des éléments atomiques et des widgets. On l’insère comme n’importe quel élément, par glisser-déposer dans un conteneur de la page. Le panneau de l’instance ne montre alors que ses propriétés exposées : impossible d’y changer une couleur ou un espacement, et c’est voulu.

Quatre commandes accompagnent ensuite le composant, depuis le clic droit sur une instance ou depuis l’onglet Composants. Modifier le composant (Edit Component) rouvre le mode édition du maître ; à la publication, toutes les instances se mettent à jour. Détacher le composant (Detach Component) coupe le lien pour cette instance seulement : elle redevient un groupe d’éléments atomiques ordinaires, entièrement modifiables, et ne suivra plus le maître. Renommer (Rename) change le nom affiché dans le panneau. Supprimer (Delete) efface le composant de la liste ; avant d’y recourir, détachez ou remplacez ses instances, page par page, pour ne pas découvrir des trous dans le site.

Piège classique

Modifier le maître en croyant modifier une seule page. Le voile sombre du mode édition est là pour le rappeler, mais dans la précipitation on change le titre « pour la page Contact » et l’on découvre le lendemain que les quatre autres pages l’affichent aussi. Règle simple : une modification pour une page passe par une propriété exposée ; si la propriété n’existe pas, c’est que la variation n’était pas prévue — on l’ajoute au maître, ou l’on détache l’instance en connaissance de cause.

22.6 — Trois composants pour la Menuiserie Roche, et ce que voit un Éditeur

Sur un site vitrine de cinq pages, trois composants couvrent l’essentiel. L’appel à devis (titre exposé) clôt quatre pages sur cinq et porte le seul bouton principal de chaque écran (chapitre 15). La carte prestation — Bloc Div, Image, Titre H3, Paragraphe — expose son image, son titre et son texte ; on l’insère trois fois dans un Flexbox en ligne sur la page « Prestations », et six fois sur une future page plus détaillée, avec la certitude que toutes les cartes auront la même ombre, le même rayon et le même espacement. Le bloc d’avis clients expose la citation, le prénom et la commune ; la charte typographique des avis reste unique, ce qui compte quand on en ajoute un par mois.

Ces composants changent aussi la façon de déléguer. Le Centre d’aide précise que les utilisateurs au rôle Éditeur peuvent insérer des instances et modifier les propriétés exposées, mais non le maître. Camille Roche peut donc confier à sa salariée l’ajout d’un avis ou d’une prestation sans risque pour la mise en page. Combiné au Gestionnaire de rôle du chapitre 32, c’est le moyen le plus sûr de laisser une personne non formée alimenter le site.

Un composant, c’est une décision de design prise une fois pour toutes, avec quelques cases à remplir pour chaque page.

Exercice 22.1 — Le composant « Appel à devis » 25 min

Objectif : créer un composant, l’insérer sur trois pages, puis distinguer par la pratique une modification globale d’une modification locale.

Sur la page « Accueil », vérifiez dans la Structure que le bandeau d’appel au devis est entièrement atomique (Flexbox, Titre H2, Paragraphe, Bouton) et qu’il utilise les classes « section », « titre-section » et « btn-primaire ».
Clic droit sur le Flexbox › Créer un composant › nommez-le « Appel à devis » › Créer.
En mode édition, sélectionnez le Titre et exposez son texte sous le nom « Titre du bandeau ». Publiez le composant et quittez le mode édition.
Ouvrez les pages « Prestations » et « À propos ». Depuis l’onglet Composants, insérez une instance en bas de chacune. Renseignez « Titre du bandeau » : « Une cuisine sur mesure ? » sur Prestations, « Envie de nous rencontrer à l’atelier ? » sur À propos. Mettez les pages à jour.
Modification globale. Depuis une instance, Modifier le composant : changez le texte du bouton en « Demander un devis gratuit » et publiez. Ouvrez l’aperçu des trois pages : le bouton a changé partout, les titres sont restés propres à chaque page.
Modification locale. Sur « À propos », changez seulement la propriété « Titre du bandeau » en « Venez voir l’atelier à Murol ». Vérifiez que l’accueil et les prestations n’ont pas bougé.
Sur une page « Bac à sable », insérez une instance, détachez-la et changez sa couleur de fond : le maître et les autres pages restent indemnes.

Résultat attendu : un composant « Appel à devis » avec une propriété exposée, trois instances aux titres différents, un bouton modifié en une seule opération sur les trois pages, et la certitude vécue qu’une instance détachée ne suit plus rien.

À retenir

Un modèle est une copie ; un composant est une instance liée à un maître, mise à jour partout dès que le maître est publié.
Trois prérequis : Elementor Pro, le rôle administrateur pour créer, et un bloc composé uniquement d’éléments atomiques.
Création par clic droit › Créer un composant ; le mode édition, reconnaissable à son voile sombre, ne publie que le composant.
Les propriétés exposées (textes, images) sont les seules variations permises par instance ; exposez le minimum et gardez le style dans le maître et les classes globales.
Modifier, Détacher, Renommer, Supprimer : détacher libère une instance, qui ne suivra plus jamais le maître.
Un utilisateur Éditeur remplit les propriétés sans toucher au maître : c’est la bonne façon de déléguer l’alimentation d’un site.