The Divi Dividers will allow you to make layouts with a particularly attractive design. You can play with them infinitely without any limit of imagination. In this article, I suggest you discover what a divider is, what it's for and how to use them.
To the programme:
- What is a Divider Divi?
- Which separators are available?
- How to insert a Divider into a layout?
- Some successful examples... to go further!
Need for more tutorials for Divi ? Check out the latest articles.
1 – What is a Divider Divi?
In webdesign, a Divider is simply a separator. Don't think of a separator of the kind "a trait" or "double line"No, we're talking about a Very graphic separator. Rather, it is "shapes" or "Forms" to come separate two sections Divi 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.
Moreover, the webdesign trends show that dividers are very popular and bring a little freshness to a web page, if they are well used.
Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"
2 - Which separators are available?
When you see the image above, you better understand this notion of "Form of separation".
Note that divider is only available in 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 positioned on "None", i.e. no separator is displayed by default.
Discover this tutorial that explains how to get original dividers.
3 – How to insert a divider into a layout?
We will see in detail how to add a divider to separate 2 sections:
- 1 – In a new (or existing) page, insert a new section then one new row (line).
- 2 - Then insert a Text module For example.
- 3 – Open the settings (the toothed wheel icon) of the SECTION. Go to tab Content > Background
- 4 - Select Background Color
- 6 - Also within the parameters of the section
- 7 - Go to 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 foot of it.
- 10 - By default, the divisor style is positioned on NOE. Click here to select another form.
- 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 tab > SPACEMENT section settings
- 13 - Add internal margin
- 14 - Sufficient margin for content to appear properly divide.
- 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 always keep the same settings.
- 16 - On the sections you have duplicated, change the background color of each of them.
The final rendering is as follows:
4 - Some successful examples!
Indeed, when you look at the final rendering of my two examples above, you must say "But it's horrible! ». It's sure, there's been more success and more harmonious use of Dividers!
To go further, I suggest you discover a tutorial that explains how to add animations on dividers of a Divi section. The effect is unquestionably original!
The following video explains how to create a beautiful diagonal layoutThanks to Divi Dividers:
And finally, I suggest you discover some examples of using well-successful dividers:
Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos!
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
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 ?
Merci c’était mon thème qui n’était pas à jour.
Merci pour ton retour 😉
Ce qui serait intéressant c’est de lister toutes les balises CSS que les diviseurs utilisent, afin de pouvoir les cibler en CSS 🙂
ouh la, c’est impossible, il y en a des centaines, voire des milliers !
Merci pour la réponse. Donc par exemple pour une section donnée on ne peut pas changer dynamiquement le divider (en pure css) ?