Comment utiliser ensemble le constructeur de boucle de divi 5 et le module de pagination

Les listes statiques du contenu de publication sont très bien si vous affichez un ensemble sélectionné et limité de ces messages. Mais souvent, vous voulez que les utilisateurs accédent à plus de contenu que votre boucle d'origine. Vous souhaitez décider de la quantité de contenu initialement et donner aux lecteurs un moyen clair de se déplacer entre les lots. C'est là que le constructeur de boucle et le module de pagination de Divi 5 font une paire parfaite.

Ce message vous guidera dans le fonctionnement de chacun, puis vous montrera comment les connecter. À la fin, vous saurez comment construire des dispositions en boucle avec une pagination appropriée.

Rencontrez le constructeur de Loop de Divi 5

Le constructeur Loop est l'une des plus grandes mises à niveau de Divi 5. Cela vous donne la liberté que l'ancien module de blog n'a jamais pu. Tout élément peut devenir un conteneur «bouclé». Cela signifie que Divi le répétera automatiquement pour chaque message, produit ou type de message personnalisé qui correspond à votre requête.

Au lieu d'être coincé avec une liste de messages pré-conçue, vous concevez un élément «modèle» comme boucle. Divi utilise cela pour chaque résultat, en échangeant du contenu dynamique à partir de la requête de la boucle. Cela pourrait être:

• Titres tirés des données du post
• Images en vedette
• Champs personnalisés
• Liens vers des publications ou des produits complets

Vous pouvez utiliser n'importe quel module pour afficher ces données, et pas seulement un module spécifique au blog. Vous voulez un module de texte de présentation fantaisie montrant vos dernières annonces de cours? Fait. Besoin d'une disposition de carte de produit personnalisée pour les articles WooCommerce? Également fait.

C'est flexible parce que vous construisez vous-même la conception et la structure de contenu. Divi gère la répétition.

Passer du module de blog vers le constructeur de boucle signifie passer d'un modèle standard à un système de mise en page entièrement personnalisable. J'ai vraiment aimé construire avec ça, et je sais que vous aussi!

Rencontrer le module de pagination

La pagination est une façon sophistiquée de dire «diviser les résultats en pages». Au lieu de vider tous les éléments sur une seule page, vous les divisez en petits ensembles. Cela aide à:

• Temps de chargement de la page
• Lisibilité
• Scanabilité

Le module de pagination dans Divi 5 fait exactement cela, mais avec une certaine intégration intelligente. Ce n'est pas lié aux articles de blog uniquement. Au lieu de cela, il peut se connecter à n'importe quelle boucle que vous avez construite sur la page.

Il fonctionne en ajoutant deux éléments de navigation - des liens prévisibles et suivants - dont les étiquettes que vous pouvez personnaliser. S'il y a des éléments plus anciens au-delà de l'ensemble actuel, «plus âgé» (ou votre texte choisi) sera actif. S'il y a des articles plus récents, «plus récent» sera actif.

Construire une boucle + disposition de pagination

Passons à la configuration complète. Cet exemple suppose que vous voulez une boucle personnalisée avec une pagination en dessous. Voici la disposition Flex que j'ai créée qui affichera notre boucle. Vous pouvez télécharger la disposition entièrement construite ci-dessous.

Notez que la carte est définie sur ~ 50% de largeur et de flexion, donc lorsqu'une carte en boucle est dans un rang de flexion en soi, il deviendra pleine largeur à l'intérieur de son conteneur.

Étape 1: Créez le conteneur de boucle

Ajoutez une section à votre page. À l'intérieur, ajoutez le ou les modules que vous souhaitez répéter. Cela pourrait être un seul module (comme un texte de présentation) ou une disposition plus complexe de plusieurs modules dans une colonne ou un groupe.

Avec votre conteneur sélectionné, ouvrez ses paramètres et activez l'option Loop .

Choisissez votre source de données. C'est la «requête» que la boucle exécutera.

Tout d'abord, choisissez le type de requête. Selon la configuration de votre site Web, vous pouvez voir ces options:

