4.2Loop Builder : grilles d'articles & produits
L'essentiel en 30 secondes
- Le Loop Builder (Pro) permet de dessiner une seule carte (loop item) répétée pour chaque élément.
- On conçoit la carte avec du contenu dynamique (image, titre, champs), puis on l'affiche en grille/liste.
- Idéal pour des listes homogènes : réalisations, articles, produits — triables/filtrables.
Mini-cas filé — Nadia construit la galerie
Le menuisier a maintenant 20 réalisations structurées (4.1). Nadia veut une belle galerie. Avec le Loop Builder, elle dessine une carte type (photo + titre + bois + délai), et Elementor la répète pour chaque réalisation, en grille. Une seule carte à soigner, 20 fiches affichées automatiquement.
Suite de 4.1 — afficher en masse des données structurées.
1. Une carte, répétée
Le Loop Builder (Pro) renverse la logique : au lieu de poser 20 cartes, on dessine une seule carte modèle (le « loop item ») avec du contenu dynamique (image à la une, titre, champs personnalisés). Elementor la répète ensuite automatiquement pour chaque élément de la liste.
Nadia soigne une carte (photo + titre + bois + délai) : toutes les réalisations s'affichent dans ce même format, impeccablement.
2. Grille, liste, filtres
On affiche ensuite ces cartes en grille ou en liste, avec pagination. Les données structurées (4.1) permettent de trier (par date, par type) et parfois de filtrer. Le même principe vaut pour les produits d'une boutique (voir 4.3).
Avantage : modifier la présentation = modifier une carte, et toute la grille se met à jour. Maintenance minimale pour un rendu pro.
🔎 Exemple concret — Galerie de réalisations (cas Nadia)
Loop item : [Photo] [Titre] [Bois] [Délai] + lien vers la fiche.
Affichage : grille 3 colonnes, tri par date, pagination.
→ 20 réalisations affichées automatiquement.
→ Changer la carte (ex. ajouter les dimensions) = toute la grille suit.Résultat : une galerie pro, maintenue via une seule carte.
Leçon : concevoir la carte, laisser la répétition au Loop Builder.
Vocabulaire de la section
- Loop Builder (Pro)
- L'outil pour concevoir une carte répétée (loop item) affichée pour chaque élément.
Exemple simple : une carte réalisation répétée en grille.
Ce que ce n'est pas : poser manuellement une carte par élément.
Réflexe : liste homogène → Loop Builder.
- Loop item (carte modèle)
- La carte unique, dynamique, répétée pour chaque article/produit.
Exemple simple : photo + titre + bois + délai.
Ce que ce n'est pas : une carte figée avec des valeurs en dur.
Réflexe : soigner une carte, pas vingt.
- Grille / liste
- L'affichage des cartes répétées, avec tri et pagination.
Exemple simple : grille 3 colonnes des réalisations.
Ce que ce n'est pas : une longue page sans structure.
Réflexe : choisir grille ou liste selon le contenu.
- Tri / filtre
- Ordonner ou filtrer les cartes grâce aux données structurées.
Exemple simple : trier par date, filtrer par type de bois.
Ce que ce n'est pas : un ordre aléatoire non maîtrisé.
Réflexe : données structurées → tri/filtre possibles.
- Maintenance centralisée
- Modifier la carte met à jour toute la grille.
Exemple simple : ajouter les dimensions à la carte = partout.
Ce que ce n'est pas : éditer chaque carte une à une.
Réflexe : un changement de présentation = une seule carte.
En pratique — Construire une grille dynamique
- Concevez un loop item (carte) avec du contenu dynamique (image, titre, champs).
- Affichez ces cartes en grille et réglez le nombre de colonnes.
- Ajoutez un tri (par date) et une pagination.
- Modifiez la carte et vérifiez que toute la grille se met à jour.
Script prêt à dire — présenter la galerie au client (20 s)
« Toutes vos réalisations s'affichent dans une belle galerie. Je n'ai conçu qu'une seule carte type : quand vous ajoutez une réalisation, elle apparaît automatiquement, dans le même format. Et si vous voulez changer la présentation, je modifie une carte et toute la galerie suit. »
Souligner l'automatisation et la maintenance en un point.
Modèle copier-coller — plan Loop
LOOP ITEM (carte) : image ___ titre ___ champs ___ lien ___
AFFICHAGE : grille (___ colonnes) / liste · pagination : oui / non
TRI : par date / par champ ___ FILTRE : oui / non
TEST (ajout d'un élément apparaît automatiquement) : fait / à faireRéalisations
Grille de cartes photo + infos, triée par date.
Articles
Loop des derniers conseils en page d'accueil.
Produits
Même principe pour la boutique (voir 4.3).
Mobile
Grille qui passe à une colonne sur mobile (responsive).
✓ Bonnes pratiques
- Concevoir une seule carte soignée (loop item).
- Exploiter les données structurées pour tri/filtre.
- Vérifier le responsive de la grille.
✗ Pièges fréquents
- Poser une carte par élément à la main.
- Mettre des valeurs en dur dans la carte.
- Oublier le rendu mobile de la grille.
Points clés à retenir
- Loop Builder = une carte répétée automatiquement.
- Loop item dynamique (image, titre, champs).
- Grille/liste triable et filtrable.
- Modifier la carte met à jour toute la grille.
Défi 48h — appliquez demain
Concevez un loop item (carte dynamique) et affichez une grille d'articles ou de réalisations avec tri par date. Modifiez la carte et constatez la mise à jour globale. 30 minutes.
- Je conçois une carte répétée (loop item).
- Je l'affiche en grille/liste triable.
- Je maintiens tout via une seule carte.
Questions fréquentes
Qu'est-ce qu'un loop item ?
La carte modèle que l'on conçoit une seule fois dans le Loop Builder, avec du contenu dynamique ; Elementor la répète pour chaque article ou produit.
Puis-je trier ou filtrer la grille ?
Oui, grâce aux données structurées (champs) : on peut trier (par date, par champ) et parfois filtrer. C'est tout l'intérêt de structurer les données en 4.1.
Le Loop Builder marche-t-il pour les produits ?
Oui : le même principe s'applique aux produits d'une boutique WooCommerce (voir 4.3) — une carte produit répétée en grille.
Le menuisier a 20 réalisations structurées. Comment Nadia affiche-t-elle une galerie maintenable ?