Divi Article Template: simply style your blog articles!

Published on 06/01/2020 | 30 comments

I propose you a step-by-step guide to define the design of your Divi article template. This is what you will get by following this tutorial:

Thanks to the Theme Builder functionalityDivi allows you to customize all the templates of your site.

We saw earlier how customize the shop page and how create a product sheet template... It's time to tackle the design of your blog posts!

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What is an article template?

A "template" is simply a "model".

This means that the creation of a new template - be it for articles, pages, products etc. - is only possible with the help of a new template. - will apply to all content using this template.

So, by creating a Divi article template, all your blog articles (those already published and the next ones) will use the same design. You create the template only once and all your articles will have the same composition, this is the purpose of a "template".

This is only possible by using the Theme Builder, since it allows you to modify the template files of the theme.

Template Hierarchie WordPress
Template Hierarchy WordPress: Hierarchy of template files

For your information, the articles generally use the theme file named "single.php. It is thus this one which will be modified by the builder theme... No more need for children's theme nor to know how to code!

2 - What does a classic Divi article template look like?

If you are using the "basic" Divi Theme (if you can put it that way) and have not yet created a template with the Divi Theme Builder, your blog posts should look more or less like this :

Template d'article Divi classique
Appearance of a classic Divi article template (without the Divi Theme Builder)

On this screenshot, you can see a classic article, written with the WordPress editor (Gutenberg), therefore an article that uses neither the Divi Builder nor the Theme Builder.

Also to be read: do not confuse the Divi theme with the Divi Builder.

You have to admit it's not very glamorous... And I'm nice!

