Comment créer de belles transitions de survol en arrière-plan dégradé avec Divi

Récemment, des options de survol supplémentaires ont été ajoutées à Divi, vous permettant de créer des effets encore plus sympas sans avoir à toucher une seule ligne de code. Vous pouvez maintenant, par exemple, créer d'incroyables transitions de survol d'arrière-plan dégradé. En combinant des dégradés de colonnes, de lignes et de sections, vous pouvez obtenir des conceptions uniques. Dans ce tutoriel, nous allons vous montrer exactement comment faire cela. Nous allons commencer par passer par quelques étapes générales. Une fois cela fait, nous nous concentrerons sur trois exemples de conception individuellement. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, examinons rapidement les trois exemples différents que nous allons recréer tout au long de ce didacticiel.

Exemple 1

Exemple #2

Exemple #3

Téléchargez les sections des héros GRATUITEMENT

Abonnez-vous à notre chaîne Youtube

Pour mettre la main sur ces sections de héros gratuites, vous devrez d'abord les télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Étapes générales

Ajouter une nouvelle section

Espacement

Commençons par passer en revue quelques étapes générales. Ajoutez une nouvelle section à la page sur laquelle vous travaillez et supprimez tout le remplissage par défaut. La suppression de tout le rembourrage supérieur et inférieur nous aidera, plus tard, à combiner les arrière-plans dégradés des colonnes, des lignes et des sections.

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

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de ligne et autorisez la ligne à occuper toute la largeur du conteneur de section.

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Passez aux paramètres d'espacement et supprimez tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu H1

Commençons à ajouter des modules ! Le premier dont nous avons besoin est un module de texte avec du contenu H1.

Paramètres de texte H1

Passez à l'onglet Conception et modifiez les paramètres de texte H1 en conséquence :

• Police de titre : Montserrat
• Alignement du texte de l'en-tête : Centre
• Couleur du texte de l'en-tête : #000000
• Taille du texte de l'en-tête : 3vw (ordinateur de bureau), 6vw (tablette et téléphone)
• Espacement des lettres d'en-tête : 0.7vw

Dimensionnement

Ouvrez ensuite les paramètres de dimensionnement et modifiez la largeur ainsi que l'alignement du module.

• Largeur : 48 % (ordinateur de bureau), 60 % (tablette et téléphone)
• Alignement du module : Centre

Espacement

Complétez la conception du module en ajoutant une marge supérieure.

• Marge supérieure : 10vw

Ajouter un module diviseur à la colonne

Visibilité

Au prochain module ! Ajoutez un module diviseur et assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Changez ensuite la couleur de la ligne.

• Couleur de la ligne : #000000

Dimensionnement

Passez aux paramètres de dimensionnement et appliquez les paramètres suivants :

• Poids du diviseur: 0.1vw
• Largeur : 10 % (ordinateur de bureau), 16 % (tablette), 25 % (téléphone)
• Alignement du module : Centre

Espacement

Ajoutez également des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)

Ajouter le module de texte #2 à la colonne

Ajouter du contenu

Passons au module suivant, qui est un autre module de texte. Ajoutez du contenu de paragraphe de votre choix.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police de texte : Open Sans
• Alignement du texte : Justifier
• Hauteur de la ligne de texte : 2,3 em

Dimensionnement

Modifiez ensuite la largeur et l'alignement du module dans les paramètres de dimensionnement :

• Largeur : 30 % (ordinateur de bureau), 54 % (tablette), 70 % (téléphone)
• Alignement du module : Centre

Ajouter un module de bouton à la colonne

Ajouter une copie

Le prochain et dernier module dont nous avons besoin dans la colonne est un module de bouton. Ajoutez une copie de votre choix.

Alignement

Passez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Modifiez également les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0,8 vw (ordinateur de bureau), 2 vw (tablette), 2,8 vw (téléphone)
• Couleur du texte du bouton : #000000
• Largeur de la bordure du bouton : 1px
• Rayon de la bordure du bouton : 1px
• Police des boutons : Montserrat

Espacement

Et ajoutez des valeurs d'espacement personnalisées sur différentes tailles d'écran.

• Marge supérieure : 2vw (ordinateur de bureau), 8vw (tablette et téléphone)
• Marge inférieure : 10vw
• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)

Cloner la section deux fois

Une fois que vous avez terminé la section, vous pouvez la cloner deux fois ; un pour chaque exemple.

Recréer la transition de survol d'arrière-plan dégradé #1

Section

