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

On the program:

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

Need for more tutorials for Divi ? Discover the latest articles.

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

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

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

In fact, the webdesign trends show that dividers are very popular and bring a little 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 - Which separators are available?

les dividers de Divi

By seeing the image above, you 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 separator is displayed by default.

Discover this tutorial which explains how to obtain original dividers.

3 - How to insert a divider within 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 then a new row (line).
  • 2 - Then insert a text module for example.
  • 3 - Open the parameters (the gearwheel icon) of the SECTION. Go to the Content tab > Background
  • 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 MISCELLANEOUS 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 divisor style is set to NONE. Click here to select another shape.
  • 11 - When you select a divisor, you can see it live. You may notice that the margin is a concern.
  • 12 - If this is the case, do not forget to go to the STYLE tab > SPACEMENT of the section settings
  • 13 - Add internal margin
  • 14 - Enough margin 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 configure a section correctly, then duplicate it to keep the same settings.
  • 16 - On the sections you have duplicated, change the background color of each one.
é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 "Dividers in wave form"
obtenir Divi - get Divi

4 - Some successful examples!

Indeed, when you look at the final rendering of my two examples above, you have to say to yourself "but it's horrible! ». There is no doubt that there is a more successful and harmonious use of Dividers!

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

The following video explains how to create a Great diagonal layoutthanks to Divi's Dividends:

And finally, I suggest you to discover some examples of the use of successful dividers:

Exemple de dividers Divi

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

Pin It on Pinterest

Share This