The article consists of the following elements:

  1. The Header (at the top of the screen) including the main menu and the logo (we will not intervene on this part),
  2. The title of the article,
  3. The metadata of the article,
  4. The highlight image,
  5. The content of the article (the text),
  6. The comments section,
  7. The Sidebar (on the right side),
  8. The Footer (at the bottom of the screen) including credits and social network icons (we won't intervene on this part either).

Hey!Want to try the Divi theme for free?. Click on "TRY IT FOR FREE".

In the rest of this tutorial, we will try to revitalize the whole so that the article is more "attractive" and more "design" to finally obtain a rendering as you could see in the video at the beginning of the article.

3 - Create a Divi article template with the Theme Builder

Let's discover the few easy steps you can take to get a template for all your items...

Créer une template article Divi
Create an article template with the Divi Theme Builder
  1. Go to the Divi tab > Builder Theme
  2. Click on "Add a new template".
  3. Check the "All Items" box. If you create an article template on an existing site with many articles, you can also assign the new template to a specific article (an article with few hits, for example). This will allow you to fine-tune the design before assigning it to all your items.
  4. Validate by clicking on " Create a template ".
  5. Click on "Add a custom body".
  6. Then on "Building a custom body"
Ajouter le titre du poste
Add the "job title" module
  1. Choose "Build from scratch".
  2. Click on "+".
  3. Choose a line 1/1
  4. And start by inserting the "Job Title" module...

We're going to see this module in detail...

3.1 - Insert the module " Job title ".

The "Job Title" module allows you to add the title of your article within your template. This one is indispensable!

When you insert it, the title is named "Your dynamic publication title is displayed here".. Don't try to change it. As indicated, this is a "dynamic title", meaning that each article will use this location to display its title. It doesn't matter if you wrote the article with Gutenberg or with the Divi Builder (from the Article > Add tab). Learn more about dynamic content here.

From the "Content" tab, the "Job Title" module offers various display options:

Paramétrer le module "Titre du poste"
Proceed to the parameters of the module "Job Title".
  1. The title of the article.
  2. The metadata of the article.
  3. The name of the author.
  4. The date of publication. This will also work if you use the date the article was updated.
  5. Category(ies): they do not appear for the moment but will be clearly visible on the front-end side.
  6. The number of comments.
  7. The main image (spotlight image).
  8. Position of the associated image: this option proposes 3 different positions for the image of your item's promotion. You will have the choice between "Title below" (image first then title later), "Title above" (title first then image later) and "Title background image". I suggest you use this last option which offers a much nicer visual than the other two. For example, if you choose "Title background image", the image used to highlight your article will be positioned in the background of the article title.
  9. Remember to validate and save your changes.

Still in the parameters of the " Job Title " module and still in the " Content " tab, you can go to the " Background " section to add a color gradient that will be placed above the highlight image.

Ajouter un "overlay"
Add an overlay above the highlight image

This semi-transparent color that is placed above your image (overlay) will only be visible if you activate the option "title background image".

Alternatively, you can enable the parallax effect so that the foreground image is fixed in the background. It gives a very nice effect!

Ajouter du parallaxe sur l'image de mise en avant Divi
Adding parallax to the Divi highlight image

If you activate this option, please take into account these 2 important things:

3.2 - Insert the " Publish content " module

Once the title has been set, you need to insert the "Publish content" module so that your articles display their content (text, images, etc.).

Ajouter le module "Publier un contenu"
Add the "Publish content" module to display the content of your articles.

This module is very complete and is indispensable: it must be inserted in your Divi article template.

For the configuration, I give you an appointment at the article dedicated to the "Publish Content" module.

3.3 - Insert the " Comments " module

What would a blog post be without a comment form?

However, this module is not required, unlike the "Job Title" and "Publish Content" modules.

It is up to you to decide if you wish to accept comments within your articles.

Ajouter le module "Commentaires"
Add the "Comments" module to your article template
  1. At the bottom of the article template, click on the grey "+". The latter allows you to add a new module within the same "row".
  2. Insert the "Comments" module.
  3. You can display or not display the photo of the author of the comment.
  4. You can show or hide the "reply" button.
  5. Show or hide the number of comments.
  6. Fine-tune the design (font, size, color etc.) in the "comments" section of the "Style" and/or "Advanced" tab.
  7. Save your changes.

4 - Refine the design of the article template

At this stage of the tutorial, your Divi article template should look like this:

Évolution de la template d'article Divi
Evolution of the article template - stage 1

For the time being:

  • The Sidebar's gone.
  • The width of the content has widened.
  • The article title and metadata appear in the center of the highlight image.
  • A color gradient has been applied to the highlight image.
  • The comment form has been slightly modified.

4.1 - Passing the image and the title in full width

For a slightly more "in tune with the times" article design, the highlight image could be enlarged so that it is 100% wide.

To do this, you will have to enlarge the "box" in which this image is located: we will act on the "row" (green box).

Rangée "plein largeur"
Switch the "row" to "full width" mode.
  1. Click on the gearwheel to open the "row settings".
  2. Go to the Style tab > Sizing
  3. Set the maximum width to 100%.
  4. Same for the second value: push the cursor to the maximum.
  5. Go to the Style > Spacing tab to set the margins and inside margins to 0px.

At this point, the highlight image should be 100% and should touch the right and left edges of your screen.

However, a margin may remain at the top of the highlight image (between the image and the main menu). If this is the case, you can correct this with the following CSS code snippet:

Ajout de CSS pour la rangée "pleine largeur"
Add some CSS to get a "full width" row with no margin above it.

Go to the Appearance tab > Customize > Additional CSS and paste the code below :

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

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

This should correct this "resistant" margin, and the image of your article should touch the header of your site.

4.2 - Adjusting the width of the article content

Same for the width of the content of your site. You may want to widen the container so that the text of your articles has narrower side margins.

This is optional but if you wish to act on these margins, here is the procedure:

Contenu en pleine largeur template article Divi
Get the "Publish Content" module in full width
  1. Open the "Row settings" which contains the "Publish content" module.
  2. Go to the Style tab > Sizing
  3. Set the maximum width slider to 100%.
  4. Drag the second slider to maximum
  5. Go to the Style > Spacing tab to add a 50px left inner margin. This will prevent the text of your article from being completely "pasted" on the left side of your screen.
  6. Don't forget to set up the mobile and tablet versions by adding, this time, some internal margin on the left AND on the right.
  7. Save your changes.

4.3 - Add a Divi sidebar

Another quite common element could be added within your Divi article template: a sidebar or sidebar.

We find this very often on blogs, even if the tendency is to make it disappear completely...

Ajouter une sidebar dans la template d'article Divi
Add a sidebar in the Divi article template
  1. Modify the row that contains the "Publish Content" module.
  2. Instead of using a 1/1 type row, I suggest you choose a composition of [2/3 + 1/3] or [3/4 + 1/4].
  3. In this new "quarter", a grey "+" button appears and allows you to add a new module.
  4. Insert a sidebar module.
  5. In the module settings, you can choose which sidebar to display. This implies that your sidebars must be ready. You manage them on the Appearance > Widgets tab in WordPress.

Then, all you have to do is style the appearance of the sidebar to your liking using the options in the :

Styliser la sidebar Divi
Style the Divi sidebar
  1. On the Content tab > Background, choose a background color. I chose the white one.
  2. On the Style > Spacing tab, add some internal margin. I added 20px on all sides.
  3. In the Style > Shadow Box tab, add a shadow to the sidebar to give some relief.
  4. In the Style > Border tab, I chose to round the corners of my sidebar. But you can leave the right angles or add a colored border if you wish.
  5. At the Style > Transform > Cursor Tool tab, you will be able to move the position of your sidebar slightly. This tab is interesting for straddling two sections. I moved my sidebar -140px up and -15px to the left.
  6. Be careful with this transformation option, be sure to set the values to 0px for the mobile and tablet versions. Also read this article for optimize your sidebars for mobile versions.
  7. Save your changes.

5 - Final design of the Divi article template

Tadaaa! Here is the final design of the template that will apply to all my blog posts.

Template d'article Divi finale
Appearance of the Divi article template - final version

To do it right, I would still have to stylize the comment form, which is still a bit too classic for my taste.

Tip: You could assign this Divi article template to only one category of your blog and create slightly different versions for the other categories. For example, you could assign a different sidebar for each category template of your blog. Or different colours etc.

Here are also other tutorials for your article templates:

With Divi, the possibilities are endless!

Template d'article Divi
Template article Divi Theme Builder
Blog Post Template with Divi Theme Builder

You should like it too:

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block: Divi modules within Gutenberg!

Good news! Version 4.1 of Divi allows Divi Builder modules to be inserted into the WordPress Gutenberg editor. Your imagination knows no bounds! Can you imagine how much you can achieve with Divi and WordPress?

30 Commentaires

  1. Kaellyana

    Bonjour,
    Bonne année Lycia.
    J’aime beaucoup la sidebar qui déborde dans l’image et qui est arrondis, cela change totalement de la sidebar de base de divi.
    Je garde l’idée de personnalisation sous le coude.
    Tu crois que l’on peut faire la même chose avec l’image mise en avant qui apparaîtrais?

  2. Lycia Diaz

    Salut Kaellyana !
    Bonne année à toi aussi…
    Oui, c’est possible en bidouillant un peu. J’ai essayé de le faire aussi pour le tuto. En fait tu dois utiliser le module « Titre du poste » et supprimer tous les autres éléments (le titre, les métas etc.) ainsi tu ne gardes que l’image de mise en avant. Ensuite tu la customises et tu la mets où tu veux. Par contre, il te faudra rajouter un deuxième module « Titre du poste » que tu afficheras cette fois-ci sans son image. Tu vois l’idée ?
    À bientôt 😉

  3. Kaellyana

    Coucou,
    oui ce que tu me dis c’est ce que j’avais en tête pour faire un essais.
    En tout cas merci de ta réponse et de tous les articles que tu proposes.
    Mon soucis moi avec divi c’est leurs partie blog.
    C’est moche
    soit en grille soit en méga grand.

    Avec le thème builder on commence de pouvoir faire quelques trucs plus sympa c’est déjà mieux.

  4. Lycia Diaz

    Oui, tu peux tout faire, quasiment 😉 ou du moins tu peux améliorer ce qui ce faisait jusqu’à présent !

  5. Decoster

    Bonjour,
    Je voulais tester cette présentation d’article mais l’option « activer l’effet parallaxe » ne s’affiche pas ?
    Quelle erreur ai-je commis ?
    Merci.

  6. Lycia Diaz

    Salut Decoster.
    En effet, mon image n’était pas explicite et comme c’est compliqué de l’expliquer par écrit, j’ai mis à jour l’image qui montre comment activer l’effet parallaxe sur l’image de mise en avant.
    Tu verras sur la dernière image du chapitre 3.1, une capture d’écran qui montre comment faire. Si tu n’as pas trouvé cette option, c’est parce que j’avais omis d’entourer un détail qui a son importance. Tu verras sur cette capture une annotation en violet (au lieu de rose). La réponse à ta question est là.
    😉

  7. James

    Bonjour,
    Comment peut-on changer l’image du haut pour CHAQUE article ?
    Merci,

  8. Decoster

    Bonjour Lycia, merci pour les précisions, j’ai vu.
    Une autre question : est-il possible d’utiliser cette méthode pour tout nouvel article ou ne peut-elle s’appliquer qu’à des articles déjà rédigés ?
    Merci.

  9. Lycia Diaz

    Salut Decoster, la template s’appliquera à tous tes articles déjà publiés et ceux à venir…

  10. Decoster

    Bonjour Lycia, merci pour l’info. Ça ne m’arrange pas mais tant pis ! Belle journée à vous.

  11. Lycia Diaz

    Salut Decoster. Si ça ne t’arrange pas, tu peux tout simplement appliquer ce template à certains articles ou certains catégories seulement. Lors de la création du template, au lieu de cocher « tous les articles » tu peux faire d’autres choix 😉

  12. Jean-Luc Vandeweghe

    Bonsoir Lycia,
    Je suis subjugué par la qualité de tes articles. Merci.
    Quand le modèle est enregistré, comment faire pour l’utiliser sur un article ?
    Je clique sur « Créer/Article » mais pas de vue sur les modèles crées.

  13. Lycia Diaz

    Salut Jean-Luc et merci 😉
    Normalement, tu n’as rien à faire. Si tu as bien paramétré ton template, tous tes articles auront le même design. Tu as juste à créer ton article, avec Gutenberg ou le Divi Builder, et le contenu apparaîtra avec le design que tu as prédéfini avec le Thème Builder. Si ça ne marche pas : désolée de te le dire, mais tu as dû rater une étape. Vérifies le tuto, tu as peut-être omis de cocher quelque chose 😉

  14. Lycia Diaz

    Salut James,
    L’image insérée dans cette template est « dynamique ». Cela signifie que l’emplacement affichera l’image principale que vous insérez dans chaque article (dans le backoffice de l’article – pas dans Divi) : changez donc votre « image de mise en avant » à chaque article et votre image sera personnalisée à chaque publication.

  15. JLuc

    Lycia,
    Peut-on créer une Template à partir d’une page/article existante ?

  16. JLuc

    Bizarre ! J’ai bien créé un modèle avec Thème Builder. J’ai coché « Tous les articles », mais je ne le retrouve pas dans Divi Builder « Télécharger le modèle ».

  17. JLuc

    Bonjour Lycia,
    J’espère que tu as passé un bon week-end bien mérité…
    Excuse-moi d’insister, mais j’ai repris toutes les étapes de ton tutoriel.
    Rien à faire, ma template Article ne modifie pas mes articles existant et je ne la retrouve pas dans « Choisir la mise en page » ni dans « Cloner une mise en page existante ». Qu’ai-je bien pu oublier ?

  18. Lycia Diaz

    Salut Jean Luc. Oui, bon WE et toi ? Concernant ta demande, je crains qu’il y ait une erreur de compréhension. Quand je lis ton commentaire, je crois comprendre que tu n’as pas assimilé ce qu’est une template de thème. Tu ne la trouves en aucun cas dans tes mises en pages du Divi Builder. C’est un design qui va s’appliquer d’office à tous tes articles, si tu as bien paramétré ta template. Si tu défini un design pour tes articles, toutes ces publications seront affectées. Tu n’as à le définir qu’une seule fois depuis le thème Builder. Il ne faut pas confondre un template de thème et un layout, qui lui s’applique au corps de ton article. Si tu as besoin d’un accompagnement personnalisé c’est faisable (je le fais à discrétion : https://astucesdivi.com/produit/support-premium-divi/) J’espère que mes explications t’auront aider et t’aideront encore 😉

  19. JLuc

    Merci bcp pour ta réponse Lycia,
    Je vais rassembler mes besoins et reviendrai vers toi en mode discret 😉

  20. kaellyana

    Coucou Lycia
    J’ai testé ton article
    ça marche c’est cool.
    Bon par contre il faut avoir des images mises en avant au format horizontal. Car sinon avec une image au format vertical c’est moche.
    Ce qui fait que niveau chroniques littéraires avec la couverture d’un livre cela ne rend pas tip top.

    Je garde l’idée de la présentation de ces articles pour d’autres projets.

  21. Lycia Diaz

    Merci Kaellyana pour ton retour… Je pense que tu peux adapter avec des images au format portrait ? Mais je n’ai pas testé… À voir… À bientôt 😉

  22. Florent

    Hello Lycia,

    Super blog et contenu au top ! Je t’écris ce message car quand je publie mon article je ne retrouve que le dégradé et non pas mon image de fond avec le dégradé. Ai-je oublié quelque chose ?

    Merci pour ton retour 🙂

  23. Lycia Diaz

    Ah mais j’y pense, je t’ai donné le tuto du parallaxe mais toi tu veux simplement le dégradé qui recouvre ton image ? Il y a une petite case à cocher pour ça : « image de fond du titre » (très mauvaise traduction, je te l’accorde). Coche-la. Le tuto du parallaxe l’explique aussi.

  24. Florent

    Lycia, merci pour ton retour.
    Malheureusement j’ai déjà cliqué sur cette case et cela affiche le dégradé de couleur au lieu de l’image avec le dégradé.
    Pour faire simple lorsque je la décoche, je vois mon image sans dégradé et lorsque je la coche uniquement le dégradé..

  25. Lycia Diaz

    Dans ce cas, décoche l’option « parallaxe », c’est à cause de ça. Lis mon tuto à ce sujet, tu vas comprendre

  26. Florent

    Désolé, je dois surement oublier quelque chose mais cette option est décochée également..

  27. Lycia Diaz

    Ah … je vois pas, désolée . Essaye une autre image juste pour voir. Ou recommence depuis le début, y’a peut-être un truc que tu as oublié ?

  28. Thuret

    Bonjour Lycia, je me retrouve face à un petit soucis, lorsque je personnalise ma mise en page, mon menu de thème disparait. Sais-tu comment gérer ce problème ?

  29. Lycia Diaz

    Salut Thuret. Pourrais-tu être plus précis ? Car je ne crois pas que ce soit un souci mais plutôt le comportement normal, tout dépend de ce que tu as fait et de ce que tu entend par « mon menu de thème disparaît » ?

Soumettre un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This