Comment construire une grille de portefeuille avec le constructeur de boucle Divi 5

Une grille de portefeuille est un moyen simple et efficace de présenter votre travail. Avec le constructeur de Loop de Divi 5, vous pouvez concevoir une disposition de carte réutilisable et le laisser passer automatiquement à partir de votre contenu directement dans le constructeur visuel.

Contrairement aux modules à usage unique, Loop Builder vous permet d'utiliser n'importe quel élément Divi, de définir une requête pour les publications ou les types de messages personnalisés et publier une grille réactive qui hérite de vos styles globaux. Dans ce tutoriel, nous créerons une grille de portefeuille étape par étape à l'aide du type de publication personnalisé des projets.

Comprendre le constructeur de Loop de Divi 5

Le Builder de Loop de Divi 5 est une nouvelle fonctionnalité qui vous permet de créer facilement des dispositions de contenu dynamiques en boucle. Contrairement aux modules de blog ou de portfolio, Loop Builder vous permet de boucler facilement n'importe quel élément Divi pour afficher des publications, des termes ou des utilisateurs. Cela signifie que vous pouvez créer un seul modèle qui remplit automatiquement avec le contenu de votre site WordPress.

Loop Builder prend en charge divers types de contenu, y compris les types de publication personnalisés (CPT), les produits WooCommerce et les champs personnalisés avancés (ACF), vous permettant d'afficher exactement votre portfolio.

Avantages clés du constructeur de boucle

Grâce à ses options de personnalisation robustes, Loop Builder est un ajustement parfait pour créer des grilles de portfolio. Voici ses fonctionnalités hors concours:

• Flexibilité pour concevoir des modèles de boucle personnalisés: avec Loop Builder, vous n'êtes pas confiné aux dispositions prédéfinies. Vous pouvez utiliser n'importe quel module Divi pour concevoir un modèle unique pour chaque élément de portfolio.
• Requêtes personnalisables: Loop Builder vous permet de définir le contenu qui apparaît dans votre grille. Filtrez par catégorie, type de poste ou champs personnalisés pour afficher uniquement les éléments souhaités dans votre commande préférée.
• Intégration de contenu dynamique: tirez de manière transparente des données de contenu dynamique comme les titres de projet, les images en vedette, les descriptions ou les métadonnées personnalisées pour rendre chaque élément de portfolio engageant.

Ces fonctionnalités font du constructeur de boucle de Divi 5 un outil idéal pour créer un portfolio professionnel poli entièrement personnalisable et facile à naviguer.

Construire un portefeuille avec un constructeur en boucle

Nous utiliserons les projets intégrés de Divi Custom Post Type (CPT) pour créer un portefeuille avec le Builder Loop. Les projets CPT sont conçus pour présenter le contenu de style portfolio, ce qui en fait un choix idéal pour notre disposition. Bien que Divi propose un module de portfolio, nous utiliserons le Builder Loop car il nous offre des options illimitées pour créer un portefeuille unique.

Commencez par ajouter une nouvelle ligne à votre page. Pour cela, nous utiliserons une disposition à 3 colonnes .

Nous allons ajouter un module de cap dans la première colonne .

Entrez un titre ou utilisez Divi AI pour en générer un pour vous.

Accédez à l'onglet Design , choisissez Inter pour la police de cap , lumière pour le poids de la police de cap , définissez la taille du texte de titre sur 2EM et attribuez une hauteur de ligne de cap 1.3EM .

Maintenant, construisons notre boucle. Accédez à la 2ème colonne de notre ligne.

Localisez l'onglet Loop , développez-le et activez la bascule de l'élément de boucle .

Ensuite, choisissez le type de requête . Pour ce tutoriel, nous utiliserons les projets CPT intégrés de Divi. Sous Type post , sélectionnez Projets . Nous voulons présenter tous les projets, nous allons donc tout laisser tel quel.

Vous pouvez choisir la commande par paramètres, les messages par page et le décalage de publication . Étant donné que notre première colonne contient un module d'en-tête , nous allons définir les messages par page sur 8 . De cette façon, la sortie sera même sur notre ligne à trois colonnes .

Vous remarquerez que notre boucle essaie d'empiler toutes les colonnes. Pour résoudre ce problème, nous devons aller aux paramètres de ligne. Accédez à la ligne à 3 colonnes , cliquez sur l'onglet Conception et localisez les paramètres de mise en page .

