Des animations Lottie pour améliorer l’engagement
Les Lotties, vous connaissez ? Ce sont de petites animations très fluides et esthétiques créées par des designer professionnels qui sont pour la plupart gratuites à télécharger et à utiliser. Un des principaux intérêts d’un Lottie, c’est que c’est un fichier très léger à charger, 600% fois plus petit que la même animation sous format Gif. De plus quand le Lottie est une animation vectorielle qui ne pixellisera jamais si vous l’agrandissez. Et enfin, insérer des Lotties sur votre site web (sans en abuser) améliorera sans doute l’engagement de vos visiteurs.
Pour placer et paramétrer facilement des animations Lottie sur un site WordPress Divi, je vous propose d’utiliser Divi Supreme Lite le plugin gratuit pour Divi qui enrichira le Divi Visual Builder du module Divi Supreme Lottie.
Des animations Lottie gratuites
Les animations Lottie ont de vrais avantages, non seulement elles sont pour la plupart très design mais en plus très légères à charger, ce qui en fait un vrai atout pour les performances d’un site web.
Télécharger des Lotties
Pour télécharger des Lotties, rien de plus simple. Rendez-vous sur le site lottiefiles.com et
créez un compte (c’est gratuit) puis dans le menu Discovers > Free Animations, vous avez accès à une galerie de plusieurs centaines de Lotties. Choisissez une de ces animations, cliquez dessus et en haut du pop-up, choisir « Download » et choisissez le fichier « Lottie JSON ».
Divi Supreme Lite, un plugin gratuit
Pour placer et paramétrer facilement un Lottie sur un site WordPress Divi, je vous propose d’utiliser Divi Supreme l’excellent plugin pour Divi dans sa version gratuite (Divi Supreme Lite). Ce plugin ajoute de nombreux modules au Visual Builder et notamment le module Divi Supreme Lottie gratuit dans cette version de Divi Supreme.
Si vous ne connaissez pas Divi Supreme, c’est un très bon plugin pour Divi qui lui ajoute dans sa version Pro, 49 nouveaux modules et 8 nouvelles extensions. Cette article de mon Blog présente Divi Supreme et les ajouts qu’il permet.
Vous pouvez facilement ajouter le plugin Divi Supreme Lite via le menu WordPress « Extensions > Ajouter »
Placer et paramétrer un Lottie sur votre site Divi
Un fois Divi Supreme Lite installé, il suffit de vous rendre sur la page souhaitée et d’ajouter un module dans la rangée de votre choix. Les nouveaux modules disponibles de Divi Supreme Lite apparaissent dans la liste habituelle des modules Divi mais en fond bleu. Choisir « Supreme Lottie ».
La fenêtre des paramètres s’ouvre.
Tout d’abord dans l’onglet « Contenu », appeler votre fichier JSON téléchargé.
Il apparaît aussitôt à l’emplacement choisi.
Différentes options sont paramétrables à cet endroit.
- Loop : Vous permet de faire jouer l’animation à l’infini en la répétant.
- Delay : Permet d’ajouter un temps défini (en ms) avant que l’animation se déclenche.
- Direction : Permet de jouer l’animation normalement ou en sens inverse.
- Speed : Permet d’accélérer ou ralentir l’animation
- Animate in Viewport : Le viewport est la fenêtre d’affichage, c’est la zone visible d’une page Web pour l’utilisateur.
La fenêtre d’affichage varie en fonction du périphérique et sera plus petite sur un téléphone mobile que sur un écran d’ordinateur.
Cette option permet de jouer sur cet affichage en pourcentage.
A noter que la version Pro de Divi Supreme en plus d’apporter davantage de modules et d’extensions permet aussi un réglage plus fin du module Lottie en ajoutant l’option « Trigger » qui permet d’ajouter de l’interactivité au Lottie au survol de la souris, au clic ou au scroll en activant l’animation ou alors lorsque le curseur de la souris n’est pas sur l’animation.
Une fois ce contenu et ces réglages choisis, il est possible dans l’onglet « Style » puis « Dimensionnement » de réduire la taille de l’animation et dans « Espacement » de jouer sur les marges pour positionner plus précisément l’animation dans la colonne de la rangée.
