10 façons amusantes d'utiliser le module Divider avec les nouvelles options Divi

Dans le didacticiel Divi d'aujourd'hui, nous allons partager avec vous un aperçu de ce que vous pouvez faire avec les nouvelles options qui ont été ajoutées à Divi dans les mises à jour précédentes. Plus précisément; nous allons partager 10 façons intéressantes de styliser le module Divider avec ces nouveaux changements. Les possibilités sont vraiment infinies, mais cet article pourrait vous aider à trouver l'inspiration dont vous avez besoin pour votre prochain projet.

Aperçu

L'une des meilleures choses à propos de ce tutoriel est le fait que nous n'utiliserons aucun CSS supplémentaire (ou code d'aucune sorte d'ailleurs). Tous les exemples que nous allons créer n'utiliseront que les options incluses dans le module Divider. Jetons un coup d'œil aux diviseurs que nous allons construire avant de vous montrer comment créer chacun étape par étape :

10 façons amusantes d'utiliser le module Divider avec les nouvelles options Divi

Abonnez-vous à notre chaîne Youtube

Créer une section réutilisable

La première chose à faire est de créer la section que nous utiliserons dans les 10 exemples. Bien sûr, vous pouvez également utiliser les séparateurs dans d'autres contextes, mais en créant d'abord cette section, vous aurez la possibilité de jouer avec votre propre Divi Builder et de voir celui que vous préférez.

Créer une nouvelle page

Commencez par créer une nouvelle page dans votre tableau de bord WordPress, en activant le Divi Builder et en ouvrant le Visual Builder.

Créer une section avec une ligne à trois colonnes

Une fois que vous êtes sur votre nouvelle page, créez une section standard et utilisez une ligne à trois colonnes dans cette section standard. Nous avons utilisé '#f4f4f4' comme couleur d'arrière-plan de la section.

Ajouter le premier module de texte

Ensuite, ajoutez le premier module de texte à la première colonne de la ligne. Ouvrez les paramètres, saisissez le texte que vous souhaitez voir apparaître et accédez à l'onglet Conception. Dans l'onglet Conception, apportez les modifications suivantes à la sous-catégorie Texte :

• Police du texte : Homard
• Taille de la police de texte : 35
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1,7 em
• Orientation du texte : Centre

Ajouter un deuxième module de texte

Une fois que vous avez ajouté le premier module de texte, vous pouvez en ajouter un autre juste en dessous. Ajoutez le texte que vous souhaitez voir apparaître et accédez à l'onglet Conception. Dans l'onglet Conception, assurez-vous que les modifications suivantes s'appliquent :

• Police du texte : Roboto
• Taille de la police de texte : 14
• Hauteur de la ligne de texte : 1,7 em
• Orientation du texte : Centre

Cloner des modules de texte et les placer dans deux autres colonnes

Une fois que vous avez créé ces deux modules de texte, vous pouvez également les placer dans les deux autres colonnes de la ligne.

Avant de commencer

Nous allons partager 10 façons amusantes de styliser le module diviseur de Divi. Chacun des exemples aura trois diviseurs qui sont en harmonie les uns avec les autres. La plupart des paramètres sont les mêmes pour les trois modules. Nous commencerons par vous montrer les paramètres qui comptent pour chacun d'entre eux et continuerons en montrant les modifications que vous devez apporter aux deux autres diviseurs. Ainsi, chaque fois que vous terminez le premier diviseur, clonez-le et placez-le dans les deux autres colonnes. Une fois que vous avez fait cela, vous pouvez apporter les modifications aux deux autres diviseurs.

Remarque : Pour chacun des séparateurs, vous devez activer l'option « Afficher le séparateur » dans l'onglet Contenu.

1. Le triangle flou

Paramètres du premier module de division

Onglet Contenu

Dans l'onglet Contenu, nous allons utiliser les paramètres d'arrière-plan suivants :

• Première couleur : #e09900
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Linéaire
• Direction du gradient : 176 deg
• Position de départ : 13 %
• Position finale : 31 %

Onglet Conception

Passez à l'onglet Conception et assurez-vous que les paramètres suivants s'appliquent à la sous-catégorie Dimensionnement :

• Poids du diviseur : 0
• Hauteur : 25px
• Largeur : 35%
• Alignement du module : Centre

Faites défiler le même onglet et utilisez les paramètres d'animation suivants dans la sous-catégorie Animation :

• Style d'animation : diapositive
• Répétition de l'animation : une fois
• Direction d'animation : Centre
• Durée de l'animation : 1200 ms
• Intensité de l'animation : 80 %

Paramètres du module du deuxième diviseur

Onglet Contenu

Dans l'onglet contenu, la seule chose que vous aurez à faire est de changer la première couleur du dégradé en « #0c71c3 ».

Onglet Conception

