Animation d'entrée de l'élémenteur : 70 effets de défilement pour n'importe quel élément
Les premières impressions collent Au lieu de laisser apparaître votre contenu, faites-le arriver Le Animation d'entrée extension, qui fait partie de Master Addons Pro, ajoute du mouvement à n'importe quel élément Elementor au moment où il défile en vue, avec 70 effets pour choisir parmi : les fondus, les diapositives, les masques, les rotations, les zooms, les flips, les impulsions et les rebonds. Vous définissez la durée, le délai, l'assouplissement et le nombre de répétitions, de sorte qu'un cap peut dériver doucement tandis qu'une rangée d'icônes de fonctionnalités apparaît les unes après les autres. Pas de CSS, pas d'images clés, juste quelques paramètres dans l'onglet Avancé.
Utilisez-le bien et une animation d'entrée attire le regard sur la page et donne au site le sentiment d'être vivant sur le premier parchemin Utilisez-le sur tout et cela se transforme en bruit La vidéo ci-dessous couvre les bases, et plus bas je descends dans la liste complète des effets, comment appliquer une animation sur toute une section, et comment obtenir le bon timing.
Qu'est-ce qu'une animation d'entrée ?
Une animation d'entrée est le mouvement qu'un élément fait lorsqu'il arrive à l'écran Le visiteur défile, un titre ou une image ou un bouton frappe la fenêtre d'affichage, et il s'estompe, glisse ou rebondit en place au lieu d'avoir été assis là tout le temps Vous les verrez appelés effets d'entrée, animations de défilement ou animation d'entrée de site Web Même idée à chaque fois : une page statique qui commence à réagir lorsque vous descendez.
Vous pouvez écrire tout cela vous-même avec des animations CSS Ensuite, les images clés sont à vous de maintenir, et le comportement réactif sur chaque taille d'écran aussi. Les modules complémentaires principaux boîte à outils d'animation déplace cela dans les paramètres de l'élément, afin de choisir un effet dans une liste déroulante et de sauter le code.
Une bibliothèque de 70 effets d'entrée
Avec 70 préréglages, il existe une façon appropriée d'introduire presque n'importe quelle section Voulez-vous que ce soit silencieux ? Fade In. Voulez de l'énergie ? Bounce In ou Jack In the Box Après quelque chose de plus délibéré ? Flip In ou Mask From. Cette propagation vous permet de donner aux sections leur propre caractère : calme et lisse pour un énoncé de mission, un peu ludique pour la rangée de fonctionnalités.
- Fane: Fade In, plus Up, Down, Left et Right avec des variations numérotées, pour les arrivées tranquilles.
- Diapositives et masques : Glissez depuis et masquez depuis dans les quatre directions.
- Rotations et retournements : Tournez vers chaque coin et retournez vers le haut, le bas, la gauche et la droite.
- Zooms et écailles : Zoom avant, mise à l'échelle et mise à l'échelle vers le bas, chacun avec des variations.
- Effets de l'attention : Pulse In, Pulse Out, Shake, Bounce In et Jack In the Box pour un héros ou un CTA.
- Faire correspondre l'effet au travail : les plus forts lors d’un appel à l’action, un doux fondu sur le corps du texte.
- Aperçu avant de vous engager : l'éditeur joue l'effet dès que vous le choisissez.
Contrôle de la durée, du retard et de l'assouplissement
Le timing est l'endroit où la plupart des animations sont gagnées ou perdues, et c'est plus qu'une bascule marche/arrêt. Définir le Durée en millisecondes pour faire un mouvement rapide et vif ou lent et long Ajouter un Retard donc une rangée d'articles vient les uns après les autres au lieu de tous à la fois Choisissez un Facilité courbe pour que le mouvement accélère et ralentisse comme le ferait un objet réel, plutôt que de glisser à un rythme plat et robotique.
- Réglez la vitesse : 500 ms semble rapide, 1500 ms se sent détendu Qu'un chiffre change toute l'ambiance.
- Étagger une séquence: augmentez le délai d'un cran sur chaque icône d'affilée et elles apparaissent une par une.
- Choisissez le assouplissement : Ease-Out (démarrage rapide, arrêt doux) se lit comme naturel pour la plupart des entrées C'est celui que j'atteins pour le premier.
- Répétez-le : Repeat Count joue l'effet 1 à 5 fois, ou sur une boucle.
Animation d'entrée intégrée de l'élémenteur par rapport aux modules complémentaires principaux
Elementor vous permet déjà de choisir une animation d'entrée gratuitement sous Effets avancés et de mouvement. C'est bien pour un simple fondu. L'extension Master Addons est destinée aux pages où vous souhaitez un contrôle plus fin sur la façon dont chaque élément arrive.
| Effets de mouvement des éléments | Animation d'entrée des modules complémentaires principaux | |
|---|---|---|
| Plan | Gratuit | Maître Addons Pro |
| Durée | Lent, Normal ou Rapide | Toute valeur en millisecondes |
| Retard | Millisecondes | Millisecondes |
| Facilité | Non disponible | 30 courbes, de Linéaire à Back In Out |
| Nombre répété | Non disponible | 1 à 5 fois, ou infini |
| Effet différent par appareil | Oui | Non, un seul paramètre pour tous les points d'arrêt |
| Effets | Préréglages d'éléments | 70 effets, y compris les masques, les flips et les impulsions |
Comment définir une animation d'entrée par défaut pour tous les éléments ?
Les gens demandent beaucoup : pouvez-vous appliquer une animation d'entrée à tout à la fois dans Elementor ? réponse droite, Elementor core n'a pas de commutateur global unique qui anime chaque élément du site Ce qui fonctionne en pratique est d'animer au niveau du conteneur ou de la section, puis de réutiliser ces paramètres.
- Sélectionnez le section ou conteneur au lieu de chaque widget à l'intérieur de celui-ci Ouvrir Avancé → Master Addons Animation d'entrée et choisissez votre effet Le bloc entier arrive alors ensemble au fur et à mesure qu'il défile.
- Pour réutiliser le même mouvement, cliquez avec le bouton droit sur l'élément, appuyez sur Copier, alors Style de pâte sur la section suivante Les paramètres d'animation roulent avec le style, donc vous le définissez une fois et le collez sur la page.
- Pour une cascade plutôt que pour tout tirer ensemble, gardez l'effet le même et augmentez le Retard un peu sur chaque section au fur et à mesure que vous descendez.
Cela vous permet d'obtenir une animation d'entrée cohérente sur tous vos éléments sans toucher au code, ce qui est aussi proche d'une valeur par défaut qu'Elementor vous le donne.
Où les animations d’entrée sont-elles les plus utiles ?
- Sections héros: un Fade In Up sur le titre, puis un court délai sur le bouton en dessous.
- Lignes de fonctionnalités : échelonnez les icônes pour qu'elles atterrissent une par une.
- Statistiques et compteurs : un zoom avant lorsque les chiffres défilent.
- Témoignages et logos : un fondu doux pour qu'ils ne s'enclenchent pas brusquement.
- Appels à l’action : un rebond ou un Jack In the Box au moment où quelqu'un décide.
Entry Animation fait partie de Maître Addons Pro. Pour le mouvement au-delà du premier parchemin, regardez Effets flottants, Révéler et Transforme(ou parcourir l'intégralité) Fonctionnalités d'animation Master Addons.
Foire aux questions pour l'animation d'entrée
Beaucoup d'animations d'entrée vont-elles ralentir mon site web ?
Sur une page avec des dizaines d'éléments animés, il peut ajouter un peu de poids, mais les effets sont légers pour commencer La vraie solution est la retenue : animer les sections clés et les titres, pas tous les paragraphes Quelques-uns bien placés s'inscrivent à peine Si le temps de chargement est dans votre esprit, ces conseils pour accélérer les sites Elementor aide.
Pourquoi mon animation d'entrée Elementor ne fonctionne pas ?
C'est généralement l'une des trois choses que l'animation ne déclenche que la première fois que l'élément entre dans la fenêtre, alors faites défiler vers le bas pour le tester plutôt que de faire défiler vers le haut Assurez-vous que l'effet est sur l'élément réel et non un wrapper vide autour d'elle Et effacez votre plugin de mise en cache après que vous publiez, puisqu'une page mise en cache servira l'ancienne version sans l'animation.
Puis-je utiliser différentes animations sur ordinateur et mobile ?
Pas avec cette extension Ses paramètres s'appliquent sur chaque point d'arrêt, alors choisissez un effet qui semble toujours juste sur un petit écran L'animation d'entrée Motion Effects d'Elementor peut être définie par appareil, ce qui aide si la disposition d'un téléphone a besoin de quelque chose de plus calme.
En quoi est-ce différent des propres animations d'entrée d'Elementor ?
L'éditeur gratuit d'Elementor dispose d'un contrôle d'animation d'entrée de base sous Advanced, Motion Effects, avec une durée prédéfinie et un délai Cette extension fait partie de Master Addons Pro et vous offre 70 effets, une durée et un délai en millisecondes, 30 courbes d'assouplissement et un nombre de répétitions Pour le rythme, Ease Out convient à la plupart des entrées.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
