Template d’article Divi : stylisez vos articles de blog tout simplement !

Je vous propose un mode d’emploi, pas à pas, pour définir le design de votre template d’article Divi. Voici ce que vous allez obtenir en suivant ce tutoriel :

Grâce à la fonctionnalité de Thème Builder, Divi vous permet de customiser toutes les templates de votre site.

Nous avions vu précédemment comment customiser la page boutique et comment créer un modèle de fiche produit… Il est temps de s’attaquer au design de vos articles de blog !

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Qu’est-ce qu’une template d’article ?

Une « template » est tout simplement un « modèle ».

Cela signifie que la création d’un nouveau modèle – que ce soit pour les articles, les pages, les produits etc. – s’appliquera à tous les contenus utilisant ce modèle.

Donc, en créant une template d’article Divi, l’ensemble de vos articles de blogs (ceux déjà publiés et les prochains) utiliseront le même design. Vous créez le modèle 1 seule fois et tous vos articles auront la même composition, c’est le but d’une « template ».

Cela n’est possible qu’en utilisant le Thème Builder puisque ce dernier permet de modifier les fichiers modèles du thème.

Pour information, les articles utilisent généralement le fichier du thème nommé « single.php« . C’est donc celui-ci qui sera modifié par le thème builder… Plus besoin de thème enfant ni de savoir coder !

2 – À quoi ressemble une template d’article Divi classique ?

Si vous utilisez le thème Divi « de base » (si on peut le dire comme ça) et que vous n’avez pas encore créé de modèle avec le Divi Thème Builder, vos articles de blog devraient ressembler plus ou moins à cela :

Sur cette capture d’écran, vous pouvez voir un article classique, rédigé avec l’éditeur de WordPress (Gutenberg), donc un article qui n’utilise ni le Divi Builder, ni le Thème Builder.

À lire aussi : ne pas confondre le thème Divi et le Divi Builder.

Il faut avouer que ce n’est pas très glamour… Et je suis gentille !

L’article est composé des éléments suivants :

1. Le Header (en haut de l’écran) comprenant le menu principal et le logo (nous n’interviendrons pas sur cette partie),
2. Le titre de l’article,
3. Les métadonnées de l’article,
4. L’image de mise en avant,
5. Le contenu de l’article (le texte),
6. La section des commentaires,
7. La Sidebar (sur la partie droite),
8. Le Footer (en bas de l’écran) comprenant les crédits et les icônes de réseaux sociaux (nous n’interviendrons pas non plus sur cette partie).

Hey !Envie d’essayer gratuitement le thème Divi ?. Cliquez sur « TRY IT FOR FREE »

Dans la suite de ce tutoriel, nous allons essayer de redynamiser l’ensemble afin que l’article soit plus « attractif » et plus « design » pour finalement obtenir un rendu comme vous avez pu le voir dans la vidéo en début d’article.

3 – Créer une template d’article Divi avec le Thème Builder

Découvrons les quelques étapes faciles à réaliser pour obtenir un modèle pour l’ensemble de vos articles…

1. Allez à l’onglet Divi > Thème Builder
2. Cliquez sur « Ajouter un nouveau modèle »
3. Cochez la case « Tous les articles ». Si vous créez un modèle d’article sur un site existant qui compte de nombreux articles, vous pouvez aussi assigner ce nouveau modèle à un article spécifique (un article qui compte peu de visites par exemple). Ainsi, vous pourrez peaufiner le design de celui-ci avant de l’assigner à l’ensemble de vos articles.
4. Validez en cliquant sur « Créer un modèle »
5. Cliquez sur « Ajouter un corps personnalisé »
6. Puis sur « Construire un corps personnalisé »

7. Choisissez « Construire à partir de zéro »
8. Cliquez sur « + »
9. Choisissez une ligne 1/1
10. Et commencez par insérer le module « Titre du poste »

Nous allons voir ce module en détails…

3.1 – Insérer le module « Titre du poste »

Le module « Titre du poste » vous permet d’ajouter le titre de votre article au sein de votre modèle. Celui-ci est indispensable !

Lorsque vous l’insérez, le titre est nommé « Votre titre de publication dynamique s’affiche ici ». N’essayez pas de le modifier. Comme indiqué, il s’agit d’un « titre dynamique », cela signifie que chaque article utilisera cet emplacement pour afficher son titre. Peu importe si vous avez rédigé l’article avec Gutenberg ou avec le Divi Builder (depuis l’onglet Article > Ajouter). En savoir plus sur le contenu dynamique ici.

