Afficher vos articles en grille avec le Loop Grid
Concevoir la carte d’un article une fois, et laisser Elementor l’appliquer à toute votre liste d’articles ou de produits.
Les menus sont cités tels qu’ils apparaissent dans Elementor en français. Selon votre version et vos réglages de langue, certains libellés restent en anglais (Single Post, Loop Item…).
Le widget Loop Grid d’Elementor Pro affiche une liste d’articles, de pages ou de produits avec un design entièrement personnalisé. Vous concevez une seule « carte » (le modèle d’élément), et Elementor la répète pour chaque contenu.
Le principe
Le modèle d’élément utilise du contenu dynamique : le widget Post Title affiche le titre de chaque article, Featured Image son image, Post Excerpt son extrait, Post Info sa date ou son auteur. Vous pouvez aussi ajouter des éléments purement décoratifs, comme une icône.
Créer une grille depuis une page
- Ouvrez une page avec Elementor et glissez le widget Loop Grid.
- Cliquez sur Create a Template (ou choisissez un modèle existant).
- Construisez la carte avec des conteneurs et les widgets dynamiques, puis mettez-la en forme.
- Cliquez sur Save and Back : la page affiche la liste de vos articles avec votre design.
Pour retoucher la carte plus tard, cliquez sur le premier élément de la grille (il change de couleur dans l’éditeur) ou sur Edit Template. Toute modification s’applique à tous les éléments.
Créer le modèle depuis le constructeur de thème
Vous pouvez aussi partir d’une page blanche : Elementor › Constructeur de thème, rubrique Loop Item, puis Add New. Le type de modèle détermine ce que la grille affiche : Posts (articles, pages ou produits), Post Taxonomy (catégories d’articles), Products (produits WooCommerce) ou Product Taxonomy (catégories de produits).
N’oubliez pas la pagination : sans style de pagination, les visiteurs ne verront que la première page d’éléments. Réglez-la dans les options du widget Loop Grid.
Bon à savoir
Le Loop n’existe pas encore en version « atomique » dans l’éditeur v4 : on utilise donc le widget classique, qui cohabite sans problème avec les nouveaux éléments. Si une grille provoque une erreur dans l’éditeur après une mise à jour, voir l’éditeur ne charge pas.
Choisir les contenus affichés
La section Query du widget Loop Grid détermine quels contenus apparaissent et dans quel ordre :
- Source : articles, pages, produits ou un autre type de contenu ;
- Include / Exclude : limiter la grille à une catégorie, une étiquette ou un auteur, ou au contraire en écarter ;
- Order By : par date, par titre, aléatoirement…
Si la même page contient plusieurs grilles (par exemple « À la une » puis « Tous les articles »), activez Avoid Duplicates pour qu’un article ne s’affiche pas deux fois.
Varier le design et passer en carrousel
L’option Alternate Template applique un second modèle à certaines positions de la grille : une carte plus grande toutes les quatre cartes, par exemple, pour casser la monotonie. Et pour faire défiler vos éléments au lieu de les empiler, le widget Loop Carousel utilise exactement les mêmes modèles.
Lien affilié : si vous achetez Elementor Pro via un lien de cette page, Expertor perçoit une commission, sans surcoût pour vous.
