Le Loop Grid Elementor Pro : créer des listes dynamiques sans coder
Le Loop Grid est l’une des fonctionnalités les plus transformatrices d’Elementor Pro. Il permet de créer des mises en page dynamiques pour afficher n’importe quelle liste de contenus WordPress — articles de blog, produits WooCommerce, Custom Post Types, membres d’équipe — en utilisant un « Loop Item » template que vous designez une seule fois, et qu’Elementor répète automatiquement pour chaque entrée.
Loop Item : le template de carte réutilisable
Le Loop Item est le cœur du système. C’est un template Elementor (créé via Elementor → Templates → Loop Items) qui représente une « carte » individuelle. Vous y placez des Dynamic Tags pour afficher les données de chaque entrée : titre, image à la une, extrait, date, auteur, catégories, méta-champs ACF ou JetEngine. Le même Loop Item est ensuite utilisé dans le widget Loop Grid pour afficher toutes les entrées de votre requête.
Configurer la requête du Loop Grid
Dans les paramètres du widget Loop Grid (onglet « Contenu » → « Query »), vous définissez quelle source de données afficher :
- Type de source : Articles, Pages, Custom Post Types, Produits WooCommerce, Termes, Utilisateurs
- Filtres : par catégorie, tag, auteur, méta-valeur (meta_query), ou date
- Nombre : posts_per_page, avec option offset pour exclure les X premiers
- Tri : par date, titre, ordre de menu, ou champ personnalisé (meta_value)
- Exclusions : par ID, ou « Exclude Current Post » pour les templates dynamiques
Options de mise en page et de pagination
Le Loop Grid propose trois modes de mise en page : Grille (lignes et colonnes classiques), Carré masonry (hauteurs variables sans espace), et Carrousel (défilement horizontal). Pour la pagination, trois options sont disponibles sans plugin supplémentaire : pagination numérique classique, bouton « Charger plus » (Load More en AJAX), et défilement infini (Infinite Scroll).
Loop Grid vs Listing Grid JetEngine : quand utiliser lequel ?
Depuis 2023, JetSmartFilters est compatible avec le Loop Grid natif Elementor Pro, ce qui couvre la majorité des cas d’usage. Cependant, pour les requêtes complexes (meta_query imbriquées AND/OR, requêtes géographiques par rayon, relations entre CPT JetEngine, ou affichage de champs répéteurs), le Listing Grid JetEngine offre bien plus de flexibilité via son Query Builder visuel.
Créer un Loop Grid pas à pas
- Créez un Loop Item : Elementor → Templates → Loop Items → Ajouter nouveau
- Designez la carte avec les Dynamic Tags (titre, image, extrait, lien)
- Publiez votre Loop Item
- Sur votre page, ajoutez le widget « Loop Grid » depuis l’éditeur Elementor
- Dans les paramètres, sélectionnez votre Loop Item et configurez la requête
- Choisissez la mise en page (grille, masonry, carrousel) et le type de pagination
Bonnes pratiques pour les performances
Limitez le nombre de posts affichés sans pagination à 12-20 maximum pour éviter de dégrader le LCP. Pour les grandes listes (100+ entrées), utilisez le Load More ou le Infinite Scroll plutôt que d’afficher tout d’un coup. Optimisez les images des Loop Items avec Imagify (WebP, lazy loading activé), et préférez des requêtes simples aux requêtes multi-JOIN complexes qui ralentissent la base de données.
→ Retour au guide complet Elementor Pro
FAQ — Loop Grid Elementor Pro
Quelle est la différence entre le Loop Grid et le Loop Carousel d’Elementor Pro ?
Le Loop Grid affiche les éléments dans une mise en page grille statique (lignes et colonnes). Le Loop Carousel les affiche sous forme de carrousel défilant avec navigation par flèches et/ou points. Ils utilisent tous les deux le même Loop Item template — vous créez un seul template et l’utilisez à la fois en grille et en carrousel selon le contexte de la page.
Le Loop Grid est-il compatible avec JetSmartFilters de Crocoblock ?
Oui, depuis mi-2023, JetSmartFilters est officiellement compatible avec le Loop Grid natif d’Elementor Pro. Pour des filtres simples (par catégorie ou taxonomie), le Loop Grid + JetSmartFilters est suffisant. Pour des filtres complexes (meta_query imbriqués, géographiques, relations JetEngine), le Listing Grid JetEngine reste supérieur grâce à son Query Builder plus puissant.
Peut-on paginer les résultats d’un Loop Grid ?
Oui. Le Loop Grid propose plusieurs options de pagination nativement : pagination numérique classique (1, 2, 3…), bouton « Charger plus » (Load More) en AJAX qui ajoute les entrées suivantes sans rechargement de page, et défilement infini (Infinite Scroll) qui charge automatiquement au scroll. Ces trois modes sont configurables directement dans les paramètres du widget Loop Grid sans plugin supplémentaire.
Combien de posts le Loop Grid peut-il afficher simultanément ?
Il n’y a pas de limite technique stricte dans Elementor, mais afficher plus de 50 posts simultanément peut significativement impacter les performances de la page (LCP, temps de génération serveur). Pour les catalogues importants (100+ éléments), je recommande toujours d’utiliser la pagination ou le Load More pour maintenir des temps de chargement acceptables et un score PageSpeed élevé.
Comment exclure certains posts spécifiques du Loop Grid ?
Dans les paramètres de requête du Loop Grid (onglet « Query »), vous pouvez exclure des posts par leur ID dans le champ « Exclude IDs ». Pour les exclusions dynamiques — comme exclure le post actuellement affiché sur une page Single Post — activez l’option « Exclude Current Post ». Pour des exclusions par méta-valeur ou par taxonomie, utilisez les filtres avancés de la requête.