Comment Ajouter des Animations Lottie à Ton Site

Des images et des vidéos accrocheuses sont un excellent moyen d’impressionner les visiteurs en ligne. Cependant, presque tous les sites web les utilisent pour améliorer l’expérience utilisateur (UX). Par conséquent, ajouter ces visuels standards à vos pages ne suffit plus à faire sortir votre site du lot.

Heureusement, tu peux ajouter des animations Lottie à ton site pour te donner un avantage concurrentiel. LottieFiles propose une bibliothèque gratuite d’animations que tu peux facilement ajouter à ton site web. Ensuite, tu peux les utiliser pour booster l’engagement des utilisateurs et améliorer le design de ton site.

Dans cet article, nous allons examiner de plus près certains avantages clés de l’utilisation des animations Lottie sur ton site. Ensuite, nous te montrerons trois manières simples d’ajouter ces éléments visuels. Commençons !

Les Avantages D’ajouter Des Animations Lottie À Ton Site

Alors que les vidéos et les images peuvent rendre ton site web plus captivant, ce type de visuels est vu partout sur internet. D’un autre côté, les animations peuvent te donner un avantage unique.

De plus, le marché mondial de l’industrie de l’animation devrait augmenter de 60% au cours des neuf prochaines années. Cela signifie que si tu commences à les utiliser dès maintenant, tu peux prendre de l’avance sur une tendance en pleine croissance.

En fait, 61 % des marketeurs ont utilisé du contenu interactif comme tactique d’engagement numérique l’année dernière. D’autres stratégies incluaient les GIFs, qui peuvent également servir à afficher des animations.

Les animations Lottie sont un excellent choix, principalement en raison de leur petite taille de fichier :

En fait, ces fichiers sont 600% plus petits que les GIFs – Tu peux les ajouter à ton site sans alourdir quoi que ce soit. Cela peut te permettre de préserver une expérience utilisateur positive.

Mieux encore, les animations Lottie peuvent être entièrement personnalisées pour s’adapter à ton identité de marque. De plus, c’est une solution abordable puisque LottieFiles propose la bibliothèque d’animations gratuite la plus étendue. Tu auras accès à des milliers d’éléments d’interface utilisateur, de personnages et d’illustrations.

Comment Ajouter des Animations Lottie à Ton Site (3 Méthodes)

Maintenant que tu connais les avantages de l’utilisation des animations Lottie, regardons trois manières de les ajouter à ton site.

Méthode 1 : Ajoute Ton Animation avec oEmbed

Ajouter tes animations Lottie via oEmbed est la méthode la plus simple de ce guide. Le seul inconvénient est que tu ne pourras pas modifier les paramètres de l’animation ou les configurer pour réagir aux interactions des utilisateurs.

Pour commencer avec cette méthode, navigue dans la bibliothèque d’animations LottieFiles pour trouver l’animation parfaite pour ton site. Une fois que tu as trouvé un design qui te plaît, clique sur l’animation et copie simplement l’URL oEmbed (tu devras être connecté à un compte gratuit pour cela) :

Ensuite, rends-toi sur WordPress et ouvre la page ou l’article où tu souhaites inclure ton animation. Puis, ajoute simplement un nouveau bloc Gutenberg Embed:

Maintenant, colle l’oEmbed URL que tu as copiée du site web Lottie :

Clique sur le bouton Embed pour confirmer l’action.

À ce stade, tu devrais voir l’animation apparaître sur ta page :

Comme nous l’avons mentionné précédemment, tu ne pourras pas personnaliser l’animation une fois que tu l’auras ajoutée à ta page ou publication WordPress. Il est donc crucial que tu fasses toutes les modifications que tu souhaites au préalable, tant que tu es encore sur le site web de Lottie.

Méthode 2 : Ajoute Ton Animation En Utilisant Le Lottie block for Gutenberg Plugin

Bien que la méthode oEmbed soit la plus simple, utiliser le plugin Lottie block pour Gutenberg est également très facile. De plus, cela te permet de prévisualiser immédiatement tout changement que tu apportes à tes designs.

Tout d’abord, rends-toi dans Plugins > Add New pour installer et activer le plugin Lottie pour Gutenberg dans WordPress :

Tu peux ensuite te connecter à ton compte LottieFiles ou créer un compte gratuitement.

