27. Loop Builder : grilles et carrousels d’articles et de produits

Le chapitre 25 a habillé chaque article ; le chapitre 26 a fait entrer les données dans les modèles. Reste la page que tout client regarde en premier : la liste des réalisations. Ce chapitre présente le Loop Builder, l’outil d’Elementor Pro qui dessine une carte une seule fois et la répète pour chaque contenu, en grille ou en carrousel, avec filtres et pagination.

27.1 — Une boucle, c’est quoi

Imaginez la page « Réalisations » de la Menuiserie Roche construite à la main : neuf cartes, chacune avec une photo, un titre, deux lignes et un bouton. Le jour où un dixième chantier arrive, il faut dupliquer une carte, remplacer la photo, le titre, le lien. Le jour où Camille veut des coins arrondis, il faut modifier neuf cartes, puis dix. Le Loop Builder supprime ce travail : on dessine une carte, dont chaque champ est dynamique (chapitre 26), et Elementor la répète pour chaque réalisation. Ajouter un chantier dans WordPress ajoute une carte ; modifier la carte modifie toutes les cartes.

Le mot « boucle » (loop) vient de la programmation : c’est l’instruction « pour chaque élément de la liste, fais ceci ». Ici, « ceci » est un modèle appelé Loop Item (élément de boucle), et « la liste » est une requête (query) : « les réalisations de la catégorie Escaliers, les plus récentes d’abord, neuf par page ». Le résultat est une grille, un carrousel, ou la liste d’une archive.

27.2 — Dessiner la carte : le Loop Item

Le Centre d’aide est net : avant de poser un Loop Grid, il faut un modèle Loop Item. Il se crée soit depuis le Constructeur de thème (partie Loop Item), soit depuis le widget Loop Grid lui-même, qui propose de créer le modèle manquant. Dans l’éditeur, la toile n’affiche qu’une carte, avec les données d’un contenu d’aperçu : c’est normal, la répétition se fera dans la grille.

1. Créez le modèle. Dans Elementor › Constructeur de thème › Loop Item, cliquez sur Add New, nommez-le Carte réalisation, et choisissez le type de contenu à prévisualiser (Articles, ou le type « Réalisations » créé au chapitre 26).
2. Posez le conteneur de la carte. La carte est un conteneur en direction colonne, sans largeur fixe (c’est la grille qui décidera), avec un fond blanc, un rayon de 12 px, et une ombre douce : appliquez la classe carte du chapitre 18 si elle existe. Nommez-le « Carte » dans la Structure.
3. Ajoutez l’image. Déposez le widget Featured Image (image mise en avant). Réglez une résolution moyenne (pas l’original) et une hauteur fixe de 220 px avec un recadrage (object-fit) pour que toutes les cartes aient la même image, quelle que soit la photo (chapitre 14). Donnez-lui un lien vers la publication.
4. Ajoutez le titre et le texte. Un Post Title en H3 (le H1 est celui de la page « Réalisations »), lié à l’article, puis un Post Excerpt limité à une vingtaine de mots. Nous utilisons ici les widgets classiques, qui offrent la liste complète des balises dynamiques (chapitre 26).
5. Ajoutez la catégorie et le bouton. Un petit Titre dont le texte est dynamique (Post › Post Terms, taxonomie Catégories ou « Type de réalisation »), stylé en vert sauge, puis un Bouton « Voir le chantier » dont le lien est dynamique (Post › Post URL), avec la classe btn-secondaire.
6. Enregistrez. Cliquez sur Publier. Un Loop Item n’a pas de conditions d’affichage : il ne s’affiche jamais seul, il est appelé par une grille ou un carrousel.

27.3 — Le widget Loop Grid : la disposition

Le Loop Grid (grille de boucle) est un widget classique de la catégorie Pro. Déposé sur la page « Réalisations », il présente dans son onglet Contenu trois sections : Layout (disposition), Query (requête) et Pagination. La disposition commence par Choose template type : Posts pour lister des contenus, Post Taxonomy pour lister des catégories elles-mêmes (une carte par catégorie, utile pour une page « Nos savoir-faire »), Products et Product Taxonomy pour WooCommerce. Puis Choose a template désigne le Loop Item, avec un bouton Edit template pour y retourner.

