Éditeur Wix : Ajouter et personnaliser une animation

Temps de lecture : 5 min
Utilisez des animations pour donner vie à votre site. Ajoutez des effets tels que "Float-in" et "Expand-in" pour créer des pages inventives et saisissantes. Configurez vos animations pour qu'elles s'affichent une fois, en boucle ou lorsque votre site fait défiler et attirez l'attention des visiteurs sur votre contenu.
Vous pouvez appliquer des animations à une variété d'éléments, et même appliquer différents effets au même élément sur votre ordinateur et votre site mobile. L'animation sur votre site mobile est configurée pour s'adapter aux petits écrans, afin que vous puissiez continuer à épater vos visiteurs. En savoir plus sur les effets d'animation sur votre site mobile
Dans cet article, apprenez comment :
Un gif montrant différentes animations d'image lorsque le site fait défiler le site.

Ajouter une animation à un élément

Commencez à rendre votre site dynamique et attrayant en ajoutant une animation à vos éléments. Chaque animation a son propre effet, vous pouvez donc les mélanger avec différents éléments et donner à vos visiteurs une impression durable.

Pour ajouter une animation :

  1. Cliquez sur l'élément concerné dans l'Éditeur.
  2. Cliquez sur l'icône Animation  .
  3. Sélectionnez une animation parmi les options disponibles.
    • Entrée: L'animation sera lue une fois lorsque l'élément sélectionné apparaîtra à l'écran.
    • En boucle: L'animation sera lue en boucle continue.
    • Défilement: L'animation sera lue lorsque l'élément défilera dans la vue. 
Un gif montrant un certain nombre d'animations différentes qui peuvent être affichées en boucle.
Remarque :
Supprimez les effets d'animation de vos éléments en cliquant sur l'icône Animation  sur l'élément, puis en cliquant sur Aucun .
Suggestion :
Vous pouvez ajouter une animation à un groupe d'éléments en sélectionnant le groupe et en cliquant sur l'icône Animation .

Personnaliser une animation

Après avoir ajouté une animation à un élément, vous pouvez le personnaliser pour qu'il se comporte comme vous le souhaitez et qu'il corresponde à l’atmosphère de votre site.
Ajustez les paramètres tels que la puissance, la direction et le délai pour avoir un impact et engager vos visiteurs.

Pour personnaliser l'animation :

  1. Cliquez sur l'élément concerné dans votre Éditeur.
  2. Cliquez sur l'icône Animation  .
  3. Cliquez sur Personnaliser et utilisez les options pour ajuster votre animation :
    • Puissance : Cliquez sur le menu déroulant et sélectionnez la puissance de l'animation lors de la lecture.
    • Direction : Sélectionnez la direction à partir de laquelle l'animation entre, par exemple dans le sens des aiguilles d'une montre ou à partir de la droite.
    • Distance : Utilisez le curseur pour augmenter ou diminuer la distance entre le point de début et de fin de l'effet.
    • Durée : Utilisez le curseur pour ajuster la durée de lecture de l'animation.
    • Délai : Faites glisser le curseur pour augmenter ou diminuer le délai entre le chargement de la page et le début de l'animation.
    • Type d'animation : Choisissez parmi le type d'animation interne, externe ou continu lors du défilement. 
    • Style de mouvement : Sélectionnez l'intensité du mouvement, par exemple léger ou modéré.
Une capture d'écran des paramètres de l'animation de retournement. Afficher différents paramètres tels que la direction et la durée de l'animation.
Remarque :
Les options de personnalisation disponibles dépendent de l'animation que vous choisissez.

Ajouter des animations à votre site mobile

En plus d'ajouter des animations aux éléments de votre site sur ordinateur, vous pouvez également les ajouter à votre site mobile, afin que vos visiteurs bénéficient d'une excellente expérience de navigation depuis tous leurs appareils.
Les animations pour mobile ont été spécialement conçues pour les petites résolutions et tailles d'écran, vous n'avez donc pas à vous soucier de l'espacement.
Remarque :
Si vous souhaitez qu'un élément soit animé à la fois sur les versions ordinateur et mobile de votre site, vous devez ajouter l'effet dans les deux Éditeurs. Les effets d'animation que vous avez ajoutés sur ordinateur ne sont pas reportés sur votre site mobile, car ils sont optimisés pour différentes tailles d'écran.

Pour ajouter une animation sur mobile :

  1. Accédez à votre Éditeur mobile.
  2. Cliquez sur l'élément concerné.
  3. Cliquez sur l'icône Animation .
  4. Sélectionnez une animation parmi les options disponibles.
Un gif montrant le panneau contenant une variété d'options d'animation différentes lors de l'utilisation de l'éditeur mobile.
Important :
Si un élément est masqué/affiché à l'aide de Velo, ses animations doivent également être paramétrées via Velo. En savoir plus sur les éléments Velo
Des problèmes avec votre animation ?
Suivez nos étapes pour vous assurer qu'ils fonctionnent comme prévu sur votre site en ligne.

Cela vous a-t-il aidé ?

|