Ensuite, vous devrez ajouter un délai d'animation de « 250 ms » à la sous-catégorie Animation.

Paramètres du module du troisième diviseur

Onglet Contenu

Changez la première couleur de dégradé en '#8300e9' pour le dernier diviseur.

Onglet Conception

Le délai d'animation que vous devrez ajouter à la sous-catégorie Animation du dernier diviseur est de « 500 ms ».

2. L'ombre de couleur

Paramètres du premier module de division

Onglet Contenu

Utilisez les paramètres d'arrière-plan dégradé suivants dans l'onglet Contenu :

• Première couleur : #e09900
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Linéaire
• Direction du gradient : 180 deg
• Position de départ : 0%
• Position finale : 72 %

Onglet Conception

La première chose que vous devrez faire dans l'onglet Conception est de changer la couleur du séparateur en « #000000 ».

Dans la sous-catégorie Styles de ce même onglet, utilisez 'Solid' comme style de séparation et 'Top' comme position de séparation.

Continuez à faire défiler vers le bas et appliquez les modifications suivantes à la sous-catégorie Dimensionnement :

• Poids du diviseur : 2
• Hauteur : 20px
• Largeur: 70%
• Alignement du module : Centre

Et enfin, utilisez les paramètres d'option suivants pour la sous-catégorie Animation :

• Style d'animation : Rebond
• Répétition de l'animation : une fois
• Direction d'animation : Centre
• Durée de l'animation : 2000 ms

Paramètres du module du deuxième diviseur

Onglet Contenu

Changez la première couleur de dégradé de l'arrière-plan dégradé en '#0c71c3'.

Onglet Conception

Dans la sous-catégorie Animation, ajoutez « 350 ms » à l'option Délai d'animation.

Paramètres du module du troisième diviseur

Onglet Contenu

Apportez la même modification au troisième séparateur, mais utilisez plutôt la couleur « #8300e9 ».

Onglet Conception

Et enfin, ajoutez un délai d'animation de '700ms'.

3. La série des dégradés

Paramètres du premier module de division

Onglet Contenu

Pour le premier diviseur, utilisez les paramètres d'arrière-plan dégradé suivants :

• Première couleur : #0970a0
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Linéaire
• Direction du gradient : 119 degrés
• Position de départ : 0%
• Position finale : 86 %

Onglet Conception

Dans l'onglet Design, choisissez « #FFFFFF » comme couleur de votre séparateur.

Ensuite, apportez les modifications suivantes à la sous-catégorie Styles :

• Style de diviseur : Solide
• Position du diviseur : centré verticalement

Toujours dans le même onglet, assurez-vous que les paramètres suivants s'appliquent à la sous-catégorie Dimensionnement :

• Poids du diviseur : 3
• Hauteur : 10px
• Largeur : 25 %
• Alignement du module : à gauche

Ajoutez également « 15px » au rembourrage inférieur dans la sous-catégorie Espacement.

Et enfin, utilisez les paramètres suivants pour la sous-catégorie Animation :

• Style d'animation : diapositive
• Répétition de l'animation : une fois
• Direction de l'animation : Gauche
• Durée de l'animation : 2000 ms
• Intensité de l'animation : 100 %

Paramètres du module du deuxième diviseur

Onglet Contenu

Les paramètres d'arrière-plan dégradé pour le deuxième diviseur sont légèrement différents :

• Première couleur : #0970a0
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 0%
• Position finale : 100 %

Onglet Conception

Dans la sous-catégorie Dimensionnement, modifiez l'alignement du module en centre.

Enfin, centralisez également la Direction de l'Animation.

Paramètres du module du troisième diviseur

Onglet Contenu

Le troisième diviseur contient également un autre arrière-plan dégradé :

• Première couleur : rgba(255,255,255,0)
• Deuxième couleur : #0970a0
• Type de dégradé : Linéaire
• Direction du gradient : 119 degrés
• Position de départ : 14 %
• Position finale : 100 %

Onglet Conception

Nous allons apporter les mêmes modifications que nous avons apportées au deuxième diviseur, mais utiliser la droite au lieu du centre.

4. Le cercle roulant

Paramètres du premier module de division

Onglet Contenu

Commencez par appliquer les paramètres d'arrière-plan dégradé suivants :

• Première couleur : #e09900
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 20 %
• Position finale : 21 %

Onglet Conception

La première chose que vous devrez faire dans l'onglet Conception est d'utiliser la couleur « #000000 » pour le séparateur.

Ensuite, sélectionnez « Solide » comme style de séparation et « Centre vertical » comme position de séparation.

Ensuite, apportez les modifications suivantes à la sous-catégorie Dimensionnement :

• Poids du diviseur : 2
• Hauteur : 50px
• Largeur : 40 %
• Alignement du module : Centre

Enfin, la sous-catégorie Animation aura besoin des paramètres suivants :

