Éditeur Studio : Ajouter et personnaliser des fichiers d'animation Lottie

Temps de lecture : 4 min
Les fichiers Lottie sont une excellente source pour les animations de haute qualité à ajouter au site de votre client. Après avoir importé l'animation via son URL, vous pouvez la redimensionner selon vos besoins et décider si elle se lit ou non en boucle continue. 
Dans cet article, apprenez comment :
Avant de commencer :
Pour importer une animation, vous devez avoir un compte LottieFiles. 

Importer des animations à partir de LottieFiles

Ajoutez autant d'animations Lottie que vous le souhaitez pour animer votre design. Copiez simplement le lien des LottieFiles et collez-le directement dans l'Éditeur Studio. L'animation est instantanément ajoutée comme nouvel élément de page.
Un GIF montrant que vous pouvez coller des animations de Lottie directement dans l'Éditeur Studio
Vous pouvez également ajouter un nouvel élément d'animation Lottie et coller l'URL correspondante dans le panneau Paramètres. 

Pour ajouter un élément Animations Lottie :

  1. Cliquez sur Ajouter des éléments  sur le côté gauche de l'Éditeur.
  2. Cliquez sur Intégrations et réseaux sociaux.
  3. Cliquez sur Animations Lottie.
  4. Cliquez sur l'icône Ajouter au site à côté de Animations Lottie.


  5. (Dans un onglet de navigateur distinct) Copiez l'URL de l'animation de votre compte LottieFiles.
  6. Collez l'URL de l'animation dans l'Éditeur :
    1. Cliquez sur l'élément Animations Lottie dans l'Éditeur.
    2. Cliquez sur l'icône Paramètres .
    3. Collez l'URL sous Quelle est l'URL de l'animation ?.
    4. Appuyez sur la touche Entrée de votre clavier.
Prochaine étape ?
Cliquez sur Aperçu de l'animation en haut du panneau Paramètres pour voir à quoi elle ressemble avant de la mettre en ligne.
Ajouter un nouvel élément de Lottie à l'Éditeur et intégrer le lien d'animation à partir du panneau Paramètres
Travailler avec des points de rupture :
Vous pouvez personnaliser la taille de l'animation Lottie par point de rupture, afin qu'elle soit idéale sur tous les écrans. 

Modifier l'animation Lottie

Si vous souhaitez passer à une animation Lottie différente, vous pouvez facilement le faire en collant la nouvelle URL dans le panneau Paramètres de l'élément. 

Pour modifier l'animation :

  1. Sélectionnez l'élément Animations Lottie.
  2. Cliquez sur l'icône Paramètres .
  3. Collez l'URL de la nouvelle animation sous Quelle est l'URL de l'animation ?.
Un GIF montrant où copier l'URL de l'animation Lottie, et comment elle change instantanément sur la toile une fois que vous le faites

Paramétrer l'animation pour qu'elle soit jouée en boucle

Vous pouvez choisir la façon dont l'animation Lottie est lue sur le site de votre client - une seule fois ou en boucle continue. 

Pour définir la lecture de l'animation :

  1. Sélectionnez l'élément Animations Lottie.
  2. Cliquez sur l'icône Paramètres .
  3. Cliquez sur le curseur à côté de Lecture en boucle pour l'activer ou le désactiver.
Une capture d'écran du curseur dans le panneau Paramètres qui contrôle la lecture de l'animation Lottie

Ajouter un texte alternatif à une animation Lottie

À partir du panneau Paramètres, ajoutez un texte alternatif pour décrire brièvement l'animation et/ou le site. Cela peut améliorer le classement en référencement tout en aident les utilisateurs avec des lecteurs d'écran pour comprendre ce que l'animation affiche. 

Pour ajouter un texte alternatif à votre animation :

  1. Sélectionnez l'élément Animations Lottie.
  2. Cliquez sur l'icône Paramètres .
  3. Faites défiler jusqu'à Texte de l'animation.
  4. Saisissez la description du texte sous Rédiger un texte alternatif pour votre animation.
  5. Appuyez sur la touche Entrée de votre clavier.
Ajouter un texte alternatif à un élément d'animation Lottie

Cela vous a-t-il aidé ?

|