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.

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

💡​​ 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.

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”

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

💡​​ 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.

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

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

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

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.

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.

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

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

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.

🍒  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é.😉 

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 ! 😉