Lottie Elementor : des animations personnalisées en 3 cliques

Vous avez envie de mouvement, d’illustrer vos propos de manière créative, de rentre l’expérience de vos visiteurs agréable et dynamique, mais ne savez pas comment ? Les Lotties sont faîtes pour vous si vous souhaitez une mise en page dynamisée, facilement !

Les Lotties permettent de créer des animations dynamiques à vos couleurs, en quelques minutes
Pas de widget ni extension, les lotties Elementor s’intègrent maintenant de façon native avec le page builder Elementor
Compatible avec le système de glisser-déposer
Une solution flexible pour créer du mouvement sur vos pages web, 100% compatible responsive design

Prêt pour un tuto Lottie pas à pas et rendre votre site internet unique ?

Qu’est-ce qu’une animation lottie ?

Open source, les animations Lottie sont des contenus dynamiques créés en langage JavaScript (JSON) qui permettent aux webmasters d’intégrer des visuels attractifs et animés sur leurs sites pour une personnalisation facile.Le format Lottie doit son nom à Charlotte Lotte Reiniger, réalisatrice de film et pionnière du concept de silhouette animée. On doit la démocratisation du format Lottie à Airbnb. L’entreprise spécialisée dans la location et la réservation entre particuliers a lancé cette solution open source en 2017. C’est Salih Abdul-Karim qui est à l’origine du concept qui permet d’intégrer en quelques minutes des animations dynamiques sur son site.Au fil du temps, des banques de Lottie ont vu le jour. La plus connue étant Lottiefiles. Le site web met à disposition des centaines d’illustrations créées par des webdesigners free-lance et permet à n’importe qui d’apporter de la vitalité à son site de façon simple et intuitive.

PNG, GIF et Lottie Elementor : quel est le format le plus léger ?

Le poids des fichiers est un élément clé pour le bon fonctionnement d’un site web. Que ce soit pour les robots d’indexation comme pour vos visiteurs, si votre site met du temps à charger, il sera inévitablement impacté.D’un point de vue SEO, les robots d’indexation prennent en compte ce paramètre. En règle générale, plus une page web est lente, moins elle aura un positionnement favorable : la vitesse de chargement étant un gage de qualité afin de proposer la meilleure expérience utilisateur possible.Pour l’internaute, un temps de chargement supérieur à 3 secondes suffit à le faire quitter votre site. Dans 80% des cas, l’utilisateur ne revient jamais. Dès lors, bien choisir son format d’image est primordial puisqu’il s’agit d’un des paramètres qui joue le plus sur la lourdeur et la lenteur d’un site.Vous vous dîtes sûrement qu’un contenu animé est forcément plus lourd qu’une image statique ? Pas du tout ! Les animations Lottie sont en fait bien moins lourdes qu’une image PNG ou qu’un GIF.

Pourquoi choisir une animation Lottie Elementor ?

En plus de rendre dynamique votre page et mieux engager votre visiteur, les animations Lottie offrent de nombreux avantages :

Ce sont des fichiers légers qui ne risquent pas de ralentir votre site ou créer des bugs : deux véritables freins pour l’internaute et pour votre référencement
Elles sont responsives et s’adaptent à l’interface : les animations Lottie sont mobile-friendly et s’ajustent à la taille de l’écran (ordinateur, tablette, téléphone)
Elles peuvent être intégrées aux différents CMS et site-builder : WordPress, Shopify, Wix, Divi, Elementor… le contenu dynamique Lottie s’intègre parfaitement à ces plateformes et ces plugins
Elles sont multi-plateformes et complètement natives (vous n’avez pas besoin de coder, l’intégration se fait automatiquement)
Sur n’importe quelle interface, la qualité visuelle des animations ne change pas
Il est possible de les rendre interactives et dynamiques en fonction d’un ou plusieurs élément(s) que vous pouvez définir.

Comment intégrer les animations Lottie avec le site-builder Elementor ?

Nous vous l’avons dit précédemment, ces animations Lottie peuvent être intégrées directement avec des sites-builders comme Elementor.À l’agence, lorsque nous choisissons d’utiliser un page builder, Elementor a notre préférence. Si vous hésitez encore entre les différents constructeurs de sites disponibles, vous pouvez d’ailleurs lire notre comparatif Elementor VS. Visual Composer.Ni besoin de codage ou de manipulations complexes, en quelques clics, vous pouvez intégrer un contenu dynamique à votre site et renforcer votre branding à travers des illustrations adaptées à vos besoins.Avant d’entamer les explications pour apprendre à intégrer les animations sur Elementor, sachez que Lottie propose du contenu gratuit, mais aussi des contenus premium avec des tarifs variables allant de 0,99$ à 6,99$. Dans le cas où vous avez des besoins spécifiques, vous pouvez engager un designer qui se chargera de vous faire l’animation que vous désirez.Ce dont vous avez besoin avant d’effectuer l’intégration :

Elementor (freemium ou pro – la version gratuite vous permet d’intégrer les animations)

Comment intégrer une animation Lottie Elementor en quelques minutes

Commencez par vous rendre sur le site officiel de Lottie et choisissez l’animation de votre choix (payante, gratuite ou personnalisée)
Une fois votre animation choisie, vous pouvez effectuer des modifications avant téléchargement : changement des couleurs, vitesse d’animation
Téléchargez l’animation au format JSON
Rendez-vous sur la page sur laquelle vous souhaitez intégrer l’animation et glissez le widget “Lottie” dans l’emplacement de votre choix
Maintenant que vous avez votre onglet “Lottie” sous les yeux, cliquez sur “datafile”
Téléverser le fichier JSON que vous avez téléchargé à l’étape
Votre animation s’affiche sur votre encart !

Besoin d’aide ? Voici un tutoriel pas à pas

😊👇

Après avoir intégré votre animation Lottie avec Elementor, vous pouvez effectuer quelques ajustements :

Rapidité de l’animation
Mise en place d’une boucle de répétition
Inversion du sens de l’animation
Autoplay ou Mouse over (animation au survol de la souris)

L’intégration d’une animation Lottie Elementor est extrêmement simple et accessible à n’importe qui.Grâce à ce builder et à ces fichiers Lottie, vous n’avez pas besoin d’être développeur ou webdesigner pour travailler le frontend de votre site. Qui plus est, vous n’avez pas besoin de débourser le moindre euro pour insérer ces animations avec le site builder.

Lottie Elementor : une solution webdesign accessible à tous

Si vous vous sentez prêt à designer votre site vous-même, l’association Lottie Elementor peut vous être d’une grande utilité pour apporter de la vie et de l’activité à votre plateforme digitale.Comme je vous le disais dans la vidéo, 65% des gens sont des apprenants visuels : cela signifie qu’ils sont d’abord sensibles à ce qu’ils voient avant ce qu’ils lisent. Il est donc primordial de soigner les visuels de vos pages web ! Si vous êtes à la recherche de ressources gratuites pour illustrer vos propos, nous vous avons compilé un article avec les meilleurs sites pour trouver des images libres de droit.Faîtes vous plaisir et customisez vos animations pour être aligné sur votre charte graphique ! Et n’hésitez pas à nous poser vos questions si vous bloquez dans la création et le design de vos pages web !Vous voulez plus de tutoriels ? Jetez un œil sur notre chaîne YouTube !