Comparaison des types de dégradés dans le générateur de dégradés de Divi

Les types de dégradés font partie du nouveau Divi Gradient Builder. Les nouveaux types de dégradés Divi vous permettent d'ajouter différentes formes et couleurs à vos arrière-plans. Dans cet article, nous comparerons ces types de dégradés et vous montrerons comment les utiliser pour créer des arrière-plans uniques !

Commençons.

Que sont les types de dégradé Divi ?

Le nouveau Gradient Builder de Divi ajoute plusieurs nouvelles fonctionnalités de dégradé qui incluent des types de dégradé. Vous avez le choix entre quatre types de dégradés :

• Linéaire
• Circulaire
• Elliptique
• Conique

Chacun des types affiche le dégradé différemment. Ils sont utilisés pour façonner le dégradé à afficher sous la forme d'un motif de couleur linéaire, dans un cercle, une ellipse ou un cône. Nous les verrons en détail dans nos exemples.

Les types de dégradés sont également affectés par les autres contrôles, tels que la position, sa répétition ou non, l'unité de mesure de la barre de défilement du dégradé et le placement du dégradé au-dessus de l'arrière-plan.

Chaque ajustement peut avoir un impact petit ou énorme sur le gradient. Le dégradé peut être subtil ou se démarquer. Des changements petits ou grands peuvent être apportés avec un seul ajustement.

Dans cet esprit, examinons quelques exemples de dégradés utilisant chacun des types de dégradés. Nous allons montrer trois exemples de chaque type de dégradé. Le premier sera un type de dégradé standard que vous verrez sur le Web. Les deux suivants seront un peu plus expérimentaux, histoire de voir ce qu'il est possible de faire avec les types de dégradés.

Exemples de types de dégradés

Pour les exemples de type dégradé, j'utilise la section héros de la page d'accueil du pack de mise en page gratuit Bed and Breakfast disponible dans Divi. Cette section a déjà un dégradé, mais nous allons le remplacer et faire quelques expériences. Nous pouvons soit supprimer le dégradé de fond d'origine, soit le modifier. Les résultats sont les mêmes. Pour plus de simplicité, je vais le modifier.

J'ai personnalisé le texte du titre en le faisant passer du noir au blanc.

Type de dégradé linéaire

Les dégradés linéaires affichent le dégradé comme s'ils étaient répartis sur la page.

Premier exemple de dégradé linéaire

Voici un aperçu de notre premier exemple. Il affiche une couleur plus claire à gauche de l'écran et une couleur plus foncée à droite, avec une transition douce entre elles.

Pour créer cet exemple, ajoutez deux couleurs. Le premier est rgba(92,158,82,0.76) à la position 0%. Le second est rgba(0,10,4,0.76) à la position 97%.

• Couleur 1 : rgba(92,158,82,0.76) (à la position 0%)
• Couleur 2 : rgba (0,10,4,0,76) (à 97 % de la position)

Ensuite, changez le Type de dégradé en Linéaire et réglez la Direction sur 131 degrés. Qu'il ne se répète pas . Définissez l' unité sur Pourcentage. Placez le dégradé au-dessus de l'image d'arrière-plan.

• Type de dégradé : Linéaire
• Orientation : 131 degrés
• Répétition : Non
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Deuxième exemple de dégradé linéaire

Voici un aperçu du deuxième exemple de dégradé linéaire. Il fonctionne comme le premier, mais il a un arrêt dur sur la gauche où une teinte plus foncée prend le relais.

Pour créer celui-ci, ajoutez trois Gradient Stops. Le premier est rgba(18,76,41,0.76) à la position 13%. Le second est rgba(92,158,82,0.76) à la position 13%. La couleur 3 est rgba(18,76,41,0.76) à la position 34%.

• Couleur 1 : rgba (18,76,41,0,76) (à 13 %)
• Couleur 2 : rgba (92,158,82,0,76) (à 13 %)
• Couleur 3 : rgba (18,76,41,0,76) (à 34 %)

Ensuite, définissez le Type de dégradé sur Linéaire et définissez la Direction sur 90 degrés. Qu'il ne se répète pas . Changez l' unité en pourcentage. Placez-le au-dessus de l'image de fond.

• Type de dégradé : Linéaire
• Orientation : 90 degrés
• Répétition : Non
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Troisième exemple de dégradé linéaire

Notre troisième exemple place une ligne de couleur claire en diagonale dans le coin supérieur droit, touchant une ligne de couleur plus foncée.

Celui-ci a trois couleurs. La couleur 1 est rgba(92,158,82,0.76) à la position 13%. La couleur 2 est rgba(92,158,82,0.76) à la position 23%. La troisième couleur est rgba(18,76,41,0.76) à la position 32%.

