Divi , le thème WordPress populaire, est connu pour ses modules polyvalents qui permettent aux concepteurs et aux développeurs de sites Web de créer sans effort des mises en page époustouflantes. Parmi son arsenal impressionnant de modules, le module Divi Divider se distingue comme un outil unique qui permet aux utilisateurs de créer des séparateurs captivants. Dans cet article de blog, nous plongerons dans le monde captivant des séparateurs de dégradés et explorerons comment vous pouvez tirer parti du module Divi Divider pour améliorer vos conceptions. Nous examinerons de plus près le fonctionnement des séparateurs de dégradé et vous fournirons des exemples inspirants pour stimuler votre créativité.
Aperçu
Voici un aperçu de l’apparence finale de notre design dégradé.
Comment créer des séparateurs de dégradé avec le module Divider de Divi
Il existe plusieurs méthodes pour construire un diviseur à l’aide du module Divider de Divi. Par défaut, le module affiche une ligne comme séparateur. Cependant, il est possible de désactiver cette ligne et d'utiliser les paramètres d'arrière-plan du module pour générer un séparateur pouvant être personnalisé à l'aide de diverses options d'arrière-plan telles que les couleurs, les dégradés, les images, etc. Au lieu d'afficher le séparateur lui-même, nous nous concentrerons sur le style du conteneur du séparateur pour produire un séparateur au style unique.
Masquer le séparateur
La procédure est simple. Ajoutez d'abord un module de séparation à votre mise en page, puis sous l'onglet Contenu, masquez le séparateur.
Créer des sites Web incroyables
Avec le meilleur constructeur de page Elementor
Commencer Maintenant
Fond de diviseur
Ensuite, choisissez le type d'arrière-plan que vous souhaitez utiliser dans le menu Paramètres d'arrière-plan de l'onglet Contenu. Nous nous concentrerons sur les options de dégradé d'arrière-plan dans cet article.
Ajouter le dimensionnement et l'espacement
Pour créer un séparateur élégant dans à peu près n'importe quelle taille ou forme, utilisez les options de dimensionnement et d'espacement de l'onglet Conception pour ajuster la hauteur et la largeur du conteneur du séparateur. Pour générer la taille souhaitée, utilisez la largeur et la hauteur, la largeur maximale et la hauteur maximale, l'alignement du module et le rembourrage supérieur et inférieur.
Ajouter un rayon de bordure
Pour styliser davantage la forme, ajoutez des options de bordure telles que Border Radius. Les coins peuvent être ajustés conjointement ou séparément pour produire des formes fascinantes. Pour un design spécial, vous pouvez en outre ajouter une largeur de bordure, des styles, etc.
Diviseur de dégradé
Nous utiliserons la page de destination du pack gratuit Home Baker Layout inclus dans Divi pour notre premier séparateur de dégradé. Les illustrations de ce pack de mise en page présentent des dégradés de couleur marron et des contours puissants et sombres. Nous allons reproduire cela avec notre dégradé en utilisant la palette de couleurs du pack de mise en page. Nous utiliserons le module Divider déjà présent dans la section héros pour notre première illustration. Celui-ci est simple, mais il a un grand impact visuel. Voici la disposition avant d'ajouter le module diviseur pour référence.
Visibilité
Choisissez Non pour Afficher le diviseur sous Options de visibilité pour le module Diviseur.
- Afficher le séparateur:non
Pente
Sélectionnez l’onglet Dégradé d’arrière-plan en faisant défiler jusqu’à Arrière-plan. Nous ajouterons cinq niveaux de dégradé pour celui-ci. Les valeurs par défaut des autres paramètres de dégradé seront utilisées. Les paramètres de chaque arrêt de dégradé sont répertoriés ci-dessous.
- Premier arrêt de dégradé: 0px, #dcc087
- Deuxième arrêt de dégradé: 16px, #e6b060
- Troisième arrêt de dégradé: 22px, #f19d33
- Quatrième arrêt de dégradé: 31px, #f49826
- Cinquième arrêt de dégradé: 48px, #3b261e
Les pixels doivent être utilisés comme unité de dégradé. Les teintes que nous recherchions sont désormais disponibles. Il ne reste plus qu'à optimiser la taille.
- Unité de dégradé: pixels
Dimensionnement
Choisissez ensuite l'onglet Conception. Mettez 100% pour la largeur sous Dimensionnement. Les trois tailles d'appareil doivent avoir une hauteur définie sur 40px. La fermeture modulaire sauvegardera vos paramètres.
- Largeur : 100%
- Hauteur: 40px
Aperçu final
Nous avons maintenant ici un aperçu final de notre conception de dégradé en action.
Pensées de fin
Cela conclut notre discussion sur l'utilisation du module Divider de Divi pour créer des diviseurs de dégradé. Pour créer des séparateurs de dégradé personnalisés, utilisez l'option de dégradé dans le module Diviseur. Nous pouvons créer des séparateurs de dégradé dans une variété de tailles et de formes en utilisant les options de coin de bordure, d'espacement et de dimensionnement. Nous pouvons concevoir des séparateurs dégradés distinctifs qui se démarqueront de la foule avec seulement quelques choix de base.
