Comment changer un arrière-plan dégradé en survol avec Divi

La création de sites Web consiste à s'assurer que chaque détail est correct. Prêter attention aux petits détails de votre conception augmentera rapidement et améliorera la qualité de votre site Web. Avec les nouvelles options de survol de Divi, vous pouvez facilement ajouter de petites interactions sur votre site Web. Les options de survol s'appliquent à presque tous les paramètres de conception. Vous pouvez, par exemple, modifier indirectement un arrière-plan dégradé au survol pour créer une transition agréable. C'est exactement ce que nous allons vous montrer dans cet article de blog. En plus de réaliser la transition de dégradé, nous allons également créer un exemple de conception époustouflant à partir de zéro que vous êtes libre d'utiliser pour tout type de site Web que vous créez.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil au résultat final sur différentes tailles d'écran.

Statique

Flotter

Téléchargez les illustrations GRATUITEMENT

Pour mettre la main sur les illustrations gratuites issues du Video Game Layout Pack, vous devrez d'abord les télécharger à l'aide du 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 encore plus de bienfaits Divi et un pack Divi Layout gratuit tous les lundis et vendredis ! 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 !

Commençons à créer !

Abonnez-vous à notre chaîne Youtube

Ajouter la section #1

Espacement

La première chose que vous devrez faire est de créer une nouvelle page ou d'en ouvrir une existante et d'y ajouter une nouvelle section régulière. Ouvrez les paramètres et ajoutez des marges supérieure et inférieure personnalisées.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px

Ajouter la ligne n° 1

Structure des colonnes

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

Colonne 1 Couleur d'arrière-plan par défaut

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez la couleur d'arrière-plan par défaut suivante à la colonne 1 :

• Couleur d'arrière-plan : #e7ffa0

Couleur d'arrière-plan du survol de la colonne 1

Changez cette couleur d'arrière - plan sur le vol stationnaire.

• Couleur d'arrière-plan : #00020c

Colonne 1 Fond dégradé

Ajoutez également une couleur d'arrière-plan dégradée à la colonne 1. Vous remarquerez que nous utilisons une couleur complètement transparente. Cette couleur permettra à la couleur d'arrière-plan d'apparaître, qui à son tour change au survol.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: rgba (16,0,201,0.8)
• Type de dégradé de la colonne 1 : linéaire
• Direction du gradient de la colonne 1 : 50 deg
• Position de départ de la colonne 1 : 20 %

Couleur d'arrière-plan de la colonne 2

Ajoutez également une couleur d'arrière-plan de la colonne 2.

• Couleur d'arrière-plan de la colonne 2 : #ffffff

Dimensionnement

Ensuite, allez dans l'onglet conception et modifiez les paramètres de dimensionnement.

• Utiliser la largeur personnalisée : Oui
• Unité : PX
• Largeur personnalisée : 2000px
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Continuez en ajoutant des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Rembourrage supérieur de la colonne 2: 6vw (ordinateur de bureau), 120px (tablette et téléphone)
• Rembourrage inférieur de la colonne 2: 6vw (ordinateur de bureau), 120px (tablette et téléphone)
• Remplissage gauche de la colonne 2 : 5vw (ordinateur de bureau), 80 px (tablette), 50 px (téléphone)
• Remplissage droit de la colonne 2 : 5vw (ordinateur de bureau), 80 px (tablette), 50 px (téléphone)

Boîte ombre

Et donnez également à la rangée une ombre de boîte subtile.

• Force de flou d'ombre de boîte : 100px
• Force de propagation de l'ombre de la boîte: -10px

Transitions

Enfin, nous allons créer une transition d'arrière-plan en dégradé fluide en augmentant la durée de transition dans l'onglet Avancé.

• Durée de la transition : 1 100 ms

Ajouter un module d'image à la colonne 1

Télécharger une image

Il est temps de commencer à ajouter des modules ! Ajoutez un module image à la première colonne et téléchargez le fichier ' divi-gradient-background-on-hover-illustration-1.png ' que vous pouvez trouver dans le dossier zippé que vous avez téléchargé au début de cet article.

Fond dégradé

Accédez aux paramètres d'arrière-plan de ce module d'image et ajoutez un arrière-plan dégradé. Nous utilisons à nouveau une couleur entièrement transparente pour permettre aux autres couleurs de transparaître.

• Couleur 1: rgba (50,217,255,0.66)
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Haut
• Position finale : 57 %

Espacement

Ensuite, ajoutez un rembourrage supérieur personnalisé au module.

• Rembourrage supérieur : 14vw

Ajouter un module de texte de titre à la colonne 2

Ajouter du contenu

Passons à la deuxième colonne ! Le premier module dont nous aurons besoin est un module de texte intitulé. Allez-y et ajoutez du contenu de titre de votre choix.

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

Ensuite, allez dans les paramètres de texte d'en-tête et apportez quelques modifications.

• Police de titre : Abril Fatface
• Couleur du texte de l'en-tête : #000000
• Taille du texte de l'en-tête : 4vw (ordinateur de bureau), 60 px (tablette), 40 px (téléphone)

Ajouter le module de texte de description à la colonne 2

Ajouter du contenu