• Couleur 1 : rgba (92,158,82,0,76) (à 13 %)
• Couleur 2 : rgba (92,158,82,0,76) (à 23 %)
• Couleur 3 : rgba (18,76,41,0,76) (à 32 %)

Définissez le Type de dégradé sur Linéaire dans une direction de 209 degrés. Ne le répétez pas et réglez l' unité sur Pourcentage. Placez le dégradé au-dessus de l'image d'arrière-plan.

• Type de dégradé : Linéaire
• Orientation : 209 degrés
• Répétition : Non
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Type de dégradé circulaire

Le type de dégradé circulaire crée un cercle avec les couleurs.

Premier exemple de dégradé circulaire

Notre premier exemple de dégradé circulaire place une couleur claire au centre et une couleur plus foncée sur les bords.

Celui-ci a 2 couleurs. Le premier est rgba(92,158,82,0.76) à la position 0%. Le second est rgba(0,10,4,0.76) à la position 62%.

• Couleur 1 : rgba(92,158,82,0.76) (à la position 0%)
• Couleur 2 : rgba (0,10,4,0,76) (à 62 % de la position)

Définissez le Type de dégradé sur Circulaire. Centrez la direction . Faites en sorte qu'il ne se répète pas , changez l' unité en pourcentage et placez-le au-dessus de l'image d'arrière-plan.

• Type de dégradé : Circulaire
• Direction : Centre
• Répétition : Non
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Deuxième exemple de dégradé circulaire

Ce dégradé place un bord circulaire clair au centre de l'écran.

Il a quatre couleurs. Deux couleurs sont superposées. Le premier est rgba(18,76,41,0.76) à la position 13%. Le second est rgba(92,158,82,0.76) à la position 33%. La couleur 3 est rgba(92,158,82,0.76) à la position 51%. La couleur 4 est rgba(18,76,41,0.76). Il est placé à la position 51 %, au-dessus de la couleur 3.

• Couleur 1 : rgba (18,76,41,0,76) (à 13 %)
• Couleur 2 : rgba (92,158,82,0,76) (à 33 %)
• Couleur 3 : rgba (92,158,82,0,76) (à 51 % de la position)
• Couleur 4 : rgba (18,76,41,0,76) (à 51 %)

Définissez le Type de dégradé sur Circulaire et placez la Direction en haut à gauche. Faites en sorte qu'il ne se répète pas , changez l' unité en pourcentage et placez-le au-dessus de l'image d'arrière-plan.

• Type de dégradé : Circulaire
• Direction : En haut à gauche
• Répétition : Non
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Troisième exemple de dégradé circulaire

Cet exemple place plusieurs cercles clairs dans la couleur la plus foncée, en commençant au milieu du cercle.

Celui-ci empile également deux couleurs dans un certain ordre pour obtenir ce design. La première couleur est rgba(18,76,41,0.76) à la position 13%. La couleur 2 est rgba(18,76,41,0.76) à la position 44%. La troisième couleur se superpose à la deuxième couleur. C'est rgba(92,158,82,0.76) à la position 44%. La couleur 4 est rgba(92,158,82,0.76) à la position 51%.

• Couleur 1 : rgba (18,76,41,0,76) (à 13 %)
• Couleur 2 : rgba (18,76,41,0,76) (à 44 %)
• Couleur 3 : rgba (92,158,82,0,76) (à 44 %)
• Couleur 4 : rgba (92,158,82,0,76) (à 51 % de la position)

Changez le type de dégradé en circulaire. Placez la direction en bas. Avoir celui-ci à répéter . Définissez l' unité sur Pourcentage et placez le dégradé au-dessus de l'image d'arrière-plan.

• Type de dégradé : Circulaire
• Orientation : vers le bas
• Répétition : Oui
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Type de dégradé elliptique

Les dégradés elliptiques placent les couleurs en forme d'ellipse.

Premier exemple de dégradé elliptique

Notre premier exemple elliptique place une ellipse de couleur claire au centre de l'écran avec une couleur plus foncée autour.

Celui-ci a deux couleurs. Le premier est rgba(92,158,82,0.76) à la position 0%. Le second est rgba(0,10,4,0.76) à la position 50%.

• Couleur 1 : rgba(92,158,82,0.76) (à la position 0%)
• Couleur 2 : rgba (0,10,4,0,76) (à 50 % de la position)

Changez le type de dégradé en elliptique. Définissez la direction sur Centre. Faites en sorte que celui-ci ne se répète pas , réglez l' unité sur Pourcentage et placez-le au-dessus de l'image d'arrière-plan.

• Type de dégradé : Elliptique
• Direction : Centre
• Répétition : Non
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Deuxième exemple de dégradé elliptique

Notre deuxième exemple place de nombreuses lignes circulaires fines tout au long du dégradé.

