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 :
- Les animations d’entrée
- Les animations au survol
Nous allons voir les deux :
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 :
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
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 :
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 hub Elementor :