Divi Dividers: what are they?

The Divi Dividers vont vous permettre de réaliser des layouts avec un design particulièrement attractif. On peut jouer avec eux à l'infini sans limite d'imagination. Dans cet article, je vous propose de découvrir ce qu'est un divider, à quoi ça sert et comment les utiliser.

To the programme:

1. Qu'est-ce qu'un Divider Divi ?
2. Which separators are available?
3. Comment insérer un Divider au sein d'une mise en page ?
4. Quelques exemples réussis... pour aller plus loin !

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

1 - Qu'est-ce qu'un Divider Divi ?

In webdesign, a Divider is simply a separator. Don't think of a separator of the kind "un trait" or "double trait", non, on parle ici d'un séparateur à l'allure très graphique. Il s'agit plutôt de "shapes" or "formes" to come separate two sections Divi of your layout (layout).

Pour que cette séparation ait l'effet escompté, vous devrez créer votre layout avec plusieurs sections de couleurs différentes.

D'ailleurs, les webdesign trends montrent que les dividers sont très prisés et apportent un peu de fraicheur au sein d'une page web, s'ils sont bien utilisés.

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

2 - Quels séparateurs sont disponibles ?

En voyant l'image ci-dessus, vous comprenez mieux cette notion de "forme de séparation".

Notez qu'un divider est disponible uniquement au sein d'une section Divi. You will never find this option on a Divi Builder module For example.

And by default, le divider d'une section est positionné sur "None", c'est-à-dire qu'aucun séparateur n'est affiché par défaut.

Discover this tutorial that explains how to get original dividers.

3 - Comment insérer un divider au sein d'une mise en page ?

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

• 1 - Dans une nouvelle page (ou dans une page existante), insert a new section then one new row (line).
• 2 - Ensuite, insérez un Text module For example.
• 3 - Ouvrez les paramètres (l'icône de la roue dentée) de la SECTION. Go to the tab Content > Background
• 4 - Sélectionnez une couleur de fond

• 6 - Toujours au sein des paramètres de la section
• 7 - Allez à l'onglet STYLE
• 8 - Puis à l'onglet DIVIDERS
• 9 - Vous pouvez choisir la position du diviseur : au sommet de la section ou au pied de celle-ci.
• 10 - Par défaut, le style du diviseur est positionné sur NONE. Cliquez ici pour sélectionner une autre forme.
• 11 - Lorsque vous sélectionnez un diviseur, vous pouvez l'apercevoir en direct. Vous remarquerez peut-être que la marge pose un souci.
• 12 - Si c'est le cas, n'oubliez pas de vous rendre à l'onglet STYLE > ESPACEMENT des réglages de la section
• 13 - Ajoutez de la marge interne
• 14 - Suffisamment de marge pour que le contenu laisse apparaitre proprement le divider.

• 15 - Renouvelez l'opération plusieurs fois au sein de votre layout. Pour gagner du temps, je vous conseille même de créer et paramétrer correctement une section, puis de la dupliquer pour conserver toujours les mêmes réglages.
• 16 - Sur les sections que vous aurez dupliquées, modifiez la couleur de fond de chacune d'entre elle.

The final rendering is as follows:

4 - Quelques exemples réussis !

Effectivement, quand vous regardez le rendu final de mes deux exemples ci-dessus, vous devez vous dire "mais c'est horrible !". C'est sûr, il y a plus réussi et plus harmonieux comme utilisation de Dividers !

To go further, I suggest you discover a tutorial that explains comment ajouter des animations sur les dividers d'une section Divi. L'effet est incontestablement original !

The following video explains how to create a beautiful diagonal layoutThanks to Divi Dividers:

Et enfin, je vous propose de découvrir quelques exemples d'utilisation de dividers bien réussis :

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