Savoir modifier une image au survol peut s’avérer utile pour tout type de site Web sur lequel vous travaillez. En outre, cela vous aide à ajouter une interaction subtile aux pages. Vous pouvez, par exemple, l’utiliser pour donner une perspective supplémentaire aux témoignages, aux pages et aux pages d’équipe.

Avec les nouvelles options de survol de Divi, vous pouvez modifier une image en survol en utilisant uniquement les options intégrées. En combinant les arrière-plans de 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 en vol stationnaire

Étapes générales

Ajouter une nouvelle section

Dans la première partie de ce didacticiel, nous allons suivre quelques étapes générales. Ces étapes générales nous aideront à gagner du temps lorsque nous nous concentrerons sur les trois premiers exemples. Ouvrez une nouvelle page ou une page existante et ajoutez-y une section régulière.

selection dune section divi.jpg

Ajouter une nouvelle ligne

Structure de colonne

Ajoutez ensuite une nouvelle ligne en utilisant la structure de colonne suivante:

choisir une mise en page divi.jpg

Colonne 1 Image de fond

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 survoler.

  • Colonne 1 Image d’arrière-plan Répéter: Aucune répétition

image arriere plan divi.jpg

Ajouter une image à la colonne 1

Télécharger une image

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

ajouter une image divi.jpg

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 titre Text Module. Allez-y et ajoutez du contenu H3.

image and text divi.jpg

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

Ensuite, accédez aux paramètres du texte de titre et apportez quelques modifications.

  • Titre 3 Police: Baloo Tamma
  • Titre 3 Couleur du texte: # eda96a
  • Titre 3 Taille du texte: 100 pixels (bureau), 70 pixels (tablette), 50 pixels (téléphone)
  • Titre Espacement de 3 lettres: -4px

jaden elian image divi.jpg

  • Titre 3 Ombre du texte Horizontal Longueur: 0.04em
  • Titre 3 Ombre du texte Vertical Longueur: 0.04em
  • Titre 3 Couleur Ombre du texte: rgba (0,0,0,0,6)

personnalisation police divi image.jpg

Espacement

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

  • Marge supérieure: 50 (bureau), 50px (tablette et téléphone)

marge image divi.jpg

Ajouter un module de division à la colonne 2

Montrer le diviseur

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

  • Montrer le diviseur: Oui

separator divi imge module.jpg

Couleur du séparateur

Changez la couleur du diviseur ensuite.

  • Couleur du séparateur: # e25300

image divi separateur couleur.jpg

modes

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

  • Style de séparation: pointillé

separateur pointilié divi.jpg

Dimensionnement

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

  • Poids du séparateur: 3px

taile séparateur divi image.jpg

Ajouter un module de corps de texte à la colonne 2

Ajouter du contenu

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

nouvelle section de texte divi.jpg

Paramètres du texte

Modifiez les paramètres de texte ensuite.

  • Taille du texte: 16px
  • Hauteur de la ligne de texte: 2.3em
  • Orientation du texte: Justifiez

modifier la taile et la hauteur de la ligne divi.jpg

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 construite. Maintenant, nous aurons une section distincte pour chacun des trois premiers exemples.

dupliquer une section divi.jpg

Créer l’exemple n ° 1

Appliquer des paramètres supplémentaires au module d’image

Opacité par défaut

Commençons à créer le premier exemple ! La seule chose que nous ferons ici est de créer la transition en vol stationnaire, 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 100%.

  • Opacité: 100%

configuration du survol d'image.jpg

Survol de l’opacité

Changer l’opacité en vol stationnaire.

  • Opacité: 0%

modifier l'opacité au survol.jpg

Les transitions

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

  • Durée de la transition: 1200ms

animation duration divi module image.jpg

Créer l’exemple n ° 2

Appliquer des paramètres supplémentaires au module d’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.

vérifier le remplissage par défaut.jpg

Espacement stationnaire

Continuez en ajoutant un peu de marge de bas en survol pour permettre à l’image en vol stationnaire d’augmenter en taille.

  • Rembourrage inférieur: 100px

définir marge inférieure.jpg

