Comment utiliser Divi Gradient Builder pour concevoir des formes d'arrière-plan circulaires

Rifat Divi Tutorials May 18, 2022

Avec le Gradient Builder de Divi , vous pouvez créer une large gamme d'arrière-plans. Les couleurs se combinent pour créer des formes et des motifs qu'il serait difficile de créer seuls. Le Gradient Builder de Divi a des paramètres qui facilitent la création de motifs circulaires, comme une forme d'arrière-plan ronde. Cela facilite la création d'arrière-plans uniques. Dans cet article, nous verrons comment utiliser Divi Gradient Builder pour créer des formes d'arrière-plan circulaires uniques qui attirent l'attention sur n'importe quelle section ou colonne.

Aperçu de la conception

Voici un aperçu de ce que nous allons construire aujourd'hui. Voici la 1ère conception de forme de fond circulaire.

Voici la 2ème conception de forme de fond circulaire.

Module de conception

Au lieu d'une section de mise en page Divi, nous allons créer une section personnalisée pour ce tutoriel. La section nécessitera une ligne à deux colonnes de taille égale pour son contenu.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Un séparateur sera placé dans la colonne de gauche. Cela ne sera pas apparent. Il permet à notre arrière-plan de la colonne 1 d'être affiché sur des tailles d'écran plus petites. Sur les écrans plus petits, seules les colonnes avec modules sont affichées. Deux modules de texte et un formulaire de contact seront inclus dans la colonne de droite.

Ajoutez les modules suivants en conséquence à la ligne.

Paramètres de section

Cliquez sur l'icône d'engrenage pour afficher les paramètres de la section. Ensuite, changez la couleur de fond.

  • Couleur de fond: #fff7ef

Dans l'onglet Conception, faites défiler jusqu'à la section Espacement et apportez les modifications suivantes au rembourrage.

  • Haut: 0px
  • En bas: 0px

Paramètres de ligne

Ouvrez les paramètres de ligne et modifiez les valeurs suivantes en conséquence.

  • Égaliser les hauteurs de colonne: Oui
  • Largeur : 100%
  • Largeur maximale : Aucune

Maintenant, à partir de la section d'espacement, modifiez la valeur de remplissage.

  • Rembourrage : 0px en haut, 0px en bas

Paramètres de colonne

Les modifications de l'espacement des colonnes sont la prochaine étape. Pendant le processus de création des fonds circulaires, nous reviendrons aux paramètres de la colonne. Ouvrez les paramètres de la première colonne et apportez les modifications dans l'onglet Conception.

  • Haut : 8vw
  • En bas : 8vw
  • Gauche: 100x025
  • Droite: 100x025

Ouvrez maintenant la deuxième colonne et apportez les modifications suivantes.

  • Haut : 8vw
  • En bas : 8vw
  • Droite: 120x025

Module diviseur

Ouvrez le paramètre des modules de séparation à partir de la 1ère colonne et modifiez la visibilité.

  • Afficher la visibilité : Non

Après cela, accédez à l'onglet Conception et recherchez la section Espacement. Sélectionnez l'onglet tablette et ajoutez 15 volts au rembourrage en haut et en bas. Les paramètres de la tablette seront synchronisés avec le téléphone.

  • Rembourrage (tablette) : 15vH en haut, 15vh en bas

Module de texte 1

Allez maintenant au premier module de texte sur la 2ème colonne. Il servira de titre pour le formulaire de contact. Modifiez les éléments suivants:

  • Contenu du corps: entrer en contact

Accédez à l'onglet de conception et modifiez la police et l'épaisseur de la police.

  • Police : Inter
  • Poids de la police: Léger

Modifiez également les paramètres suivants.

  • Couleur : #000000
  • Taille de la police: 78px (ordinateur de bureau), 44px (tablette), 28px (téléphone)
  • Hauteur de ligne: 1,1em

Module texte 2

Ouvrez les paramètres du deuxième module de texte et ajoutez une description.

Accédez à l'onglet de conception et ajoutez les valeurs suivantes aux emplacements désignés.

  • Police : Inter
  • Poids de la police: Léger
  • Couleur : #000000

Modifiez également les valeurs suivantes.

  • Taille de la police: 24px (ordinateur de bureau), 20px (tablette), 16px (téléphone)
  • Hauteur de ligne: 1,6em

Formulaire de contact

Ouvrez les paramètres du module de formulaire de contact et activez Utiliser un service de protection anti-spam sous Protection anti-spam. Lisez le service de protection anti-spam dans Divi Email Opt-in pour en savoir plus.

  • Utiliser un service de protection anti-spam: oui

Conception des champs

Accédez à l'onglet de conception du formulaire de contact et modifiez les paramètres mentionnés.

  • Couleur de fond des champs : rgba(0,0,0,0)
  • Couleur du texte : #000000

Ensuite, apportez quelques modifications à la section de police.

  • Police : Inter
  • Taille: 16 pixels
  • Hauteur de ligne: 1,6em

Conception de bouton

Faites défiler jusqu'à l'option de bouton et modifiez les éléments suivants.

  • Utiliser des styles personnalisés : Oui
  • Taille du texte: 16px
  • Couleur du texte : #ffffff
  • Couleur de fond: #b35330

Modifiez également la bordure, la police et son poids.

  • Rayon de bordure : 100px
  • Police des boutons : Inter
  • Poids : moyen

