{"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
Divi-Dynamic-Post-Info-Bar-Template.json_<\/a>Download<\/a><\/div>\n\n\n
\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

Partie 1 : Importer les mod\u00e8les pr\u00e9m\u00e2ch\u00e9s<\/h2>\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

Importation du mod\u00e8le de site Web par d\u00e9faut<\/h3>\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

\"divi<\/p>\n

Importation du mod\u00e8le de message<\/h3>\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

\"divi<\/p>\n

D\u00e9sactiver l’option Global sur l’en-t\u00eate du mod\u00e8le de message<\/h3>\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

\"divi<\/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

\"divi<\/p>\n

Cr\u00e9ation de la barre d’information dynamique des messages<\/h2>\n

Ajout de la section et de la rang\u00e9e<\/h3>\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

\"divi<\/p>\n

Ajoutez ensuite une rang\u00e9e d’une demi-colonne d’un quart d’un quart de colonne \u00e0 la section.<\/p>\n

\"divi<\/p>\n

Param\u00e8tres de la section<\/h3>\n

Ouvrez les param\u00e8tres de la section et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n