Divi Tips n°126

Comment changer une image au survol de la souris ?

Publié le 12/01/2022 | 6 commentaires

736 mots

3

Vous pouvez facilement jouer avec les options de survol offertes par Divi. On appelle cela le « hover » en webdesign
 Par exemple, on peut faire un zoom au survol d’une image comme nous l’avions vu dans un prĂ©cĂ©dent tutoriel. On peut changer la couleur d’un texte ou d’un arriĂšre-plan
 Mais aujourd’hui, je vous montre comment changer une image au survol de la souris.

👉 DifficultĂ© : zĂ©ro !

👉 DurĂ©e : le temps d’un cafĂ© !

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisĂ©s sont en rose.

1 – Qu’est-ce que le « hover » ou « survol de la souris » ?

Est-ce vraiment nĂ©cessaire d’expliquer ce qu’est le HOVER ? Si vous ĂȘtes webdesigner, vous connaissez et maitrisez
 Mais si vous arrivez tout droit de l’Ăąge de glace, voici une petite dĂ©finition :

Le « Hover » ou « survol de la souris » est le fait d’afficher un Ă©tat ou un statut diffĂ©rent Ă  un Ă©lĂ©ment lorsque l’internaute passe la souris au-dessus de celui-ci.

C’est trĂšs courant pour crĂ©er des mises en page originales : changer la couleur, changer la taille, changer la position, etc.

Le saviez-vous ? Vous pouvez tester Divi gratuitement en vous rendant sur cette page et en cliquant sur « TRY IT FOR FREE »

2 – Changer une image au survol en 3 clics

L’avantage est que Divi propose des options de survol dans chaque module et le module Image ne dĂ©roge pas Ă  la rĂšgle, bien sĂ»r !

Alors, avez-vous dĂ©jĂ  pensĂ© Ă  changer carrĂ©ment une image lorsqu’on passe la souris ? C’est possible et c’est trĂšs facile :

  1. Ajoutez un module image au sein de votre mise en page avec le Visual Builder
  2. Importez votre premiĂšre image, on l’appellera l’image « A »
  3. Activez l’option de survol (hover) en cliquant sur l’icĂŽne de la flĂšche.
  4. SĂ©lectionnez l’onglet Hover (onglet « Flotter », mal traduit) et importez votre seconde image, l’image « B ».
Ajouter un module image
Ajouter un module image au sein de votre mise en page
importer l'image A
Importez d’abord l’image « A »
importer image B
Activez les options de survol et importez l’image « B »

VoilĂ , c’est tout !

Rien de plus simple, n’est-ce pas ?

N’hĂ©sitez pas Ă  vĂ©rifier les deux onglets (onglet « Bureau » et onglet « Flotter ») pour vĂ©rifier que les deux images sont aux bons endroits.

activer les bons onglets
VĂ©rifiez les images de chaque onglet

3 – Astuces pour un effet rĂ©ussi

Vous remarquerez que pour que l’effet soit rĂ©ussi, il est prĂ©fĂ©rable d’utiliser deux images qui se superposent parfaitement.

Pour mon exemple, j’ai dupliquĂ© deux fois la mĂȘme image et j’ai ensuite changĂ© la couleur et ajoutĂ© des Ă©lĂ©ments graphiques. J’ai rĂ©alisĂ© cela Ă  l’aide de deux logiciels :

  • Affinity Photo pour dĂ©tourer l’image et changer la couleur
  • Affinity Designer pour ajouter les Ă©lĂ©ments graphiques

Comme je l’explique dans la vidĂ©o qui suit, il m’a fallu plus de temps pour rĂ©aliser ces images que pour les intĂ©grer dans Divi.

Cela nous rappelle qu’une bonne mise en page et un bon design de site ne repose pas exclusivement sur la technique pour crĂ©er le site
 Bien au contraire : vos contenus – vos textes et vos images – feront toute la diffĂ©rence ! Ensuite, Divi vous permettra de les intĂ©grer facilement


4 – Changer l’image au survol de la souris : le tutoriel en vidĂ©o