Modifiez maintenant les paramètres de rembourrage des boutons.

  • Rembourrage des boutons: 16px (haut, bas), 40px (gauche, droite)

Bordure de champ

Maintenant, descendez au paramètre Border et apportez ces modifications.

  • Largeur de la bordure des entrées: 1px
  • Couleur de la bordure des entrées: #b35330

Paramètres de champ

Modifiez la taille du champ et rendez-les pleine largeur.

Clonage de section

Maintenant, dupliquez la section existante 1 fois afin que nous puissions avoir 2 sections au total. Nous allons leur ajouter différentes couleurs de fond.

Application d'un dégradé d'arrière-plan

Nous ajouterons le dégradé d'arrière-plan à la colonne de gauche de la ligne pour chacun de nos arrière-plans circulaires. Certains d'entre eux comporteront des arrêts de dégradé qui peuvent être empilés, et d'autres utiliseront les mêmes couleurs. Le dégradé sera modifié si l'ordre de la pile est incorrect, faites-y donc très attention. Il y aura une variété d'unités utilisées, mais elles commenceront toutes avec un pourcentage comme base.

Ouvrez les paramètres de ligne et cliquez sur les paramètres de la première colonne. Ensuite, faites défiler jusqu'à l'arrière-plan et déplacez-vous vers l'arrière-plan dégradé.

Vous pouvez ajouter un Gradient Stop à la barre en cliquant dessus. En les cueillant, vous pouvez changer leur couleur. Au fur et à mesure que nous avançons, nous modifierons les pourcentages sur la barre de dégradé.

Forme de fond circulaire un

Cinq arrêts de dégradé seront utilisés pour créer un arrière-plan circulaire avec beaucoup de cercles dans des cercles.

Dégradé Stop 1

Suivez les réglages pour le 1er arrêt de gradient.

  • Poste : 29
  • Couleur : #ffb482

Dégradé Stop 2

Suivez les réglages pour le 2ème arrêt de dégradé.

  • Poste : 31
  • Couleur: #a84321

Dégradé Stop 3

Suivez les réglages pour le 3ème arrêt de gradient.

  • Poste : 51
  • Couleur : #ffc99b

Dégradé Stop 4

Suivez les paramètres pour le 4e arrêt de gradient.

  • Poste : 63
  • Couleur : #ffc99b

Dégradé Stop 5

Suivez les paramètres pour le 5e arrêt de gradient.

  • Poste: 78
  • Couleur : #ffb67f

Réglage du dégradé

Les paramètres de dégradé doivent être modifiés en Circulaire et centré. Activez Placer le dégradé au-dessus de l'image d'arrière-plan, Répéter le dégradé et Changer les unités en pixels.

  • Type: Circulaire
  • Poste : Centre
  • Répéter le dégradé: oui
  • Unité de dégradé: Pixels
  • Placer le dégradé au-dessus de l'image d'arrière-plan: Oui

Voici notre sortie pour la forme d'arrière-plan circulaire 1.

Forme de fond circulaire deux

Il y aura un total de cinq arrêts de dégradé dans notre deuxième forme d'arrière-plan circulaire. Une partie d'un motif circulaire sera vue d'un coin.

Dégradé Stop 1

Suivez les réglages pour le 1er arrêt de gradient.

  • Poste : 31
  • Couleur: #a84321

Dégradé Stop 2

Suivez les réglages pour le 2ème arrêt de dégradé.

  • Poste : 51
  • Couleur : #ffb482

Dégradé Stop 3

Suivez les réglages pour le 3ème arrêt de gradient.

  • Poste : 52
  • Couleur : #ffc99b

Dégradé Stop 4

Suivez les paramètres pour le 4e arrêt de gradient.

  • Poste : 63
  • Couleur : #ffc99b

Dégradé Stop 5

Suivez les paramètres pour le 5e arrêt de gradient.

  • Poste: 78
  • Couleur : #ffb67f

Paramètres de dégradé

L'étape suivante consiste à modifier les dégradés. Passez à Circulaire et placez-le en haut à droite. Utilisez Répéter le dégradé, Pixels comme unité et Placer le dégradé au-dessus de l'image d'arrière-plan pour créer une image d'arrière-plan homogène. Fermez le module et enregistrez votre configuration.

  • Type: Circulaire
  • Emplacement : En haut à droite
  • Répéter le dégradé: oui
  • Unité de dégradé: Pourcentage
  • Placer le dégradé au-dessus de l'image d'arrière-plan: Oui

Voici notre sortie pour la forme d'arrière-plan circulaire 2.

Emballer

Ceci conclut notre tutoriel sur la création de formes d'arrière-plan circulaires personnalisées avec Divi Gradient Builder. Vous pouvez désormais créer facilement des arrière-plans accrocheurs à l'aide du générateur de dégradés. L'utilisation de formes circulaires est un excellent moyen d'ajouter un intérêt visuel à une section ou à une colonne. N'importe qui peut construire rapidement et facilement des motifs circulaires accrocheurs en suivant les instructions fournies ici. Vous devriez expérimenter avec les paramètres et l'ordre d'empilement pour voir ce que vous pouvez trouver. Consultez d'autres tutoriels Divi , qui sait que quelque chose pourrait devenir utile pour le prochain projet.