• Style d'animation : Rouleau
• Répétition de l'animation : une fois
• Direction d'animation : Centre
• Durée de l'animation : 1500 ms
• Délai d'animation : 850 ms
• Intensité de l'animation : 60 %

Paramètres du module du deuxième diviseur

Onglet Contenu

Changez la première couleur de dégradé en '#0c71c3'.

Onglet Conception

Et changez le délai d'animation sur '0ms'.

Paramètres du module du troisième diviseur

Onglet Contenu

Pour le dernier séparateur, vous n'aurez qu'à changer la première couleur d'arrière-plan du dégradé en « #8300e9 ».

5. Le support

Paramètres du premier module de division

Onglet Contenu

Utilisez les paramètres d'arrière-plan dégradé suivants :

• Première couleur : #e0d1b1
• Deuxième couleur : #e09900
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 36 %
• Position finale : 100 %

Onglet Conception

Assurez-vous que la couleur de l'intercalaire est la même que la couleur d'arrière-plan de la section. Dans ce cas, c'est '#f4f4f4'.

Faites défiler l'onglet de conception et utilisez « Dashed » comme style de séparation et « Top » comme position de séparation.

Faites en sorte que les paramètres suivants s'appliquent à la sous-catégorie Dimensionnement :

• Poids du diviseur : 100
• Hauteur : 18px
• Largeur: 60%
• Alignement du module : Centre

Vous devrez également ajouter « 15px » au rembourrage supérieur, droit et gauche.

Enfin, utilisez les paramètres d'animation suivants :

• Style d'animation : Zoom
• Répétition de l'animation : une fois
• Direction d'animation : Centre
• Durée de l'animation : 1000 ms
• Intensité de l'animation : 80 %

Paramètres du module du deuxième diviseur

Onglet Contenu

Changez les couleurs du fond dégradé en '#87acc1' et '#0c71c3'.

Onglet Conception

Ensuite, modifiez la durée de l'animation sur " 1300 ms " et le délai d'animation sur " 250 ms ".

Paramètres du module du troisième diviseur

Onglet Contenu

Les couleurs de dégradé utilisées dans le troisième diviseur sont « #c9a4e8 » et « #8300e9 ».

Onglet Conception

Modifiez la durée de l'animation sur '1300ms' et le délai d'animation sur '500ms'.

6. Les lignes doubles

Paramètres du premier module de division

Onglet Contenu

Appliquez les paramètres d'arrière-plan dégradé suivants :

• Première couleur : #e09900
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Linéaire
• Direction du gradient : 179 degrés
• Position de départ : 0%
• Position finale : 45 %

Onglet Conception

Choisissez '#000000' comme couleur de séparation.

Dans la sous-catégorie Styles, utilisez « Double » comme style de séparation et « Centre vertical » comme position de séparation.

Pour continuer, utilisez les paramètres suivants pour la sous-catégorie Dimensionnement :

• Poids du diviseur : 5
• Hauteur : 25px
• Largeur : 35%
• Alignement du module : à gauche

Enfin, utilisez les paramètres d'animation suivants :

• Style d'animation : Rouleau
• Répétition de l'animation : une fois
• Direction de l'animation : Gauche
• Durée de l'animation : 1000 ms
• Intensité de l'animation : 50 %

Paramètres du module du deuxième diviseur

Onglet Contenu

Changez la première couleur de dégradé en '#0c71c3'.

Onglet Conception

Ensuite, utilisez une animation différente pour le deuxième diviseur :

• Style d'animation : Fondu
• Répétition de l'animation : une fois
• Durée de l'animation : 1400 ms

Paramètres du module du troisième diviseur

Onglet Contenu

Pour le troisième diviseur, utilisez '#8300e9' comme première couleur d'arrière-plan dégradé.

Onglet Conception

La seule chose que vous devrez modifier dans l'onglet Conception est la direction de l'animation, qui est dans ce cas « Droite ».

7. Le pont

Paramètres du premier module de division

Onglet Contenu

Commencez par affecter '#8300e9' à l'arrière-plan.

Onglet Conception

Continuez en utilisant la couleur d'arrière-plan de la section comme couleur de séparation, qui est dans ce cas « #f4f4f4 ».

Ensuite, utilisez « Pointillé » comme style de séparation et « Top » comme position de séparation.

Dans la sous-catégorie Dimensionnement, utilisez les paramètres suivants :

• Poids du diviseur : 15
• Hauteur : 7px
• Largeur: 70%
• Alignement du module : à gauche

Nous aurons également besoin d'un rembourrage personnalisé :

• Rembourrage supérieur : 7px
• Remplissage droit : -7px
• Remplissage gauche : -7px

L'animation que nous utiliserons a les paramètres suivants :

