Comment créer une boucle d'article de blog personnalisée avec le constructeur de boucle Divi 5

Votre marque ne doit pas être limitée par une disposition statique, nous visons donc à vous offrir une pleine flexibilité alors que Divi 5 continue de se développer. Le nouveau constructeur de boucle de Divi 5 est un grand pas dans cette direction; Il vous permet de concevoir un élément une fois et de le faire boucle en grilles ou listes dynamiques.

Dans ce didacticiel, nous vous montrerons comment configurer une boucle de blog personnalisée. Nous allons concevoir la liste, connecter les champs dynamiques, définir la requête et affiner la disposition pour une grille ou une liste propre. Allons-y!

Qu'est-ce que le constructeur de Loop de Divi 5

Avec le constructeur de Loop de Divi 5, vous concevez une seule mise en page «carte» dans le constructeur visuel en utilisant autant de modules Divi que vous le souhaitez, puis Divi le boucle pour chaque élément que vous choisissez d'afficher.

Abonnez-vous à notre chaîne YouTube

Activez l'élément de boucle sur une colonne, définissez une requête (publications, types de publiques personnalisés comme les projets, les termes ou les utilisateurs) et cartographier des champs dynamiques tels que des titres, des images en vedette, des catégories, des champs personnalisés et des boutons. Vous pouvez réorganiser les éléments, contrôler l'espacement et laisser tout hériter de vos styles mondiaux.

Le résultat est une liste réactive et réutilisable qui correspond à votre système sans avoir besoin de plugins supplémentaires ou de code personnalisé.

Comment fonctionne le constructeur de boucle

Vous pouvez activer le mode de boucle dans n'importe quelle section, ligne, colonne ou module en ouvrant son onglet de contenu et en activant la boucle.

À partir de ce moment, Divi répète automatiquement l'élément pour chaque message qui correspond à vos paramètres.

Voici où le contrôle réel arrive. Dans les paramètres de boucle, vous pouvez:

• Type de requête: Choisissez entre une requête de publication de base ou une requête de méta, un filtrage par catégories, des balises, des champs personnalisés ou d'autres métadonnées.
• Type de publication: Choisissez le type de contenu à afficher, des articles de blog aux produits à n'importe quel type de publication personnalisé.
• Inclure uniquement des publications avec des termes spécifiques: afficher uniquement des publications qui correspondent à certaines catégories, balises ou autres termes de taxonomie.
• Exclure les publications avec des termes spécifiques: supprimer les publications qui correspondent aux catégories, balises ou termes sélectionnés.
• Inclure uniquement des publications spécifiques: sélectionnez les publications individuelles à inclure.
• Exclure des messages spécifiques: masquer les messages individuels que vous ne souhaitez pas dans la boucle.
• Meta Query: Ajoutez des conditions de champ personnalisées pour contrôler ce qui apparaît.
• Commande par: Choisissez si les résultats sont triés par date, titre, commande de menu ou valeur de champ personnalisée.
• Ordre: Afficher les résultats dans l'ordre ascendant ou descendant.
• Posts par page: décidez du nombre de messages s'affichent avant la pagination.
• Offset de publication: sautez un certain nombre de messages dès le début, à portée de main pour éviter les doublons avec des sections en vedette.
• Ignorez les messages collants: choisissez si les publications collantes sont prioritaires ou sont traitées comme des messages normaux.

Une fois que vous avez défini votre requête, Divi remplit automatiquement chaque carte postale avec le bon contenu tout en gardant la mise en page et le style identiques. Vous vous concentrez entièrement sur l'apparence de la carte et Divi gère la population et la répétition. Avec tout contrôlé à partir d'un seul panneau, quelques paramètres sont tout ce qu'il faut pour maintenir votre liste de blog à jour sans modifications manuelles.

Apprenez tout sur le constructeur de Loop de Divi 5

Création d'une boucle d'article de blog personnalisée avec Divi 5

La construction d'une boucle de blog personnalisée avec Boucle Builder a deux parties. Tout d'abord, vous concevez la disposition des cartes postales, en choisissant exactement ce que le contenu apparaît et à quoi il ressemble. Ensuite, vous placez cette conception à l'intérieur d'une boucle, donc Divi le répète automatiquement pour chaque message que vous souhaitez afficher.

Nous allons le passer par étape par étape, en commençant par la disposition de la carte, puis en configurant la boucle.

Avant de commencer

Si vous passez du module de blog à Loop Builder et que vous avez déjà une page de liste de blog, vous pouvez passer à la création de votre mise en page de boucle. Sinon, voici la configuration rapide:

1. Ajouter une page de blog

À partir de votre tableau de bord WordPress, accédez aux pages> Ajoutez un nouveau , nommez-le «blog» et publiez-le.

Cette page sera le centre principal de vos messages.

2. Définissez votre page de blog dans les paramètres WordPress

Dans Paramètres> Reading , choisissez une page statique . Attribuez votre page d'accueil à la maison et votre nouvelle page de blog sur la page des articles.

