Animations d'entrée Elementor - Widgets, colonnes et Sections

Les animations d’entrée Elementor permettent de faire apparaitre à l’écran un élément de votre page lorsque l’utilisateur arrive au niveau de cet élément.

Elementor propose des animations pour les Widgets, Colonnes et Sections. 

Il y a deux sortes d’animation dans la version gratuite d’Elementor : 

  1. Les animations d’entrée 
  2. Les animations au survol 

 

Nous allons voir les deux.

Sommaire

Pourquoi utiliser les animations d’entrée Elementor

Les animations d’entrée Elementor vont permettre de créer une page dynamique en faisant apparaitre les éléments au fur et à mesure. 

Ils permettent aussi de mettre l’accent sur un élément en particulier de votre page.

En effet l’animation d’entrée Elementor va attirer le regard immédiatement sur l’élément.

Lorsque le visiteur arrive au niveau de la section, l’animation d’entrée est déclenchée.

Par exemple cette icône a une animation d’entrée Elementor, qui se déclenche lorsque vous arrivez à ce niveau de la page

(actualisez la page si vous l’avez manqué)

Ajouter des animations d’entrée Elementor

Pour créer une animation d’entrée sur un élément, il suffit de cliquer sur l’élément et dans

Avancé > Effets de mouvement > Animation d’entrée

Choisir parmi les animations d’entrée Elementor disponibles :

animations d'entrée Elementor

Elementor propose différentes animations d’entrée : 

  • Fading : une apparition en fondue 
  • Zoom in : l’élément apparaît en dézoom jusqu’à sa taille normale 
  • Bounce in : donne un effet rebondissement 
  • Slide in : apparition en glissé 
  • Rotate in : apparition en rotation de 180°
  • Attention seeker : l’élément bouge légèrement 
  • Light Speed : l’élément apparaît étiré puis reprend ses proportions
  • Roll in : l’élément fait une roulade

Une fois l’animation d’entrée choisie, on défini : 

  • La durée de l’animation : donc sa vitesse
  • Le délai d’animation : c’est le délais entre le moment ou le visiteur arrive au niveau de l’élément ou lorsque l’élément comment son animation d’entrée à l’écran

     

animation entree Elementor

Ajouter des animations au survol avec Elementor

Elementor propose également pour certains éléments d’ajouter des animations au survol de la souris.

Pour cela on clique sur l’élément à animer au survol, puis dans l’onglet Style > Au survol > Animation de survol 

animation d'entrée et au survol

Les animations de survol de la souris sont à utiliser pour les éléments cliquables principalement comme les boutons ou des images. 

Il ne faut pas non plus trop en abuser parce qu’en scrollant l’utilisateur passe automatiquement sa souris sur la page et si beaucoup d’éléments sont animés, cela peut devenir très lourd visuellement. 

C’est par contre un excellent moyen d’indiquer que l’élément est cliquable ou que l’utilisateur peut interagir avec. 

Retrouvez la page sur les animations au survol avec Elementor.

Partagez le guide Elementor

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