• Style d'animation : diapositive
• Répétition de l'animation : une fois
• Direction de l'animation : Gauche
• Durée de l'animation : 800 ms
• Délai d'animation : 400 ms
• Intensité de l'animation : 30 %

Paramètres du module du deuxième diviseur

Onglet Contenu

Pour le deuxième diviseur, changez l'arrière-plan en '#0c71c3'.

Onglet Conception

Nous utiliserons également une animation différente :

• Style d'animation : Zoom
• Répétition de l'animation : une fois
• Direction d'animation : Centre
• Durée de l'animation : 800 ms
• Intensité de l'animation : 30 %

Paramètres du module du troisième diviseur

Onglet Contenu

Le troisième diviseur utilisera '#8300e9' comme couleur d'arrière-plan.

Onglet Conception

L'animation du troisième diviseur est également légèrement différente :

• Style d'animation : Zoom
• Répétition de l'animation : une fois
• Direction de l'animation : à droite
• Durée de l'animation : 800 ms
• Délai d'animation : 400 ms
• Intensité de l'animation : 30 %

8. L'élégance

Paramètres du premier module de division

Onglet Contenu

Commencez par ajouter l'arrière-plan dégradé suivant au premier diviseur :

• Première couleur : # 000000
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 20 %
• Position finale : 20 %

Onglet Conception

Utilisez la couleur « #8300e9 » pour votre séparateur.

Ensuite, utilisez « pointillé » comme style de séparation et « centré verticalement » comme position de séparation.

Nous aurons également besoin d'un rembourrage supérieur de '40px'.

Et une animation avec les paramètres suivants :

• Style d'animation : Rebond
• Répétition de l'animation : une fois
• Direction de l'animation : vers le bas
• Durée de l'animation : 1000 ms

Paramètres du module du deuxième diviseur

Onglet Conception

Pour le deuxième diviseur, changez la couleur en '#0c71c3'.

L'animation nécessitera également quelques modifications :

• Direction d'animation : Centre
• Durée de l'animation 1500ms

Paramètres du module du troisième diviseur

Onglet Conception

Le troisième diviseur utilisera '#8300e9' comme couleur.

Et aura 'Up' comme direction d'animation.

9. La subtilité

Paramètres du premier module de division

Onglet Contenu

Choisissez les paramètres suivants pour l'arrière-plan dégradé :

• Première couleur : #8300e9
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 0%
• Position finale : 38 %

Onglet Conception

Dans la sous-catégorie Dimensionnement, vous aurez besoin des paramètres suivants :

• Poids du diviseur : 0
• Hauteur : 4px
• Largeur : 100 %

Enfin, l'animation que nous utiliserons a les paramètres suivants :

• Style d'animation : Rebond
• Répétition de l'animation : une fois
• Direction de l'animation : vers le haut
• Durée de l'animation 1800ms

Paramètres du module du deuxième diviseur

Onglet Contenu

Pour le deuxième séparateur, changez la première couleur d'arrière-plan du dégradé en « #0c71c3 ».

Paramètres du module du troisième diviseur

Onglet Contenu

Apportez la même modification au troisième séparateur, mais utilisez plutôt la couleur violette « #8300e9 ».

10. La lueur

Paramètres du premier module de division

Onglet Contenu

Utilisez les paramètres d'arrière-plan dégradé suivants pour la dernière série de séparateurs :

• Première couleur :
• Deuxième couleur :
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 0%
• Position finale : 38 %

Onglet Conception

Choisissez également la couleur d'arrière-plan de la section comme couleur de séparation, dans ce cas, il s'agit de « #f4f4f4 ».

Ensuite, utilisez « En pointillés » comme style de séparation et « Centre vertical » comme position de séparation.

Dans la sous-catégorie Dimensionnement, utilisez les paramètres suivants :

• Poids du diviseur : 70
• Hauteur : 20px
• Largeur : 100 %

Enfin, nous utiliserons une animation avec les options suivantes :

• Style d'animation : Fondu
• Répétition de l'animation : une fois
• Durée de l'animation : 1800 ms
• Délai d'animation : 800 ms

Paramètres du module du deuxième diviseur

Onglet Contenu

Pour le deuxième séparateur, changez la deuxième couleur d'arrière-plan du dégradé en « #0c71c3 ».

Onglet Conception

Et ajoutez un délai d'animation de '250ms'.

Paramètres du module du troisième diviseur

Onglet Contenu

Pour le dernier séparateur, remplacez la deuxième couleur d'arrière-plan du dégradé par « #8300e9 ».

Onglet Conception

Et terminez en mettant le délai d'animation sur '0ms'.

Dernières pensées

Avec les nouvelles options Divi, beaucoup de nouvelles choses créatives sont possibles avec les paramètres intégrés de chaque module. Dans cet article, nous vous avons spécifiquement montré comment ces options peuvent vous aider à améliorer votre conception via le module Divider. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par VikiVector / shutterstock.com