Voici le petit rĂ©cap’ en vidĂ©o
 Étant donnĂ© que c’est un tutoriel Divi trĂšs court, j’en ai profitĂ© pour ajouter, en bonus, la conception de ces deux images en fin de vidĂ©o
 Donc si vous ĂȘtes curieux, regardez la vidĂ©o en entier !

Ne tardez plus ! DĂ©couvrez le thĂšme Divi ici !

5 – Les options de survol disponibles dans tous les modules Divi

Pour rappel, les options de survol sont disponibles dans chaque module de Divi ! Il suffit de passer la souris Ă  cĂŽtĂ© du titre du module pour voir apparaĂźtre les icĂŽnes de hover et des autres options
 Donc n’hĂ©sitez pas Ă  vous en servir !

D’ailleurs, c’est Ă©galement Ă  cet endroit que vous pouvez activer l’icĂŽne du tĂ©lĂ©phone qui vous permet de gĂ©rer au pixel prĂšs le responsive de chaque module. Je ne le rĂ©pĂšterai jamais assez : cherchez bien, toutes les options sont lĂ , sous vos yeux 😉

Envie de customiser Divi comme un(e) pro ? DĂ©couvrez tous les tutos !

6 – Pour aller plus loin

Pour aller plus loin avec la fonctionnalité de Hover de Divi, voici une petite liste de tutoriels :

image hover divi ok
image survol divi ok
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi
bouton calendrier avent divi small

Ça devrait vous plaire aussi :

Page d’erreur 404 personnalisĂ©e : avec et sans le Divi ThĂšme Builder

Page d’erreur 404 personnalisĂ©e : avec et sans le Divi ThĂšme Builder

Avez-vous pensĂ© Ă  personnaliser la page d’erreur 404 de votre site ? Non ? Pourtant, vous le devriez : non seulement c’est simple Ă  faire, mais en plus, cela pourrait faire baisser votre taux de rebond ! L’idĂ©e est de conserver sur votre site l’internaute qui passerait par lĂ . DĂ©couvrez le tuto pas Ă  pas + la vidĂ©o.

Appliquer des masques et des formes sur vos images avec Divi

Appliquer des masques et des formes sur vos images avec Divi

Les masques rendent vos images plus graphiques et offrent une originalitĂ© Ă  votre mise en page. Savez-vous que vous pouvez les crĂ©er facilement Ă  l’aide du Divi Visual Builder ? Je vous montre comment faire dans ce tutoriel et dans cette vidĂ©o.

6 Commentaires

  1. Meyer Michel

    Hello Licia, voilĂ  tu as fait un nouveau adepte 😉 en tous cas c’est chouette ton aide que tu apportes et un grand Merci pour tes nombreux tutos.
    Ici sur ce tuto, je pourrais ĂȘtre tentĂ©, sauf ce qui me gĂšne au passage de la souris pour le changement d’image, c’est ce petit « flash » blanc qu’il y Ă  et ça donne un rendu pas du tout fluide entre les deux images. Dommage l’idĂ©e est intĂ©ressante !
    Cordialement
    Michel

  2. Meyer Michel

    Finalement ça passe bien avec l’essaie que j’ai fait, la transition est fluide 😉

  3. Lycia Diaz

    Oui je vois ce que tu veux dire
 tu as certainement raison

  4. Lycia Diaz

    Ah super !

  5. Laura

    Bonjour Lycia,
    J’aimerais mettre une image survolĂ©e (donc deux images,) dans mon menu entĂȘte Ă  la place du mot boutique et dans un de mes menus pied de page, ou si pas possible Ă  cĂŽtĂ© du menu entĂȘte.
    L’astuce image Visual Builder module n’est pas applicable dans ce cas.
    Avez vous une solution Ă  me proposer svp ?

  6. Lycia Diaz

    Oui je vois. Pas d’idĂ©es Ă  part bidouiller avec du CSS

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

24 cadeaux à télécharger !

Chaque jour, du 1er au 24 décembre, venez ouvrir votre case et repartez avec votre bonus digital à télécharger !

Pin It on Pinterest

Shares
Share This