Comment utiliser la fonctionnalité de contenu dynamique de Divi pour concevoir une mise en page de publication dynamique

La nouvelle fonctionnalité de contenu dynamique de Divi nous donne la possibilité de créer des mises en page dynamiques pour les articles de blog (et bien plus encore). Et il y a de bonnes raisons pour lesquelles vous pouvez envisager de le faire. Une des raisons est la conception. Vous pouvez concevoir des mises en page de publication étonnantes avec Divi à l'aide du constructeur visuel, en particulier lorsque vous utilisez les mises en page prédéfinies disponibles comme point de départ. Une autre raison est la commodité. Une fois que la mise en page de l'article est conçue avec tous les éléments de contenu dynamique en place (comme les catégories, les images en vedette, les balises d'article, les champs personnalisés, etc.), le processus de création et de mise à jour des articles de blog est grandement simplifié. Outre le contenu réel de la publication, toutes les autres données de publication peuvent être mises à jour sans jamais avoir à déployer le générateur visuel.

Dans ce tutoriel, je vais vous montrer comment créer une mise en page de publication dynamique dans Divi. En commençant par une mise en page prédéfinie, je vais vous guider tout au long du processus d'ajout de contenu dynamique tout au long de la mise en page, puis de concevoir ce contenu pour qu'il corresponde. Je vais même présenter un moyen simple d'utiliser des champs personnalisés en tant que contenu dynamique.

Commençons.

Aperçu

Ce dont vous avez besoin pour commencer

Pour ce tutoriel, vous aurez besoin des éléments suivants :

• Thème Divi
• Pack de mise en page d'entraîneur personnel. Ce pack de mise en page est accessible depuis le Divi Builder. Nous utiliserons la mise en page du service Personal Trainer pour lancer la conception de la mise en page de notre publication.

Je vais également vous montrer comment tirer parti des champs personnalisés pour créer une section d'entraînement en vedette à l'aide de la fonctionnalité de type de publication personnalisée. Les champs personnalisés sont intégrés à WordPress et ne nécessitent pas de plugins supplémentaires ou quoi que ce soit. Vous avez donc déjà ce dont vous avez besoin.

Partie 1 : Ajout de la mise en page prédéfinie à la publication

Pour commencer, allez-y et créez un nouveau message (pas une page), donnez un titre à votre message, puis cliquez sur le bouton Utiliser Divi Builder. Ne déployez pas encore le constructeur visuel car nous devons d'abord personnaliser nos paramètres de publication à partir de l'écran de l'éditeur WordPress par défaut.

Puisque nous voulons ajouter notre mise en page prédéfinie afin d'extraire nos images de la mise en page (nous en avons besoin pour notre image vedette). Cliquez sur le bouton Charger la mise en page situé dans le menu Divi Builder.

Dans la fenêtre contextuelle Charger à partir de la bibliothèque, sélectionnez la mise en page du service d'entraîneur personnel et déployez-la dans votre publication en cliquant sur le bouton « Utiliser cette mise en page ».

Ensuite, publiez votre article pour enregistrer vos paramètres.

Partie 2 : Mise à jour des paramètres de la page Divi, des métadonnées de publication et de l'image en vedette

Paramètres de la page Divi

Il est important que nous mettions à jour les paramètres de la page Divi afin que notre nouvelle mise en page s'adapte au design. Nous devons également masquer l'affichage par défaut du titre de l'article, car nous utiliserons plutôt le module de titre de l'article.

En haut à droite de la page, localisez la zone Paramètres de la page Divi et mettez à jour les éléments suivants :

Mise en page : pleine largeur
Afficher le titre du message : Masquer

Si vous ne voyez pas les paramètres de la page Divi, vous n'avez probablement pas activé Divi Builder, alors assurez-vous de le faire en premier.

Ajouter des catégories

Sous la zone des catégories, ajoutez une nouvelle catégorie appelée « Entraînement de force » et assurez-vous qu'il s'agit de la seule catégorie sélectionnée.

Ajouter des balises

Dans la zone des balises, ajoutez les trois balises suivantes : Vitesse, Entraînement et Entraînements.

L'image sélectionnée

Ensuite, ajoutez une image vedette qui correspond à l'image d'arrière-plan utilisée dans l'en-tête de la mise en page, comme indiqué dans la capture d'écran ci-dessous.

Partie 3 : Ajout de champs personnalisés pour le contenu d'entraînement dynamique

Les champs personnalisés sont intégrés à WordPress. Ils permettent aux auteurs d'articles d'ajouter des informations supplémentaires (appelées métadonnées) à un article en plus des métadonnées par défaut telles que les catégories, l'auteur de l'article, la date de publication, etc. À un niveau de base, les champs personnalisés peuvent être utilisés pour afficher la météo. ou l'humeur de l'auteur lors de la rédaction d'un article. Mais il existe de nombreuses façons d'utiliser des champs personnalisés pour créer du contenu dynamique pour votre site Web. N'hésitez pas à en savoir plus sur la façon d'ajouter des champs personnalisés à votre site Web. Mais pour ce cas d'utilisation, je pense que vous comprendrez le concept de base des champs personnalisés en en créant quelques-uns pour vous-même.

Pour cet exemple, je vais vous montrer comment ajouter quelques champs personnalisés qui peuvent être utilisés pour ajouter du contenu dynamique à votre publication. Le contenu dynamique de cet exemple est un entraînement en vedette. Une fois les champs personnalisés en place, tout ce que l'auteur de la publication aurait à faire est de remplir les valeurs des champs personnalisés et le contenu sera mis à jour (dynamiquement) dans la publication sans jamais avoir à charger Visual Builder.

Pour ce faire, faites défiler vers le bas de la publication et recherchez la zone Champs personnalisés. Si, pour une raison quelconque, il ne s'affiche pas, assurez-vous de le sélectionner dans les options d'écran en haut de la page.

Cliquez ensuite sur la liste déroulante Champs personnalisés (si elle est réduite) pour ajouter un nouveau champ personnalisé et saisissez les éléments suivants :

Nom : titre de l'entraînement
Valeur : Entraînement en vedette

Cliquez ensuite sur le bouton Ajouter un champ personnalisé.

Le Nom est la façon dont vous identifiez le champ personnalisé dans Divi. La Valeur est le contenu qui sera ajouté dynamiquement à la page à l'aide de la fonctionnalité de contenu dynamique de Divi (nous en parlerons plus tard).

Continuez ce processus pour ajouter les champs personnalisés suivants à votre site Web.

Nom : échauffement
Valeur : 800m course

Nom : durée
Valeur : 30min

Nom: haltérophilie
Valeur:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

Nom: refroidir
Valeur : 400 m de course

Remarque : ces champs personnalisés seront ajoutés au thème Divi et seront disponibles sur toute nouvelle publication que vous créerez à l'avenir. En d'autres termes, il ne se limite pas à ce seul poste.

N'oubliez pas de mettre à jour votre message !

Partie 4 : Ajout de contenu dynamique à la mise en page de la publication à l'aide de Visual Builder

Maintenant que nous avons mis en place nos paramètres de publication et nos métadonnées, il est temps de commencer à ajouter du contenu dynamique à notre publication. Pour ce faire, déployez le Visual Builder.

Pour rendre les choses un peu plus faciles à localiser et à modifier pour cette conception de mise en page avancée, ouvrez le menu des paramètres et définissez le mode d'interaction par défaut du générateur sur le mode clic.

Dans la section d'en-tête, supprimez le module de boutons (nous n'en avons pas besoin).

