Les Canvas Views sont l’une des fonctionnalités les plus puissantes de Showit pour créer de l’interactivité. Tu veux un menu déroulant ? Une FAQ accordéon ? Une galerie hero avec transition ? Tout ça passe par les Canvas Views.
C’est quoi une Canvas View ?
Une Canvas View, c’est un « état » différent d’un même canvas. Par défaut, chaque canvas n’a qu’une seule vue (View 1). Tu peux en ajouter autant que tu veux : chaque view peut contenir des éléments différents, ou les mêmes éléments dans des positions/styles différents.
Une seule view est visible à la fois. Le passage d’une view à l’autre se déclenche via une Click Action ou une Scroll Action.
Ajouter une Canvas View
Sélectionne le canvas concerné dans le Site Panel, clique sur les trois points à droite de son nom, et choisis Add Canvas View. La nouvelle view apparaît numérotée dans la liste. Tu peux en ajouter plusieurs en répétant l’opération.
Travailler dans une Canvas View
Clique sur la view souhaitée dans le Site Panel pour l’activer. Tu peux maintenant ajouter, déplacer et modifier les éléments qui lui sont propres. Chaque view est indépendante : les éléments d’une view n’apparaissent pas dans les autres.
La View 1 est la vue par défaut affichée au chargement de la page. Les autres views ne sont visibles que si une action les déclenche.
Déclencher le changement de view
Pour passer d’une view à l’autre, configure une Click Action sur un élément : Link > Canvas > This Canvas > View 2 (par exemple). Sur la View 2, remets un lien vers View 1 pour permettre de revenir à l’état initial.
Configurer les transitions
Dans le Properties Panel quand le canvas est sélectionné, l’onglet View Transitions te permet de choisir :
- Canvas View In : animation à l’entrée de la view (fade, slide, bounce…).
- Canvas View Out : animation à la sortie de la view.
- Time : durée de la transition.
- Delay : délai avant le déclenchement.
L’Auto Advance View
L’option Auto Advance View dans l’onglet View Transitions fait défiler automatiquement les views sans intervention du visiteur. Idéale pour créer un slider d’images en hero qui tourne tout seul.
Cas d’usage concrets
- Menu déroulant : View 1 = menu fermé, View 2 = menu ouvert avec les sous-liens.
- FAQ accordéon : View 1 = question fermée, View 2 = question + réponse ouverte.
- Galerie hero : chaque view contient une image différente en fond de canvas, avec Auto Advance pour le défilement automatique.
- Quiz ou formulaire multi-étapes : chaque view correspond à une étape différente.
💡 Les Canvas Views sont le moteur de toute l’interactivité sur Showit. Maîtriser ce concept, c’est débloquer des possibilités créatives très larges sans une ligne de code.