Depuis l’onglet « Contenu », le module « Titre du poste » offre diverses options d’affichage :

1. Le titre de l’article.
2. Les métadonnées de l’article.
3. Le nom de l’auteur.
4. La date de publication. Cela fonctionnera aussi si vous utilisez la date de mise à jour de l’article.
5. La ou les catégories : elles n’apparaissent pas encore pour l’instant mais seront bien visible du côté front-end.
6. Le nombre de commentaires.
7. L’image principale (image de mise en avant).
8. Position de l’image associée : cette option propose 3 positions différentes pour l’image de mise en avant de votre article. Vous aurez le choix entre « Titre en dessous » (image d’abord puis titre ensuite), « Titre au-dessus » (titre d’abord puis image ensuite) et « Image de fond du titre ». Je vous propose d’utiliser cette dernière option qui offre un visuel bien plus sympa que les deux autres. Ainsi, en choisissant « Image de fond du titre », l’image de mise en avant de votre article se positionnera en arrière-plan du titre de l’article.
9. Pensez à valider et enregistrer vos modifications.

Toujours dans les paramètres du module « Titre du poste » et toujours dans l’onglet « Contenu », vous pourrez vous rendre à la section « Fond » pour ajouter un dégradé de couleur qui se placera au-dessus de l’image de mise en avant.

Cette couleur semi-transparente qui se place au-dessus de votre image (overlay) ne sera visible que si vous activez l’option « image de fond du titre ».

Sinon, vous pouvez activer l’effet parallaxe afin que l’image de mise en avant soit fixée en arrière-plan. Cela donne un effet très sympa !

Attention, si vous activez cette option, veuillez tenir compte de ces 2 choses importantes :

• L’effet « parallaxe » et l’effet « overlay » ne sont pas compatibles ensemble (dans Divi). Vous devrez faire un choix : soit parallaxe, soit overlay…
• L’effet parallaxe n’est pas compatible avec les versions mobiles sauf si vous suivez ce tutoriel.

3.2 – Insérer le module « Publier un contenu »

Le titre étant paramétré, il vous faut insérer le module « Publier un contenu » afin que vos articles affichent leur contenu (textes, images etc.).

Ce module est très complet et est indispensable : il doit obligatoirement être inséré dans votre template d’article Divi.

Pour le paramétrage, je vous donne rendez-vous à l’article dédié au module « Publier un contenu ».

3.3 – Insérer le module « Commentaires »

Que serait un article de blog sans formulaire de commentaire ?

Toutefois, ce module n’est pas indispensable, contrairement au module « Titre du poste » et « Publier un contenu ».

À vous de décider si vous souhaitez accepter les commentaires au sein de vos articles.

1. En bas de la template d’article, cliquez sur le « + » gris. Ce dernier permet d’ajouter un nouveau module au sein de la même « rangée ».
2. Insérez le module « Commentaires ».
3. Vous pouvez afficher ou non la photo de l’auteur du commentaire.
4. Vous pouvez afficher ou masquer le bouton « répondre ».
5. Affichez ou masquez le nombre de commentaires.
6. Peaufinez le design (police, taille, couleur etc.) de la section « commentaires » depuis l’onglet « Style » et/ou « Avancé ».
7. Enregistrez vos modifications.

4 – Peaufiner le design de la template d’article

À ce stade du tutoriel, votre template d’article Divi devrait ressembler à cela :

Pour l’instant :

• La Sidebar a disparu.
• La largeur du contenu s’est élargi.
• Le titre de l’article et les métadonnées apparaissent au centre de l’image de mise en avant.
• Un dégradé de couleur a été apposé sur l’image de mise en avant.
• Le formulaire de commentaire a légèrement été modifié.

4.1 – Passer l’image et le titre en pleine largeur

Pour un design d’article un peu plus « dans l’air du temps », on pourrait agrandir l’image de mise en avant afin qu’elle ait une largeur de 100%.

Pour cela, il va falloir agrandir « la boite » dans laquelle se trouve cette image : on va agir sur la « rangée » (boite verte).

1. Cliquez sur la roue dentée pour ouvrir les « réglages de la rangée ».
2. Allez à l’onglet Style > Dimensionnement
3. Placez la largeur maximale à 100%
4. Idem pour la deuxième valeur : poussez le curseur au maximum.
5. Allez à l’onglet Style > Espacement pour placer les marges et marges internes à 0px.

