Loop Builder Divi 5 : Personnaliser vos grilles de Blog
Le Loop Builder de Divi 5 révolutionne la création de pages de blog sous WordPress. Fini les limitations du module blog classique : vous pouvez désormais concevoir des grilles d’articles entièrement sur mesure, ajouter des boutons, personnaliser chaque élément et laisser libre cours à votre créativité. Dans ce tutoriel, je vous montre comment créer une page de blog en grille avec le constructeur de boucle de Divi 5, étape par étape.
Qu’est-ce que
le Loop Builder de Divi 5 ?
Le Loop Builder (constructeur de boucle en français) est une fonction récente de Divi 5 qui remplace les modules classiques de blog ou de boutique. Il vous donne une liberté totale pour mettre en page des contenus répétitifs comme :
- Des cartes d’articles de blog
- Des grilles de produits WooCommerce
- Des calendriers d’événements
Contrairement au module blog standard de Divi, le Loop Builder ne vous impose aucune structure prédéfinie. Vous ajoutez exactement les modules dont vous avez besoin.
Pourquoi utiliser le Loop Builder plutôt que le module blog classique ?
Les limites du module blog standard
Le module blog de Divi (toujours disponible dans Divi 5) fonctionne avec une structure fermée :
- Deux mises en page uniquement : grille ou plein écran
- Impossible d’ajouter un bouton personnalisé
- Options de personnalisation limitées
Les avantages du Loop Builder
Avec le Loop Builder, vous pouvez :
- Ajouter autant de modules que vous le souhaitez (boutons, catégories, résumés, etc.)
- Personnaliser entièrement la structure de vos cartes d’articles
- Créer des mises en page uniques et professionnelles
Préparer vos articles de blog
Pour ce tutoriel, j’ai créé 6 articles de blog sur le thème de la remise en forme, répartis en deux catégories :
- Nutrition
- Entraînement
Chaque article contient un titre, un texte et une image de mise en avant. L’objectif est de créer la page de présentation des articles avec le Loop Builder.
Comment créer une grille de blog avec le Loop Builder : les 4 étapes
Voici les 4 étapes pour créer votre page de blog personnalisée :
Étape 1 : Créer la structure initiale
- Créez une nouvelle page (ex : « Blog Loop Builder »)
- Publiez-la pour qu’elle apparaisse dans votre menu
- Ouvrez le Divi Builder
- Ajoutez une section, puis une rangée
- Insérez les modules suivants dans la colonne :
- Module Image
- Module Bouton
- Module Texte
- Module Titre (Heading)
Cette structure constituera votre carte d’article type.
Étape 2 : Activer l’élément Loop et paramétrer la mise en page
Activer le Loop
- Cliquez sur la rangée (Row)
- Allez dans les paramètres de la colonne
- Cliquez sur Edit Item
- Dans l’onglet Loop, activez l’élément Loop
✅ Votre structure se multiplie automatiquement pour correspondre à vos 6 articles !
Configurer l’affichage en grille
- Revenez à la rangée parent (Back to parent)
- Allez dans Design > Layout
- Choisissez Layout Wrapping (retour à la ligne)
- Retournez dans la colonne (Edit)
- Allez dans Design > Sizing
- Choisissez 3 colonnes au lieu de « Full Width »
Vous obtenez ainsi une grille de 2 lignes avec 3 articles par ligne.
Étape 3 : Connecter le contenu dynamique
Maintenant, vous allez lier chaque module au contenu dynamique de vos articles. Les modifications sur une carte se répercuteront automatiquement sur toutes les autres.
Module Image
- Cliquez sur le module Image
- Cliquez sur Insert Dynamic Content (icône en forme de pile de disques)
- Sélectionnez Loop Featured Image
Module Titre
- Cliquez sur le module Titre
- Cliquez sur Insert Dynamic Content
- Sélectionnez Loop Post Title
Module Texte (aperçu)
- Cliquez sur le module Texte
- Cliquez sur Insert Dynamic Content
- Sélectionnez Loop Excerpt
Module Bouton
- Cliquez sur le module Bouton
- Changez le texte en « Lire plus »
- Dans Link > Button Link URL, cliquez sur Insert Dynamic Content
- Sélectionnez Loop Link
Ajouter les catégories
- Ajoutez un nouveau module Texte au-dessus de l’image
- Cliquez sur Insert Dynamic Content
- Sélectionnez Loop Post Terms > Catégories
Étape 4 : Ajuster les espacements et finaliser
Réduire les espaces verticaux
- Allez dans la rangée > colonne > Edit Item
- Design > Layout > Vertical Gap : réduisez à 12px environ
Ajuster le titre
- Sélectionnez le module Titre
- Passez en H2
- Centrez le texte si nécessaire
Ajouter une bordure à la carte
- Allez dans les paramètres de la colonne
- Design > Border : ajoutez un bord de 1px
Exemples de structures alternatives avec le Loop Builder
Le Loop Builder permet de créer différentes structures. Voici deux exemples :
Exemple 2 : Image en fond avec 2 colonnes
- Supprimez l’aperçu de texte
- Placez l’image en fond de colonne
- Passez en 2 colonnes au lieu de 3
- Ajoutez un filtre sur l’image de fond
Exemple 3 : Affichage vertical avec module résumé
- Passez en affichage colonne (vertical)
- Ajoutez un module Résumé en bas pour afficher l’auteur et la date de création
Pourquoi passer à Divi 5 maintenant ?
Divi 5 est en version bêta et la version finale arrive bientôt. En achetant maintenant :
- Vous utilisez Divi 4 immédiatement
- Vous testez Divi 5 en avant-première
- Vous recevez la version finale et ses mises à jour au même prix
Nouveauté majeure : Divi 5 propose une offre à vie (un seul paiement pour un nombre illimité de sites).
👉 Lien affilié avec 10 % de réduction : Alpa14.com/Divi
Conclusion : Le Loop Builder, un game-changer pour Divi
Le Loop Builder de Divi 5 vous offre une liberté totale pour créer des grilles de blog, des pages produits WooCommerce ou des calendriers d’événements entièrement personnalisés. Plus besoin de vous contenter des modules standards : ajoutez les éléments dont vous avez besoin et créez des structures uniques.
Vous savez maintenant comment :
✅ Activer le Loop Builder
✅ Connecter le contenu dynamique
✅ Structurer des cartes d’articles sur mesure
✅ Créer plusieurs types de grilles