Remplacement de l'image d'arrière-plan par le contenu dynamique de l'image en vedette

Pour notre premier élément de contenu dynamique, nous allons remplacer l'image d'arrière-plan utilisée dans la colonne 1 de notre ligne de section d'en-tête supérieure par l'image vedette utilisée pour la publication. Pour ce faire, ouvrez les paramètres de ligne et recherchez les paramètres d'arrière-plan pour la colonne 1 et cliquez sur l'onglet image d'arrière-plan. Supprimez ensuite l'image qui s'y trouve actuellement, puis survolez la zone d'aperçu de l'image d'arrière-plan. Vous verrez l'icône de contenu dynamique en haut à droite de la boîte. Cliquez dessus pour ouvrir les options de contenu dynamique. Sélectionnez ensuite l'option de contenu dynamique Image en vedette dans la liste.

Votre mise en page sera exactement la même puisque nous utilisons la même image. La seule différence est maintenant que l'image d'arrière-plan est extraite de l'image définie comme image vedette de la publication. C'est la beauté du contenu dynamique !

Nous allons continuer.

Ajout du titre de poste avec un module de titre de poste

Sous le module de texte qui contient actuellement le titre de la page, ajoutez un module Post Title. Il existe également une option permettant d'ajouter le titre de la publication à un module à l'aide de contenu dynamique, mais comme le module de titre de publication fonctionne déjà comme du contenu dynamique et préserve la balise d'en-tête h1 pour le référencement, il est parfait pour l'utiliser pour votre mise en page personnalisée. .