• Type de publication (comme vos articles de blog ou vos types de messages personnalisés comme «Projets»)
• Conditions (catégories et taxonomies)
• Utilisateurs (renvoyez une liste d'utilisateurs du site, comme les auteurs)
• Champ de répéteur (un champ personnalisé créé par un plugin pour créer une boucle dans une boucle)

Ensuite, selon le type de requête que vous avez choisi ci-dessus, vous aurez la possibilité d'être plus précis. La sélection de «Type de publication» pourrait vous permettre d'utiliser des types de messages tels que:

• Articles de blog
• Projets
• Produits
• Quel que soit le CPT que vous avez conçu pour vous-même

De là, vous pouvez devenir encore plus précis avec ce qui devrait apparaître dans votre boucle. Tu peux:

• Inclure des éléments avec une catégorie ou une balise spécifique
• Exclure les éléments avec une catégorie ou une balise spécifique
• Inclure des articles spécifiques (par carte d'identité)
• Exclure des articles spécifiques (par carte d'identité)
• Créez votre propre question de méta (utile pour créer des inclusions / exclusions basées sur des données de champ personnalisées)
• Définissez l'ordre des requêtes de correspondance (comme alphabétique et descendant)
• Éléments par page Contrôles de valeur combien apparaissent dans la boucle
• Offset de publication, au cas où vous souhaitez démarrer votre boucle plus tard dans le cycle
• Ignorer les messages collants

C'est ainsi que notre exemple examine ce point. Nous avons créé la boucle et l'avons attribuée à notre type de publication de blog. J'ai défini la limite d'affichage sur 3.

Maintenant, nous devons attribuer les différents champs de texte et éléments que nous voulons hyperteler avec du contenu de boucle dynamique.

Étape 2: ajouter du contenu dynamique à l'intérieur de la boucle

Notre prochaine tâche consiste à cliquer dans chacun des modules de la boucle et à remplacer le texte ou les images statiques par des champs de contenu dynamique. Par exemple:

• Dans un module de texte, choisissez «Poster Title» dans le sélecteur de contenu dynamique
• Dans un module d'image, vous pouvez choisir «Image en vedette»
• Dans un module bouton, définissez le lien sur «Poster URL»
• Sur l'ensemble du conteneur en boucle, définissez également le lien sur «Post URL»

Cela indique à Divi de tirer le bon contenu pour chaque élément en boucle.

N'oubliez pas que tout à l'intérieur de la boucle est répété pour chaque résultat. Gardez le contenu non boucle (comme les titres, les publicités ou les CTA) à l'extérieur. Si vous avez un morceau de contenu dans la boucle qui n'est pas connecté à des données dynamiques, chaque élément de la boucle affichera ce texte en tant que (comme le texte "Read →" en bas à droite de l'exemple de carte).

Étape 3: Ajouter le module de pagination

En dessous de votre section Loop, ajoutez une nouvelle ligne. Insérez le module de pagination . Dans les paramètres du module, localisez le champ cible . Utilisez-le pour sélectionner votre boucle dans une liste déroulante de boucles sur la page. Cela relie les contrôles de pagination à cette boucle spécifique. Conseil de pro: Si vous utilisez des étiquettes d'administration, il est plus facile de sélectionner la bonne cible. Cela vaut également pour les interactions.

Personnalisez les étiquettes pour «Précédent» et «Suivant». Vous pouvez utiliser des «messages plus anciens / messages plus récents», «dos / avant», ou même «← / →» pour un style minimal.

La clé est que le module de pagination doit s'asseoir à l'extérieur de la boucle qu'il contrôle. Cela et vous assurer qu'il est affecté à la bonne cible (si vous avez plusieurs boucles sur la même page / modèle).

Étape 4: Testez l'interaction

Enregistrez votre page et prévisualisez-la. Cliquez sur «plus âgé» pour accéder au prochain ensemble d'éléments de boucle.

Notez comment l'URL change avec un paramètre de requête qui identifie la page de la boucle. Notez également que seuls le contenu de la boucle mélange / changements - les tête, les pieds de pied et les barres latérales doivent rester les mêmes.

Obtenez cette mise en page de boucle

Vous voulez disséquer cette mise en page et voir comment les choses sont construites pour vous-même? Téléchargez-le ici!

Une fois que vous avez dézip votre dossier, accédez à votre bibliothèque Divi pour télécharger le fichier. Une fois téléchargé, vous pourrez ajouter la section à n'importe quelle page sur laquelle vous travaillez.

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!

Profitez d'un divi plus dynamique

Le constructeur en boucle de Divi 5 et le module de pagination sont un grand bond en avant en flexibilité. Le constructeur de boucle vous libère des conceptions rigides des modules plus anciens, vous permettant de créer vos propres dispositions répétées avec du contenu dynamique. Le module de pagination maintient ces mises en page rapidement et gérables en les divisant en morceaux conviviaux.

Le constructeur de boucle et le module de pagination, associé à d'autres nouvelles fonctionnalités Divi 5 (Flexbox, Interactions, HSL Color Controls), est toujours aussi puissant. Vous pouvez faire des conceptions de pages incroyables avec tout cela.

Une fois que vous avez créé votre première boucle paginée, vous verrez à quel point il est facile de réutiliser l'approche sur les blogs, les grilles de produit, les portefeuilles ou tout type de contenu que vous devez organiser.