Divi Dividers: What are they?

Published on 24/05/2019 | 4 comments

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!

apprendre à utiliser les dividers de Divi

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Create a custom "back up" button in just a few clicks!

When I tell you we can do anything with Divi! No need to code or install many plugins... You just have to know where to look: the options are there! In this article, I'll show you how to create a back-to-top button in just a few clicks!

4 Commentaires

  1. autourdevanessa

    Bonjour,

    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 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