Comment appliquer une couleur de texte en dégradé à votre copie en utilisant uniquement les options intégrées de Divi

Quel que soit le type de site Web que vous créez, la mise en évidence de la copie et du contenu reste l'une des principales priorités. Avec les options intégrées de Divi, il existe une tonne de façons d'y arriver. L'une des possibilités est d'appliquer un dégradé de couleur de texte à votre copie. C'est une excellente approche pour ajouter de la couleur à votre site Web, surtout si vous gardez le reste de votre site Web propre et minimaliste. Cela aide à équilibrer les espaces et donne à votre site Web une bouffée d'air frais.

Dans ce tutoriel, nous allons vous montrer comment donner à votre texte une couleur dégradée en utilisant uniquement les options intégrées de Divi.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat sur différentes tailles d'écran. Nous allons vous montrer comment faire en sorte que cela fonctionne en utilisant à la fois une palette de couleurs claires et foncées. Une fois que vous avez compris l'approche, vous pouvez créer toutes sortes de motifs avec du texte en dégradé.

Approcher

1. Comprendre les modes de fusion Divi

Les modes de fusion fonctionnent exactement comme vous en avez l'habitude dans les logiciels de retouche d'images. Ils sont basés sur des structures de couches. Concrètement, cela signifie qu'un mode de fusion dans Divi suivra une certaine hiérarchie :

• Un mode de fusion appliqué à un module fusionnera le module + la colonne en dessous
• Un mode de fusion appliqué à une colonne fusionnera la colonne + la ligne en dessous
• Un mode de fusion appliqué à une ligne fusionnera la ligne + la section en dessous

Pour ce tutoriel, il est nécessaire de comprendre qu'un mode de fusion appliqué à un module se fondra avec la colonne en dessous. En donnant à la colonne un fond dégradé et au module en question un mode de fusion, nous pouvons parvenir à obtenir un texte de couleur dégradée.

2. Choisir entre une palette de couleurs entièrement sombres ou claires

Pour que cela fonctionne, vous devrez soit utiliser une palette de couleurs entièrement sombres ou claires. Les modes de fusion que nous utilisons, éclaircir et assombrir, ne donneront le résultat souhaité que lorsque vous utilisez une couleur entièrement noire ou blanche. Lorsque vous utilisez d'autres couleurs, l'effet que nous avons appliqué apparaîtra en quelque sorte.

3. Suppression de toute la largeur de gouttière entre les colonnes et les modules

Comme mentionné dans la première partie de l'approche, nous allons utiliser des arrière-plans en dégradé de colonnes. Pour nous assurer que cet arrière-plan dégradé n'apparaît pas où nous ne voulons pas, nous allons supprimer toute la largeur de la gouttière. Ce faisant, nous nous assurerons qu'aucune marge personnalisée par défaut n'est appliquée entre les modules. Pour rattraper l'espace perdu, nous ajouterons manuellement un rembourrage personnalisé à la place.

4. Utiliser le rembourrage au lieu de modifier la largeur d'un élément

Et pour ajuster la largeur d'un élément de conception, nous utiliserons un rembourrage personnalisé à gauche et à droite. La modification de la largeur dans les paramètres de dimensionnement modifierait la largeur de l'ensemble du module et permettrait à l'arrière-plan du dégradé de la colonne d'apparaître à gauche et à droite, ce que nous ne voulons pas.

Commençons à créer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Couleur de l'arrière plan

Commençons! Ajoutez une section régulière à une page nouvelle ou existante et attribuez-lui la bonne couleur d'arrière-plan (selon que vous souhaitez recréer la mise en page claire ou sombre).

• Couleur d'arrière-plan : #ffffff (mise en page claire), #000000 (mise en page sombre)

Espacement

Continuez en ajoutant un rembourrage personnalisé à la section.

• Rembourrage supérieur : 215px
• Rembourrage inférieur : 215px

Ajouter la ligne n° 1

Structure des colonnes

Ensuite, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Colonne 2 Fond dégradé

Ajoutez un arrière-plan dégradé à la deuxième colonne de la ligne. C'est ici que nous placerons le titre Text Module dans la prochaine partie du didacticiel.

• Couleur 1 : #c700ff
• Couleur 2: #32f1ff
• Direction du gradient de la colonne 2 : 150 deg
• Position de départ de la colonne 2 : 20 %
• Position finale de la colonne 2 : 60 %

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Et modifiez les paramètres d'espacement.

• Marge supérieure : 50px
• Marge inférieure : 50px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Maintenant, allez-y et ajoutez un module de texte à la deuxième colonne de la ligne que vous avez ajoutée.

Couleur de l'arrière plan

Donnez à votre module le bon arrière-plan, en fonction du type de mise en page que vous souhaitez recréer.

• Couleur d'arrière-plan : #ffffff (mise en page claire), #000000 (mise en page sombre)

Paramètres de texte d'en-tête

Modifiez ensuite les paramètres du texte de l'en-tête.

• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #000000 (mise en page claire), #ffffff (mise en page sombre)
• Titre 2 Taille du texte : 67 px (ordinateur de bureau), 50 px (tablette), 40 px (téléphone)
• Espacement des lettres de l'en-tête 2 : -2px

Espacement

Et ajoutez un peu de rembourrage en bas. N'oubliez pas que nous utilisons un remplissage inférieur au lieu de la marge pour nous assurer que l'arrière-plan dégradé de la colonne ne s'affiche pas.

• Rembourrage inférieur : 50px

Mode de fusion