Ensuite, ajoute un nouveau bloc dans l’éditeur Gutenberg. Recherche le bloc Lottie et ajoute-le à ta page :

Ici, tu trouveras trois façons d’insérer une animation Lottie dans WordPress :

• Clique sur Découvrir l’animation pour parcourir la bibliothèque LottieFiles (tu auras besoin d’un compte pour cela).
• Sélectionne Bibliothèque multimédia pour trouver une animation que tu as précédemment téléchargée.
• Appuie sur Insérer à partir de l’URL pour coller un lien JSON.

Si tu choisis la méthode finale, tu peux trouver le lien JSON sur le site web de Lottie :

Une fois l’animation ajoutée à ta page, tu peux prévisualiser le design dans Gutenberg :

Maintenant, dans les paramètres du Block, tu peux personnaliser ton animation. Par exemple, tu peux lui donner un fond transparent, changer les dimensions, ou déclencher l’animation avec différentes actions. Tu peux également utiliser le plugin pour ajouter une animation Lottie en tant que fond WordPress.

Méthode 3 : Ajoute Ton Animation avec HTML et JavaScript

Ajouter ton animation Lottie avec HTML et JavaScript reste assez facile, mais c’est la méthode la plus complexe. De plus, tu ne peux pas voir les mises à jour en temps réel.

À la place, tu dois alterner entre Gutenberg et ton site web pour prévisualiser tes modifications. Cependant, tu pourrais vouloir utiliser cette méthode si tu es familier avec le HTML et que tu recherches des options de personnalisation avancées.

Pour commencer avec cette approche, clique sur l’animation dans la bibliothèque LottieFiles et copie le lien du fichier JSON Lottie :

Ensuite, descends jusqu’à ce que tu vois « Utiliser l’animation dans… » et sélectionne <html>:

Cela te mènera au LottieFiles Web Player :

Ici, tu peux choisir une couleur de fond, déterminer la taille de l’animation et sa vitesse, et plus encore.

Maintenant, désélectionne la case à cocher Controls et tu verras qu’un code HTML a été généré au bas de l’écran :

Copie la ligne de code qui commence par “<lottie-player>” et se termine par “</lottie-player>”. Ensuite, dans WordPress, ajoute un nouveau bloc Custom HTML :

Colle le HTML que tu as copié depuis LottieFiles et clique sur Save Draft dans le coin supérieur droit :

Ton animation ne fonctionnera pas encore. D’abord, tu devras charger le fichier JavaScript du Lottie Player dans WordPress.

Pour ce faire, retourne au lecteur Web LottieFiles et copie la balise script qui commence par “<script>” et se termine par “</script>” :

Maintenant, rends-toi sur WordPress et installe le Simple Custom CSS and JS plugin :

Une fois activé, va dans le tableau de bord du plugin et choisis Ajouter du code HTML:

Tu peux donner à ton code un titre comme « Ajoute Lottie Player ». Ensuite, colle la balise script dans l’éditeur et clique sur Publier :

Maintenant, retourne à la page où tu as inséré ton code HTML. Tu devrais voir ton animation Lottie lorsque tu passes en aperçu :

Si l’animation est trop grande ou trop petite, tu peux modifier les paramètres par défaut dans le code HTML où il est indiqué style= “width: X; height: X;”.

Ajoutez Des Animations Lottie À Votre Site Aujourd’hui

Comme les images et les vidéos apparaissent sur presque tous les sites web, les inclure sur tes pages ne va probablement pas faire ressortir tes designs. Cependant, tu peux ajouter des animations Lottie à ton site pour impressionner les visiteurs, refléter ton image de marque et améliorer l’engagement.

Pour résumer, voici trois façons d’ajouter des animations Lottie à ton site :

1. Ajoute des animations Lottie avec oEmbed.
2. Ajoute des animations Lottie en utilisant le plugin Lottie block for Gutenberg.
3. Ajoute des animations Lottie avec HTML et JavaScript.

Une autre façon de distinguer ton site web des autres est de concevoir des pages personnalisées qui sont uniques à ta marque. Chez DreamHost, nous pouvons te construire un site qui est unique en son genre, adapté aux mobiles, et optimisé pour les moteurs de recherche. Découvre nos plans de conception web dès aujourd’hui!