Viennent ensuite les colonnes (réglables par appareil : trois sur ordinateur, deux sur tablette, une sur mobile), le nombre d’éléments par page (Items Per Page), l’option Masonry (cartes de hauteurs différentes disposées en quinconce, comme un mur de briques : joli pour des photos, moins lisible pour des fiches), Equal height (hauteur égale, à préférer pour des cartes de texte), et Apply an alternate template, qui insère un second Loop Item tous les N éléments, par exemple une carte « Demander un devis » toutes les six réalisations.

27.4 — La requête : choisir quoi afficher

La section Query décide du contenu de la grille. Le tableau ci-dessous reprend ses réglages et ceux de la section Pagination, tels que les décrit le Centre d’aide (pages « Loop Grid », « Building a query » et « Paginate »), avec le conseil qui convient à un site d’artisan.

Le réglage Manual selection (sélection manuelle) mérite un mot : il permet de choisir à la main les contenus affichés, par exemple les six plus belles réalisations pour l’accueil. C’est pratique, et c’est un piège : la liste ne se met plus à jour toute seule, et l’on retrouve six mois plus tard un accueil qui montre toujours les mêmes chantiers. Préférez une catégorie « À la une » que l’on coche dans l’article, et une requête sur ce terme.

27.5 — Filtrer, faire défiler, rester rapide

Le filtre par taxonomie

Le widget Taxonomy Filter (filtre par taxonomie) ajoute au-dessus d’une grille une rangée de boutons : « Tout », « Escaliers », « Cuisines », « Agencements ». Un clic ne change pas de page : la grille se met à jour. Ses deux réglages sont Selected Loop Grid, qui désigne la grille à filtrer (il faut donc que la grille existe déjà sur la page), et Taxonomy, la classification à utiliser (Catégories, Étiquettes, ou « Type de réalisation »). Plusieurs filtres peuvent viser la même grille, par exemple un par type et un par essence de bois. Une limite, écrite noir sur blanc dans le Centre d’aide : le filtre ne fonctionne pas avec une source « Current Query ». Dans un modèle Archive, on filtre donc avec des liens vers les catégories, pas avec ce widget.

Le carrousel de boucle

Le Loop Carousel (carrousel de boucle) utilise le même Loop Item et la même requête que la grille, mais fait défiler les cartes horizontalement, avec des flèches, des points et, si on le souhaite, un défilement automatique. C’est le bon outil pour un bandeau « Dernières réalisations » sur la page d’accueil : trois cartes visibles, six en tout, tri par date. Deux règles : pas de défilement automatique trop rapide (le visiteur doit pouvoir lire), et une carte visible à la fois sur mobile.

27.6 — La Boucle atomique (Pro 4.2)

Depuis Elementor Pro 4.2 (juillet 2026), l’éditeur atomique possède sa propre boucle, construite entièrement avec des éléments atomiques. Elle se compose de trois éléments emboîtés : Loop (« Boucle »), l’élément extérieur qui porte la requête avec ses trois réglages, Source, Item Count (nombre d’éléments) et Sorting Order (ordre de tri) ; Loop Layout (disposition de boucle), qui décide de la mise en forme, grille ou flex, avec les réglages habituels de l’onglet Style ; et Loop Item (élément de boucle), le gabarit de la carte, que l’on ouvre avec Edit Loop Item et que l’on referme avec Save & Back. La pagination propose Précédent / Suivant avec un Load Type Page Reload ou AJAX, et les produits WooCommerce sont pris en charge.

L’avantage est la cohérence : la carte utilise les mêmes Classes et Variables que le reste du site, le code produit est plus léger, et tout se règle par appareil depuis la barre supérieure. La contrepartie, en septembre 2026, est un jeu de réglages plus réduit que celui du Loop Grid classique : pas de filtre par taxonomie ni de modèle alterné équivalents documentés, et le sous-ensemble de balises dynamiques des éléments atomiques (chapitre 26). Notre ligne de conduite : la Boucle atomique pour une liste simple (les six dernières réalisations en page d’accueil), le Loop Grid classique dès qu’il faut filtrer, paginer finement ou alterner des cartes.

Angie, l’assistant IA d’Elementor (chapitre 23), sait générer une Boucle atomique à partir d’une consigne. Le résultat est un point de départ, à relire réglage par réglage : source, nombre, tri et classes appliquées.