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Ă© !
- 1 â Quâest-ce que le « hover » ou « survol de la souris » ?
- 2 â Changer une image au survol en 3 clics
- 3 â Astuces pour un effet rĂ©ussi
- 4 â Changer lâimage au survol de la souris : le tutoriel en vidĂ©o
- 5 â Les options de survol disponibles dans tous les modules Divi
- 6 â Pour aller plus loin
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 :
- Ajoutez un module image au sein de votre mise en page avec le Visual Builder
- Importez votre premiĂšre image, on l’appellera l’image « A »
- Activez l’option de survol (hover) en cliquant sur l’icĂŽne de la flĂšche.
- SĂ©lectionnez l’onglet Hover (onglet « Flotter », mal traduit) et importez votre seconde image, 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.
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 :
- Une autre façon de changer l’image au survol
- Comment faire défiler (scroll) une image au survol de la souris
- Comment ajouter un effet Tilt au survol (wahou, j’adore !)
- Comment afficher le rĂ©sumĂ© d’un article au survol
- Comment crĂ©er un effet de zoom au survol d’une image avec un texte cliquable par-dessus ?
- Comment remplacer le logo d’un client par un tĂ©moignage client au survol de la souris ?
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
Finalement ça passe bien avec l’essaie que j’ai fait, la transition est fluide đ
Oui je vois ce que tu veux dire⊠tu as certainement raison
Ah super !
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 ?
Oui je vois. Pas dâidĂ©es Ă part bidouiller avec du CSS
Bonjour !
AprĂšs quelques annĂ©es chez shopify, je commence Ă me familiariser avec Divi que je trouve intĂ©ressant au niveau seo. Mais je dĂ©sespĂšre Ă ne pas trouver une astuce ou module pour savoir comment afficher une seconde image au survol dâun produit !
Avec le thĂšme Dawn de shopify, cette fonction est proposĂ©e naturellement mais lĂ avec Divi, je n’ai rien trouvĂ© sur ce sujet. Auriez-vous une info sur ce sujet ou faudra-t-il retourner Ă l’Ăąge de glace ? đ
Merci d’avance pour votre aide.
Eh bien non, il nây a pas dâoption pour ça. DâoĂč ce tutoriel. Peut-ĂȘtre quâun plugin tiers propose ça ? Peut-ĂȘtre Divi SuprĂȘme ? Ă voirâŠ
J ai un soucis avec mes images sur Divi, mes image sont grisées a 50 % . Que faire
Je ne sais pas, je suppose qui faut inspecter votre site pour mieux comprendre ce qu’il se passe. Il doit y avoir un dĂ©gradĂ© de paramĂ©trĂ© quelque part.
Bonjour,
Merci pour cette solution trÚs simple (et plus généralement pour vos tutos sur lesquels je tombent réguliÚrement).
J’ai lu le commentaire de @Meyer Michel et, comme lui, j’aimerai faire disparaĂźtre cet effet de flash lors de la transition mais je ne vois pas comment faire cela. Quelqu’un pourrait-il m’aider ?
D’avance merci
Bonjour Elise, malheureusement je n’ai pas trouvĂ© de solution Ă ce « flash »