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.
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.
- Ordinateur portables
- Smartphones
- Appareil photos
- 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 ».
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.
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.
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 »
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 ».
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.
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 »
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 »
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é »
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.
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 !
