Comment créer une barre d'informations de publication dynamique pour votre modèle de publication de blog Divi

L'ajout de contenu dynamique à votre modèle de publication de blog est essentiel pour fournir des éléments tels que le titre de la publication, les métadonnées, l'image en vedette, etc. Normalement, ces éléments dynamiques sont placés en tant qu'éléments statiques normaux dans la conception de la mise en page. Cependant, il peut être utile de garder certains de ces éléments dynamiques au premier plan pour vos lecteurs. C'est là qu'une barre d'informations de publication dynamique est utile. Une barre d'informations de publication dynamique reste fixe en haut du navigateur (comme le ferait un en-tête fixe) et comprend des éléments utiles de contenu dynamique et d'autres CTA. Par exemple, vous pouvez utiliser cette barre pour rappeler aux lecteurs le message qu'ils sont en train de lire, un lien pour laisser un commentaire ou un lien vers une catégorie associée.

Dans ce didacticiel, nous allons vous montrer comment créer une barre d'informations de publication dynamique et l'ajouter à votre modèle de publication de blog à l'aide de Divi Theme Builder. Une fois cela fait, cette barre fonctionnera de manière transparente pour tous les articles de blog sur tout le site.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel. Remarquez comment les liens d'ancrage (« Laisser un commentaire » et « S'abonner ») renvoient les utilisateurs vers la zone correspondante de la publication.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez 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 enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre Divi Theme Builder, accédez au Divi Theme Builder.

Cliquez sur l'icône de portabilité.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, le modèle de section apparaîtra dans le Divi Theme Builder.

Passons au tutoriel, voulez-vous ?

Partie 1 : Importation des modèles prédéfinis

Pour ce didacticiel, nous allons utiliser quelques modèles prédéfinis de notre sixième pack de création de thèmes. Nous allons importer le modèle de site Web par défaut qui nous donnera un en-tête global fonctionnel où nous ajouterons la barre d'informations de publication. Et nous allons importer le modèle de publication de blog pour tester nos résultats sur une publication en direct.

IMPORTANT : Il serait préférable d'importer ces modèles sur un site de test afin de ne pas gâcher un site en direct.

Importer le modèle de site Web par défaut

Tout d'abord, vous devrez télécharger le sixième pack GRATUIT de création de thèmes pour Divi. Décompressez ensuite le fichier.

Depuis le tableau de bord WordPress, accédez à Divi > Générateur de thèmes. Cliquez ensuite sur l'icône de portabilité en haut à droite. Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation. Choisissez ensuite le fichier json du modèle de site Web par défaut dans le dossier téléchargé et cliquez sur le bouton importer. Cela importera un nouveau modèle de site Web par défaut avec un en-tête et un pied de page globaux.

Importer le modèle de publication

Répétez ce processus pour importer le modèle de publication à partir du même dossier téléchargé. Ouvrez la fenêtre contextuelle de portabilité, choisissez le fichier json du modèle de publication et cliquez sur le bouton d'importation. Cela vous donnera un modèle de publication attribué à toutes les publications de votre site, ainsi qu'un en-tête par défaut et un pied de page.

Désactiver Global sur l'en-tête du modèle de publication

Nous allons ajouter notre barre d'informations de publication dynamique à l'en-tête du modèle de publication. Cependant, étant donné que nous voulons que la barre d'informations de publication soit uniquement sur le modèle de publication, nous devons désactiver global sur l'en-tête afin que notre barre ne soit pas ajoutée à tous les en-têtes à l'échelle du site. Pour désactiver global sur l'en-tête global, ouvrez le menu de configuration sur l'en-tête global et sélectionnez « Désactiver global ».

Maintenant, l'en-tête doit être gris avec l'étiquette « En-tête personnalisé ». Une fois prêt, cliquez sur l'icône de modification pour modifier le modèle de mise en page d'en-tête.

Création de la barre d'informations de publication dynamique

Ajout de la section et de la ligne

Dans l'éditeur de mise en page d'en-tête, créez une nouvelle section régulière sous la section actuelle contenant l'en-tête.

Ajoutez ensuite une ligne de colonne d'un demi-quart d'un quart à la section.

Paramètres de section

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Couleur de fond : #eceffe
• Rembourrage : 10 pixels en haut, 10 pixels en bas

Paramètres de ligne

Une fois les paramètres de section ajoutés, ouvrez les paramètres de la ligne et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Remplissage : 0px en haut, 0px en bas

Sous l'onglet avancé, ajoutez le CSS personnalisé suivant à l'élément principal :

display:flex !important;
flex-wrap: nowrap;
align-items: center;

Cela garantira que les colonnes s'empilent sur le mobile.

Ajouter du contenu dynamique pour le titre de l'article

Le premier élément de contenu dynamique que nous allons ajouter à la barre est le titre du message. Cela servira de rappel utile au lecteur du titre de l'article qu'il est en train de lire.

Ajouter un module de texte

Pour créer le titre du message en tant que contenu dynamique, créez un nouveau module de texte dans la colonne la plus à gauche.

Ajouter un titre de publication/d'archive en tant que contenu dynamique

Ensuite, cliquez sur l'icône "Utiliser le contenu dynamique" tout en survolant la zone du corps des paramètres de texte. Sélectionnez « Titre de publication/d'archivage » dans la liste.

Ouvrez les paramètres de contenu dynamique pour le titre de la publication/de l'archive et ajoutez ce qui suit dans la zone de saisie avant :

You're Reading: 

Ensuite, enregistrez les modifications.

Paramètres de conception

Sous l'onglet Conception, personnalisez le style du titre dynamique comme suit :

• Police du texte : Ubuntu
• Poids de la police de texte : moyen
• Texte Couleur du texte : #121212
• Taille du texte : 14px (ordinateur de bureau), 12px (tablette), 11px (téléphone)

Ajouter des informations sur les catégories de publications dynamiques

Pour créer les informations sur les catégories de publication, dupliquez le module de texte contenant le titre de la publication.

Ensuite, ouvrez les paramètres du module de texte en double et ajoutez les catégories de publication en tant que contenu dynamique au corps.

Ouvrez les paramètres de contenu dynamique des catégories de publication et mettez à jour les éléments suivants :

• Avant : Dans
• Séparateur de catégories : &

Mettre à jour la couleur du lien

Sous l'onglet Conception, mettez à jour la couleur du lien comme suit :

• Couleur du texte du lien : #4160fd

Ajout de l'information dynamique sur le nombre de commentaires

Une autre information utile que nous allons ajouter à la barre d'informations sur les publications est le nombre de commentaires qui rappelle à l'utilisateur de s'engager avec ses propres commentaires s'il le souhaite. Le nombre de commentaires inclura également un lien vers les commentaires de la publication.

Pour créer les informations dynamiques sur le nombre de commentaires, dupliquez le module de texte avec les catégories et faites-le glisser dans la colonne du milieu.

Ajoutez ensuite le nombre de commentaires de publication en tant que contenu dynamique au corps du texte.

Ouvrez les paramètres de nombre de commentaires de publication et ajoutez les éléments suivants :

• Après : commentaire(s)

Ajout de l'appel à l'action « Laisser un commentaire »

En plus du nombre de commentaires, nous allons ajouter un simple appel à l'action pour laisser un commentaire. Le lien sera un lien d'ancrage qui défile jusqu'à la section des commentaires au bas de la publication.

Pour créer le CTA, dupliquez le module Texte dans la colonne 2 contenant le nombre de commentaires.

Ensuite, ouvrez les paramètres de texte pour le doublon et ajoutez le lien html suivant au corps :

<a href="#respond">Leave a Comment</a>

Ajout du bouton S'abonner

La dernière chose que nous allons ajouter à la barre d'informations sur les publications est un bouton d'abonnement. Ce sera également un lien d'ancrage qui amènera l'utilisateur à la section du modèle de publication qui comprend un formulaire d'inscription par e-mail.

Pour ce faire, ajoutez un module de boutons dans la colonne la plus à droite.

Sous l'onglet Conception, mettez à jour les styles de bouton comme suit :

• Taille du texte du bouton : 14 px (ordinateur de bureau), 12 px (tablette), 11 px (téléphone)
• Couleur du texte du bouton : #ffffff
• Dégradé d'arrière-plan du bouton Couleur gauche : #7e5ce6
• Dégradé d'arrière-plan du bouton Couleur droite : #25b8ee
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels
• Espacement des lettres des boutons : 2px
• Police des boutons : Ubuntu
• Poids de la police du bouton : gras
• Style de police des boutons : TT
• Rembourrage (bureau) : 10px en haut, 10px en bas, 20px à gauche, 20px à droite
• Rembourrage (tablette) : 6px en haut, 6px en bas, 14px à gauche, 14px à droite

Pour ajouter le lien d'ancrage au bouton, accédez à l'onglet Contenu et ajoutez l'URL du lien de bouton suivante :

• URL du lien du bouton : #subscribe

Ce lien ne fonctionnera pas tant que nous n'aurons pas ajouté un identifiant CSS correspondant à la section contenant le formulaire d'inscription par e-mail dans le corps du modèle de publication.

Désactiver la colonne 1 sur mobile

Il n'y a que peu de place sur mobile pour un bar fixe. C'est pourquoi nous devrons prendre des décisions sur les informations à inclure. Pour cet exemple, nous allons laisser les deux colonnes avec les CTA sur mobile et désactiver la colonne avec le titre et les catégories de la publication.

Pour ce faire, ouvrez les paramètres de la colonne 1. Sous l'onglet Avancé, désactivez la visibilité sur téléphone et tablette.

Donner à la section une position fixe et un indice Z élevé

Une fois la conception terminée, nous pouvons maintenant donner à la section une position fixe. L'idée est de masquer la barre derrière la section avec l'en-tête initialement. Ensuite, au fur et à mesure que l'utilisateur fait défiler la barre d'informations sur les publications fixes, elle apparaît sous l'en-tête.

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Poste : fixe
• Indice Z : 998

Notez que l'index z est de 998 car je veux que la barre fixe se trouve au-dessus du reste du contenu de la publication.

Mettre à jour l'index Z de l'en-tête de section

Étant donné que la section de la barre d'informations de publication a un index z plus élevé, elle s'affichera au-dessus de la section avec l'en-tête. Pour résoudre ce problème, ouvrez les paramètres de la section avec l'en-tête et ajoutez les éléments suivants :

• Index Z : 999 (un de plus que la section avec la barre)

Enregistrez les modifications dans l'éditeur de mise en page.

Ajouter un identifiant CSS à la ligne d'inscription par e-mail sur le modèle de corps

Le bouton d'abonnement CTA que nous ajoutons à la barre a toujours besoin d'une ancre, ou d'un endroit où « sauter » sur le modèle de publication. Étant donné que le CTA doit « s'abonner », nous en avons besoin pour accéder au formulaire d'opi-in par e-mail.

Pour ce faire, ouvrez la zone « corps personnalisé » du modèle de publication dans le générateur de thème.

Recherchez la ligne avec le formulaire d'inscription par e-mail en bas de la mise en page et ajoutez l'ID CSS suivant :

• Identifiant CSS : s'abonner

Cela permettra au lien d'ancrage du bouton d'abonnement de défiler jusqu'à cette zone spécifique du modèle.

Une fois cela fait, enregistrez les modifications apportées à la mise en page et au générateur de thème.

Résultat final

Pour voir le résultat final, ouvrez simplement et affichez une publication en direct sur le site. Remarquez comment les liens d'ancrage (« Laisser un commentaire » et « S'abonner ») renvoient les utilisateurs vers la zone correspondante de la publication.

Dernières pensées

Espérons que cette barre d'informations dynamique sur les articles vous sera utile pour booster l'UX de vos articles de blog Divi. N'hésitez pas à expérimenter avec d'autres informations également. Je suis sûr qu'il existe un moyen de présenter un article connexe avec un module de blog.

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

À votre santé!