Boîte ombre

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

  • Ombre de la boîte, position horizontale: -55px
  • Box Shadow Position verticale: -50px
  • Force de propagation de l’ombre de la boîte: -10px
  • Couleur de l’ombre: # eda96a

définir une ombre divi.jpg

Opacité par défaut

Ensuite, accédez aux paramètres des filtres et assurez-vous que l’opacité par défaut est de 100%.

  • Opacité: 100%

image en vol stationnaire

Survol de l’opacité

Supprimez l’opacité du module en vol stationnaire. Cela permettra à l’arrière-plan de la colonne de s’afficher et de créer l’effet «image en survol».

  • Opacité: 0%

opacité au survol divi.jpg

Les transitions

Enfin, augmentez la durée de la transition dans les paramètres de transition du module Image.

  • Durée de la transition: 1200ms

durée de lanimation divi.jpg

Créer un exemple n ° 3

Ajouter un fond dégradé à la colonne 1

Pour le troisième exemple, nous commençons par ouvrir les paramètres de ligne et en ajoutant un arrière-plan à dégradé radial à la première colonne. Cela donnera à l’image en vol stationnaire une forme circulaire.

  • Couleur 1: rgba (43,135,218,0)
  • Couleur 2: #ffffff
  • Colonne 1 Type de dégradé: Radial
  • Colonne 1 Direction radiale: centre
  • Colonne 1 Position de départ: 60%
  • Colonne 1 Position finale: 60%

réglages de la ligne divi.jpg

Appliquer des paramètres supplémentaires au module d’image

Opacité par défaut

Continuez en ouvrant le module d’image de la colonne 1 et en vous assurant que l’opacité par défaut est de 100%.

  • Opacité: 100%

configuration de l'opacite au survol dimage sur divi.jpg

Survol de l’opacité

Supprimez toute opacité en survol pour laisser apparaître l’arrière-plan de la colonne.

  • Opacité: 0%

définir lopacity divi.jpg

Créer l’exemple n ° 4

Ajouter une nouvelle ligne

Structure de colonne

Sur le dernier exemple ! Ici, nous aurons besoin d’une nouvelle ligne avec 6 colonnes.

exemple 4 mise en page divi.jpg

Colonne 1 Image de fond

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez l’image d’arrière-plan sur laquelle vous souhaitez apparaître en survol en tant qu’image d’arrière-plan de la colonne 1.

  • Colonne 1 Image d’arrière-plan Répéter: Aucune répétition

image sans repétition.jpg

Répéter pour toutes les colonnes en ligne

Répétez l’étape précédente pour chacune des colonnes de votre ligne.

reproduire les images sur les autres colonnes.jpg

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement de la ligne et supprimez tout espace entre les colonnes.

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

dimensionnement divi.jpg

Ajouter un module d’image à la colonne 1

Télécharger une image

Continuez en ajoutant un module d’image à la première colonne et en téléchargeant l’image que vous souhaitez voir apparaître par défaut.

aujour le module dimage a la colonne 1 divi.jpg

Opacité par défaut

Assurez-vous que l’opacité par défaut de ce module est de 100%.

  • Opacité: 100%

configurer lopacité sur divi.jpg

Survol de l’opacité

Et supprimez l’opacité en survol pour permettre à l’arrière-plan de la colonne de s’afficher à la place.

  • Opacité: 0%

opacité au survol module image divi.jpg

Les transitions

Augmentez la durée de la transition pour une transition en douceur.

  • Durée de la transition: 800ms

durée d'une transition divi.jpg

Module Clone Image 3 fois et place les doublons dans les colonnes restantes

Une fois que vous avez terminé de modifier le module image dans la colonne 1, vous pouvez le cloner et placer les doublons dans les colonnes restantes. Assurez-vous de changer les images aussi.

clonner les  modules.jpg

Dernières pensées

Changer une image en survol peut aider à apporter cette interaction supplémentaire aux sections de témoignage, à propos des pages et des pages d’équipe.

Dans ce didacticiel, nous vous avons montré un moyen simple d’obtenir différents types d’images en survol en utilisant uniquement les options intégrées de Divi ! Si vous avez des questions ou des suggestions, veuillez  laisser un commentaire dans la section des commentaires ci-dessous !