Ensuite, mettez à jour les paramètres du module de titre de publication comme suit :

Afficher la méta : NON
Afficher l'image en vedette : NON

Allez maintenant dans le module de texte ci-dessus et copiez les styles de titre h2 en cliquant avec le bouton droit sur l'onglet h2 et en sélectionnant l'option dans cette liste.

Collez ensuite les styles de titre h2 dans le module de titre de publication en cliquant avec le bouton droit sur le module et en sélectionnant l'option dans la liste.

Après cela, revenez au module de texte ci-dessus et copiez les styles d'espacement et collez-les dans le module de titre de publication. Ensuite, changez la couleur du texte du titre du message en clair pour obtenir la couleur blanche.

Maintenant, le titre de votre article doit correspondre à la conception du titre de la mise en page d'origine.

Vous pouvez maintenant supprimer le module de texte contenant l'en-tête d'origine.

Utilisation de contenu dynamique pour créer une ligne de métadonnées

Passez à la deuxième section de la mise en page. Retirez ensuite le rembourrage supérieur de la section en le faisant glisser dans le générateur visuel ou en le définissant sur 0px dans les paramètres de la section.

Dans la première rangée de la deuxième section de la mise en page, vous remarquerez un module de texte (il a le contenu « À propos de l'entraînement personnel ») avec un séparateur en dessous. C'est ici que nous allons créer notre ligne personnalisée de métadonnées à l'aide de contenu dynamique.

Nous voulons que la taille de cette ligne corresponde à la taille de la ligne dans la section supérieure. Pour ce faire, ouvrez les paramètres de ligne de la ligne dans la section supérieure et copiez les styles de dimensionnement. Collez-les ensuite sur la première rangée de la deuxième section. Mettez ensuite à jour la gouttière de rangée avec à 2. Le nouveau dimensionnement devrait ressembler à la capture d'écran suivante.

Vous devrez également ajouter un espacement personnalisé comme suit :

Rembourrage personnalisé : 1 % à gauche, 1 % à droite

Enregistrez ensuite les paramètres de la ligne.

Mettez maintenant à jour la structure des colonnes de ligne en une disposition à quatre colonnes.

Nous sommes maintenant prêts à ajouter notre contenu dynamique. Pour ce faire, ouvrez les paramètres du module de texte maintenant dans la colonne la plus à gauche et survolez la zone de contenu. Vous verrez l'icône de contenu dynamique en haut à droite de la boîte. Cliquez dessus pour ouvrir les options de contenu dynamique.

Sélectionnez ensuite l'option : Date de publication.

Modifiez ensuite le format de la date en conséquence.

Cela ajoutera la date de publication de la publication en tant que contenu dynamique.

Pour styliser le module de texte avec le contenu de date dynamique, copiez les styles de module du module de texte dans la colonne de gauche de la ligne directement en dessous.

Collez ensuite les styles de module dans le module de texte avec le contenu de date dynamique et changez la couleur du texte en blanc.

Ensuite, copiez le module de texte et le séparateur en dessous et collez-le dans la colonne 2. Modifiez ensuite le contenu dynamique en Catégories de publication.

Vous devrez mettre à jour la couleur du texte du lien en blanc pour correspondre à la conception de la mise en page.

Copiez maintenant le module de texte des catégories de publication avec le diviseur dans la colonne 3. Modifiez ensuite le contenu dynamique en Nombre de commentaires de publication. Dans la fenêtre contextuelle Post Comment Count, saisissez ce qui suit dans la zone de saisie Avant :

Avant : Commentaires :

Les zones de saisie avant et après disponibles dans les fenêtres contextuelles de contenu dynamique sont une option pratique pour ajouter du texte avant et/ou après le contenu dynamique. Ceci est utile pour ajouter des étiquettes, des symboles de prix et d'autres éléments si nécessaire.

Continuons maintenant à ajouter notre contenu dynamique. Copiez le module de texte et le séparateur dans la colonne 3 et collez-les dans la colonne 4. Cette dernière colonne contiendra la vignette de l'auteur et le nom de l'auteur. Alors, changez le contenu dynamique du module de texte en Post Author. Dans la fenêtre contextuelle Post Author, mettez à jour les éléments suivants :

Avant : par :
Format du nom : prénom et nom

Au-dessus du module de texte avec le contenu de l'auteur du message, ajoutez un nouveau module d'image. Ouvrez les paramètres du module d'image et supprimez l'image par défaut. Tout comme nous l'avons fait, cliquez sur l'icône de contenu dynamique dans la zone d'aperçu de l'image et ajoutez l'image de profil de l'auteur de la publication en tant que contenu dynamique.

Ajustez ensuite les paramètres de conception pour tirer l'image vers le haut et lui donner une largeur personnalisée comme suit :

Largeur : 80px
Marge personnalisée (bureau): -82px Haut
Marge personnalisée (tablette): 0px Haut

Remarque : le nom de l'auteur de la publication affichera l'auteur qui a été affecté à la publication actuelle. Et la photo de profil de l'auteur du post est celle qui a été définie pour le profil utilisateur dans le tableau de bord WordPress sous Utilisateurs > Votre profil.

Partie 5 : Ajout des champs personnalisés en tant que contenu dynamique pour ajouter un entraînement en vedette à la publication

Vous vous souvenez de la façon dont nous avons ajouté ces champs personnalisés plus tôt dans le didacticiel ? Nous allons maintenant utiliser ces champs personnalisés comme contenu pour un entraînement en vedette sur notre publication.

Pour ajouter notre contenu dynamique d'entraînement en vedette, dupliquez d'abord la ligne à deux colonnes directement sous la ligne à quatre colonnes avec toutes nos métadonnées dynamiques. Supprimez ensuite les modules dans les deux colonnes et ajoutez un module de présentation dans la colonne de gauche.

Nous allons utiliser des modules de présentation pour ajouter le contenu dynamique de la section d'entraînement. Pour commencer, ajoutez un nouveau module de présentation dans la colonne de gauche.

Pour le titre, ajoutez le champ personnalisé nommé « Titre de l'entraînement » en tant que contenu dynamique. Ensuite, pour le contenu de présentation, ajoutez le champ personnalisé nommé « Durée » en tant que contenu dynamique.

Pour continuer, je ne vais pas détailler le style de ces modules. Mais, vous devrez ajouter une icône de présentation placée à gauche du titre et mettre à jour le design pour qu'il corresponde à la mise en page.

Ensuite, ajoutez un deuxième module de présentation ci-dessous. Entrez le texte « Warmup » comme titre. Et puis ajoutez le champ personnalisé nommé « Warmup » en tant que contenu dynamique.

Ajoutez un troisième module de présentation en dessous de celui-ci, avec « Levée de poids » comme titre et le champ personnalisé « Levée de poids » comme contenu dynamique. Étant donné que nous utilisons html pour cette valeur de champ personnalisé, vous devrez activer le html brut dans la fenêtre contextuelle de musculation.

Ajoutez un dernier module de présentation avec « Cool Down » comme titre et le champ personnalisé « Cool Down » comme contenu dynamique.

Vous disposez maintenant d'une section dynamique pour ajouter des séances d'entraînement à votre publication !

Tout ce que vous avez à faire est de mettre à jour les valeurs des champs personnalisés à partir de l'éditeur de page par défaut dans WordPress et ce contenu sera automatiquement ajouté à votre mise en page de publication sans avoir à accéder au générateur Divi.

Partie 6 : Concevoir une section « Sujets connexes » à l'aide de contenu dynamique de balises de publication

Vous pouvez utiliser du contenu dynamique pour afficher les balises de publication et créer une section « sujets connexes » sympa pour votre publication. Pour ce faire, créez une nouvelle ligne à une colonne et ajoutez un module de texte à la ligne.

Ensuite, pour la zone de contenu, ajoutez les balises de publication en tant que contenu dynamique. Mettez ensuite à jour les options de balises de publication suivantes :

Avant : Sujets connexes :
Séparateur de balises : //

Remarque : Vous pouvez utiliser à peu près n'importe quel jeu de caractères pour le séparateur de balises, alors n'hésitez pas à en expérimenter différents pour des conceptions créatives.

Pour styliser le contenu, mettez à jour les paramètres de conception suivants :

Police du texte : Oswald
Poids de la police de texte : semi-gras
Texte Couleur du texte : #ff4c00
Taille du texte du texte : 30px
Police du lien : Oswald
Poids de la police du lien : semi-gras
Couleur du texte du lien : #262d3f
Taille du texte du lien : 50px
Espacement des lettres des liens : 2px
Hauteur de la ligne de liaison : 1,6 em

Voici la conception finale.

Partie 7 : Ajout d'une biographie d'auteur et d'une section de commentaires

À ce stade, vous êtes bien équipé pour ajouter du contenu dynamique et ajuster la conception de la mise en page de votre article avec une bonne dose de facilité, je n'entrerai donc pas dans les détails de ces deux derniers éléments.

Ajout d'une section biographie d'auteur à l'aide de contenu dynamique

Pour ajouter une section de biographie d'auteur au bas du contenu de votre article, vous pouvez utiliser le contenu dynamique de l'auteur de l'article, de la photo de profil de l'auteur de l'article et de la biographie de l'auteur. Comme vous pouvez le voir dans la capture d'écran ci-dessous, j'ai créé une ligne de colonne 1/4 3/4. Ensuite, j'ai ajouté la photo de profil de l'auteur de l'article dans la colonne de gauche. Dans la colonne de droite, j'ai ajouté l'auteur du message avec la biographie de l'auteur en dessous. J'ai également ajouté le contenu dynamique de l'image en vedette comme image d'arrière-plan de la section (et une superposition de dégradé). Voici un exemple de ce à quoi cela ressemblerait.

Ajout d'une section de commentaires à l'aide du module de commentaires

Étant donné que nous utilisons une mise en page de publication personnalisée, il est donc nécessaire d'utiliser un module de commentaires afin que nous puissions faire correspondre la conception de la section des commentaires avec la mise en page. Ajoutez simplement le module de commentaires à une nouvelle ligne de section pour faire correspondre les styles de boutons et les polices avec la mise en page actuelle. Voici un exemple de ce à quoi cela ressemblerait.

La conception finale

Voici la conception finale de l'ensemble du message une fois que toute la conception a été ajustée.

Mise à jour du contenu des articles et enregistrement de la mise en page pour les futurs articles

Étant donné que nous utilisons Divi Builder pour créer la mise en page de la publication, vous devrez toujours mettre à jour le contenu réel de la publication pour votre publication à l'aide des modules Divi. Mais avec tout le reste maintenant dynamique, cela rend le processus beaucoup plus facile à l'avenir. Vous devrez enregistrer la mise en page de la publication dans votre bibliothèque afin que, lors de la création d'une nouvelle publication, il vous suffise d'ajouter la mise en page enregistrée à votre publication et de mettre à jour le contenu de la publication.

Dernières pensées

Le contenu dynamique de Divi est une fonctionnalité puissante qui facilite grandement l'ajout et la mise à jour des données de publication. Donc, si vous cherchez à concevoir une mise en page personnalisée pour vos articles de blog (ou d'autres types d'articles personnalisés comme Projets) à l'aide de Divi Builder, le contenu dynamique est la voie à suivre. Bien entendu, le contenu dynamique ne se limite pas aux publications. Vous pouvez profiter du contenu dynamique et des champs personnalisés sur l'ensemble de votre site Web. J'espère que cet article vous aidera à comprendre certaines des possibilités et vous inspirera à utiliser le contenu dynamique de manière inédite.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!