Widgets Lottie Animation

Le widget Lottie Animation vous permet d'ajouter des animations vectorielles de qualité sur votre site.

Lottie est une bibliothèque mobile pour Android et iOS qui analyse les animations Adobe After Effects exportées au format JSON avec Bodymovin, et qui assure leur rendu sur les appareils mobiles et sur le web.

Recherchez une animation exportée avec le plugin Bodymovin dans LottieFiles, ou créez votre propre animation dans After Effects.

Pour ajouter le widget :

  1. Dans le panneau de gauche, cliquez sur Widgets.
  2. Cliquez sur le widget Lottie Animation et déposez-le sur votre site.

Pour en savoir plus sur l'ajout de widgets sur votre site, consultez l'article Ajout de widgets.

Éditeur de contenu

Pour accéder à l'éditeur de contenu :

  1. Effectuez un clic droit sur le widget, puis sélectionnez Modifier le contenu.
  2. Copiez l'URL Lottie Animation dans la zone prévue à cet effet.
  3. Pour trouver l'URL de l'animation, ouvrez l'animation dans LottieFiles et cliquez sur <html>. Vous pouvez également coller l'URL d'un fichier JSON hébergé sur un autre site que LottieFiles.
  4. Sélectionnez Loop Animation (Animation en boucle) pour lire l'animation en continu ou sélectionnez Animate on click (Animer au clic).
  5. (Facultatif) Pour ajouter un lien vers l'animation, cliquez sur Link (Lien) et sélectionnez le type de lien.
  6. Si vous utilisez une animation LottieFile gratuite, vous devez inclure les références de son créateur. Ces informations se trouvent en bas de la fenêtre contextuelle de l'animation. Pour en savoir plus, consultez les informations sur les licences Creative Commons de LottieFile.

Éditeur de design

Pour accéder à l'éditeur de design, faites un clic droit sur le widget et cliquez sur Modifier le design.

Pour redimensionner le widget, déplacez les curseurs de largeur et de hauteur. Pour conserver les proportions entre la largeur et la hauteur, sélectionnez Conserver les proportions.

Pour obtenir des informations sur les options de conception qui ne sont pas spécifiques à ce widget (la disposition, le style et l'espacement, par exemple), voir Conception des widgets.