Ceci n'est nécessaire que si vous utilisez une page d'accueil et une page de liste de blogs séparés.

3. Créez un modèle de générateur de thème

Ensuite, vous créerez un nouveau modèle pour votre page de liste de blog. Si vous en avez déjà un, vous pouvez le personnaliser. Assurez-vous que vous utilisez la dernière version Divi 5 pour accéder à Loop Builder.

Dans Divi> Builder de thème , cliquez sur Ajouter un nouveau modèle> Créer un nouveau modèle.

Attribuez-le à la page de votre blog et cliquez sur Créer un modèle.

Pour concevoir la page de liste de votre article de blog, cliquez sur Ajouter un corps personnalisé> Créer un corps personnalisé.

Vous entrerez maintenant dans le constructeur Divi, où nous commencerons à construire la disposition de la boucle.

1. Importer une mise en page

Commencer par une disposition peut vous faire gagner beaucoup de temps et vous aider à garder un design cohérent depuis le début. Pour ce tutoriel, j'utilise la mise en page de la page de blog de l'agence de marketing pour l'image de marque.

Vous pouvez choisir la même chose ou importer n'importe quelle mise en page qui vous donne une bonne base à partir du travail. Une fois dans votre modèle, vous aurez une structure prête à l'emploi, vous pouvez vous adapter à vos besoins au lieu de tout construire à partir de zéro.

2. Concevoir une carte de poste de blog

C'est là que la flexibilité de Loop Builder passe vraiment. Au lieu d'être enfermé dans la disposition fixe du module de blog, vous décidez exactement ce qui se passe sur votre carte postale et comment il est organisé.

Ajoutez une nouvelle section à votre modèle. Vous pouvez choisir parmi les structures pré-conçues ou créer le vôtre en utilisant l'option à une colonne.

Pour cet exemple, choisissons une section de structure de ligne à trois colonnes .

Dans la première colonne, nous créerons notre carte postale. Nous utiliserons un groupe de modules pour contenir tous les éléments.

Ensuite, ajoutez un module d'image pour l'image en vedette, un module d'en-tête pour le titre de publication et un module de texte pour l'extrait. Nous ajouterons également des méta-informations et un bouton de lecture afin que les visiteurs puissent cliquer sur le post complet.

Une fois que la structure de base est là, personnalisez la conception de la carte afin qu'elle s'adapte à votre marque. Ajuster les couleurs, les polices, l'espacement et tous les détails visuels uniques qui le font.

3. Activer l'emballage des lignes

Pour vous assurer que vos cartes s'affichent soigneusement en lignes sur différentes tailles d'écran, vous voudrez permettre l'emballage flexible. Sélectionnez la ligne principale et ouvrez l'onglet Design .

Aller à la mise en page. Assurez-vous que le style de mise en page est défini sur Flex.

Activez l'emballage de mise en page afin que les cartes puissent se déplacer vers une nouvelle ligne en cas de besoin, puis choisissez l' alignement d'emballage qui convient le mieux à votre conception.

4. Allumez la boucle

Vient maintenant l'étape qui rend tout automatique. Sélectionnez la colonne de la carte.

Ensuite, activez l'option de boucle sous l'onglet Contenu . Une fois la boucle activée, Divi répétera la conception de votre carte pour chaque message qui répond à vos paramètres de requête.

Pour cette mise en page, j'ai défini:

• Type de message: publications
• Posts par page: 10
• Commande par: date
• Ordre: descendant (le plus récent premier)
• Offset de publication: 0 (montrez tous à partir du dernier)
• Ignorez les messages collants: oui

Ces petits ajustements s'assurent que la grille affiche exactement les messages que vous souhaitez, dans l'ordre que vous souhaitez. Vous pouvez modifier ces valeurs à tout moment pour adapter la mise en page à différents besoins.

5. Ajouter du contenu dynamique

La dernière étape pour donner vie à la boucle consiste à connecter chaque module de votre carte en direct sur les données. C'est ce qui transforme une carte statique en une liste automatisée et toujours à jour. Par exemple:

• Lienz le module d'image à l' image en vedette du post.
• Lienz le module d'en-tête au titre de publication.
• Lien du module de texte à l' extrait post.
• Connectez le bouton Lire la suite à l' URL du post.

Une fois en boucle, Divi remplacera le contenu d'espace réservé par les données correctes pour chaque message dans la boucle.

Pour définir l'image en vedette, ouvrez le module d'image, survolez l'option Image et cliquez sur l'icône de contenu dynamique . Sélectionnez l'image en vedette et toutes les images pertinentes rempliront instantanément.

Répétez ceci pour le titre du post, la date publiée, l'extrait et tous les autres champs que vous souhaitez afficher.

Lorsque vous cliquez sur l'icône de contenu dynamique pour un module, vous verrez la plage complète des options spécifiques à la boucle. Vous n'êtes pas limité aux titres et aux images; Vous pouvez également afficher des dates de publication, des dates modifiées, des noms d'auteur, des comptes de commentaires, des catégories, des balises et même des champs personnalisés.

Cela signifie que votre carte postale peut être aussi minime ou aussi détaillée que vous le souhaitez. Construisez une grille propre et axée sur l'image, une disposition riche en contenu, ou même en surbrillance des champs de type post-post personnalisés. Concevez-le une fois et Divi le maintient précis et cohérent sur toute la boucle.

6. Enregistrer votre modèle et prévisualiser

Une fois que tout semble correct, effectuez des ajustements finaux et enregistrez des modifications dans le constructeur Divi et le constructeur de thème.

Aperçu de votre page pour voir la boucle en action. Voici la page de liste des blogs finis:

Le module de blog avait des limites, Loop Builder ne

Le module de blog fonctionnait bien, alors pourquoi poussons-nous le constructeur de boucle? Parce que «fin» signifiait fixe. Le module de blog vous a verrouillé dans son modèle, mais le constructeur de boucle vous donne une toile vierge. Vous choisissez la mise en page, l'ordre, le style et le divi les boucles automatiquement.

C'est le vrai changement: vous n'ajustez pas le modèle de quelqu'un d'autre, vous concevez le vôtre. Mettons cela à nouveau en pratique et concevons une mise en page différente d'une structure de module de blog typique.

Tout d'abord, ajoutez une ligne et une section à une colonne. Ajustez le dimensionnement et assurez-vous que le flexion et le capture flexible sont activés pour la ligne.

Cette ligne contiendra vos cartes de blog. Maintenant, ajoutez une autre ligne imbriquée à l'intérieur de la colonne pour créer votre structure de carte, avec l'image à gauche et les métadonnées du post à droite.

Concevez votre structure exactement comme vous le souhaitez, pas besoin de suivre la séquence du module de blog. Laissez la colonne de gauche vide pour l'instant. Nous ajouterons l'image en vedette comme image d'arrière-plan de la colonne.

Personnalisez votre carte d'inscription de blog.

Vous pouvez également modifier l'écart vertical de votre groupe de modules dans la colonne de droite dans la conception> Disposition> Option d'espace vertical .

Ensuite, nous activons l'option de boucle . Sélectionnez la première colonne dans la ligne parent.

Encore une fois, nous bouclent le contenu dynamique. À partir de l'image, accédez à l'option d'arrière-plan de la colonne de gauche, et le reste sera le même.

Ceci est votre boucle de blog de style liste. Maintenant, si vous souhaitez convertir cela en grille, modifiez simplement la largeur de la colonne. Parce que nous avons l' emballage flexible activé dans la ligne, les cartes envelopperont seules alors que nous changeons leur taille.

Si cela rend vos images trop grandes, vous pouvez supprimer l'extrait, modifier la structure de la colonne de la ligne et même ajuster l'espace horizontal à zéro.

Et comme ça, votre grille est également prête.

Cet exemple n'est qu'un aperçu de ce que le constructeur Loop rend possible. Le vrai point à retenir est que vous n'êtes plus limité à une poignée de dispositions prédéfinies. Chaque partie de la carte postale vous appartient à organiser, à style et à réinventer, et Divi s'occupe de le répéter automatiquement. Cette flexibilité est ce qui transforme une simple liste de blogs en quelque chose qui se sent conçu pour votre site.

Utilisez le module de pagination

Si vous limitez les messages par page dans votre requête de boucle, vous voudrez probablement un moyen pour les lecteurs de voir le reste. Ajoutez le module de pagination sous votre grille et définissez sa boucle cible sur l'élément où vous avez activé la boucle. Pour une procédure pas à pas complète, voyez comment utiliser ensemble le constructeur de boucle de Divi 5 et le module de pagination: lisez le tutoriel.

Téléchargez les modèles de blog

Si vous souhaitez expérimenter des grilles dans un modèle de blog, téléchargez les modèles utilisés dans ce tutoriel ci-dessous. Pour les importer, accédez à votre constructeur de thème Divi. Vous pourrez les importer à l'aide de l'icône d'import / export dans le coin droit.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons une copie du pack de mise en page Ultimate Divi Laying, plus d'autres ressources, astuces et astuces DiviM et gratuits. Suivez et vous serez un maître divi en un rien de temps. Si vous êtes déjà abonné, tapez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes abonné avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder à des packs de mise en page de Divi Gratuit!

Construisez votre boucle d'articles de blog personnalisée dans Divi 5 aujourd'hui

Avant le constructeur de boucle de Divi 5, la création d'une boucle d'article de blog vraiment personnalisée signifiait souvent la lutte avec des modèles rigides ou l'écriture de code personnalisé pour chaque petit changement. Maintenant, c'est un processus visuel du début à la fin. Vous concevez une carte une fois, liez ses modules en direct en direct et laissez Divi gérer le reste.

Si vous avez travaillé autour des limites du module de blog, Loop Builder est la mise à niveau que vous attendiez. Essayez-le dans votre prochain projet et voyez à quel point il est plus facile de créer un blog (ou un produit, un événement ou une liste) qui semble exactement comme vous le souhaitez!