Développez l'onglet Paramètres de mise en page . Localisez le réglage de l'emballage de mise en page et sélectionnez Wrap . Cela reviendra notre boucle en 3 colonnes.

Styliser la colonne de boucle

Maintenant que les paramètres de boucle sont en place, il est temps de coiffer nos colonnes. Les paramètres de style que nous choisissons ici affecteront les colonnes restantes dans la boucle. Dans la ligne à 3 colonnes , cliquez dans la 2ème colonne et cliquez sur l'onglet Conception . Accédez à la liste déroulante de la bordure et attribuez un rayon de bordure de 15px à la colonne. Sous les styles de bordure , ajoutez une largeur de bordure 1px et utilisez # 000000 comme couleur de bordure .

Ajouter du contenu à la boucle

Nous pouvons commencer à ajouter du contenu à la boucle avec les styles de la colonne attribués. Cliquez pour ajouter un module d'image dans la 2ème colonne . Une fois ajouté, chaque colonne dans la boucle affichera un espace réservé d'image.

Nous utiliserons la puissance de contenu dynamique de Divi 5 pour attirer l'image en vedette de notre projet. Planer au-dessus de l'image pour révéler les icônes. Cliquez sur l' icône de contenu dynamique pour continuer.

Choisissez l'image en vedette de boucle lorsque les options apparaissent.

Notre boucle placera l' image en vedette de chaque projet directement dans notre boucle de portefeuille.

Ensuite, ajoutez un module d'en-tête à la 2ème colonne sous l' image en vedette . Cela sera utilisé pour le titre du projet . Répétez les étapes ci-dessus pour ajouter le titre . Cependant, choisissez le titre de publication de boucle cette fois.

Dans l'onglet Design , sélectionnez H3 pour le niveau d'en-tête , inter pour la police d'en-tête , centre pour l'alignement du texte d'en-tête et 20px pour la taille du texte.

Enfin, nous allons ajouter un bouton qui relie à chaque projet . Ajoutez un module de bouton à la 2ème colonne sous le titre de publication . Cliquez sur l' icône de contenu dynamique dans l' URL du lien de bouton et sélectionnez le lien de boucle .

Passez à l'onglet Design et définissez l' alignement sur le centre .

Développez les paramètres de déroute de bouton et activez les styles personnalisés pour le bouton . Entrez les paramètres de conception suivants:

• Contexte du bouton: # 000000
• Radius de la bordure du bouton: 15px
• Largeur de la bordure du bouton: 0px
• Police bouton: inter
• Couleur du texte du bouton: #ffffff
• Taille du texte du bouton: 16px
• Marge: 15px en bas
• Rembourrage: 15px supérieur et inférieur, 35px à gauche et à droite

C'est ça! Comme vous pouvez le voir, la création d'une boucle avec Divi 5 est un processus simple.

Styles changeants avec Builder Loop

La modification des styles de votre boucle est tout aussi simple que la création de la boucle elle-même. Disons que vous voulez passer d'une lumière à un thème sombre pour votre boucle. Faire des changements de conception ne prend que quelques secondes. Vous pouvez modifier la couleur d'arrière-plan de la section, puis apporter des modifications aux éléments de boucle individuels en quelques clics.

Il n'est pas nécessaire de modifier les éléments de boucle individuellement. Puisqu'ils sont tous connectés, vous ne devez modifier les modules qu'une seule fois et Divi 5 appliquera automatiquement les styles mis à jour sur chaque module de la boucle.

Vous pouvez ajouter plus de modules à la boucle, comme l' extrait du projet , la date de publication, le nombre de commentaires , la biographie de l'auteur , les champs personnalisés , etc.

Si vous souhaitez resserrer l'espace autour des éléments dans votre boucle, vous pouvez ajuster l' écart vertical dans les paramètres de ligne et de colonne . Cela contrôle la quantité d'espace entre chaque ligne et les modules individuels à l'aide du système de mise en page Flexbox de Divi 5, vous permettant de perfectionner l'apparence de votre boucle.

Tester et affiner la boucle de portefeuille

Une fois que vous avez construit un portefeuille, il est temps de le tester pour vous assurer que tout fonctionne comme prévu. Commencez par prévisualiser la grille sur l'avant à l'aide du lien d'aperçu dans la barre supérieure du constructeur visuel.

