fbpx
Comment créer une page blog sur votre site WordPress avec Divi ?
Alpa14 les tutoriels Gratuits WordPress Divi

Comment insérer un blog sur votre site Web ?

Dans ce nouveau tutoriel Divi, je vais vous montrer comment placer un blog dans votre site WordPress.
Le blog peut être un module intéressant à activer sur votre site Intenet, car il va vous permettre d’organiser vos articles et de faire réagir vos lecteurs grâce aux commentaires.
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 ce tutoriel, nous partirons d’un site fictif que j’ai réalisé. Il s’agit d’un site d’unboxing qui présentera le déballage d’objets technologiques et les commentaires associés. Ces objets technologies seront regroupés sous 4 catégories.

  1. Ordinateur portables
  2. Smartphones
  3. Appareil photos
  4. Divers.

En ce début de tutoriel,  le site est constitué de 3 pages, une page « Accueil », une page « Qui sommes-nous ? » et une page « Contact ».
Nous avons donc besoin d’une page où seront regroupés et classés tous les articles unboxing de notre site. Le blog sera donc ici la plateforme parfaite pour faire et organiser ces présentations.
Nous allons donc insérer un blog dans notre site WordPress sur une page de présentation des articles intitulée « Unboxing ».

Site unboxing

Etapes pour création et l’insertion de notre page Blog sur notre site WordPress

1) Création de quelques articles pour illustrer notre Blog.

A noter que dans WordPress, les articles de Blog vont se créer dans la rubrique « Articles » et non « Pages ».
Quand vous créez un article, dans la marge de droite, il vous est possible de définir des catégories et d’y placer l’article concerné en cochant la case correspondante.
Vous pouvez également choisir une image présentée à cet endroit. C’est l’image principale de l’article. C’est cette image qui apparaîtra avec un court extrait de votre article sur la page blog que nous allons créer. C’est également cette image qui apparaîtra si vous partagez le lien URL votre article via les réseaux sociaux.

 

MalerLite
menu wordpress

2) Enregistrement de la section bannière

Afin d’aller plus vite dans la création de cette nouvelle page, 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). Une autre solution serait lors de la création de notre page Blog de cloner la page d’accueil pour conserver la bannière puis d’effacer ensuite les modules inutiles.

Création de la page Blog (dans notre cas nous l’appellerons « Unboxing ») sur laquelle seront placés des extrait de chaque article avec leur « image présentée » respective. Pour cela, allez sur « Pages » dans le menu de gauche.

Menu section Divi
Divi Elegant Themes

3) Insertion des modules Blog et Barre latérale

Sur cette nouvelle page, dans la 2ème section, sous la section de la bannière, créez une rangée 3/4  1/4. Placez dans la colonne de gauche (3/4) le module Blog. Veuillez noter au passage que les extraits et les images présentées des articles apparaissent. Puis dans la colonne de droite (1/4), placez le module « Barre latérale »

rangée Divi

4) Apportez le style souhaité à votre Blog et à votre barre latérale

A noter que vous pouvez vraiment modifier l’apparence classique de votre Blog en allant dans les paramètres du Blog, sur l’onglet « Style » et en choisissant le modèle « Grille » dans la partie « Modèle ».

Disposition Grille Blog Divi
Apparence Blog Divi

5) Ajoutez la nouvelle page créée au menu du header

Pour cela rendez-vous dans le menu de gauche « Apparence » puis « Menus », sélectionnez à gauche « Voir toutes les pages » puis cochez la page à ajouter puis l’ajouter. Dans notre cas, ce sera ici « Unboxing ». Réorganisez les pages du menu (si nécessaire) par glisser/déposer.

Menu Divi WordPress

6) Paramétrage de la barre latérale

Pour modifier les éléments de votre barre latérale, rendez-vous dans le menu de gauche dans « Apparence » puis « Widgets ». Il vous suffira d’ajouter des éléments à votre barre en glisser/déposer ou d’en retirer.
Il est également possible de paramétrer la barre latérale en passant (toujours menu de gauche) par « Divi » puis « Personnaliseur de Thème »

Barre latérale WP
Widget WP

7) Déclarez la lecture des pages

Pour indiquer à WordPress quelles pages il doit afficher en premier, il faut aller les déclarer. Pour cela, rendez-vous dans « Réglages » puis « Lecture ». Dans réglages de lecture, choisissez l’option « Une page Statique ». Dans « Page d’accueil » déclarer la 1ère page sur laquelle arriveront les internautes en écrivant ou en cliquant sur votre nom de domaine (votre-site.fr). Pour nous ce sera « Accueil »
Attention, pour « Page des articles » ne choisissez pas votre page de Blog, sinon WordPress affichera une page Blog par défaut sans le design de Divi. Laissez sur « Sélectionner »

Divi Elegant Themes
Déclarer la lecture des pages

8) Créer un gabarit pour les pages catégories avec le Thème Builder

En cliquant sur une catégorie de votre barre latérale, vous constatez que le Design Divi réalisé pour la page d’affichage de Blog n’est pas conservé. Pour modifier cela, nous allons construire une page catégories avec une titre  dynamique.

Pour cela, rendez-vous dans le menu de gauche, choisissez « Divi » puis « Thème Builder ». Choisissez une case vide et cliquez sur « Ajouter un nouveau modèle » puis cochez la case « Toutes les catégories pages » puis cliquez au bas sur « Créer un modèle ». Ensuite cliquez sur « Ajouter un corps personnalisé » puis « Construire un corps personnalisé »

Divi Theme Builder
Divi Titre dynamique

Dans la création de la nouvelle page sélectionnez « Cloner une page existante » puis choisissez de cloner votre page d’affichage de votre blog. Pour nous ce sera la page « Unboxing ».
Dans le module d’affichage de votre bannière, dans « Titre » cliquez sur les petits disques empilés pour utiliser un contenu dynamique, puis choisissez « Poster/Titre de l’archive ».
En paramétrant ainsi, le titre de la catégorie appelé apparaîtra automatiquement à cet emplacement et ce de manière dynamique.
Ensuite dans les paramètres du module Blog, onglet « Contenu » puis dans « Catégories incluses », cochez « Catégorie actuelle ». Enregistrez le tout.

Réglage Blog Divi

Félicitations ! Votre Blog est en place.
Vous avez sans doute remarqué que l’affichage de votre article lui-même conserve l’affichage classique de WordPress. Pas de panique :)
Dans un prochains tutoriel, je vous montrerai comment créer un gabarit personnalisé de page d’article en y incluant des modules cools disponibles dans le Divi Builder !

MalerLite

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

Les bons plans Alpa14 😉

👉 Divi : Le meilleur WebBuilder WordPress, -20% sur votre licence !
👉 Presto Player : Le meilleur lecteur vidéo pour votre site WordPress !
👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
👉 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
👉
Jesper Nielsen : Un revenu complémentaire ? Vendez des bijoux scandinaves et rejoignez l’équipe de ma femme !

👁️ 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 *