Changer une image au survol dans Elementor (3 méthodes)
7 mn de lecture

Changer une image au survol dans Elementor (3 méthodes)

Comment changer une image au survol dans Elementor en lui incluant un lien cliquable vers une autre page ?

Peut-être avez-vous déjà essayé et abdiqué faute de trouver la solution.

En fait, c’est très simple, je vais donc vous expliquer comment changer une image au survol de la souris :

  • Pour créer un effet visuel
  • Pour inclure un lien vers une autre page (ou section)
  • En utilisant un widget Flip box permettant d’inclure un lien

Changer une image au survol dans Elementor pour le design

La première méthode consiste à jouer avec des images mises en arrière-plan. Elle ne permet pas d’inclure un lien, ce sera uniquement pour créer un effet visuel.

Pour l’exemple, imaginons une section avec deux colonnes. Dans la première colonne, il y a un titre, dans la seconde, il n’y a rien, seulement l’image d’arrière-plan qui changera pour une autre image au survol.

Pour reproduire ceci, en premier lieu, créez une section avec deux colonnes.

Ajouter section avec 2 colonnes dans Elementor

Puis, dans la colonne où vous souhaitez ajouter l’image d’arrière-plan, placez un espaceur. Ajustez sa hauteur à la hauteur de l’image (ou plus).

Ajouter un espaceur et définir sa hauteur pour ajout image d'arrière-plan

💡​​ La raison pour laquelle il faut ajouter un espaceur est qu’une colonne vide n’affichera pas une image définie en arrière-plan.

Ensuite, cliquez pour “modifier la colonne” et rendez-vous dans l’onglet style. Dans l’arrière-plan à définir, vous remarquerez deux onglets : “normal” et “au survol”. Restez dans “normal”, choisissez un arrière-plan classique et cliquez pour intégrer une image.

Inclure une image d'arrière-plan en vue de changer d'image au survo

Une fois l’image intégrée, vous constaterez que l’image est multipliée et pas à sa place. 😮

C’est tout à fait normal, car les réglages sont tous mis à “par défaut”.

Pour rectifier le tir :

  • Choisissez la position que vous préférez
  • Laissez le défilement par défaut
  • Indiquez “non répété”
  • Et pour la taille, afin que l’image ne dépasse pas la hauteur et prenne tout l’espace, préférez “contenir”
Réglages d'une image d'arrière-plan qui doit changer au survol

Voilà, à présent, votre image est en place. Il ne vous reste plus qu’à ajouter celle que vous souhaitez afficher au survol.

Pour ce faire, allez dans “arrière-plan”/onglet “au survol” et recommencez les mêmes opérations. Mettez à jour et admirez. 🤩

Changer une image d'arrière-plan au survol dans Elementor

💡​​ Pour que l’image au survol se superpose complètement à l’autre, pensez à choisir une image de même taille.

Changer une image au survol dans Elementor et y inclure un lien

La seconde méthode est beaucoup plus intéressante. Car on peut, non seulement, créer un effet visuel, mais également rendre l’image cliquable au survol.

Comme pour la première méthode, créez une section avec deux colonnes.

Puis, au lieu de mettre un espaceur dans la colonne, mettez un widget image. Incluez votre image en spécifiant une taille entière et renseignez le lien voulu. Cela peut être un lien vers une autre section de la même page ou carrément un lien vers une autre page ou une section dune autre page de votre site.

Insérer une image avec un lien cliquable lorsque vous changez d'image au survol dans Elementor

Ensuite, il faut mettre l’image que vous souhaitez afficher au survol.

À cet effet, cliquez sur la colonne contenant l’image afin de la modifier. Rendez-vous dans “arrière-plan/ au survol“. Comme pour la première méthode, insérez l’image et modifiez les réglages.

Là, il vous faudra faire d’autres manipulations pour que tout fonctionne comme prévu. En effet, lorsque l’on passe la souris sur l’image, l’image au survol est recouverte par l’image normale. 🙁

Problème de changement d'image au survol cachée par image normale

Pour résoudre ce problème, retournez dans le widget image. Allez dans l’onglet “Style” et sélectionnez “au survol“.

Dans le paramètre opacité, indiquez 0 (zéro). Et voilà, au survol, l’image normale est invisible et l’autre apparait.

C’est pas mal, mais, il y a encore un autre problème. L’image au survol est plus grande que l’image normale. 😞

Faire disparaitre l'image normale superposée sur l'image au survol

À chaque problème, sa solution. Cette fois, allez dans la section qui regroupe vos colonnes. Puis, dans “Écart de colonnes”, choisissez “Aucun écart” et voilà, le problème est résolu.

Vous avez maintenant une image qui change au survol et qui redirige vers un autre endroit via le lien cliquable.

Image normale et image qui change au survol de taille identique

Changer une image au survol avec lien dans un widget Flip box

Une Flip box est une sorte de carte qui se retourne au survol avec des contenus différents à l’avant et à l’arrière.

💡​​ Le widget Flip box n’est accessible qu’avec Elementor Pro, mais pas mal d’addons pour Elementor le proposent gratuitement.

Pour ce tuto, je vais donc me servir du widget Flip box inclus dans SKT Addons for Elementor.

Comme pour les autres méthodes, créez une section avec deux colonnes. Dans la deuxième, mettez le widget Flip Box.

Ajouter un widget Flip box pour changer l'image au survol dans Elementor

Vous constaterez que la “front side” (face avant) de la Flip box est pré-remplie. Alors, supprimez l’icône et les textes pour le titre et la description.

Supprimer l'icône et les textes de la Flip box

Ensuite, allez dans l’onglet “style”. Activez un arrière-plan classique, incluez votre image avec les réglages adéquats et pour “Type de bordure”, renseignez “aucun”.

Ajouter une image en arrière-plan de la Flip box

Et là, vous faites exactement la même chose pour le back side (face arrière).

Mais, évidemment, ça ne se passe pas aussi bien que pour la face avant de la Flip box. Voilà ce que ça donne : une image avec une couleur en superposition et en fond. 🫤

couleur de fond et superposition de couleur sur l'image qui s'affichera au survol à supprimer

Allez, encore deux petites étapes et ce sera parfait.

Pour supprimer la couleur de fond, cliquez sur la case barrée de “Couleur”. Ensuite, faites glisser le curseur de transparence tout à gauche, à zéro.

Et pour supprimer la superposition de couleur sur l’image, c’est simple. Cliquez sur le carré coloré de “Background overlay”, puis sur la flèche de retour en arrière pour l’effacer.

Supprimer la superposition de couleur et la couleur de fond sur l'image qui change au survol

🍒  sur le 🍰, une image dans la Flip box de SKT Addons for Elementor peut également contenir un lien cliquable.

Il suffit pour cela d’utiliser la fonctionnalité de SKT Addons “wrapper link”. Celle-ci se trouve en bas de l’onglet contenu. Indiquez le lien (link), choisissez si vous voulez ouvrir dans une nouvelle fenêtre ou pas et le tour est joué.😉 

Ajouter un lien à l'image qui change au survol de la Flip box SKT Addons

Comme vous avez pu le constater, changer une image au survol dans la version gratuite d’Elementor, c’est simple et il n’y a pas besoin de code.

Et vous, pourquoi avez-vous souhaité utiliser cet effet visuel : juste pour le fun ou dans un but bien précis ?

Racontez-moi tout ! 😉 

S’abonner
Notifier de
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires