Comment changer une image au survol avec Divi

Publié: 2018-12-14

Savoir comment changer une image en survol peut s'avérer utile pour tout type de site Web sur lequel vous travaillez. De plus, cela vous aide à ajouter une interaction subtile aux pages. Vous pouvez, par exemple, l'utiliser pour donner une perspective supplémentaire aux témoignages, sur les pages et les pages d'équipe. Avec les nouvelles options de survol de Divi, vous pouvez modifier une image au survol en utilisant uniquement les options intégrées. En combinant les arrière-plans des colonnes et le filtre d'opacité, vous y arriverez en un rien de temps.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons les quatre exemples que nous allons recréer à partir de zéro

image au survol

Étapes générales

Ajouter une nouvelle section

Dans la première partie de ce didacticiel, nous passerons en revue quelques étapes générales. Ces étapes générales nous permettront de gagner du temps lorsque nous nous concentrerons sur les trois premiers exemples. Ouvrez une page nouvelle ou existante et ajoutez-y une section normale.

image au survol

Ajouter une nouvelle ligne

Structure des colonnes

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

image au survol

Image de fond de la colonne 1

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une image d'arrière-plan à la première colonne. Choisissez l'image que vous souhaitez voir apparaître au survol.

Répétition de l'image d'arrière-plan de la colonne 1 : aucune répétition

image au survol

Ajouter une image à la colonne 1

Télécharger une image

Continuez en ajoutant un module d'image à la première colonne et téléchargez l'image que vous souhaitez voir apparaître avant le survol.

image au survol

Ajouter un module de texte de titre à la colonne 2

Ajouter du contenu

Dans la deuxième colonne, nous aurons d'abord besoin d'un module de texte de titre. Allez-y et ajoutez du contenu H3.

image au survol

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 la rubrique 3 : Baloo Tamma
Titre 3 Couleur du texte : #eda96a
Titre 3 Taille du texte : 100 px (ordinateur de bureau), 70 px (tablette), 50 px (téléphone)
En-tête 3 Espacement des lettres : -4px

image au survol

Titre 3 Ombre de texte Longueur horizontale : 0,04 em
Titre 3 Ombre de texte Longueur verticale : 0,04 em
Titre 3 Couleur de l'ombre du texte : rgba(0,0,0,0.6)

image au survol

Espacement

Enfin, ajoutez une marge supérieure dans les paramètres d'espacement.

Marge supérieure : 100 pixels (ordinateur de bureau), 50 pixels (tablette et téléphone)

image au survol

Ajouter le module diviseur à la colonne 2

Afficher le diviseur

Ajoutez un module de séparation juste en dessous du titre Module de texte dans la colonne 2.

Afficher le diviseur : Oui

image au survol

Couleur du séparateur

Changez ensuite la couleur du séparateur.

Couleur du séparateur : #e25300

image au survol

modes

Et sélectionnez un autre style de séparateur dans les paramètres de styles.

Style de diviseur : pointillé

image au survol

Dimensionnement

Augmentez également le poids du diviseur dans les paramètres de dimensionnement.

Poids du diviseur : 3px

image au survol

Ajouter un module de corps de texte à la colonne 2

Ajouter du contenu

Passons au dernier module ! Ajoutez un module de texte de corps à la deuxième colonne avec un contenu de votre choix.

image au survol

Paramètres de texte

Modifiez ensuite les paramètres de texte.

Taille du texte : 16px
Hauteur de la ligne de texte : 2,3 em
Orientation du texte : Justifier

image au survol

Cloner la section deux fois

Une fois que vous avez terminé toutes les étapes générales, clonez deux fois la section que vous avez créée. Maintenant, nous aurons une section distincte pour chacun des trois premiers exemples.

image au survol

Créer l'exemple #1

Appliquer des paramètres supplémentaires au module Image

Opacité par défaut

Commençons à créer le premier exemple ! La seule chose que nous allons faire ici est de créer la transition de survol, sans aucun effet supplémentaire. Pour ce faire, ouvrez le module Image et accédez aux paramètres des filtres. Assurez-vous que la valeur d'opacité par défaut est de 100 %.

Opacité : 100 %

image au survol

Opacité de survol

Modifiez l'opacité au survol.

Opacité : 0%

image au survol

Transitions

Enfin, créez une transition en douceur en augmentant la durée de la transition.

Durée de transition : 1200 ms

image au survol

Créer l'exemple #2

Appliquer des paramètres supplémentaires au module Image

Espacement par défaut

Passons au deuxième exemple ! Ouvrez le module Image dans la colonne 1 et assurez-vous qu'il n'y a pas de remplissage personnalisé par défaut.

image au survol

Espacement de survol

Continuez en ajoutant un peu de rembourrage inférieur au survol pour permettre à l'image au survol d'augmenter en taille.

Rembourrage inférieur : 100px

image au survol

Boîte ombre

Nous ajoutons également une ombre de boîte par défaut qui disparaîtra au survol.

Position horizontale de l'ombre de la boîte : -55px
Position verticale de l'ombre de la boîte : -50px
Force de propagation de l'ombre de la boîte: -10px
Couleur de l'ombre : #eda96a

image au survol