Pour que l'arrière-plan dégradé de la colonne s'applique au module que vous avez ajouté, appliquez un mode de fusion dans les paramètres des filtres.

• Mode de fusion : éclaircir (mise en page claire), assombrir (mise en page sombre)

Ajouter un module de séparation à la ligne

Visibilité

Le deuxième et dernier module dont nous avons besoin dans cette rangée est un module diviseur.

• Afficher le diviseur : Oui

Couleur de l'arrière plan

Modifiez la couleur d'arrière-plan en fonction du type de mise en page que vous recréez.

• Couleur d'arrière-plan : #ffffff (mise en page claire), #000000 (mise en page sombre)

Espacement

Pour réduire la largeur du séparateur, nous allons ajouter un rembourrage personnalisé sur les côtés gauche et droit.

• Remplissage gauche : 250px
• Rembourrage droit : 250 px

Mode de fusion

Encore une fois, ajoutez un mode de fusion pour afficher l'arrière-plan du dégradé de la colonne.

• Mode de fusion : éclaircir (mise en page claire), assombrir (mise en page sombre)

Ajouter la ligne n° 2

Structure des colonnes

Au rang suivant ! Utilisez la structure de colonnes suivante :

Colonne 1 Fond dégradé

Continuez en ajoutant un fond dégradé à la première colonne.

• Couleur 1 : #c700ff
• Couleur 2: #32f1ff
• Type de dégradé de la colonne 1 : linéaire
• Direction du gradient de la colonne 1 : 105 deg
• Position de départ de la colonne 1 : 20 %
• Position finale de la colonne 1 : 50 %

Colonne 2 Fond dégradé

Nous utilisons également un fond dégradé pour la deuxième colonne.

• Couleur 1 : #32f1ff
• Couleur 2: #c700ff
• Type de dégradé de la colonne 2 : linéaire
• Direction du gradient de la colonne 2 : 90 degrés
• Position de départ de la colonne 2 : 40 %
• Position finale de la colonne 2 : 60 %

Colonne 3 Fond dégradé

Idem pour la troisième colonne.

• Couleur 1 : #c700ff
• Couleur 2: #32f1ff
• Type de dégradé de la colonne 3 : linéaire
• Direction du gradient de la colonne 3 : 85 deg
• Colonne 3 Position de départ : 20 %
• Position finale de la colonne 3 : 50 %

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Et ajoutez un rembourrage personnalisé à gauche et à droite.

• Rembourrage gauche : 100 pixels (ordinateur de bureau et tablette), 50 pixels (téléphone)
• Rembourrage droit : 100 pixels (ordinateur de bureau et tablette), 50 pixels (téléphone)

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un module Blurb à la colonne 1 avec un titre de votre choix. Plus tard dans la publication, nous utiliserons un module séparé pour ajouter le contenu du corps.

Choisissez l'icône

Sélectionnez une icône de votre choix.

Couleur de l'arrière plan

Et modifiez la couleur d'arrière-plan du module Blurb.

• Couleur d'arrière-plan : #ffffff (mise en page claire), #000000 (mise en page sombre)

Paramètres des icônes

Continuez en allant dans les paramètres de l'icône et en y apportant quelques modifications.

• Couleur de l'icône : #000000 (mise en page claire), #ffffff (mise en page sombre)
• Placement des images/icônes : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 51 px

Paramètres du texte du titre

Modifiez également les paramètres du texte du titre.

• Poids de la police du titre : gras
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #000000 (mise en page claire), #ffffff (mise en page sombre)
• Espacement des lettres du titre : -1px
• Hauteur de la ligne de titre : 1,2 em

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez des valeurs de marge et de remplissage personnalisées.

• Marge inférieure : 5px
• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Mode de fusion

Enfin, appliquez le bon mode de fusion.

• Mode de fusion : éclaircir (mise en page claire), assombrir (mise en page sombre)

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Nous séparons le titre et le corps du module Blurb en deux modules pour que le mode de fusion s'applique uniquement à l'icône et au titre. Allez-y et ajoutez un module de texte juste en dessous du module Blurb contenant le contenu du corps.

Couleur de l'arrière plan

Ensuite, ajoutez une couleur d'arrière-plan.

• Couleur d'arrière-plan : #ffffff (mise en page claire), #0c0c0c (mise en page sombre)

Paramètres de texte

Et modifiez les paramètres de texte.

• Espacement des lettres du texte : 0.5px
• Hauteur de la ligne de texte : 2,3 em
• Orientation du texte : Justifier
• Couleur du texte : foncé (mise en page claire), clair (mise en page sombre)

Espacement

Pour donner au module un peu d'espace pour respirer, ajoutez des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px
• Remplissage gauche : 70px
• Rembourrage droit : 70 pixels

Boîte ombre

Et pour couronner le tout, ajoutez également une subtile ombre de boîte.

• Force du flou de l'ombre de la boîte : 56px
• Force de propagation de l'ombre de la boîte: -12px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Cloner le module Blurb et le module de texte deux fois + placer dans les colonnes restantes

Enfin, clonez les deux modules que vous pouvez trouver dans la colonne 1 et placez les doublons dans les deux colonnes restantes. Modifiez également le contenu en conséquence.

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat final.

Dernières pensées

Dans cet article, nous vous avons montré comment créer du texte dégradé sur votre site Web en utilisant uniquement les options intégrées de Divi. Pour que ce didacticiel fonctionne et pour pouvoir pratiquer l'approche sur d'autres conceptions également, il est nécessaire que vous parcouriez la section approche de cet article et que vous la compreniez tout en recréant la conception. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!