fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

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

Par où commencer pour créer son site Internet ?

Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

Sommaire de la vidéo

0:00 Introduction
2:41 La formation Webmyday qu’est-ce que c’est ?
6:22 Faire ou faire faire son site Internet ?
16:31 Solutions pour faire son site soi-même
18:24 Solutions pour faire faire son site
22:33 Coût d’un site Internet
25:55 Un CMS, qu’est-ce que c’est ?
26:46 Les CMS les plus connus
32:57 Le nom de domaine
33:39 L’ hébergement
34:54 Quelques hébergeurs
38:35 4 choses que doit comprendre votre hébergement
40:01 WordPress qu’est-ce que c’est ?
40:29 Différence entre WP.com et wp.org
43:00 Les différentes composants de WP
46:33 En résumé les étapes pour travailler avec WordPress
47:47 Conclusion

Sommaire de la vidéo

Vous serez peut-être également intéressé par ces articles …

Enregistrer son écran pour créer des formations

Enregistrer son écran pour créer des formations

Vous recherchez un logiciel de capture pour filmer l’écran de votre PC ou de votre Mac ? Vous souhaitez créer des démos de logiciels, des démos de jeux, des tutoriels ou des vidéos de formation d’aspect professionnel ? Alors vous avez sans doute besoin de DemoCreator de Wondershare !

lire plus
Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Créer un pop-up sur un site Divi

Créer un pop-up sur un site Divi

Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

lire plus
Offrez-moi un café! Merci :)