Vous souhaitez afficher un contenu dynamique comme les articles de blog, les produits ou les types de messages personnalisés dans des dispositions entièrement personnalisées - sans toucher une ligne de code? Le module de boucle dans Beaver Builder le permet.

Introduit dans Beaver Themer 1.5 et Beaver Builder 2.9, le module de boucle est un outil puissant qui vous permet de concevoir des dispositions répétables à l'aide de modules standard de constructeur de castor. Que vous créiez un blog, un portefeuille, une liste d'événements ou une boutique WooCommerce, ce module vous donne un contrôle de conception complet avec du contenu dynamique à la base.

Dans ce guide, nous décomposons comment utiliser le module de boucle pour créer des dispositions dynamiques modernes qui améliorent la conception, les performances et la flexibilité de votre site.

Qu'est-ce que le module de boucle?

Le module de boucle est un conteneur flexible qui boucle via du contenu interrogé et l'affiche à l'aide d'une mise en page que vous créez. Au lieu de s'appuyer sur des modèles WordPress par défaut, vous pouvez créer vos propres conceptions personnalisées - complets avec des modules, des connexions de champ et une logique conditionnelle.

Le module de boucle ne se limite pas aux articles de blog ou aux types de messages personnalisés - il peut gérer une large gamme de contenu dynamique. Voici quelques façons puissantes que vous puissiez l'utiliser pour créer des dispositions personnalisées et améliorer votre site:

• Catégories ou balises WooCommerce - Affichez les catégories de produits ou les balises connexes sur des pages de produits individuelles en utilisant la source de requête Taxonomies.
• Grille de contenu personnalisée - Afficher le contenu dynamique comme les membres de l'équipe ou les témoignages à l'aide de la source de requête de répéteur ACF sur des pages telles que «Meet the Team» ou des listes de services.
• Related Posts - Feature du contenu du blog pertinent sur des pages publiques uniques avec la source de requête de la relation ACF, contribuant à stimuler l'engagement et à réduire les taux de rebond.

Chaque élément de la boucle utilise votre conception personnalisée et tire des données dynamiques telles que le titre de publication, l'image en vedette, l'extrait, etc.

Caractéristiques clés du module de boucle

Le module de boucle regorge de capacités qui le rendent idéal pour construire des pages flexibles et riches en contenu:

• Requête du contenu dynamique de tout type de message (standard ou personnalisé)
• Utilisez n'importe quel module de constructeur de castors à l'intérieur de la disposition de la boucle
• Connectez les champs dynamiquement (par exemple, titre, image en vedette, post méta)
• Choisissez parmi plusieurs types de disposition comme la grille, la liste ou le carrousel
• Ajouter des filtres et une pagination pour améliorer l'expérience utilisateur

Cette combinaison de personnalisation et d'automatisation vous permet de créer des mises en page avancées sans écrire HTML, PHP ou CSS.

Comment construire une boucle personnalisée

La création d'une disposition de contenu personnalisée avec le module de boucle est simple, flexible et ne nécessite pas de code. Que vous souhaitiez commencer par une disposition prêt à l'emploi ou construire le vôtre à partir de zéro, le module de boucle vous donne un contrôle total sur la façon dont votre contenu dynamique est affiché.

Options de disposition prédéfini du module de boucle

Lorsque vous faites glisser le module de boucle sur votre page, vous serez invité à choisir parmi les dispositions prédéfinies suivantes: liste, colonnes, catégories et catégories de produits.

Les dispositions prédéfinies vous donnent une longueur d'avance en offrant des modules pré-arrangés que vous pouvez entièrement personnaliser. Ajustez les paramètres de boucle pour répondre à vos besoins, réorganiser ou supprimer les modules existants et en ajouter de nouveaux pour affiner votre disposition. Ces conceptions prêtes à l'emploi vous aident à créer des affichages de contenu poli et réactifs plus rapidement.

Construire à partir de zéro avec une disposition vierge

Vous préférez créer quelque chose de totalement personnalisé? Choisissez l'option de mise en page vide et suivez ces étapes:

1. Ajoutez le module de boucle à votre page ou publiez dans l'éditeur Beaver Builder.
   
2. Sélectionnez la disposition vide pour commencer par un conteneur de boucle vide.
   
3. Configurez les paramètres de boucle pour définir le contenu que vous souhaitez afficher, tels que les articles de blog, les produits WooCommerce, les champs de répétition ACF ou les types de messages personnalisés.
   
4. Faites glisser des modules dans le conteneur de boucle pour construire votre disposition à partir de zéro. Ajoutez tous les modules de constructeur de castors dont vous avez besoin, tels que des en-têtes, des photos, des icônes, des boutons, etc.
   
5. Utilisez des connexions de champ pour attirer des contenus dynamiques comme les titres, les images, les prix ou les champs personnalisés pour chaque élément de boucle.
   
6. Organisez et stylisez vos modules à l'aide des outils de glisser-déposer de Beaver Builder.

Cette configuration fonctionne très bien pour les utilisateurs ou les concepteurs avancés qui souhaitent un contrôle total.
Utilisez-le pour créer des dispositions de blog personnalisées, des grilles de produit ou des répertoires d'équipe - aucun code requis.

Utilisez le module de la boîte pour le contrôle de la disposition

Le module Box est un compagnon essentiel du module de boucle en ce qui concerne la précision de la précision et la flexibilité du style.

• Enveloppez le module de boucle à l'intérieur d'un module de boîte pour gérer la largeur, le rembourrage, la marge et le style de l'arrière-plan du conteneur extérieur. Cela vous donne un contrôle total sur la façon dont votre contenu en boucle se trouve dans la disposition globale de la page.
• Nid un module de boîte à l'intérieur de la boucle pour regrouper le contenu intérieur de chaque élément de boucle. Cette configuration vous permet de tirer parti des techniques de mise en page avancées comme CSS Grid ou Flexbox . Par exemple, vous pouvez créer une disposition à deux colonnes dans chaque élément de boucle. Placez une image à gauche et le texte à droite - avec un contrôle complet sur l'espacement et l'alignement.

L'utilisation du module Box aide stratégiquement à maintenir des conceptions propres et réactives tout en améliorant la structure visuelle de votre contenu dynamique.

Paramètres de requête: quel contenu s'affichera?

L' onglet Contenu dans le module de boucle vous permet de contrôler comment le contenu de boucle est interrogé et affiché tel que:

• Choisissez le type de message (publications, pages, CPTS, produits, etc.)
• Filtre par taxonomie, catégorie, étiquettes ou auteur
• Afficher le contenu en fonction de l'état du message ou de la date
• Déposer les décalages, les limites de tri et les limites de poste

Cela comprend la source de requête, le nombre d'éléments à afficher, la commande et les options de filtre avancées.

Pagination

L'onglet Pagination vous permet de contrôler la façon dont le contenu est divisé et affiché sur plusieurs pages - idéal pour améliorer la navigation et l'expérience utilisateur.

• Numéros : affiche des liens numérotés sous vos messages. Cliquez sur un nombre charge une nouvelle page avec l'ensemble des messages correspondant.
• Scroll : charge automatiquement des messages supplémentaires au fur et à mesure que l'utilisateur défile, en gardant du contenu sur une seule page.
• Aucun : désactive la pagination. Utilisez cette option pour afficher un nombre limité de messages, comme les trois derniers, sans contrôles de navigation.
• Articles par page : Définit le nombre d'éléments par page. La valeur par défaut est 10.

Ces options aident à adapter la livraison de contenu à vos objectifs de mise en page et d'interaction utilisateur.

Données dynamiques avec les connexions de champ

À l'intérieur de votre disposition de boucle, vous pouvez utiliser des connexions de champ pour extraire dynamiquement des données de poste telles que:

• Titre de poste
• Image en vedette
• Extrait ou contenu complet
• Champs personnalisés
• Auteur, date, catégorie, balises

Tout module qui prend en charge le contenu dynamique (comme le cap, la photo, le bouton, le HTML, etc.) peut être connecté aux données du post.

Style avancé et logique conditionnelle

Vous souhaitez styliser différents types de publication ou afficher / masquer les éléments en fonction des conditions? Le module de boucle prend en charge la logique conditionnelle et les classes CSS personnalisées .

Par exemple, vous pourriez:

• Masquer les boutons si un champ personnalisé est vide
• Ajouter des badges pour les messages en vedette
• Appliquer différentes couleurs ou styles en fonction de la catégorie post

Cela vous permet de définir l'expérience utilisateur et de maintenir une marque cohérente sur votre contenu.

Cas d'utilisation du module de boucle réelle

Le module de boucle dans Beaver Builder est incroyablement polyvalent, vous permettant d'afficher le contenu dynamique dans les mises en page qui correspondent à vos besoins de conception. Voici quelques façons puissantes de l'utiliser:

• Archives de blog: Créez une grille visuellement engageante ou une liste de vos derniers articles de blog avec des images et des extraits en vedette.
• Produits WooCommerce: présentez des produits WooCommerce dans une grille personnalisable avec des prix dynamiques, des images et des boutons Add-to CART.
• Portfolio Showcase: mettez en surbrillance vos projets ou études de cas avec des dispositions flexibles qui reflètent votre style de marque.
• Témoignages: affichez des témoignages clients à partir d'un message personnalisé et les styliser pour correspondre à la conception de votre site Web.
• Listes d'événements: répertoriez les événements ou webinaires à venir chronologiquement, avec des dates, des emplacements et des descriptions d'événements.
• Membres de l'équipe: Présentez votre équipe avec des photos, des noms, des titres et du BIOS - liez chaque élément à une page de profil détaillée.
• Listes immobilières: Présentez des listes immobilières avec des images de propriété, des prix et des détails clés à l'aide d'un type de publication personnalisé.
• Catalogue de cours: Affichez un catalogue de cours ou d'ateliers en ligne, avec des titres, des descriptions et des liens d'inscription.
• Listes d'emplois: créez un tableau de travail personnalisé avec des listes dynamiques qui incluent des titres, des emplacements et des résumés de rôles brefs.
• Index de recettes: présente une collection de recettes avec des images, des titres et des descriptions - idéal pour les blogueurs alimentaires.

Ces cas d'utilisation démontrent la polyvalence du module de boucle dans Beaver Builder. Il peut être utilisé dans diverses industries et sites Web, vous aidant à créer des dispositions de contenu dynamiques, engageantes et personnalisées.

Réflexions finales: pourquoi utiliser le module de boucle?

Le module de boucle dans Beaver Builder vous donne la puissance de créer des dispositions dynamiques entièrement personnalisées. Que vous créiez un blog, un magasin ou un répertoire de contenu complexe, ce module vous permet de contrôler la façon dont vos données sont affichées, tout en gardant votre flux de travail visuel et sans code.

Si vous êtes sérieux au sujet de la construction de sites WordPress modernes et personnalisés avec Beaver Builder, le module de boucle est un incontournable dans votre boîte à outils. Explorez la documentation du module de boucle complète ici.