Vérifiez que le titre de chaque projet, l'image en vedette , l'extrait et le lien de boucle tirent correctement des projets CPT. Assurez-vous qu'aucun espace réservé n'est des éléments brisés qui apparaissent.

De retour dans le constructeur visuel, vérifiez pour vous assurer que la mise en page s'adapte correctement à l'aide de points d'arrêt réactifs personnalisables de Divi 5. Par défaut, Divi 5 propose 3 points d'arrêt - un pour le bureau , la tablette et le téléphone - mais vous pouvez activer jusqu'à 7 en cliquant sur le menu Ellipsis au milieu de la barre supérieure du constructeur visuel.

Naviguez dans chaque point d'arrêt , vérifiez la disposition et effectuez des ajustements si nécessaire.

Pour rendre la disposition plus conviviale, vous pouvez utiliser le paramètre de structure de colonne de modification de Divi 5 pour modifier le nombre de colonnes affichées sur des appareils plus petits.

Meilleures pratiques et conseils

Pour vous assurer que vous tirez le meilleur parti de Divi 5 et Loop Builder, voici quelques meilleures pratiques à suivre lors de la construction de votre portefeuille.

1. Assurer la cohérence de la conception avec les variables de conception

La fonction de variables de conception de Divi 5 vous permet de définir une typographie, des couleurs et un espacement cohérents sur votre page de portefeuille. Dans le constructeur visuel, définissez des variables globales pour les polices, les couleurs et le rembourrage / marges pour garantir que chaque élément de portefeuille semble uniforme. Pour créer des variables , cliquez sur l' icône du gestionnaire de variables dans le menu de gauche dans le constructeur visuel.

À partir de là, vous pouvez attribuer des polices, des couleurs globales , et plus encore, en vous assurant que vos conceptions sont cohérentes sur l'ensemble de votre site Web, pas seulement votre page de portefeuille.

2. Considérez l'accessibilité

L'accessibilité garantit que tous les utilisateurs, y compris les personnes handicapées, peuvent naviguer et profiter de votre travail. Assurez-vous d'ajouter du texte alternatif pour les images lorsque vous les téléchargez dans la galerie de médias. Cela aide les lecteurs à dépister le contenu des utilisateurs malvoyants.

Il est également bon de sélectionner les couleurs avec des rapports de contraste suffisants pour assurer la lisibilité aux utilisateurs ayant des déficiences visuelles.

3. Économisez et réutilisez les modèles

Après avoir perfectionné votre modèle de constructeur de boucle, enregistrez-le dans la bibliothèque Divi en cliquant avec le bouton droit sur la section du portefeuille et en sélectionnant Enregistrer dans la bibliothèque . Donnez-lui un nom descriptif pour une référence facile. Cela vous permet de réutiliser le modèle sur d'autres pages sans reconstruire à partir de zéro.

Pour utiliser le modèle sur d'autres sites Web, vous pouvez l'enregistrer sur Divi Cloud et l'importer dans d'autres projets Web en un seul clic.

La sauvegarde des modèles rationalise votre flux de travail et vous garantit que vous pouvez rapidement déployer des grilles de portefeuille professionnels pour les projets futurs.

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!

Essayez le constructeur Loop dans Divi 5 aujourd'hui

Le constructeur de boucle de Divi 5 facilite la création de grilles de portfolio dynamiques, vous permettant de présenter votre travail avec style et efficacité. En tirant parti des projets intégrés CPT et des fonctionnalités puissantes du constructeur Loop, vous pouvez créer des grilles flexibles et entièrement personnalisables qui attirent dynamiquement le contenu de votre projet. Sa flexibilité vous permet de concevoir des dispositions uniques à l'aide de n'importe quel module Divi, de configurer des requêtes pour afficher des projets spécifiques et de créer des grilles réactives qui brillent sur n'importe quel appareil.

Êtes-vous prêt à donner vie à votre portefeuille? Plongez dans la dernière libération publique Alpha de Divi 5 et expérimentez votre disposition de portefeuille. Que vous soyez un pigiste présentant des projets ou une entreprise mettant en évidence le travail client, Loop Builder vous permet de créer facilement un écran professionnel et dynamique.