Fond dégradé par défaut

Commençons à créer la première transition de survol ! Ouvrez les paramètres de la section et ajoutez l'arrière-plan dégradé par défaut suivant :

• Couleur 1 : #d1d1ff
• Couleur 2: #f7f7f7
• Direction du gradient : 90 degrés
• Position de départ : 50 %
• Position finale : 50 %

Survoler l'arrière-plan du dégradé

Modifiez le fond dégradé au survol.

• Couleur 1 : #f7f7f7
• Couleur 2: #ffc1c7
• Direction du gradient : 90 degrés
• Position de départ : 50 %
• Position finale : 50 %

Ligne

Fond dégradé par défaut

Ouvrez ensuite les paramètres de ligne et appliquez les paramètres d'arrière-plan dégradé par défaut suivants :

• Couleur 1 : #7032ff
• Couleur 2: rgba(255,255,255,0)
• Direction du gradient : 90 degrés
• Position de départ : 10 %
• Position finale : 10 %

Survoler l'arrière-plan du dégradé

Modifiez le fond dégradé au survol.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #ff324a
• Direction du gradient : 90 degrés
• Position de départ : 90 %
• Position finale : 90 %

Recréer la transition de survol d'arrière-plan dégradé #2

Section

Fond dégradé par défaut

Passons au deuxième exemple ! Ouvrez les paramètres de la section et ajoutez l'arrière-plan dégradé suivant :

• Couleur 1 : #f7f7f7
• Couleur 2 : #eceaff
• Direction du dégradé : 156 deg
• Position de départ : 50 %
• Position finale : 50 %

Survoler l'arrière-plan du dégradé

Ajoutez un arrière-plan dégradé différent au survol :

• Couleur 1 : #ffeaec
• Couleur 2: #f7f7f7
• Direction du gradient : 204 degrés
• Position de départ : 50 %
• Position finale : 50 %

Ligne

Fond dégradé par défaut

Ouvrez ensuite les paramètres de ligne et appliquez les paramètres d'arrière-plan dégradé suivants :

• Couleur 1 : #a932ff
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : en bas à gauche
• Position de départ : 14 %
• Position finale : 14 %

Survoler l'arrière-plan du dégradé

Modifiez l'arrière-plan dégradé de la ligne au survol en conséquence :

• Couleur 1 : #ff324a
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : en haut à gauche
• Position de départ : 14 %
• Position finale : 14 %

Colonne

Fond dégradé par défaut

Passez aux paramètres de colonne et ajoutez l'arrière-plan dégradé suivant :

• Couleur 1 : #a932ff
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : en haut à droite
• Position de départ : 14 %
• Position finale : 14 %

Survoler l'arrière-plan du dégradé

Modifiez l'arrière-plan du dégradé de la colonne au survol :

• Couleur 1 : #ff324a
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : en bas à droite
• Position de départ : 14 %
• Position finale : 14 %

Recréer la transition de survol d'arrière-plan dégradé #3

Section

Fond dégradé par défaut

Passons au prochain et dernier exemple ! Ouvrez les paramètres de la section et appliquez l'arrière-plan dégradé suivant :

• Couleur 1 : #ffc1c7
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 45 %
• Position finale : 45 %

Survoler l'arrière-plan du dégradé

Modifiez l'arrière-plan du dégradé de la section au survol.

• Couleur 1 : #ffc1c7
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Gauche
• Position de départ : 20 %
• Position finale : 20 %

Ligne

Fond dégradé par défaut

Ouvrez ensuite les paramètres de ligne et ajoutez l'arrière-plan dégradé suivant :

• Couleur 1 : #d3dfff
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Bas
• Position de départ : 45 %
• Position finale : 45 %

Survoler l'arrière-plan du dégradé

Modifiez le fond dégradé en conséquence :

• Couleur 1 : #d3dfff
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Droite
• Position de départ : 20 %
• Position finale : 20 %

Colonne

Fond dégradé par défaut

Enfin, ajoutez un fond dégradé de colonne et le tour est joué !

• Couleur 1 : #f7f7f7
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 41 %
• Position finale : 41 %

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat des trois exemples que nous avons recréés tout au long de ce didacticiel !

Exemple 1

Exemple #2

Exemple #3

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser de manière créative les options de survol de fond dégradé supplémentaires de Divi pour créer de belles transitions de survol avec les options intégrées de Divi uniquement. Nous avons commencé par quelques étapes générales et avons continué en recréant chacun des trois exemples. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.