Depuis l’arrivée des classes globales et des variables dans l’éditeur V4, Elementor a posé les fondations d’un véritable design system natif. La suite logique de ce chantier, déployée dans la continuité, concerne deux briques complémentaires : les composants réutilisables, qui reprennent l’esprit des symboles et des patterns tout en héritant du style via les classes globales, et la Collection Loop, l’évolution du Loop Grid pensée pour l’éditeur V4 et l’affichage dynamique de contenu.
Ensemble, ces deux outils permettent de construire des sites plus cohérents et plus faciles à faire évoluer : des blocs réutilisables partout où c’est pertinent, et des requêtes dynamiques pour afficher des collections d’articles, de produits ou de tout autre type de contenu personnalisé, sans dupliquer la structure à la main à chaque fois. Voyons comment les mettre en œuvre concrètement sur un projet.
Des composants qui héritent réellement du style
Les utilisateurs d’Elementor connaissent depuis longtemps les templates réutilisables et, plus récemment, les symboles ou patterns : un bloc conçu une fois, puis inséré à plusieurs endroits du site. La limite historique de cette approche restait la synchronisation du style : modifier l’apparence d’un symbole inséré à plusieurs endroits ne mettait pas toujours à jour proprement chaque occurrence si des réglages locaux avaient été appliqués par-dessus.
Les composants de l’éditeur V4 résolvent ce problème en s’appuyant directement sur les classes globales. Un composant n’embarque pas un style figé et isolé : il hérite des classes qui lui sont appliquées, exactement comme n’importe quel autre élément de la page. Résultat, si vous modifiez la classe globale carte-temoignage utilisée par un composant « Carte témoignage » inséré sur quinze pages différentes, la mise à jour se propage instantanément partout, sans avoir à retoucher le composant lui-même.
Construire un composant réutilisable, étape par étape
La méthode de travail change légèrement par rapport aux anciens symboles. Plutôt que de styler directement les éléments à l’intérieur du composant, il devient préférable de leur appliquer des classes globales issues de votre design system, puis de laisser le composant hériter de ces classes. Voici l’approche que nous recommandons pour un composant de type carte produit ou carte témoignage :
- Construire d’abord la structure du composant (image, titre, texte, bouton) avec les widgets atomiques disponibles.
- Appliquer les classes globales définies au préalable pour chaque élément, plutôt que des styles locaux ponctuels.
- Enregistrer l’ensemble comme composant réutilisable, en vérifiant qu’aucun réglage local ne vient surcharger les classes globales de façon incohérente.
- Insérer le composant à plusieurs endroits du site, puis tester une modification de classe globale pour confirmer la propagation correcte.
La Collection Loop, l’évolution du Loop Grid
Le Loop Grid de la V3 permettait déjà d’afficher dynamiquement une collection de contenus (articles, produits WooCommerce, types de contenu personnalisés) à partir d’un modèle de carte répété automatiquement selon une requête. C’était un outil puissant, mais construit dans la logique et les contraintes de l’éditeur V3, avec ses propres limites de personnalisation fine du style de chaque carte.
La Collection Loop reprend ce principe fondamental, requêter une collection de contenu et répéter un modèle de carte pour chaque élément, mais la reconstruit dans la logique de l’éditeur V4 : le modèle de carte répété peut lui-même être un composant construit avec des classes globales, ce qui garantit une cohérence de style parfaite entre l’affichage en boucle et le reste du site. Modifier la classe globale utilisée par la carte de la Collection Loop met instantanément à jour l’apparence de toutes les cartes générées dynamiquement, qu’il y en ait cinq ou cinq cents.
Cas d’usage typiques
| Cas d’usage | Source de la collection | Bénéfice de la Collection Loop |
|---|---|---|
| Grille d’articles de blog récents | Articles WordPress | Carte cohérente avec le design system du site |
| Catalogue de produits | Produits WooCommerce | Mise à jour de style centralisée sur tout le catalogue |
| Portfolio de réalisations | Type de contenu personnalisé | Composant réutilisable aussi en dehors de la boucle |
| Liste de témoignages clients | Type de contenu personnalisé ou champs personnalisés | Cohérence entre affichage isolé et affichage en collection |
Combiner composants et Collection Loop dans un vrai projet
La force de ces deux outils vient de leur combinaison. Un composant « Carte article » construit avec les classes globales du site peut servir à la fois de modèle pour la Collection Loop de la page blog, et être inséré manuellement ailleurs, par exemple dans une section « Articles à la une » de la page d’accueil. Dans les deux cas, c’est exactement le même composant, avec le même style hérité des mêmes classes globales.
Cette approche réduit considérablement la duplication de travail par rapport à l’époque où il fallait construire un modèle de carte spécifique pour chaque Loop Grid, sans lien direct avec les cartes utilisées manuellement ailleurs sur le site. Elle facilite aussi la maintenance sur le long terme : un site avec plusieurs Collection Loop (blog, produits, portfolio) peut s’appuyer sur un nombre restreint de composants bien pensés plutôt que sur une multiplication de modèles à peu près similaires mais légèrement différents.
Avant de démarrer une Collection Loop sur un gros volume de contenu, testez toujours le composant de carte isolément sur quelques exemples représentatifs, y compris les cas limites comme un titre très long ou une image manquante. Une erreur de mise en page passe inaperçue sur une carte seule, mais devient très visible répétée cinquante fois dans une grille.
Points de vigilance à connaître
- Vérifiez la compatibilité des extensions tierces qui fournissaient déjà des sources de données personnalisées pour l’ancien Loop Grid : certaines nécessitent une mise à jour pour fonctionner avec la Collection Loop.
- Gardez un œil sur la performance des requêtes dynamiques quand le volume de contenu affiché est important, en particulier si des filtres ou des tris complexes sont appliqués à la collection.
- Documentez vos composants au fur et à mesure, avec leur usage prévu, pour éviter qu’une équipe crée un doublon proche d’un composant déjà existant.
En résumé
Les composants et la Collection Loop de l’éditeur V4 prolongent la logique du design system natif introduit par les classes globales et les variables : au lieu de dupliquer des blocs et des modèles de carte, on construit un nombre restreint de composants cohérents, réutilisables aussi bien manuellement qu’en affichage dynamique. C’est un gain net de temps sur la construction initiale d’un site, et un gain encore plus net sur sa maintenance dans la durée.
Comme pour toute nouveauté de cet éditeur, la meilleure approche reste progressive : commencez par convertir un ou deux blocs récurrents en composants sur un projet test, mesurez le temps gagné lors d’une modification de style globale, puis généralisez la méthode aux prochains projets une fois la pratique bien assimilée par votre équipe.
