What are Divi Dividers?

Published on 24/05/2019 | 4 comments

Divi's Dividers will allow you to create layouts with a particularly attractive design. You can play with them endlessly with no limit of imagination. In this article, I propose to discover what a divider is, what it's used for and how to use it.

On the program:

  1. What is a Divider Divi?
  2. What separators are available?
  3. How to insert a Divider in a layout?
  4. Some successful examples... to go further!

Need for more tutorials for Divi ? Check out the latest articles.

Announcement: 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 a Divider Divi?

In webdesign, a divider is simply a separator. Don't think of a separator like a "line" or a "double line", no, we're talking about a separator with a very graphic look. Rather, we are talking about "shapes " that will separate two Divi sections of your layout (layout).

For this separation to have the desired effect, you will need to create your layout with several sections of different colors.

In fact, the web design trends show that dividers are very popular and bring a bit of freshness to a web page, if they are well used.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

2 - What separators are available?

les dividers de Divi

When you see the image above, you can better understand this notion of "form of separation".

Note that a divider is only available within a Divi section. You will never find this option on a Divi Builder module for example.

And by default, the divider of a section is set to "None", i.e. no divider is displayed by default.

Discover this tutorial which explains how to get original dividers.

3 - How to insert a divider in a layout?

We will see in detail how to add a divider to separate 2 sections:

étape 1
  • 1 - In a new page (or in an existing page), insert a new section and a new row.
  • 2 - Next, insert a text module for example.
  • 3 - Open the settings (the gear icon) of the SECTION. Go to the Content > Backgroundtab
  • 4 - Select a background color
étape 2
  • 6 - Still within the parameters of the section
  • 7 - Go to the STYLE tab
  • 8 - Then to the DIVIDERS tab
  • 9 - You can choose the position of the divider: at the top of the section or at the bottom of it.
  • 10 - By default, the divider style is set to NONE. Click here to select another shape.
  • 11 - When you select a divider, you can see it live. You may notice that the margin is a concern.
  • 12 - If this is the case, don't forget to go to the STYLE > SPACE tab of the settings in the
  • 13 - Add internal margin
  • 14 - Enough room for the content to show the divider properly.
étape 3
  • 15 - Repeat the operation several times within your layout. To save time, I even advise you to create and set up a section correctly, then duplicate it to keep the same settings.
  • 16 - On the sections that you will have duplicated, modify the background color of each of them.
étape 4

Here is the final rendering:

Exemple de layout avec Dividers - 2
Each section must be a different color for it to work.
Exemple de layout avec Dividers
Example of a layout with "wave-shaped dividers".
obtenir Divi - get Divi

4 - Some successful examples!

Indeed, when you look at the final rendering of my two examples above, you must be thinking " but this is horrible! ». For sure, there are more successful and harmonious uses of Dividers!

To go further, I suggest you discover a tutorial that explains how to add animations on dividers in a Divi section. The effect is undeniably original!

The following video explains how to create a great diagonal layoutThanks to Divi's Dividers:

And finally, I propose you to discover some examples of successful dividers:

Exemple de dividers Divi

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

apprendre à utiliser les dividers de Divi

658 words


You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

4 Commentaires

  1. autourdevanessa


    Je n’ai plus l’option divider que j’utilisais énormément sur un site. J’ai purgé mes caches mais rien n’y fait !!
    Auriez-vous une idée ?

    Merci beaucoup

  2. Lycia Diaz

    Salut Vanessa,
    Normalement les Dividers fonctionnent sans problème. Par contre, ils sont disponibles uniquement sur les SECTIONS, comme je l’explique dans cet article. Donc si tu cherches l’option au sein d’un module, tu ne la trouveras pas. C’est peut-être pour ça que tu ne les trouves pas ? Sinon, ton thème est bien à jour ?

  3. autourdevanessa

    Merci c’était mon thème qui n’était pas à jour.

  4. Lycia Diaz

    Merci pour ton retour 😉

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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

Share This