À ce stade, l’image de mise en avant doit être de 100% et elle doit toucher les bords droit et gauche de votre écran.

Cependant, il est possible qu’une marge persiste en haut de l’image de mise en avant (entre l’image et le menu principal). Si c’est le cas, vous pourrez corriger cela à l’aide du bout de code CSS suivant :

Allez à l’onglet Apparence > Personnaliser > CSS additionnel et collez le code ci-dessous :

.et_pb_section_0_tb_body {
	padding-top: 0px !important;
}

@media (min-width: 981px){
	.et_pb_section_0_tb_body {
	padding-top: 0px !important;
}
}

Cela devrait corriger cette marge « résistante » et l’image de mise en avant de votre article devrait toucher le header de votre site.

4.2 – Ajuster la largeur du contenu de l’article

Idem pour la largeur du contenu de votre site. Vous pourriez élargir le contenant afin que le texte de vos articles présente des marge latérale moins large.

Ceci est facultatif mais si vous souhaitez agir sur ces marges, voici le procédé :

1. Ouvrez les « réglages de la rangée » qui contient le module « Publier un contenu ».
2. Allez à l’onglet Style > Dimensionnement
3. Placez le curseur de la largeur maximale sur 100%
4. Faites glisser le deuxième curseur au maximum
5. Allez à l’onglet Style > Espacement pour y ajouter une marge interne à gauche de 50px. Ceci évitera que le texte de votre article soit complètement « collé » à la gauche de votre écran.
6. N’oubliez pas de paramétrer les versions mobile et tablette en ajoutant, cette fois-ci, de la marge interne à gauche ET à droite.
7. Enregistrez vos modifications.

4.3 – Ajoutez une sidebar Divi

Un autre élément assez commun pourrait être ajoutée au sein de votre template d’article Divi : une sidebar ou barre latérale.

On trouve cela très souvent sur les blogs, même si la tendance tend à la faire disparaitre complètement…

1. Modifiez la rangée qui contient le module « Publier un contenu ».
2. Au lieu d’utiliser une rangée de type 1/1, je vous propose de choisir une composition de [2/3 + 1/3] ou de [3/4 + 1/4].
3. Dans ce nouveau « quart », un bouton « + » gris apparaît et vous permet d’ajouter un nouveau module.
4. Insérez un module « Barre latérale ».
5. Dans les réglages du module, vous pourrez choisir quelle est la sidebar à faire apparaître. Cela sous-entend que vos sidebars doivent être prêtes. Vous les gérez à l’onglet Apparence > Widgets de WordPress.

Ensuite, il ne vous restera plus qu’à styliser l’apparence de la sidebar à votre convenance grâce aux options du module :

1. À l’onglet Contenu > Fond, choisissez une couleur d’arrière-plan. J’ai choisi le blanc.
2. À l’onglet Style > Espacement, ajoutez un peu de marge interne. J’ai ajouté 20px de tous les côtés.
3. À l’onglet Style > Boite ombre, ajoutez une ombre à la sidebar afin de donner un peu de relief.
4. À l’onglet Style > Bordure, j’ai fait le choix d’arrondir les angles de ma sidebar. Mais vous pourrez laisser les angles droits ou ajouter une bordure de couleur si vous le souhaitez.
5. À l’onglet Style > Transformer > Outil curseur, vous pourrez déplacer légèrement la position de votre sidebar. Cet onglet est intéressant pour mettre un élément à cheval sur deux sections. J’ai déplacé ma sidebar de -140px vers le haut et de -15px sur la gauche.
6. Attention à cette option de transformation, veillez à mettre les valeurs à 0px pour les versions mobile et tablette. Lire également cet article pour optimiser vos sidebars pour les versions mobiles.
7. Sauvegardez vos modifications.

5 – Design final de la template d’article Divi

Tadaaa ! Voici le design final du modèle qui s’appliquera à l’ensemble de mes articles de blog.

Pour bien faire, il faudrait encore styliser le formulaire des commentaires qui est encore un peu trop classique à mon goût.

Idée : vous pourriez assigner cette template d’article Divi qu’à une seule catégorie de votre blog et créer des versions un peu différente pour les autres catégories. Par exemple, vous pourriez assigner une sidebar différente pour chaque template de catégorie de votre blog. Ou des couleurs différentes etc.

Voici également d’autres tutoriels pour vos templates d’article :

• Template d’article UX-Friendly
• Comment créer une template d’article
• 5 éléments graphiques originaux pour customiser vos templates d’article.

Avec Divi, les possibilités sont infinies !