Le deuxième module dont nous aurons besoin est un autre module de texte. Ajoutez du contenu de votre choix.

Paramètres de texte

Ensuite, accédez aux paramètres de texte et modifiez l'orientation du texte.

• Orientation du texte : Justifier

Dimensionnement

Ajustez également la largeur dans les paramètres de dimensionnement.

• Largeur : 73 % (ordinateur de bureau), 100 % (tablette et téléphone)

Espacement

Enfin, ajoutez des marges supérieure et inférieure personnalisées au module pour créer un espace blanc.

• Marge supérieure : 2.5vw (ordinateur de bureau), 50px (tablette et téléphone)
• Marge inférieure : 2.5vw (ordinateur de bureau), 50px (tablette et téléphone)

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Le troisième et dernier module dont nous aurons besoin dans la deuxième colonne est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Modifiez ensuite les paramètres du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1,2 vw (ordinateur de bureau), 14 pixels (tablette et téléphone)
• Couleur du texte du bouton : #ffffff
• Dégradé de couleur 1 : #9ea6ff
• Couleur du dégradé 2: rgba (16,0,201,0.8)
• Direction du gradient : 78 deg
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 30 px
• Espacement des lettres des boutons : -1px
• Poids de la police : Ultra gras
• Style de police : majuscule

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px
• Rembourrage gauche : 40 px
• Rembourrage droit : 40 px

Boîte ombre

Et appliquez une ombre de boîte subtile sur le bouton.

• Force du flou d'ombre de la boîte: 40px

Ajouter la section #2

Espacement

Maintenant que nous avons terminé la première section, nous allons passer à la suivante. Ajoutez une nouvelle section standard à l'aide des valeurs de remplissage personnalisées suivantes :

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px

Ajouter la ligne n° 2

Structure des colonnes

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

Colonne 1 Couleur d'arrière-plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez la couleur d'arrière-plan suivante à la colonne 1 :

• Couleur d'arrière-plan de la colonne 1 : #ffffff

Colonne 2 Couleur d'arrière-plan par défaut

Ajoutez la couleur d'arrière-plan suivante à la colonne 2.

• Couleur d'arrière-plan de la colonne 2 : #ffffff

Couleur d'arrière-plan du survol de la colonne 2

Et changez cette couleur d'arrière-plan en survol.

• Couleur d'arrière-plan de la colonne 2 : #3d02ff

Colonne 2 Fond dégradé

Ajoutez également un arrière-plan dégradé à la colonne.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #ff7700
• Position de départ de la colonne 2 : 20 %

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et apportez quelques modifications.

• Utiliser la largeur personnalisée : Oui
• Unité : PX
• Largeur personnalisée : 2000px
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Continuez en ajoutant des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage supérieur de la colonne 1 : 6vw (ordinateur de bureau), 120px (tablette et téléphone)
• Remplissage inférieur de la colonne 1 : 6vw (ordinateur de bureau), 120px (tablette et téléphone)
• Remplissage gauche de la colonne 1 : 5vw (ordinateur de bureau), 80 px (tablette), 50 px (téléphone)
• Remplissage droit de la colonne 1 : 5vw (ordinateur de bureau), 80 px (tablette), 50 px (téléphone)

Boîte ombre

Et ajoutez également une ombre de boîte subtile à cette rangée.

• Force de flou d'ombre de boîte : 100px
• Force de propagation de l'ombre de la boîte: -10px

Transitions

Enfin, créez une transition en douceur en augmentant la durée de la transition dans l'onglet avancé.

• Durée de la transition : 1 100 ms

Modules de texte en double et module de boutons de la ligne n° 1

Puisque nous avons déjà tous les modules dont nous avons besoin dans la section précédente, nous allons gagner du temps en les clonant.

Placez les doublons dans la colonne 1 de la ligne 2

Et en plaçant les doublons dans la première colonne de la nouvelle ligne.

Modifier le contenu

Assurez-vous de modifier le contenu de vos modules.

Changer l'arrière-plan du dégradé du bouton

Modifiez également l'arrière-plan du dégradé du bouton.

• Couleur 1 : #ff653f
• Couleur 2: #0066ff
• Direction du gradient : 39 deg

Cloner le module d'image de la ligne n° 2

Clonez également le module Image que vous pouvez trouver dans la première colonne de la ligne précédente.

Placez le doublon dans la colonne 2 de la ligne 2

Et placez le doublon dans la deuxième colonne de la nouvelle ligne.

Changer l'image

Remplacez l'image par le fichier ' divi-gradient-background-on-hover-illustration-2.png ' que vous pouvez trouver dans le dossier zippé que vous avez téléchargé au début de cet article.

Changer le fond dégradé

Enfin, modifiez le fond dégradé du module Image.

• Couleur 1 : rgba (0,2,12,0.66)
• Couleur 2: rgba(255,255,255,0)
• Position finale : 57 %

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat final sur différentes tailles d'écran !

Statique

Flotter

Dernières pensées

Dans cet article, nous vous avons montré comment modifier un fond dégradé au survol à l'aide de Divi. Nous avons également créé un superbe exemple de conception à partir de zéro qui utilise cette approche. Vous êtes libre d'utiliser le design et les illustrations pour tout type de site Web que vous créez. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!