Hover effects Elementor : ajouter des Animations au survol

L’animation au survol ou Hover Effects Elementor permet de changer la couleur d’un élément au survol de la souris.

Avec Elementor, parmi les éléments qui peuvent changer de couleur au survol de la souris il y a : 

  • Les Sections, 
  • Les colonnes, 
  • Les sections internes
  • Les boutons

Sommaire

Changer la couleur d’arrière-plan au survol de la souris sur Elementor

Premier type de hover effects Elementor : le changement de couleur d’un arrière plan au survol de la souris.

Pour changer la couleur d’un élément au survol de la souris il faut cliquer sur l’élément > Onglet Style > Arrière-plan > Au survol

  • Puis on définit : La couleur au survol ou l’image 
  • La durée de la transition 
animation au survol elementor

Voici un exemple d’hover effects Elementor sur un changement de couleur d’une section au survol de la souris :

Par exemple cette section change de couleur de fond au survol de la souris

Changer la couleur de superposition de l’arrière-plan au survol de la souris sur Elementor

Second type de hover effects avec Elementor, plus subtil, le changement de couleur en superposition

L’élément reste visible mais il y a un filtre de couleur qui apparait au passage de la souris.

Si une colonne a une image en fond par exemple, on peut changer la couleur la superposition d’arrière-plan au passage de la souris. 

En allant dans Onglet Style > Superposition de l’arrière-plan > Au survol : 

Et il faut définir un type d’arrière-plan : couleur, image ou dégradé 

Et l’opacité de la superposition de l’arrière-plan

hover effect elementor

Et lorsque vous passez la souris sur l’image (la colonne Elementor dont le fond est une image), elle change de couleur. 

Voici un exemple d’hover effects elementor d’une image qui change de couleur au survol de la souris :

Par exemple cette image change de couleur au survol de la souris

Animer un Widget Elementor au survol de la souris (Hover) 

Troisième type d’animation au passage de la souris, l’animation d’un élément qui peut par exemple se mettre à bouger.

Les Options d’animation des éléments au passage de la souris se trouvent dans l’onglet Style > Au survol > Animation de survol : 

On définit ensuite une animation de survol et lorsque l’on passe la souris sur le widget on voit qu’il y a bien une animation. 

animation au survol de la souris

Voici un exemple de hover effects avec Elementor : l’animation d’un widget (ici une icône) au survol de la souris.

Par exemple cette icône s’anime au survol de la souris

Changer la couleur d’un Widget Elementor au survol de la souris (Hover) 

Enfin et c’est le plus classique des hover effects, c’est le changement de couleur d’un élément. 

Généralement il s’agit d’un bouton. Cet hover effect renforce l’experience utilisateur en indiquant que l’élément est bien cliquable.

Certains widgets peuvent changer de couleur au survol de la souris comme les boutons. 

Les options de survol se trouvent dans l’onglet Style > Survol : 

animation au survol de la souris

Voici ci-dessous un exemple de Hover effects Elementor sur un changement de couleur d’un widget (ici un bouton) au survol de la souris :

Par exemple ce bouton change de couleur au survol de la souris

Pour résumer

Il existe donc plusieurs types de hover effects Elementor ou animations au survol avec Elementor : 

  • Le changement de couleur de fond 
  • Le changement de couleur de superposition 
  • L’animation 
  • Le changement de couleur de l’élément

 

Les hover effects vont permettre de dynamiser vos pages. 

Vous indiquez à vos visiteurs quels éléments sont cliquables.

Et vous facilitez la navigation et augmenter les taux de clics sur vos éléments importants comme les call to actions.

Partagez le guide Elementor

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur reddit