Créer une grille d’articles, une liste de produits ou un calendrier d’événements ne devrait pas vous obliger à reprendre le modèle imposé par votre thème. Avec le futur Loop Builder de Divi 5, l’objectif est de rendre la création de boucles WordPress beaucoup plus libre, visuelle et personnalisable.
Cette fonctionnalité annoncée pour Divi 5 permettra de concevoir le modèle d’affichage d’un contenu répété, puis de définir quels contenus doivent apparaître. Articles de blog, produits, événements ou autres types de publication pourront ainsi être présentés dans une mise en page adaptée à chaque besoin.
Cet article est une synthèse rédigée à partir de la vidéo YouTube «Divi 5 Sneak Peek! 🤩 Loop Builder » publiée par Elegant Themes
Qu’est-ce qu’une boucle WordPress ?
Dans WordPress, une boucle correspond au mécanisme qui permet d’afficher automatiquement une liste de contenus en répétant une même structure. Le cas le plus courant est la page de blog : chaque article utilise généralement le même modèle avec une image mise en avant, un titre, un extrait et parfois des métadonnées.
Une boucle peut cependant afficher bien plus que des articles classiques. Elle peut par exemple servir à présenter :
- des articles appartenant à une catégorie précise ;
- des publications rédigées par un auteur donné ;
- des produits WooCommerce selon une catégorie ;
- des événements à venir ;
- des contenus provenant d’autres types de publication WordPress.
Traditionnellement, cette logique est gérée par le thème ou par une extension. Le système définit quels contenus doivent être affichés et quelle structure doit être utilisée pour les présenter. Cette approche fonctionne bien, mais elle devient plus limitée lorsqu’un site nécessite des affichages personnalisés selon les types de contenus.
À quoi sert le Loop Builder Divi 5 ?
Le Loop Builder de Divi 5 vise justement à dissocier ces deux éléments : la sélection des contenus et leur présentation visuelle. Vous choisissez d’abord les contenus à afficher, puis vous concevez le modèle qui sera répété pour chaque résultat directement avec le constructeur Divi.
Au lieu d’utiliser uniquement les mises en page prédéfinies des modules Blog ou Produit, il devient possible de créer des cartes personnalisées avec les éléments de votre choix.
Par exemple, une carte d’article peut afficher une image, un badge de catégorie, un titre, un résumé et un bouton. Une fiche produit peut mettre davantage en avant l’image, le prix ou l’appel à l’action. Un événement peut quant à lui placer la date au premier plan avant le titre.
Comment fonctionnera le Loop Builder de Divi 5 ?
Le Loop Builder de Divi 5 permettra de créer des listes de contenus entièrement personnalisées en utilisant les modules natifs de Divi. Au lieu d’être limité à l’apparence des modules Blog, Portfolio ou Produits, vous pourrez concevoir votre propre carte de contenu, puis demander à Divi de la répéter automatiquement pour chaque article, produit ou contenu correspondant à vos critères.
Concrètement, il suffira de créer une seule mise en page, puis d’activer l’option de boucle afin que Divi remplace automatiquement les contenus dynamiques (titre, image, prix, extrait, champs ACF, etc.) pour chaque élément affiché.
1. Choisir l’élément à répéter
La première étape consiste à créer la carte ou le bloc qui sera répété automatiquement. Contrairement aux modules Blog ou Produits de Divi, dont la mise en page est prédéfinie, le Loop Builder vous permet de concevoir entièrement votre propre structure à l’aide des modules Divi.
Vous pouvez ainsi organiser librement vos images, titres, boutons, icônes, champs personnalisés ACF ou tout autre contenu dynamique. Ce modèle servira ensuite de base pour afficher chaque article, produit ou contenu renvoyé par la requête.
Cette approche offre une liberté de conception bien plus importante que les modules natifs de Divi, tout en évitant d’avoir à recréer chaque carte manuellement ou d’ajuster en code pure.
2. Activer l’option de boucle
Une fois votre modèle terminé, il suffit d’activer l’option Loop sur la ligne, la colonne ou le conteneur concerné. Divi répètera automatiquement cette carte pour tous les résultats de la requête.
Pour chaque résultat trouvé (article, produit, projet, témoignage, etc.), Divi générera automatiquement une nouvelle carte en remplaçant les contenus dynamiques comme le titre, l’image, le prix, l’extrait ou les champs ACF.
Le principe est similaire à celui du Theme Builder : vous créez le design une seule fois, mais ici, ce n’est plus une page entière qui est réutilisée. C’est une carte de contenu qui est répétée autant de fois que nécessaire dans une liste ou un catalogue.
3. Définir le type de contenu
Une fois le modèle créé, il faudra indiquer à Divi quels contenus doivent alimenter la boucle. Celle-ci pourra afficher des articles de blog, des produits WooCommerce, des projets, des événements ou encore tout autre type de publication personnalisé (Custom Post Type).
L’objectif est de pouvoir réutiliser le même modèle avec différents contenus, sans avoir à modifier sa structure.Par exemple, une même carte pourra afficher différents types de contenus : les derniers articles d’une catégorie, des produits d’une boutique ou encore des témoignages. Il suffira simplement de modifier les critères de sélection.
Les options de requête avancées sont encore en cours de développement. Elles devraient permettre de filtrer les contenus selon de nombreux critères, comme une catégorie, une étiquette, un auteur ou encore des champs personnalisés. Ces possibilités étant toujours en évolution, les réglages définitifs pourront encore évoluer avant la sortie officielle de la fonctionnalité.
4. Insérer les données dynamiques
Une fois le type de contenu défini, chaque élément du modèle peut être connecté aux données dynamiques associées au contenu affiché dans la boucle.
Concrètement, un même modèle pourra récupérer automatiquement les informations propres à chaque élément : le titre, l’image mise en avant, le prix d’un produit, l’extrait d’un article ou encore des champs personnalisés provenant d’ACF.
La structure visuelle reste identique pour chaque résultat, mais les informations affichées s’adaptent automatiquement au contenu concerné. C’est ce principe qui permet de créer des catalogues, des grille de blog personnalisée ou des listes personnalisées sans avoir à créer chaque élément manuellement.
Le Loop Builder repose donc sur une séparation claire entre la conception du design et les données affichées : vous créez une seule mise en page, WordPress se charge ensuite de la remplir avec les bons contenus.
Exemples d’utilisation d’une boucle personnalisée
Le Loop Builder de Divi 5 ouvre de nombreuses possibilités pour afficher des contenus avec une mise en page adaptée à chaque projet. Voici quelques exemples d’utilisation concrets.
Une page de blog par catégorie
Certaines catégories d’un blog peuvent nécessiter une présentation différente selon leur contenu. Les actualités peuvent par exemple privilégier une grande mise en avant des images, tandis que des guides ou tutoriels peuvent utiliser une présentation plus compacte centrée sur la lecture.
La requête permet de choisir les contenus qui seront affichés, tandis que le modèle de boucle détermine la façon dont ces contenus seront présentés à l’écran.
Une sélection de produits plus éditoriale
Les boutiques en ligne utilisent souvent une présentation standardisée pour leurs catalogues.Avec une boucle personnalisée, l’affichage des produits peut être adapté à l’identité visuelle du site. Les informations importantes sont ainsi mises en avant pour les visiteurs.
Par exemple, une fiche produit peut intégrer des éléments supplémentaires comme un badge promotionnel, des caractéristiques spécifiques, des avis clients ou des champs personnalisés, sans être limité par la structure classique d’un module WooCommerce.
Un répertoire d’événements ou de contenus spécialisés
Les événements, réalisations, études de cas ou ressources téléchargeables sont généralement gérés comme des types de contenus distincts dans WordPress.
Une boucle personnalisée permet de les présenter sous forme de grille ou de liste en récupérant automatiquement leurs informations associées : image, titre, date, catégorie, description ou champs personnalisés.
Cette approche devient intéressante pour les sites qui publient régulièrement des contenus structurés et souhaitent conserver une présentation uniforme sans devoir intervenir manuellement à chaque ajout.
Bonnes pratiques avant de créer une boucle
La liberté offerte par un Loop Builder apporte de nombreuses possibilités, mais elle repose sur une organisation claire des contenus. Avant de mettre en place une boucle, il est important de définir quelles informations doivent apparaître et de structurer correctement les données dans WordPress.
Préparer les informations répétées
Chaque contenu affiché par la boucle doit disposer des informations nécessaires à son affichage. Si votre carte affiche une image mise en avant, un titre et un extrait, ces informations doivent être renseignées de manière cohérente. Une boucle ne corrige pas les contenus incomplets : elle révèle au contraire les différences entre les fiches.
Commencer par un objectif simple
Avant de créer une requête complexe, commencez avec un besoin clair : afficher les derniers articles d’une catégorie, les produits d’un ensemble donné ou un type de publication précis. Vous pourrez ensuite ajuster les critères de sélection lorsque les options de requête avancées seront disponibles.
Penser à la lisibilité du modèle
Une carte répétée trop chargée devient vite difficile à parcourir. Priorisez l’information essentielle. Pour un blog, le titre et l’image peuvent suffire. Pour une liste d’événements, la date peut être l’information dominante. La structure doit aider à comparer rapidement les contenus entre eux.
Les erreurs à éviter avec les boucles Divi
Une boucle personnalisée peut être très puissante, mais voici quelques erreurs à éviter :
- Utiliser une boucle pour du contenu fixe : Le Loop Builder permet d’afficher automatiquement des contenus WordPress comme des articles ou des produits.Pour une page avec un contenu fixe, il vaut mieux utiliser une mise en page Divi classique.
- Mélanger requête et présentation : définissez d’abord quels contenus doivent apparaître, puis travaillez leur modèle visuel.
- Créer un modèle trop spécifique : une carte utile doit rester lisible même si les titres, images ou extraits ont des longueurs différentes.
- Supposer que tous les réglages sont déjà finalisés : le Loop Builder de Divi 5 est annoncé comme une fonctionnalité à venir, avec des options avancées encore en développement.
- Oublier les données dynamiques : les modules du modèle doivent être reliés aux informations du contenu de la boucle pour que chaque répétition soit pertinente.
Conclusion
Le Loop Builder de Divi 5 marque une nouvelle étape dans la création de sites WordPress. En offrant plus de liberté dans la conception des affichages dynamiques, il permet de créer des structures plus personnalisées tout en conservant la simplicité de l’éditeur Divi.
Même si certaines fonctionnalités restent encore en évolution, il ouvre déjà de nouvelles possibilités pour concevoir des sites plus flexibles, mieux adaptés aux besoins de chaque projet.
Chez Oaka, nous vous accompagnons dans la création de sites WordPress avec Divi, de la stratégie à la mise en ligne. Contactez-nous pour donner vie à votre projet.