Jusqu’ici, dès qu’un client demandait une grille de cartes un peu personnalisée à partir de ses articles ou de ses produits, la réponse passait presque toujours par un plugin tiers comme JetEngine ou par du sur-mesure en PHP. Le widget Posts natif d’Elementor Pro fait le travail basique, mais il reste limité dès qu’on veut sortir du modèle de carte standard.
Avec l’arrivée du Loop Grid et de son compagnon le Loop Builder, Elementor Pro comble une bonne partie de ce manque directement dans l’éditeur. J’ai testé l’outil sur trois cas concrets : une liste d’articles de blog, un catalogue de produits WooCommerce, et un annuaire basé sur un type de contenu personnalisé. Voici comment ça fonctionne et ce que j’en retiens.
Comprendre la mécanique : Loop Grid et Loop Builder
Le principe est simple à saisir une fois qu’on a vu le fonctionnement une première fois. Le Loop Builder sert à créer le modèle d’une carte, ce qu’Elementor appelle un « loop item » : un mini-template qui définit ce qui doit s’afficher pour chaque élément de la boucle (image, titre, extrait, prix, bouton, etc.). Le Loop Grid, lui, est le widget qu’on place sur la page et qui va répéter ce modèle de carte autant de fois qu’il y a d’éléments correspondant à la requête définie.
C’est une séparation claire des responsabilités : d’un côté le design d’une carte unique, de l’autre le réglage de la source de données et de la disposition en grille. Cette approche rapproche Elementor des logiques qu’on trouve depuis longtemps chez certains plugins tiers spécialisés dans les boucles dynamiques.
Créer son premier Loop Item
Pour commencer, il faut ajouter un widget Loop Grid sur la page. Elementor propose alors de créer un nouveau template de type « Loop Item » ou d’en choisir un existant. On entre alors dans un éditeur dédié, avec un contexte de type « article dynamique » qui permet d’utiliser les balises dynamiques habituelles.
- Ajoutez le widget Loop Grid sur votre page ou template
- Cliquez sur « Créer un nouveau Loop Item »
- Construisez la carte avec les widgets habituels (image, titre, texte, bouton)
- Associez chaque champ à une balise dynamique (image à la une, titre du post, extrait, champ personnalisé)
- Enregistrez le modèle, puis revenez au Loop Grid pour le sélectionner
Le gros avantage, c’est qu’on reste dans l’environnement visuel d’Elementor pour concevoir la carte : mêmes widgets, mêmes réglages de style, mêmes contrôles responsive. Pas besoin d’apprendre une syntaxe de template spécifique à un plugin tiers.
Les balises dynamiques disponibles
- Titre, extrait et contenu du post
- Image à la une, avec réglage de taille
- Champs personnalisés (compatibles avec les principaux plugins de champs)
- Taxonomies (catégories, étiquettes, taxonomies personnalisées)
- Métadonnées spécifiques à WooCommerce quand le contexte s’y prête (prix, note, bouton d’ajout au panier)
Configurer la source de données du Loop Grid
Une fois le modèle de carte prêt, tout se joue dans les réglages du widget Loop Grid lui-même. L’onglet dédié à la requête permet de choisir la source : articles, produits WooCommerce, ou n’importe quel type de contenu personnalisé enregistré sur le site. On peut ensuite affiner avec des filtres classiques : nombre d’éléments à afficher, tri par date ou par titre, filtrage par catégorie ou par taxonomie.
La disposition en grille se règle également dans ce même widget : nombre de colonnes selon la taille d’écran, espacement entre les cartes, et pagination si le nombre d’éléments dépasse ce qui est affiché sur une page.
Exemple concret : catalogue de produits
Sur le test réalisé avec une boutique WooCommerce, j’ai configuré un Loop Grid affichant les produits d’une catégorie précise, triés par popularité, avec une carte reprenant image, nom, prix et bouton d’ajout au panier directement fonctionnel. Le tout sans une ligne de code, en une quinzaine de minutes montre en main pour un premier essai, réglages de style compris.
Comparaison avec les anciennes méthodes
Avant le Loop Grid, trois options s’offraient à nous pour ce genre de besoin, chacune avec ses limites.
| Méthode | Points forts | Limites |
|---|---|---|
| Widget Posts classique | Simple, natif, rapide à mettre en place | Mise en page de carte peu personnalisable |
| Plugin tiers type JetEngine | Très flexible, boucles avancées | Dépendance à un plugin externe, coût, courbe d’apprentissage |
| Développement sur mesure | Contrôle total | Temps et compétences techniques nécessaires |
Le Loop Grid se positionne entre le widget Posts et un plugin tiers spécialisé : plus souple que le premier, plus intégré et plus simple à prendre en main que le second, puisqu’il reste dans l’écosystème Elementor Pro déjà maîtrisé par la plupart des utilisateurs.
Créez toujours votre Loop Item en pensant d’abord au contenu le plus court possible (titre sans image, extrait vide). Ça évite les mauvaises surprises de mise en page quand un article de la boucle manque d’un champ.
Limites observées à ce stade
L’outil est jeune et ça se sent sur certains points. Les options de filtrage restent plus basiques que ce que proposent des plugins tiers rodés depuis des années : pas de filtres dynamiques pilotés par l’utilisateur en front pour l’instant, par exemple. La personnalisation des styles de pagination est également encore limitée. Rien de bloquant pour un usage standard, mais gardez cela en tête si votre projet a des besoins de filtrage avancés.
En résumé
Le Loop Grid et le Loop Builder d’Elementor Pro apportent une réponse native et bien pensée à un besoin très fréquent en agence : afficher une collection de contenus dynamiques sous forme de cartes personnalisées. Pour une majorité de projets, cela devrait suffire à se passer d’un plugin tiers supplémentaire, avec l’avantage de rester dans un environnement unique et cohérent. Pour des besoins de filtrage très poussés, il faudra encore composer avec les limites actuelles de l’outil, mais la base posée ici est solide et mérite clairement d’être testée sur vos prochains projets.