Il a deux couleurs. Le premier est rgba(92,158,82,0.76) à la position 34pt. Le second est rgba(0,10,4,0.76) à la position 39pt.

• Couleur 1 : rgba(92,158,82,0.76) (à la position 34pt)
• Couleur 2 : rgba(0,10,4,0.76) (à la position 39pt)

Changez le Type de dégradé en Elliptique et réglez la Direction sur Gauche. Avoir celui-ci à répéter . Changez l' unité en points. Placez-le au-dessus de l'image de fond.

• Type de dégradé : Elliptique
• Sens : Gauche
• Répétition : Oui
• Unité : Points
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Troisième exemple de dégradé elliptique

Notre troisième exemple place beaucoup de demi-cercles dans le dégradé.

Celui-ci a deux couleurs. Le premier est rgba(32,68,35,0.73) à la position 34vmin. Le second est rgba(0,10,4,0.76) à la position 39vmin.

• Couleur 1 : rgba (32, 68, 35, 0,73) (à la position 34vmin)
• Couleur 2 : rgba(0,10,4,0.76) (à la position 39vmin)

Changez le Type de dégradé en Elliptique et réglez la Direction sur Haut. Avoir celui-ci à répéter . Changez l' Unité en Viewport Minimum. Placez-le au-dessus de l'image de fond.

• Type de dégradé : Elliptique
• Sens : Haut
• Répétition : Oui
• Unité : fenêtre d'affichage minimale
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Type de dégradé conique

Le type de dégradé conique affiche le dégradé sous forme de cône comme si le cône était vu d'en haut.

Premier exemple de dégradé conique

Cet exemple place une ligne diagonale du centre du dégradé vers la gauche avec une couleur claire d'un côté et une couleur foncée de l'autre.

Il a deux couleurs. Le premier est rgba(92,158,82,0.76) à la position 0%. Le second est rgba(0,10,4,0.76) à la position 50%.

• Couleur 1 : rgba(92,158,82,0.76) (à la position 0%)
• Couleur 2 : rgba (0,10,4,0,76) (à 50 % de la position)

Changez le type de dégradé en conique. Réglez la direction sur 221 degrés. Centrez la position et ne la répétez pas . Placez le dégradé au-dessus de l'image.

• Type de dégradé : Conique
• Orientation : 221 degrés
• Poste : Centre
• Répétition : Non
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Deuxième exemple de dégradé conique

Cet exemple est similaire au précédent, mais il place la ligne du centre vers le haut.

Celui-ci a quatre couleurs. Le premier est rgba(20,40,20,0.76) à la position 7%. La couleur 2 est rgba(30,73,25,0.68) à la position 24%. La couleur 3 est rgba(103,132,30,0.68) à la position 65%. La quatrième couleur est rgba(38,86,26,0.68) à la position 85%.

• Couleur 1 : rgba (20,40,20,0,76) (à 7 % de la position)
• Couleur 2 : rgba (30,73,25,0,68) (à 24 %)
• Couleur 3 : rgba (103,132,30,0,68) (à 65 %)
• Couleur 4 : rgba (38,86,26,0,68) (à 85 % de la position)

Définissez le type de dégradé sur conique et la direction sur 0 degré. Centrez la position . Ne le répétez pas et placez-le au-dessus de l'image.

• Type de dégradé : Conique
• Sens : 0 degré
• Poste : Centre
• Répétition : Non
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Troisième exemple de dégradé conique

Notre dernier exemple place une rafale de lignes depuis le centre supérieur du dégradé vers l'extérieur dans toutes les directions.

Celui-ci a deux couleurs. Le premier est rgba(30,73,25,0.68) à la position 5deg. Le second est rgba(20,40,20,0.76) à la position 7deg.

• Couleur 1 : rgba(30,73,25,0.68) (à la position 5deg)
• Couleur 2 : rgba(20,40,20,0.76) (à la position 7deg)

Réglez eth Gradient Type sur Conical et la Direction sur 221deg. Placez la position en haut. Répétez celui-ci et placez-le au-dessus de l'image d'arrière-plan.

• Type de dégradé : Conique
• Orientation : 221 degrés
• Poste : Haut
• Répétition : Oui
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Mettre fin aux pensées

C'est notre regard sur la comparaison des types de dégradés dans le générateur de dégradés de Divi. Comme vous pouvez le voir dans ces exemples, les paramètres sont simples, mais n'importe lequel d'entre eux peut faire une différence majeure dans la conception du dégradé. Pour de meilleurs résultats, essayez les types de dégradés avec différentes directions et positions, et activez ou désactivez l'option de répétition pour voir ce que vous pouvez créer.

Nous voulons de vos nouvelles. Avez-vous utilisé les différents types de dégradés dans Divi Gradient Builder ? Faites-nous part de votre expérience dans les commentaires.