Éditeur Studio : Créer une interaction de clique ou de survol personnalisée

Temps de lecture : 7 min
Ajoutez des interactions pour créer une expérience animée lorsque les visiteurs cliquent ou survolent des éléments. L'interaction peut animer le même élément qui l'a déclenchée, ou tout autre élément de la page. 
Grâce aux interactions personnalisées, vous disposez d'une liberté créative totale pour concevoir une animation de A à Z. Vous pouvez également contrôler le timing de l'animation pour la rendre vraiment efficace. 
Accédez à la Académie Wix Studio pour consulter les webinaires, les tutoriels et les cours supplémentaires de Wix Studio.

Étape 1 | Ajouter un déclencheur (cliquez ou survolez)

Pour commencer, sélectionnez l'élément qui déclenche l'interaction. Il s'agit de l'élément que les visiteurs survolent ou cliquent avant de voir l'animation. Ensuite, accédez au panneau Inspecteur pour ajouter une nouvelle interaction. 
Suggestion :
Vous pouvez ajouter plusieurs interactions à un élément pour qu'ils déclenchent différentes animations lors du survol ou du clique.

Pour ajouter un déclencheur :

  1. Sélectionnez l'élément qui doit déclencher l'interaction.
  2. Cliquez sur l'icône Ouvrir l'Inspecteur  en haut à droite de l'éditeur.
Une capture d'écran de l'ouverture du panneau inspecteur dans l'Éditeur Studio.
  1. Cliquez sur l'onglet Animations et effets .
  2. Sélectionnez Survol / Clique.
  3. Cliquez sur + Ajouter
L'onglet Animations et effets dans le panneau Inspecteur, ajoutant une nouvelle animation de survol

Étape 2 | Configurer l'interaction

Vous pouvez maintenant choisir quel élément s'anime, l'animation qui doit apparaître et l'action exacte qui se produit lors du survol ou du clique (par exemple, appliquer l'animation, l'activer / la désactiver, etc.)

Pour configurer l'interaction :

  1. (Dans le panneau de configuration) Sélectionnez une option dans le menu déroulant Au survol / au clique :
    • Démarrer l'animation : Cliquez / survolez l'élément pour déclencher l'animation choisie.
    • Activer / désactiver : Semblable à un curseur, cliquer sur l'élément déclenche l'animation et un deuxième clic le supprime.
    • Réinitialiser l'animation : Cliquer / survoler l'élément supprime toute animation qui a été précédemment appliquée.
  2. Sélectionnez une option dans le menu déroulant Élément animé :
    • Faire en sorte que l'élément déclenche sa propre animation : Cliquez sur le nom de l'élément (le mot (self) apparaît à côté).
    • Animez un autre élément de la page : Sélectionnez un élément dans le menu déroulant ou cliquez sur Choisir sur la toile pour le sélectionner sur la page.
      Suggestion : Maintenez la touche Cmd / Ctrl pour sélectionner un élément enfant.
  3. Cliquez sur l'onglet Personnalisé
  4. Cliquez sur Créer une animation personnalisée.
Suggestion :
Les animations personnalisées que vous créez sont enregistrées pour une utilisation future sur d'autres éléments. 
Une capture d'écran de l'onglet personnalisé lorsque vous n'avez pas encore d'animations enregistrées

Étape 3 | Personnaliser l'animation

Il est maintenant temps de créer l'animation de A à Z. Ajoutez toutes sortes de mises en page et de transformations de design pour modifier la taille (Échelle), la position (Traduire), l'angle (Rotation), la couleur de remplissage de l'élément et plus encore. 
Vous pouvez également concevoir l'état initial de l'élément pour compléter l'animation que vous avez créée. Voici à quoi ressemble l'élément lorsqu'il se charge, avant que les visiteurs n'interagissent avec lui. Pour relier le tout, définissez la durée et le comportement de l'animation. 

Pour personnaliser l'animation :

  1. Choisissez comment vous souhaitez personnaliser l'animation :
2. (Facultatif) Cliquez sur  Jouez sur la barre flottante pour prévisualiser l'animation.
3. Lorsque vous êtes prêt, cliquez sur Terminer.
Un GIF montrant l'aperçu de l'animation sur la toile
Suggestion :
Lorsque vous configurez un élément pour qu'il s'affiche lors du clique ou du survol, il apparaît avec une superposition de quadrillages sur la toile. Cela sert à indiquer que l'élément est initialement transparent. 
Un bouton configuré pour apparaître au survol, apparaissant avec une superposition de quadrillages sur la toile dans l'Éditeur Studio
Vous pouvez désactiver cette indication à tout moment. Cliquez sur l'icône Wix Studio , survolez Afficher et cliquez sur Éléments transparents.

FAQ

Cliquez ci-dessous pour en savoir plus sur la création d'interactions. 

Cela vous a-t-il aidé ?

|