{"id":350711,"date":"2022-03-30T13:47:06","date_gmt":"2022-03-30T13:47:06","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=350711"},"modified":"2022-03-30T13:47:10","modified_gmt":"2022-03-30T13:47:10","slug":"comment-creer-une-barre-dinformation-dynamique-pour-votre-modele-de-billet-de-blog-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-creer-une-barre-dinformation-dynamique-pour-votre-modele-de-billet-de-blog-divi\/","title":{"rendered":"Comment cr\u00e9er une barre d’information dynamique pour votre mod\u00e8le de billet de blog Divi"},"content":{"rendered":"\n
L’ajout de contenu dynamique \u00e0 votre mod\u00e8le d’article de blog est essentiel pour fournir des \u00e9l\u00e9ments tels que le titre de l’article, les m\u00e9tadonn\u00e9es, l’image vedette, etc. Normalement, ces \u00e9l\u00e9ments dynamiques sont plac\u00e9s comme des \u00e9l\u00e9ments statiques normaux dans la conception de la mise en page. Normalement, ces \u00e9l\u00e9ments dynamiques sont plac\u00e9s comme des \u00e9l\u00e9ments statiques normaux dans la conception de la mise en page. Cependant, il peut \u00eatre utile de garder certains de ces \u00e9l\u00e9ments dynamiques au premier plan pour vos lecteurs. C’est l\u00e0 qu’une barre d’information dynamique est utile. Une barre d’information dynamique reste fixe en haut du navigateur (comme le ferait un en-t\u00eate fixe) et comprend des \u00e9l\u00e9ments utiles de contenu dynamique et d’autres CTA. Par exemple, vous pouvez utiliser cette barre pour rappeler aux lecteurs l’article qu’ils sont en train de lire, un lien pour laisser un commentaire ou un lien vers une cat\u00e9gorie connexe.<\/p>\n
Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er une barre d’information dynamique sur les articles et l’ajouter au mod\u00e8le d’article de votre blog \u00e0 l’aide du cr\u00e9ateur de th\u00e8me Divi. Une fois cr\u00e9\u00e9e, cette barre fonctionnera de mani\u00e8re transparente pour tous les articles de blog du site.<\/p>\n
Pour importer la mise en page de la section dans votre Cr\u00e9ateur de th\u00e8me Divi, acc\u00e9dez au Cr\u00e9ateur de th\u00e8me Divi.<\/p>\n
Cliquez sur l’ic\u00f4ne de portabilit\u00e9.<\/p>\n
Dans la fen\u00eatre contextuelle de portabilit\u00e9, s\u00e9lectionnez l’onglet d’importation et choisissez le fichier \u00e0 t\u00e9l\u00e9charger depuis votre ordinateur.<\/p>\n
Cliquez ensuite sur le bouton d’importation.<\/p>\n
Une fois que c’est fait, le mod\u00e8le de section appara\u00eetra dans le Cr\u00e9ateur de th\u00e8me de Divi.<\/p>\n
<\/p>\n
Passons au tutoriel, d’accord ?<\/p>\n
Pour ce tutoriel, nous allons utiliser quelques mod\u00e8les pr\u00e9fabriqu\u00e9s de notre sixi\u00e8me pack de construction de th\u00e8me. Nous allons importer le mod\u00e8le de site Web par d\u00e9faut qui nous donnera un en-t\u00eate global fonctionnel o\u00f9 nous ajouterons la barre d’information sur les articles. Et nous allons importer le mod\u00e8le d’article de blog pour tester nos r\u00e9sultats sur un article en direct.<\/p>\n
IMPORTANT : Il est pr\u00e9f\u00e9rable d’importer ces mod\u00e8les sur un site de test afin de ne pas perturber un site r\u00e9el.<\/p>\n
Tout d’abord, vous devez t\u00e9l\u00e9charger le Sixi\u00e8me pack de construction de th\u00e8me GRATUIT pour Divi. D\u00e9zippez ensuite le fichier.<\/p>\n
Depuis le tableau de bord de WordPress, naviguez vers Divi > Theme Builder. Cliquez ensuite sur l’ic\u00f4ne de portabilit\u00e9 en haut \u00e0 droite. Dans la popup de portabilit\u00e9, s\u00e9lectionnez l’onglet d’importation. Choisissez ensuite le fichier json du mod\u00e8le de site Web par d\u00e9faut dans le dossier t\u00e9l\u00e9charg\u00e9 et cliquez sur le bouton d’importation. Cela importera un nouveau mod\u00e8le de site Web par d\u00e9faut avec un en-t\u00eate et un pied de page globaux.<\/p>\n
<\/p>\n
R\u00e9p\u00e9tez ce processus pour importer le mod\u00e8le de message \u00e0 partir du m\u00eame dossier t\u00e9l\u00e9charg\u00e9. Ouvrez la fen\u00eatre popup de portabilit\u00e9, choisissez le fichier json du mod\u00e8le de message et cliquez sur le bouton d’importation. Vous obtiendrez ainsi un mod\u00e8le d’article affect\u00e9 \u00e0 tous les articles de votre site, ainsi qu’un en-t\u00eate et un pied de page par d\u00e9faut.<\/p>\n
<\/p>\n
Nous allons ajouter notre barre d’information dynamique dans l’en-t\u00eate du mod\u00e8le de message. Cependant, comme nous voulons que la barre d’information sur les articles ne soit pr\u00e9sente que dans le mod\u00e8le d’article, nous devons d\u00e9sactiver la fonction globale de l’en-t\u00eate afin que notre barre ne soit pas ajout\u00e9e \u00e0 tous les en-t\u00eates du site. Pour d\u00e9sactiver global sur l’en-t\u00eate global, ouvrez le menu de r\u00e9glage sur l’en-t\u00eate global et s\u00e9lectionnez \u00ab\u00a0Disable Global\u00a0\u00bb.<\/p>\n
<\/p>\n
Maintenant, l’en-t\u00eate devrait \u00eatre gris avec l’\u00e9tiquette \u00ab\u00a0Custom Header\u00a0\u00bb. Une fois pr\u00eat, cliquez sur l’ic\u00f4ne d’\u00e9dition pour modifier le mod\u00e8le de mise en page de l’en-t\u00eate.<\/p>\n
<\/p>\n
Dans l’\u00e9diteur de mise en page de l’en-t\u00eate, cr\u00e9ez une nouvelle section ordinaire sous la section actuelle contenant l’en-t\u00eate.<\/p>\n
<\/p>\n
Ajoutez ensuite une rang\u00e9e d’une demi-colonne d’un quart d’un quart de colonne \u00e0 la section.<\/p>\n
<\/p>\n
Ouvrez les param\u00e8tres de la section et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n
<\/p>\n
Apr\u00e8s avoir ajout\u00e9 les param\u00e8tres de la section, ouvrez les param\u00e8tres de la ligne et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n
<\/p>\n
Sous l’onglet avanc\u00e9, ajoutez le CSS personnalis\u00e9 suivant \u00e0 l’\u00e9l\u00e9ment principal :<\/p>\n
display:flex !important ;\nflex-wrap : nowrap ;\nalign-items : center ;\n<\/pre>\nCela permettra de s’assurer que les colonnes s’empilent sur les mobiles.<\/p>\n
<\/p>\n
Ajout du contenu dynamique du titre de l’article<\/h3>\n
Le premier \u00e9l\u00e9ment de contenu dynamique que nous allons ajouter \u00e0 la barre est le titre de l’article. Il servira de rappel utile au lecteur du titre de l’article qu’il est en train de lire.<\/p>\n
Ajouter un module de texte<\/h4>\n
Pour cr\u00e9er le titre de l’article en tant que contenu dynamique, cr\u00e9ez un nouveau module de texte dans la colonne de gauche.<\/p>\n
<\/p>\n
Ajouter le titre du message\/de l’archive en tant que contenu dynamique<\/h4>\n
Ensuite, cliquez sur l’ic\u00f4ne \u00ab\u00a0Utiliser le contenu dynamique\u00a0\u00bb en passant la souris sur la zone de corps des param\u00e8tres de texte. S\u00e9lectionnez \u00ab\u00a0Titre de l’article\/de l’archive\u00a0\u00bb dans la liste.<\/p>\n
<\/p>\n
Ouvrez les param\u00e8tres de contenu dynamique pour le titre de l’article\/de l’archive et ajoutez le texte suivant dans la zone de saisie \u00ab\u00a0before\u00a0\u00bb :<\/p>\n
Vous \u00eates en train de lire :<\/pre>\nPuis enregistrez les modifications.<\/p>\n
<\/p>\n
Param\u00e8tres de conception<\/h4>\n
Sous l’onglet Conception, personnalisez le style du titre dynamique comme suit :<\/p>\n
<\/p>\n
Pour cr\u00e9er les informations sur les cat\u00e9gories de messages, dupliquez le module de texte contenant le titre du message.<\/p>\n
<\/p>\n
Ouvrez ensuite les param\u00e8tres du module de texte dupliqu\u00e9 et ajoutez les cat\u00e9gories d’articles en tant que contenu dynamique dans le corps du texte.<\/p>\n
<\/p>\n
Ouvrez les param\u00e8tres du contenu dynamique des cat\u00e9gories de messages et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n
<\/p>\n
Sous l’onglet \u00ab\u00a0Design\u00a0\u00bb, mettez \u00e0 jour la couleur du lien comme suit :<\/p>\n
<\/p>\n
Un autre \u00e9l\u00e9ment d’information utile que nous allons ajouter \u00e0 la barre d’information sur les messages est le nombre de commentaires, qui rappelle \u00e0 l’utilisateur qu’il peut participer \u00e0 ses propres commentaires s’il le souhaite. Le nombre de commentaires comprendra \u00e9galement un lien vers les commentaires de l’article.<\/p>\n
Pour cr\u00e9er l’information dynamique sur le nombre de commentaires, dupliquez le module de texte avec les cat\u00e9gories et faites-le glisser dans la colonne du milieu.<\/p>\n
<\/p>\n
Ajoutez ensuite le nombre de commentaires du message en tant que contenu dynamique dans le corps du texte.<\/p>\n
<\/p>\n
Ouvrez les param\u00e8tres du nombre de commentaires et ajoutez ce qui suit :<\/p>\n
<\/p>\n
En plus du nombre de commentaires, nous allons ajouter un simple appel \u00e0 l’action pour laisser un commentaire. Il s’agira d’un lien d’ancrage qui renvoie \u00e0 la section des commentaires en bas de l’article.<\/p>\n
Pour cr\u00e9er l’appel \u00e0 l’action, dupliquez le module Texte dans la colonne 2 contenant le nombre de commentaires.<\/p>\n
<\/p>\n
Ouvrez ensuite les param\u00e8tres de texte pour le duplicata et ajoutez le lien html suivant dans le corps :<\/p>\n
Laisser un commentaire<\/a><\/pre>\n
<\/p>\n
Ajout du bouton d’abonnement<\/h3>\n
La derni\u00e8re chose que nous allons ajouter \u00e0 la barre d’information sur les articles est un bouton d’abonnement. Il s’agira \u00e9galement d’un lien d’ancrage qui am\u00e8nera l’utilisateur \u00e0 la section du mod\u00e8le de message qui comprend un formulaire d’inscription par courriel.<\/p>\n
Pour ce faire, ajoutez un module de bouton dans la colonne de droite.<\/p>\n
<\/p>\n
Sous l’onglet Conception, mettez \u00e0 jour les styles de boutons comme suit :<\/p>\n
\n
- Taille du texte du bouton : 14px (desktop), 12px (tablette), 11px (t\u00e9l\u00e9phone)<\/li>\n
- Couleur du texte du bouton : #ffffff<\/li>\n
- Couleur d’arri\u00e8re-plan du bouton d\u00e9grad\u00e9 \u00e0 gauche : #7e5ce6<\/li>\n
- Couleur du d\u00e9grad\u00e9 d’arri\u00e8re-plan du bouton \u00e0 droite : #25b8ee<\/li>\n
- Largeur de la bordure du bouton : 0px<\/li>\n
- Rayon de la bordure du bouton : 100px<\/li>\n
- Espacement des lettres du bouton : 2px<\/li>\n
- Police de caract\u00e8res du bouton : Ubuntu<\/li>\n
- Poids de la police du bouton : Gras<\/li>\n
- Style de la police du bouton : TT<\/li>\n
- Rembourrage (ordinateur de bureau) : 10px en haut, 10px en bas, 20px \u00e0 gauche, 20px \u00e0 droite<\/li>\n
- Rembourrage (tablette) : 6px en haut, 6px en bas, 14px \u00e0 gauche, 14px \u00e0 droite<\/li>\n<\/ul>\n
<\/p>\n
Pour ajouter le lien d’ancrage au bouton, allez dans l’onglet contenu et ajoutez l’URL de lien de bouton suivante :<\/p>\n
\n
- URL du lien du bouton : #subscribe<\/li>\n<\/ul>\n
Ce lien ne fonctionnera pas tant que nous n’aurons pas ajout\u00e9 un ID CSS correspondant \u00e0 la section contenant le formulaire d’inscription par courriel dans le corps du mod\u00e8le de message.<\/p>\n
<\/p>\n
D\u00e9sactiver la colonne 1 sur les mobiles<\/h3>\n
L’espace disponible sur les mobiles pour une barre fixe est limit\u00e9. C’est pourquoi nous devons prendre des d\u00e9cisions sur les informations \u00e0 inclure. Pour cet exemple, nous allons laisser les deux colonnes avec les CTA sur mobile et d\u00e9sactiver la colonne avec le titre de l’article et les cat\u00e9gories.<\/p>\n
Pour ce faire, ouvrez les param\u00e8tres de la colonne 1. Sous l’onglet avanc\u00e9, d\u00e9sactivez la visibilit\u00e9 sur t\u00e9l\u00e9phone et tablette.<\/p>\n
<\/p>\n
Donner \u00e0 la section une position fixe et un indice Z \u00e9lev\u00e9<\/h3>\n
Une fois la conception termin\u00e9e, nous pouvons maintenant donner \u00e0 la section une position fixe. L’id\u00e9e est de cacher la barre derri\u00e8re la section avec l’en-t\u00eate initialement. Puis, au fur et \u00e0 mesure que l’utilisateur fait d\u00e9filer le texte, la barre d’information fixe sur les articles appara\u00eet sous l’en-t\u00eate.<\/p>\n
Ouvrez les param\u00e8tres de la section et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n
\n
- Position : Fixe<\/li>\n
- Index Z : 998<\/li>\n<\/ul>\n
Remarquez que l’indice z est de 998 parce que je veux que la barre fixe se trouve au-dessus du reste du contenu de l’article.<\/p>\n
<\/p>\n
Mise \u00e0 jour de l’indice Z de l’en-t\u00eate de la section<\/h3>\n
Comme la section de la barre d’information du message a un indice z plus \u00e9lev\u00e9, elle s’affiche au-dessus de la section de l’en-t\u00eate. Pour r\u00e9soudre ce probl\u00e8me, ouvrez les param\u00e8tres de section pour la section avec l’en-t\u00eate et ajoutez ce qui suit :<\/p>\n
\n
- Index Z : 999 (un de plus que la section avec la barre)<\/li>\n<\/ul>\n
<\/p>\n
Enregistrez les modifications dans l’\u00e9diteur de mise en page.<\/p>\n
<\/p>\n
Ajout d’un ID CSS \u00e0 la rang\u00e9e d’acceptation des e-mails dans le mod\u00e8le de corps de page<\/p>\n
Le bouton d’abonnement CTA que nous avons ajout\u00e9 \u00e0 la barre a encore besoin d’une ancre, ou d’un endroit o\u00f9 \u00ab\u00a0sauter\u00a0\u00bb, sur le mod\u00e8le de message. Puisque le CTA consiste \u00e0 \u00ab\u00a0s’abonner\u00a0\u00bb, nous devons le faire passer au formulaire d’inscription par courriel.<\/p>\n
Pour ce faire, ouvrez la zone \u00ab\u00a0custom body\u00a0\u00bb du mod\u00e8le de message dans le constructeur de th\u00e8me.<\/p>\n
<\/p>\n
Trouvez la ligne contenant le formulaire d’inscription par courriel au bas de la mise en page et ajoutez l’ID CSS suivante :<\/p>\n
Cela permettra au lien d’ancrage du bouton d’abonnement de d\u00e9filer vers cette zone sp\u00e9cifique du mod\u00e8le.<\/p>\n
<\/p>\n
Une fois que vous avez termin\u00e9, enregistrez les changements dans la mise en page et dans le constructeur de th\u00e8me.<\/p>\n
<\/p>\n
R\u00e9sultat final<\/h2>\n
Pour voir le r\u00e9sultat final, il suffit d’ouvrir et de visualiser un article en direct sur le site. Remarquez comment les liens d’ancrage (\u00ab\u00a0Laissez un commentaire\u00a0\u00bb et \u00ab\u00a0Abonnez-vous\u00a0\u00bb) envoient les utilisateurs vers la zone correspondante de l’article.<\/p>\n
Derni\u00e8res r\u00e9flexions<\/h2>\n
Nous esp\u00e9rons que cette barre d’information dynamique vous sera utile pour am\u00e9liorer l’ergonomie de vos articles de blog Divi. N’h\u00e9sitez pas \u00e0 exp\u00e9rimenter avec d’autres \u00e9l\u00e9ments d’information. Je suis s\u00fbr qu’il existe un moyen de pr\u00e9senter un article connexe avec un module de blog.<\/p>\n
J’attends vos commentaires avec impatience.<\/p>\n
\u00c0 la v\u00f4tre !<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
L’ajout de contenu dynamique \u00e0 votre mod\u00e8le d’article de blog est essentiel pour fournir des \u00e9l\u00e9ments tels que le titre de l’article, les m\u00e9tadonn\u00e9es, l’image vedette, etc. Normalement, ces \u00e9l\u00e9ments dynamiques sont plac\u00e9s comme des \u00e9l\u00e9ments statiques normaux dans la conception de la mise en page. Normalement, ces \u00e9l\u00e9ments dynamiques sont plac\u00e9s comme des \u00e9l\u00e9ments […]<\/p>\n","protected":false},"author":1,"featured_media":350673,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[106],"tags":[],"class_list":["post-350711","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/350711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=350711"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/350711\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/350673"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=350711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=350711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=350711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}