Qu’est ce qu’un lottie ?
Lottie est une bibliothèque d’images animées créée à la base par et pour Airbnb afin d’animer le logo de l’entreprise.
Le terme « Lottie Animation » désigne une animation créée dans Adobe After Effects exportée avec Bodymovin (extension open source) vers un format JSON.
Ce format est facilement affichable et intégrable dans vos applications et vos sites Web.
Pourquoi utiliser des lotties dans votre site WordPress ?
Les lotties sont des animations qui peuvent s’utiliser aussi facilement que des images statiques.
Leurs avantages sont surtout portés sur le fait que ces fichiers sont très légers, plus léger qu’un GIF et permet de s’adapter à tous types d’écran et tout cela sans perte de qualité.
Un autre avantage des lotties est que l’animation de vos icônes ou images peut être activée en se basant sur le scroll (défilement) de la page, ou encore sur le hover (survol de la souris sur un élément) ou au clic !
Où trouver des lotties ?
LottieFiles est une bibliothèque, tout comme FontAwesome, où vous pourrez trouver des centaines voire des milliers de Lotties prêts à l’emploi.
Un simple compte gratuit suffit pour accéder aux lotties gratuits, d’autres peuvent être payants : de 0,99$ à 7,99$ par Lottie.
Comment intégrer un lottie dans Gutenberg ?
Il est évidemment bien possible d’intégrer un lottie sur un post ou une page WordPress avec le constructeur de page Gutenberg grâce à un simple bloc nommé : HTML personnalisé.
- Rendez-vous sur la bibliothèque LottieFiles et choisissez le lottie que vous voulez importer dans Gutenberg
- Prenez la méthode HTML
- Vous pouvez apporter des modifications à votre lottie si vous le souhaitez
- Copiez le code HTML généré
- Du côté de WordPress, dans la publication concernée, ajoutez un bloc HTML Personnalisé depuis l’éditeur Gutenberg.
- Collez le code HTML que vous avez précédemment copié.
Comment intégrer un lottie avec Elementor ?
Si vous connaissez bien Elementor Pro, vous avez surement aperçu le widget Lottie. Vous l’aurez deviné, ce widget permet d’intégrer un lottie.
Si vous ne souhaitez pas utiliser la version pro d’Elementor, pas de panique ! Des tas d’extensions gratuites qui permettent d’ajouter des lotties existent pour Elementor freemium.
Par exemple, Premium Addons for Elementor propose, dès sa version gratuite, un widget d’intégration de lottie. Il permet d’importer le fichier JSON directement au sein de votre poste, ou alors, vous pouvez utiliser l’URL du lottie pour l’intégrer.
- Rendez-vous sur la bibliothèque LottieFiles, choisissez le lottie qui vous intéresse
- Sélectionnez l’URL du lottie.
- Dans votre poste Elementor, intégrez le widget « Premium lottie animations«
- Faites le choix de votre méthode d’importation, pour cet exemple c’est « External URL » et collez l’URL de votre lottie
- Votre nouveau lottie est intégré.
Le lottie est un format plutôt jeune (moins de deux ans) mais il n’a pas fallu bien longtemps pour qu’il arrive sur WordPress. Leur format léger qui permet d’optimiser la vitesse chargement d’un site va peut-être détrôner le GIF dans un futur proche.
