4.2Loop Builder : grilles d'articles/produits dynamiques
Le LOOP BUILDER (constructeur de boucle) — Elementor Pro — est un outil puissant pour afficher des LISTES ou des GRILLES de contenus (articles, produits, fiches…) avec un design ENTIÈREMENT personnalisé. Une « boucle » (loop) est une répétition : afficher une SÉRIE d'éléments (les derniers articles, les produits d'une catégorie, des fiches…) en répétant une mise en page pour chacun. Le Loop Builder permet de : (1) CONCEVOIR l'ÉLÉMENT DE BOUCLE (le « modèle d'item ») — à quoi ressemble UNE carte (une fiche produit, une carte d'article : image, titre, extrait, prix, bouton…), en utilisant du CONTENU DYNAMIQUE (les données de chaque élément) ; (2) puis AFFICHER une GRILLE/liste de ces items (le widget Loop Grid), qui répète votre carte personnalisée pour chaque contenu de la source (articles, produits…), avec pagination, filtres possibles. Contrairement au widget Posts (mise en page prédéfinie), le Loop Builder donne un contrôle TOTAL sur le design de chaque carte.
La puissance du Loop Builder. (1) DESIGN LIBRE des cartes : vous concevez la carte comme n'importe quelle mise en page Elementor (conteneurs, widgets, styles), avec les données dynamiques — pas de gabarit imposé. (2) APPLIQUÉ à toute une source : la carte se répète pour chaque article/produit/fiche, chacun avec ses données. (3) Modifier le modèle d'item met à jour TOUTES les cartes. (4) Combiné aux CHAMPS PERSONNALISÉS (4-1), on affiche des grilles de fiches sur mesure (biens immobiliers, membres, projets…). (5) Filtrage et tri possibles (afficher telle catégorie, tel ordre). C'est l'outil pour des blogs, boutiques, annuaires et catalogues au design totalement maîtrisé. Points importants. (1) Le LOOP BUILDER (Pro) affiche des GRILLES/listes de contenus (articles, produits, fiches) avec un design ENTIÈREMENT personnalisé — contrôle TOTAL sur chaque carte (contrairement au widget Posts, prédéfini). (2) On conçoit l'ÉLÉMENT DE BOUCLE (le modèle d'une carte, avec du contenu DYNAMIQUE), puis on affiche une GRILLE qui le répète pour chaque contenu. (3) Modifier le modèle d'item met à jour TOUTES les cartes ; combiné aux CHAMPS PERSONNALISÉS, il affiche des grilles de fiches sur mesure. (4) Filtrage/tri possibles. (5) C'est l'outil des blogs/boutiques/annuaires/catalogues au design maîtrisé. Maîtriser le Loop Builder — concevoir une carte dynamique et l'appliquer en grille — permet des listes de contenus au design totalement personnalisé. Le WooCommerce Builder (section suivante) applique cette logique à l'e-commerce.
Vocabulaire de la section
- Loop Builder (Pro)
- Outil pour afficher des LISTES/GRILLES de contenus (articles, produits, fiches) avec un design ENTIÈREMENT personnalisé : on conçoit une carte-modèle et on la répète pour chaque contenu.
- Boucle (loop)
- Une répétition : afficher une SÉRIE d'éléments (derniers articles, produits d'une catégorie…) en répétant une mise en page (une carte) pour chacun.
- Élément de boucle (modèle d'item)
- Le modèle d'UNE carte (image, titre, extrait, prix, bouton…), conçu librement avec du CONTENU DYNAMIQUE (les données de chaque élément). Répété pour chaque contenu.
- Loop Grid (grille)
- Le widget qui AFFICHE la grille/liste en répétant votre carte personnalisée pour chaque contenu de la source (articles, produits…), avec pagination et filtres possibles.
- Contrôle total vs widget Posts
- Contrairement au widget Posts (mise en page prédéfinie), le Loop Builder donne un contrôle TOTAL sur le design de chaque carte (design libre).
À quoi servent le Loop Builder et les champs personnalisés (ACF) ?
En pratique — Créer une grille avec le Loop Builder
- Concevez l'ÉLÉMENT DE BOUCLE (le modèle d'une carte : image, titre, extrait, prix, bouton) librement, avec du CONTENU DYNAMIQUE (les données de chaque élément).
- Ajoutez un widget LOOP GRID qui répète votre carte pour chaque contenu de la source (articles, produits, fiches).
- Réglez la source (type de contenu, catégorie), le nombre de colonnes, la pagination, et le tri/filtrage éventuel.
- Combinez avec les CHAMPS PERSONNALISÉS (4-1) pour des grilles de fiches sur mesure ; modifier le modèle d'item met à jour toutes les cartes.
Points clés à retenir
- Le LOOP BUILDER (Pro) affiche des GRILLES/listes de contenus (articles, produits, fiches) avec un design ENTIÈREMENT personnalisé — contrôle TOTAL sur chaque carte, contrairement au widget Posts (mise en page prédéfinie).
- Principe : concevoir l'ÉLÉMENT DE BOUCLE (le modèle d'UNE carte : image, titre, extrait, prix, bouton — avec du CONTENU DYNAMIQUE), puis afficher une GRILLE (Loop Grid) qui RÉPÈTE cette carte pour chaque contenu de la source.
- Modifier le modèle d'item met à jour TOUTES les cartes. Combiné aux CHAMPS PERSONNALISÉS (4-1), il affiche des grilles de FICHES sur mesure (biens, membres, projets…). Filtrage et tri possibles.
- C'est l'outil des BLOGS, BOUTIQUES, ANNUAIRES et CATALOGUES au design totalement maîtrisé. On conçoit une carte dynamique et on l'applique à toute une source de contenus.
Questions fréquentes
Quelle est la différence entre le Loop Builder et le widget Posts, et quand utiliser le Loop Builder ?
Le widget POSTS affiche une liste d'articles avec une mise en page PRÉDÉFINIE (options limitées), tandis que le LOOP BUILDER permet de concevoir ENTIÈREMENT le design de chaque carte — on utilise le Loop Builder quand on veut un contrôle total sur l'apparence des éléments listés. Le widget POSTS (plus simple) : (1) Affiche une liste/grille d'articles (ou de contenus) selon une mise en page PRÉDÉFINIE par Elementor : on choisit parmi des dispositions et des options (afficher l'image, le titre, l'extrait, la date…), on règle des styles, mais dans un CADRE imposé. (2) Avantages : SIMPLE et RAPIDE, suffisant pour une liste d'articles standard (blog basique, section actualités). Pas besoin de concevoir la carte. (3) Limite : le design de chaque carte est CONTRAINT par le gabarit du widget (on ne maîtrise pas librement la disposition, on ne peut pas ajouter n'importe quel élément où on veut). Le LOOP BUILDER (contrôle total) : (1) Permet de CONCEVOIR l'ÉLÉMENT DE BOUCLE (le modèle d'UNE carte) ENTIÈREMENT et LIBREMENT, comme n'importe quelle mise en page Elementor : conteneurs, widgets, styles, disposition au choix — avec du contenu DYNAMIQUE (les données de chaque élément). (2) Puis affiche une GRILLE (Loop Grid) qui RÉPÈTE cette carte personnalisée pour chaque contenu. (3) Avantage : CONTRÔLE TOTAL sur le design de chaque carte (n'importe quelle disposition, n'importe quels éléments — image, titre, extrait, prix, boutons, champs personnalisés, badges, superpositions… placés librement). (4) Coût : un peu plus de travail (concevoir la carte) et une compréhension du contenu dynamique. Quand utiliser le LOOP BUILDER (plutôt que Posts) : (1) Design de carte PERSONNALISÉ : quand la mise en page prédéfinie du widget Posts ne suffit pas — vous voulez une carte au design spécifique (disposition particulière, éléments précis, style unique). (2) FICHES sur mesure avec CHAMPS PERSONNALISÉS : afficher des grilles de fiches (biens immobiliers, membres, projets, produits) avec leurs champs personnalisés (prix, surface, poste…) — le Loop Builder permet de les intégrer, pas le widget Posts standard. (3) Grilles de PRODUITS personnalisées (WooCommerce — niveau 4-3) au design maîtrisé. (4) Cohérence avec un design spécifique : quand les cartes doivent s'intégrer à un design particulier du site. (5) Quand vous voulez la LIBERTÉ totale de mise en page des éléments listés. Quand le widget POSTS suffit : (1) Une liste d'articles STANDARD (blog simple, section actualités) où la mise en page prédéfinie convient. (2) Quand on veut la SIMPLICITÉ et la RAPIDITÉ, sans besoin de design sur mesure. (3) Pour un affichage basique d'articles. Comment décider : (1) Mise en page standard suffisante → WIDGET POSTS (simple, rapide). (2) Besoin d'un design de carte PERSONNALISÉ, de champs personnalisés, ou d'une liberté totale → LOOP BUILDER. (3) En cas de doute pour un blog simple, commencez par Posts ; passez au Loop Builder dès que le design contraint devient limitant. Les bonnes pratiques (Loop Builder) : (1) Concevez une carte CLAIRE et RESPONSIVE (les grilles doivent bien s'adapter au mobile). (2) Utilisez le contenu DYNAMIQUE (données de chaque élément). (3) Intégrez les CHAMPS PERSONNALISÉS pour des fiches structurées. (4) Réglez source, colonnes, pagination, filtres/tri. (5) Gardez les cartes cohérentes et légères (performance). En résumé : le widget POSTS affiche des articles selon une mise en page PRÉDÉFINIE (simple et rapide, mais design contraint), tandis que le LOOP BUILDER permet de CONCEVOIR ENTIÈREMENT le design de chaque carte (contrôle total : n'importe quelle disposition et éléments, avec contenu dynamique et champs personnalisés) puis de le répéter en grille. Utilisez le LOOP BUILDER quand vous voulez un design de carte PERSONNALISÉ, afficher des FICHES avec des CHAMPS PERSONNALISÉS (biens, membres, projets), des grilles de PRODUITS sur mesure, ou une liberté totale de mise en page — c'est-à-dire dès que le gabarit du widget Posts devient limitant. Réservez le widget POSTS aux listes d'articles STANDARD où sa mise en page prédéfinie suffit (simplicité, rapidité). Le Loop Builder est l'outil des blogs, boutiques, annuaires et catalogues au design totalement maîtrisé ; le widget Posts, la solution simple pour un affichage d'articles basique.
Comment le Loop Builder permet-il de créer des annuaires ou catalogues sur mesure ?
Le Loop Builder crée des annuaires/catalogues sur mesure en combinant trois éléments : des CHAMPS PERSONNALISÉS (les données structurées), une CARTE conçue librement (le design d'un item) affichant ces champs en dynamique, et une GRILLE qui répète cette carte pour tous les contenus — avec filtrage et tri. La combinaison gagnante : (1) Les données structurées (champs personnalisés, ACF — niveau 4-1) : on définit un type de contenu (ex. « Biens », « Membres », « Projets ») avec des CHAMPS sur mesure (prix, surface, pièces pour un bien ; poste, spécialité pour un membre ; client, année pour un projet). On saisit les contenus avec leurs champs dans WordPress. (2) La carte conçue avec le Loop Builder : on conçoit LIBREMENT le modèle d'UNE carte (l'élément de boucle), affichant en CONTENU DYNAMIQUE les données de chaque contenu — l'image, le titre, ET les champs personnalisés (le prix, la surface…). Design totalement maîtrisé (disposition, style, badges…). (3) La grille (Loop Grid) : on affiche une grille qui RÉPÈTE cette carte pour tous les contenus du type — chaque bien/membre/projet apparaît comme une carte, avec ses propres données. Le résultat : un annuaire/catalogue au design sur mesure, généré automatiquement. Comment construire un annuaire/catalogue : (1) Structurer les DONNÉES : créer le type de contenu et ses CHAMPS personnalisés (ACF) selon le besoin (les caractéristiques des biens, membres, produits…). Saisir les contenus. (2) Concevoir la CARTE (élément de boucle) dans le Loop Builder : disposer image, titre, champs (prix, surface…), bouton « voir » — en dynamique, avec le design voulu. (3) Afficher la GRILLE (Loop Grid) : régler la source (le type de contenu), le nombre de colonnes, la pagination. La carte se répète pour chaque contenu. (4) Ajouter le FILTRAGE et le TRI : permettre aux visiteurs de filtrer (par catégorie, prix, localisation…) et trier la grille — essentiel pour un annuaire/catalogue navigable (via les options d'Elementor et/ou des outils de filtrage). (5) Concevoir la FICHE détaillée (modèle Single — niveau 3-2) : quand on clique sur une carte, la fiche complète du bien/membre affiche toutes ses données (dynamique + champs). Ce qui rend cela SUR MESURE et puissant : (1) DESIGN LIBRE : les cartes ne sont pas contraintes par un gabarit — vous les concevez exactement comme voulu (contrairement au widget Posts). (2) DONNÉES STRUCTURÉES : les champs personnalisés permettent d'afficher des caractéristiques précises (prix, surface…) — impossible avec du texte libre. (3) AUTOMATISATION : un modèle de carte + une grille = tout l'annuaire généré à partir des données. Ajouter un bien = créer un contenu (avec ses champs) ; il apparaît automatiquement dans la grille. (4) COHÉRENCE : toutes les cartes/fiches ont le même design (via les modèles). (5) MAINTENANCE : modifier la carte-modèle met à jour toutes les cartes ; gérer les données à part (WordPress). (6) FILTRAGE/TRI : navigation riche (par critères) grâce aux données structurées. Les cas d'usage : annuaires (membres, entreprises, professionnels), catalogues (produits, biens immobiliers, véhicules), portfolios (projets), listes d'événements — tout contenu structuré et répétitif à présenter en grille filtrable. Les bonnes pratiques : (1) Bien STRUCTURER les données (champs pertinents). (2) Concevoir une CARTE claire, responsive, cohérente. (3) Prévoir le FILTRAGE/TRI (navigation). (4) Concevoir la FICHE détaillée (Single). (5) Soigner la PERFORMANCE (cartes légères, pagination pour ne pas tout charger). (6) Responsive (grilles adaptées au mobile). En résumé : le Loop Builder permet de créer des annuaires/catalogues sur mesure en combinant des CHAMPS PERSONNALISÉS (données structurées : prix, surface, poste… via ACF), une CARTE conçue LIBREMENT (l'élément de boucle, affichant ces champs en contenu dynamique — design totalement maîtrisé) et une GRILLE (Loop Grid) qui répète cette carte pour tous les contenus, avec FILTRAGE et TRI. On structure les données (type de contenu + champs), on conçoit la carte et la grille, on ajoute le filtrage, et on conçoit la fiche détaillée (modèle Single). Le résultat : un annuaire/catalogue au design sur mesure, généré automatiquement à partir des données (ajouter un élément = créer un contenu qui apparaît dans la grille), cohérent et filtrable — pour des biens immobiliers, produits, membres, projets, événements. C'est la combinaison contenu dynamique + champs personnalisés + Loop Builder qui fait d'Elementor Pro un outil de construction de sites structurés et data-driven puissants, bien au-delà du site vitrine.