Animation d'entrée
Les premières impressions collent Au lieu de laisser apparaître votre contenu, faites-le arriver Le Animation d'entrée l'extension ajoute du mouvement à n'importe quel élément Elementor au moment où il défile en vue, avec Plus de 70 effets pour choisir parmi : les fondus, les diapositives, les rebonds, les flips et les zooms. Vous définissez la vitesse, le délai et la facilité, 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 plus de 70 effets d'entrée
Avec plus de 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 ou Rubber Band Après quelque chose de plus délibéré ? Flip ou Slide Cette propagation est pratique car elle 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, Fade In Up, Fade In Down, et le reste, pour les arrivées tranquilles.
- Diapositives : les éléments glissent de gauche, de droite, de haut ou de bas.
- Rebondit: Rebond et Rubber Band pour une section qui doit être remarquée.
- Rotations et retournements : Retournez et faites pivoter lorsque vous voulez un peu de profondeur.
- Zooms et effets spéciaux : Zoom avant, vitesse de la lumière et autres points forts 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'animation lorsque vous la survolez dans la liste.
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.
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. Le complet Documentation d'animation d'entrée couvre chaque paramètre.
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 une bande de caoutchouc au point où quelqu'un décide.
L'extension est plus large Widgets et extensions Master Addons. Le page de tarification montre dans quel plan il atterrit.
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 ?
Non. Vous ne pouvez pas définir l'animation indépendamment pour le bureau, la tablette et le mobile dans Elementor. Quel que soit l'effet que vous choisissez, il s'applique à chaque point d'arrêt, alors choisissez-en un qui semble toujours directement sur un petit écran.
Quel est le paramètre Facilité et lequel dois-je utiliser ?
L'assouplissement contrôle le rythme du mouvement Le linéaire maintient une vitesse constante et peut sembler robotique L'aisance-Sortie commence rapidement et se termine lentement, comme quelque chose qui roule jusqu'à un arrêt doux, ce qui semble naturel L'aisance-En fait le contraire Pour la plupart des animations d'entrée, optez pour l'Aise-Out.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
