Centre d'assistance Wix
    Accueil
  1. Créer votre site
  2. Editor X
  3. Ajouter des effets et animations
    4. Editor X : Ajouter et personnaliser des fichiers d'animation Lottie

Editor X : Ajouter et personnaliser des fichiers d'animation Lottie

Temps de lecture : 4 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Les fichiers Lottie constituent une excellente source d'animations de haute qualité que vous pouvez ajouter à votre site Editor X. Après avoir importé l'animation via son URL, vous pouvez la redimensionner selon vos besoins et décider si elle est lue ou non en boucle. 
Dans cet article, découvrez comment :
Avant de commencer :
Pour importer une animation, vous devez disposer d'un compte LottieFiles. 

Importer des animations à partir de LottieFiles

Vous pouvez importer autant d'animations Lottie que vous le souhaitez pour animer votre design. Une fois que vous avez ajouté un élément Lottie Animation à l'Editor X, collez l'URL de l'animation dans le panneau Paramètres pour voir ce que cela donne sur votre page. 

Pour importer une animation Lottie :

  1. Cliquez sur Ajouter des éléments en haut de l'Editor X.
  2. Cliquez sur Intégrations et réseaux sociaux.
  3. Cliquez sur Intégration Lottie.
  4. Faites glisser l'élément sous Intégrations Lottie à l'emplacement souhaité sur votre page.
  5. (Dans un onglet séparé) Copiez l'URL de l'animation à partir de LottieFiles :
    1. Connectez-vous à votre compte LottieFiles.
    2. Sélectionnez l'animation que vous avez choisie.
    3. Cliquez sur l'icône Copier  sous URL de Lottie Animation.
  6. Collez l'URL de l'animation dans l'Editor X :
    1. Cliquez sur l'élément Lottie Animation dans votre Éditeur.
    2. Cliquez sur l'icône Paramètres .
    3. Collez l'URL sous Quelle est l'URL de l'animation ?.
    4. Appuyez sur Entrée sur votre clavier.
Quelle est la prochaine étape ?
Découvrez comment votre animation se lit en cliquant sur Aperçu de l'animation en haut du panneau Paramètres.
Modifier l'URL de l'animation Lottie à partir du panneau Paramètres de l'élément, après l'avoir ajoutée à votre site Editor X
Travailler avec des points de rupture :
Vous pouvez personnaliser la taille de votre animation Lottie par point de rupture, afin qu'elle soit parfaite sur tous les écrans. 

Modifier votre animation Lottie

Si vous souhaitez modifier votre animation Lottie, vous pouvez facilement le faire en collant la nouvelle URL dans le panneau Paramètres de l'élément. 

Pour modifier l'animation :

  1. Cliquez sur l'animation Lottie dans l'Editor X.
  2. Cliquez sur l'icône Paramètres .
  3. Collez l'URL de la nouvelle animation sous Quelle est l'URL de l'animation ?.
Modifier l'URL de l'animation Lottie à partir du panneau des paramètres de l'élément dans l'Editor X

Configurer votre animation pour qu’elle soit lue en boucle

Vous pouvez choisir le mode de lecture de votre animation Lottie – une seule fois ou en boucle. 

Pour paramétrer la lecture de votre animation :

  1. Cliquez sur l'animation Lottie dans l'Editor X.
  2. Cliquez sur l'icône Paramètres .
  3. Cliquez sur le curseur à côté de Lecture en boucle pour l'activer ou la désactiver.
Cliquer sur un curseur pour configurer une animation Lottie afin qu'elle se joue en boucle.

Ajouter du texte alternatif à votre animation Lottie

Dans le panneau Paramètres, ajoutez du texte alternatif pour décrire brièvement votre animation Lottie. Cela peut améliorer le référencement de votre site tout en aidant les utilisateurs avec des lecteurs d'écran à comprendre ce qu'affiche votre animation. 

Pour ajouter du texte alternatif à votre animation :

  1. Cliquez sur l'animation Lottie dans l'Editor X.
  2. Cliquez sur l'icône Paramètres .
  3. Saisissez ou collez le texte de description dans le champ sous Écrire un texte alternatif pour votre animation.
  4. Appuyez sur Entrée sur votre clavier.
Rédiger un texte alternatif pour une animation Lottie dans le panneau Paramètres de l'élément dans l'Editor X.

Cela vous a-t-il aidé ?

|

Dans cet article

  • Importer des animations à partir de LottieFiles
  • Modifier votre animation Lottie
  • Configurer votre animation pour qu’elle soit lue en boucle
  • Ajouter du texte alternatif à votre animation Lottie