fbpx
Comment créer un gabarit d’article de Blog WordPress avec le Divi Theme Builder ? | Tuto débutants

Comment créer un template de post de blog WordPress ?

Dans cette nouvelle formation WordPress Divi, je vous apprends à construire un joli gabarit d’article de Blog avec le Divi Thème Builder. Ce gabarit au design sympa vous permettra de gagner du temps et chacun de vos posts épousera automatiquement cette mise en page au webdesign avancé. 
Dans cette vidéo nous utiliserons Divi et son Visual Builder qui va nous permettre de construire visuellement et facilement nos pages.

 

 

Licence Divi
.

Dans cette vidéo, nous allons repartir du même site que celui du tutoriel précédent où je vous avais montrer comment insérer une page Blog dans un site WordPress. Ce site est un site fictif d’unboxing qui présente le déballage de produits technologiques : ordinateurs portables, smartphones etc.

Lors de cette vidéo, je vous avais également expliqué comment créer, une page catégorie dynamique avec le Divi Theme Builder. Par exemple quand on clique sur la catégorie Smartphone, de la barre latérale, une page est générée regroupant les smartphones avec le titre qui change automatiquement selon la catégorie appelée.

Si vous n’avais pas vu ce tutoriel, je vous incite à le faire en cliquant ici, il s’agit de l’épisode 15 de mes tutos WordPress Divi. 

categories Blog

Etapes pour la création de notre gabarit d’article de Blog avec le Divi Theme Builder

1) Enregistrement de la section bannière

Afin d’aller plus vite dans la création de cette page gabarit, je vais tout d’abord récupérer la bannière de la page d’accueil pour la placer sur notre nouvelle page, j’enregistre la section de ma page « Accueil » (la contenant) dans ma librairie (en cliquant sur la flèche dans le cercle)

 

Menu section Divi

2) Ajouter un nouveau modèle dans le Theme Builder

Rendez-vous dans le menu WordPress, à la partie Divi > Thème Builder. Créez un nouveau modèle, quand la fenêtre « Paramètres du modèle » apparaît cochez la case  « Tous les articles » pour que le modèle que nous allons créer s’applique justement à tous vos articles de Blog.

Cliquez ensuite sur « Ajoutez un corps personnalisé » puis choisissez l’option « Construire un corps personnalisé ».

Pour la création de la page, choisissez l’option de gauche « Construire à partir de zéro ».

 

MalerLite
Modèle Divi Thème Builder

3) Paramétrage de la bannière du gabarit de post

Créez une nouvelle section sous la section présente par défaut puis choisissez lors de cette création l’onglet « Ajouter de la bibliothèque » et appelez la section bannière sauvegardée à l’étape 1. Puis en « Glisser/déposer » en cliquant sur la croix du menu de cette section, remontez-la en haut de la page.

Cliquez ensuite sur l’engrenage « Paramètres » du menu de cette section, puis dans l’onglet « Contenu », allez dans « Fond », supprimer l’image de fond, cliquez ensuite sur les « 3 disques + » et ajoutez un contenu dynamique en choisissant « Image présentée ». L’image présentée de chaque article apparaîtra ainsi automatiquement en fond de bannière.

Faire la même manipulation pour le module « Appel à l’action » et dans Titre ajoutez un contenu dynamique et choisissez « Poster / Titre de l’archive » ainsi le titre de votre page article s’affichera automatiquement sur votre bannière à chaque nouvelle création de post.

 

Contenu dynamique
Titre dynamique

4) Ajout du module Divi « Publier un contenu »

Dans la section du dessous, ajoutez une rangée à 1 colonne puis insérez le module « Publier un contenu ».
Ce module va servir à définir, le style (l’apparence) du texte et des images que vous utiliserez lors de la rédaction de vos articles.

Pour ce qui est du texte, vous pouvez modifier l’apparence des titres de H1 à H6, vous pouvez aussi modifier l’apparence du corps de texte, des puces, des liens etc.

Vous pouvez  également modifier l’apparence de l’image en lui apportant du Style. Par exemple arrondir les angles, placer une bordure, ajouter un effet d’ombre etc.

Pour être conduit directement au Style applicable à l’élément souhaité, cliquez simplement sur les petits pinceaux blancs dans les disques bleus.

Toujours dans la même rangée, si vous le souhaitez, vous pouvez ajouter un module « Navigation dans les posts ». Cela permettra à vos lecteurs de naviguer plus facilement dans vos articles. 

Module publier un contenu

5) Ajout du module Divi « Commentaires »

Créez ensuite en dessous une nouvelle rangée à une colonne et insérez le module commentaires. Vous pouvez ainsi permettre à vos lecteurs de réagir à vos posts.

Dans l’onglet Contenu, vous pourrez activer ou désactiver plusieurs options comme : l’affichage de l’avatar, du nombre de commentaires, la réponse etc.

A noter que le bouton « Réponse » est une option qui permettra à vos lecteurs de réagir aux commentaires d’autres lecteurs.

Ensuite dans l’onglet Style, vous pourrez modifier entièrement l’apparence de ce formulaire de commentaire selon vos goûts.

N’oubliez pas la fonction des petits pinceaux décrite ci-dessus est bien pratique !

 

Commentaire Blog WordPress

6) Ajout du module Divi « Curseur défilement des posts » 

Pour cette page de gabarit de post, il peut être sympa d’insérer le module « Curseur des défilements des posts » qui sera un Slider qui va donc suggérer des articles au lecteur.

Ce module est bien entendu complètement paramétrable selon vos goûts et vos besoins en jouant sur les onglets Contenu et du Style des paramètres du module .
Dans ce tuto, nous cocherons la case « Catégorie actuelle » ainsi ce ce seront uniquement les articles de la catégorie de l’article qui seront suggérés. 
Enfin si vous souhaitez que les posts défilent automatiquement et non manuellement, rendez-vous dans l’onglet Style puis animation et là vous allez pouvoir activer la rotation automatique des articles de ce module. 

Module Curseur des posts
Divi Elegant Themes

Félicitations ! Votre Gabarit d’article de Blog est maintenant prêt !

Désormais, à chaque fois que vous écrirez un nouvel article, tous les modules et les options définis seront déjà en place : la bannière avec l’image présentée et le texte dynamique ainsi que le module Commentaires et le module Défilement des posts. Vous pourrez ensuite créer la mise en page souhaitée avec autant de sections, rangées et modules souhaités. La seule chose qui s’appliquera à ces éléments, ce sera les options définies à l’étape 4 au niveau du texte et des images.

A noter que pour modifier les modules définis dans ce gabarit, il faudra revenir dans le Thème Builder.
Il ne vous reste plus maintenant qu’à enregistrer votre travail en bas à droite de la page et aussi en sortant du Thème Builder.

 

MalerLite

Vous serez peut-être intéressé aussi par…

Les bons plans Alpa14 😉

👉 Divi : Le meilleur WebBuilder WordPress, -20% sur votre licence !
👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 »
👉 Presto Player
: Le meilleur lecteur vidéo pour votre site WordPress !
👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
👉 O2switch : l’hébergeur de qualité (5€/mois en illimité avec nom de domaine)
👉 Inleed : l’hébergeur suédois performant et de qualité 

👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
👉 duoLogo : Réalisez un logo pro, formule gratuite
👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
👉 Private Internet Access
: Un VPN de qualité, protégez votre connexion Internet

👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois bien moins cher 👍.

0 Comments

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *