L’intégration d’animations dans votre site Web WordPress est un excellent moyen d’animer une page Web fatiguée et de garder vos visiteurs engagés tout au long de leur visite sur votre site. Un moyen simple et efficace de le faire consiste à utiliser des animations de loterie : des animations légères et de haute qualité.
Les animations Lottie gagnent en popularité pour de nombreuses raisons, et si vous êtes prêt à prendre le train en marche et à embellir votre site Web, elles pourraient bien être pour vous.
Il existe plusieurs façons de créer ces animations et de les ajouter en douceur à votre site WordPress.
Que sont les animations Lottie ?
Lottie est une bibliothèque pour Android, iOS, Web et Windows qui rend les animations After Effects et permet d’exporter les données d’animation sous forme de fichiers JSON par opposition à un type de fichier image typique. En bref, ils peuvent facilement remplacer un actif statique par quelque chose d’amusant et engageant.
Cette solution open source a été introduite pour la première fois par l’équipe d’AirBnB, mais elle gagne rapidement en popularité auprès des concepteurs et des animateurs de différents marchés. L’un des grands avantages de l’utilisation d’animations de loterie sur votre site Web WordPress est que la taille du fichier est très petite par rapport à l’animation GIF ou aux fichiers mp4. De plus, le format d’animation flexible permet au navigateur de gérer le rendu.
Les nombreuses possibilités d’utilisation des animations de loterie sont l’une des raisons pour lesquelles elles sont si populaires. Vous pouvez utiliser des animations de loterie comme en-têtes animés, boutons, éléments graphiques accrocheurs, etc. Vous pouvez également configurer l’animation pour qu’elle se déclenche lorsque les visiteurs défilent, survolent ou cliquent sur la page Web. Leur polyvalence et leur facilité de mise en œuvre pour le B2C et Sites Web B2B faites-en un moyen révolutionnaire d’améliorer la qualité et l’apparence générale de votre conception Web.
Création d’animations de loterie
Lorsque vous envisagez d’ajouter des animations de loterie à votre site, vous devez d’abord décider si vous souhaitez adopter une approche standard ou personnalisée. Chacun a ses avantages et ses inconvénients, il est donc sage de considérer les deux options avant de décider.
Avec tout type d’animation, moins c’est toujours plus. Lors de l’incorporation d’un élément animé dans un refonte du site webconsidérez le rôle que joue cette animation dans le parcours du client.
Animations de loterie personnalisées
Si vous recherchez une animation de loterie personnalisée pour votre site Web, vous devrez travailler avec un animateur ou un concepteur spécialisé dans Adobe After Effects et est familier avec ce type d’animation.
De nombreuses animations de loterie utilisent un style d’illustration, vous devrez donc décider si cela correspond à l’image de marque et au style du site Web avant d’aller de l’avant. Une fois que vous avez décidé des éléments graphiques et des effets d’animation, l’animateur devra créer les animations personnalisées dans Adobe After Effects et les exporter sous forme d’animations de loterie, à l’aide de l’extension After Effects. Cela rendra une animation de haute qualité qui peut facilement être implémentée dans votre site.
L’une des raisons pour lesquelles les animations de loterie sont de haute qualité est que le processus de création élimine tout besoin pour un développeur ou un ingénieur de recréer l’animation du concepteur dans un format Web. Il offre une solution prête à l’emploi qui facilite plus que jamais la mise en œuvre d’animations.
Animations de loterie boursière
Les animations de stock lottie sont une excellente option si vous souhaitez accélérer votre nouveau design. Vous pouvez rechercher une animation de loterie existante et, si nécessaire, la personnaliser pour l’adapter à votre marque.
Lottie Fichiers est un site Web boursier où vous pouvez trouver un grand nombre d’animations de loterie gratuites et payantes. Le site propose également un outil d’édition où vous pouvez modifier les couleurs de l’animation avant de la télécharger. Si vous devez modifier un grand nombre de couleurs dans une animation, un animateur ou un concepteur qualifié peut également utiliser Adobe After Effects pour apporter ces modifications plus efficacement et exporter l’animation.
Si vous cherchez à implémenter de nombreuses animations sur un site, ou si vous avez une esthétique de site très spécifique, il peut être difficile de trouver plusieurs options d’achat d’actions dans le bon style. Dans ce cas, vous pouvez envisager de faire appel à un animateur pour la création de plusieurs animations adaptées à votre site et correspondant aux options d’achat d’actions que vous avez déjà choisies.
Quel que soit le type d’animation ou de graphique stock, gardez à l’esprit les exigences de licence pour les animations stock et assurez-vous de fournir l’animation au concepteur d’origine si nécessaire.
Ajouter des animations Lottie dans WordPress
C’est un processus assez fluide pour ajouter des animations de loterie à un site Web WordPress. Vous pouvez soit utiliser un widget HTML personnalisé pour ajouter le code d’animation au site, soit utiliser un plugin WordPress pour ajouter l’animation.
Widget HTML personnalisé
Un développeur WordPress qualifié peut utiliser une petite bibliothèque JavaScript et un widget HTML personnalisé pour ajouter les animations de loterie au site. Vous commencerez par télécharger le script lottie.min.js avec le fichier d’animation .json et tous les éléments d’image dans le dossier du thème. Ensuite, il y a un petit extrait de JS à ajouter au widget pour lancer le script Lottie, qui charge le fichier d’animation .json dans le conteneur div souhaité.
Cette approche simplifiée peut convenir parfaitement à la plupart des sites WordPress, car elle évite d’alourdir le site avec des plugins WordPress supplémentaires. Lors de l’ajout des animations de loterie, vous pouvez également contrôler si l’animation boucle, combien de fois elle boucle et ce qui peut déclencher l’élément animé sur la page.
La plupart des plugins permettant d’ajouter des animations de loterie sans l’assistance d’un développeur nécessitent le constructeur de pages Elementor, de sorte que l’approche HTML personnalisée a tendance à mieux fonctionner si vous utilisez un plugin de création de thème ou de page autre qu’Elementor.
L’ajout d’éléments au site sans plugin est également meilleur pour la vitesse et les performances du site Web, car l’ajout de plus en plus de plugins alourdira le site.
Options des plugins WordPress
Si vous ne souhaitez pas faire appel à un développeur pour le faire de manière personnalisée, une autre option pour ajouter des widgets Lottie à votre site consiste à utiliser un plugin WordPress.
Elementor Pro – Lottie Widget
Elementor est un constructeur de pages pour WordPress avec des fonctionnalités de glisser-déposer, et la licence Elementor Pro inclut le Widget loterie. Avec ce widget, vous pouvez ajouter des animations de loterie sans code et personnaliser les dimensions et le comportement de l’animation. Ce plugin se connecte facilement au site Web de stock de Lottie Files, de sorte que vous pouvez facilement sélectionner des options d’animation de stock directement à partir du site ou télécharger vos propres créations.
Blocs Gutenberg – Addons ultimes
Si vous utilisez l’éditeur Gutenberg sur votre site, le Plugin Ultimate Addon pour Gutenberg peut être un bon choix pour ajouter des animations de loterie à l’aide d’un plugin. L’éditeur Gutenberg fait partie du cœur de WordPress depuis la sortie de WordPress 5.0, mais ce n’est pas le plus populaire. De nombreux sites utilisent encore l’éditeur classique ou d’autres constructeurs de pages comme Site Origin, Elementor ou Beaver Builder, pour n’en nommer que quelques-uns.
Néanmoins, c’est une option viable. The Ultimate Addons for Gutenberg est un plugin bien évalué et offre de nombreuses fonctionnalités intéressantes, y compris la possibilité d’ajouter des animations de loterie et de contrôler des options avancées, telles que la vitesse d’animation et le déclencheur.
Plugins WordPress supplémentaires
Il y a plugins supplémentaires disponible dans le répertoire WordPress pour ajouter et personnaliser des animations de loterie. Gardez à l’esprit que certains plugins nécessitent que votre site soit construit et utilise Elementor, tels que Premium Addons pour Elementor et Elementskit Addon pour Elementor. Il existe également des plugins destinés à d’autres thèmes et constructeurs WordPress, tels que le thème Divi ou les blocs Gutenberg.
Il est temps d’animer
Les animations Lottie sont extrêmement accessibles à toute personne possédant un site WordPress. Que vous souhaitiez des animations personnalisées ou des animations de stock, des animations de héros ou des animations de défilement, les ressources sont à portée de main.
Vous pouvez être créatif dans la façon dont vous voulez que vos animations ressemblent et ce que vous voulez qu’elles fassent, et lorsque vous commencez à explorer les possibilités des animations de loterie, vous commencerez à réaliser à quel point elles peuvent ajouter à la qualité de votre site Web. .
