Événements et interactions liés à l'éditeur de page

L'onglet Événements (titre du panneau : Interactivité des éléments) vous permet de définir quand un événement se produit sur votre site en ligne et quels changements s'opèrent sur la page : menus qui s'ouvrent, sections qui apparaissent progressivement lors du défilement, vignettes de galerie qui s'assombrissent au survol, défilement fluide vers des ancres et effet de parallaxe subtil. Il ne s’agit pas du Gestionnaire d’événements (ateliers et billets) ; cette fonctionnalité fait partie des éditeurs de page et de modèle d’en-tête/pied de page.

Configurez-le depuis la barre latérale de droite : Modifier → Événements, après avoir sélectionné un bloc, une ligne, une colonne ou une section. Consultez la barre latérale et la barre d’outils de l’éditeur de page pour découvrir la disposition complète de la barre latérale.

Ce que vous pouvez faire (aperçu des fonctionnalités)

Fonctionnalité	Comment l’activer
Affichage déclenché par le défilement	Entrer dans la zone visible + Ajouter une classe (à associer à des transitions CSS dans Style ou dans le CSS du thème)
Interface utilisateur déclenchée par un clic	Clic + Activer/désactiver la classe, Afficher, Masquer ou Faire défiler jusqu’à — fonctionne sur les téléphones (contrairement aux effets déclenchés uniquement par le survol)
Survol de type galerie	Survol à l’entrée / Survol à la sortie + Atténuer / Annuler l’atténuation ou Mettre en avant / Retirer la mise en avant sur les conteneurs de vignettes
Finitions au chargement	Au chargement (montage) + Ajouter une classe ou Afficher lors de l’initialisation de la page
États de focus	Focus / Flou + Ajouter une classe ou Supprimer une classe sur les contrôles pouvant recevoir le focus
Mouvement	Parallaxe (défilement ou pointeur) et Barre de défilement (échelle/opacité liée à la progression) avec une intensité limitée
Contrôle inter-éléments	Appliquer une action à → Un autre élément (sélecteur CSS) pour activer/désactiver un panneau distant (par ex. `#mobile-menu`)

ArtInStack stocke les interactions sous forme de données déclaratives sur l’élément (et non sous forme de scripts arbitraires). Un petit moteur d’exécution autorisé sur les pages publiées applique vos règles en toute sécurité une fois que vous avez enregistré la page.

Comment ça marche

[Sélectionnez un élément sur le canevas]
        → Onglet Événements : Événement (déclencheur) + Action + Appliquer l’action à
        → Enregistrer la page → Publier (lorsque vous êtes prêt)
        → Le site en ligne exécute les interactions sur le contenu de cette page

Chaque interaction correspond à une ligne de la liste :

Événement — Moment où il se déclenche (les libellés de l’interface ci-dessous correspondent au menu déroulant de l’éditeur).
Action — Ce qui se passe (activer/désactiver une classe, faire défiler, atténuer la luminosité des éléments frères, etc.).
Appliquer l'action à — Cet élément, Un autre élément (sélecteur CSS) ou Les éléments frères (pour les préréglages de survol de la grille).
Exécuter une seule fois (facultatif) — Pour les clics et les apparitions dans la fenêtre d’affichage, ne se déclenche que la première fois.

Vous pouvez empiler plusieurs interactions sur le même élément (par exemple Au chargement → ajouter une classe « ready », puis Clic → activer/désactiver un menu).

Onglet « Événements » — déclencheurs et actions

L’éditeur ne propose que des paires valides de déclencheurs et d’actions. Si une action est grisée ou manquante, modifiez d’abord l’événement.

Événements (déclencheurs)

Événement (libellé de l’interface)	Idéal pour
Clic	Boutons, cartes, menus — à utiliser pour tout ce que les visiteurs doivent faire sur mobile
Au chargement (mount)	État initial au chargement de la page (classe « ready », afficher une bande)
Entrée dans la fenêtre d’affichage (révélation au défilement)	Fondu/glissement vers l’avant lorsque le visiteur fait défiler la page (utilise l’intersection avec la fenêtre d’affichage, et non des écouteurs de défilement bruts)
Entrée au survol / Sortie au survol	Améliorations pour ordinateur de bureau — associez toujours la sortie à l’entrée
Focus / Blur	Champs de formulaire et contrôles pouvant recevoir le focus (`tabindex` sur les div personnalisées si nécessaire)
Déplacement du pointeur (continu)	Parallaxe liée au curseur (limité ; respecte le mouvement réduit)

Actions

Action (libellé de l’interface utilisateur)	Fonction
Activer/désactiver une classe	Ajoute ou supprime une classe CSS sur la cible — idéal pour les menus et onglets cliquables
Ajouter une classe / Supprimer une classe	Modifications de classe unidirectionnelles — idéal pour les effets de révélation et les paires au survol
Afficher / Masquer	Visibilité via les classes de la plateforme (le masquage par défaut utilise `hidden` à la manière de Tailwind)
Atténuer / Annuler l’atténuation	Atténue les vignettes frères et sœurs situées dans le même parent de ligne/colonne (grilles de galerie)
Mettre en avant / Retirer la mise en avant	Met en évidence l’élément survolé
Défilement vers	Défilement fluide vers une ancre dans la page (`#section-id`)
Parallaxe (défilement ou pointeur)	Mouvement subtil lié au défilement ou au pointeur (intensité plafonnée dans le formulaire)
Défilement par glissement (progression → style)	Au chargement, anime l’échelle/l’opacité à mesure que l’élément se déplace dans la fenêtre d’affichage

Appliquer l’action à

Option	À utiliser lorsque
Cet élément (sélectionné)	Le bloc sélectionné doit changer (ou héberger un écouteur de survol pour l’assombrissement des éléments frères)
Un autre élément (sélecteur CSS)	Vous devez activer/désactiver `#nav-drawer`, `.accordion-panel`, etc.
Éléments frères (même parent)	Atténuer / Annuler l’atténuation au survol de la grille — associez l’interaction au conteneur de tuiles afin que les éléments frères soient d’autres tuiles

Synchronisation avec la fenêtre d’affichage (pour la révélation au défilement) : préréglages Par défaut, Plus tôt, Plus tard ou Marge racine personnalisée permettent de contrôler le moment où l’affichage se déclenche.

Recettes à forte valeur ajoutée

Affichage au défilement (fondu ou glissement)

Sélectionnez la section ou la racine du bloc.
Événements → Entrée dans la fenêtre d’affichage (révélation par défilement) → Ajouter une classe → nom de classe, par ex. is-visible.
Dans Style (ou votre thème), définissez cette classe avec opacity / transform + transition.
Activez Exécuter une fois (recommandé) pour que l’animation ne se répète pas à chaque fois que l’utilisateur revient en arrière.
Enregistrer la page → ouvrez l’URL publique ou d’aperçu et faites défiler jusqu’au bloc.

Menu mobile ou dépliage

Attribuez un identifiant au panneau dans Attr si nécessaire (ou utilisez une classe).
Sur le bloc bouton : Cliquez → Basculer la classe → Un autre élément → #votre-identifiant-de-panneau → classe, par exemple is-open.
Appliquez un style à .is-open en CSS pour afficher le menu coulissant.
Testez avec la largeur d’aperçu Mobile.

Grille de portfolio — atténuer les autres vignettes au survol

Sélectionnez le containeur de tuile (la cellule de colonne entourant chaque image — pas la balise img seule, sauf si celle-ci est la racine du bloc).
Survoler → Atténuer → Cet élément (l’écouteur reste sur la tuile ; les éléments frères s’atténuent).
Ajoutez une deuxième interaction : Sortie du survol → Annuler l’assombrissement.
Enregistrez la page et testez-la sur ordinateur ; prévoyez une alternative par clic pour les informations essentielles sur mobile.

Défilement fluide vers une section

Sur un bloc Bouton ou Lien : Clic → Défilement vers → sélecteur #pricing (doit exister sur la page).
La personnalisation du décalage de défilement n’est pas disponible : le navigateur fait défiler la cible vers le haut de la fenêtre d’affichage.

Parallaxe ou défilement par frottement

Privilégiez Au chargement (montage) + Parallaxe ou Défilement par frottement sur une section parente ; utilisez le sélecteur Autre élément si la couche mobile est un élément enfant doté d’un identifiant.
Maintenez une intensité faible ; l’éditeur applique des limites.
Testez avec l’aperçu Ordinateur de bureau et tenez compte du fait que certains visiteurs utilisent le mode mouvement réduit (les effets peuvent être minimisés).

Règles de conception garantissant la fiabilité des pages

Règle	Pourquoi
Comportement critique → Clic	Le survol n’existe pas sur de nombreux téléphones
Associer survol à l’entrée + survol à la sortie	Éviter les grilles « grises » bloquées
Évitez de combiner le survol et le masquage sur un même élément	Une fois masqué, le visiteur ne peut plus survoler l'élément pour annuler l'action
Utilisez une classe « Add/Remove » pour le survol	N’utilisez pas la classe « Toggle » au survol — cela peut inverser l’état de manière inattendue lors d’un nouveau survol
Les classes doivent exister dans le CSS	Ajouter une classe ne fait que changer le nom ; définissez `.is-visible`, `.is-open`, etc. dans Style ou dans le CSS du thème
Associez-les à la racine du bloc	Moins d’écouteurs en double ; plus faciles à trouver dans Layers
Enregistrez avant d’évaluer le comportement en temps réel	Les interactions s’appliquent au code HTML publié/en aperçu, et pas seulement au canevas statique

Limites (par page)

L’onglet Événements affiche des compteurs en temps réel. Limites typiques :

Limite	Valeur approximative
Interactions par élément sélectionné	15
Interactions discrètes par page	200
Mouvement continu (parallaxe / défilement) par page	32
Éléments comportant des interactions par page	80

Si l’option Ajouter une interaction est désactivée, supprimez les interactions inutilisées ailleurs sur la page ou simplifiez les effets impliquant beaucoup de mouvements.

Éditeurs d’en-tête, de pied de page et de modèles

Le même onglet Événements s’affiche lorsque vous modifiez les modèles d’en-tête ou de pied de page sous Paramètres → En-tête et pied de page. Utilisez-la pour les boutons de navigation collants ou les bandes de révélation du pied de page — voir En-tête, pied de page et navigation.

Dépannage

Symptôme	Que vérifier
Rien ne se passe sur le site en ligne	Enregistrer la page ; testez l’URL aperçu/public, pas seulement le canevas ; vérifiez que l’élément dispose toujours des interactions répertoriées dans Événements
Le survol fonctionne une fois, puis plus du tout	Vous avez utilisé Masquer au survol — passez à Ajouter une classe / Supprimer une classe avec un effet autre que `display:none`
La classe s’active mais aucun changement visuel n’apparaît	Aucune règle CSS pour ce nom de classe
La révélation au défilement ne se déclenche jamais	Seuil/marge trop stricte ; l’élément est déjà visible au chargement ; transition de classe manquante
Le menu fonctionne sur ordinateur, mais pas sur mobile	Utilisez Clic, et non le survol seul
Les vignettes assombries sont les mauvaises	Interaction sur le mauvais conteneur — les éléments frères doivent partager le même parent

Étapes suivantes et validation

Ouvrez une page brouillon → sélectionnez une Section → Événements → ajoutez Entrée dans la fenêtre d’affichage + Ajouter une classe → Enregistrer la page.
Prévisualisez la page dans un navigateur et faites défiler jusqu’à ce que la section apparaisse à l’écran.
Ajoutez Clic + Basculer la classe sur un bouton ciblant un panneau masqué ; vérifiez le résultat sur une largeur mobile.
Consultez la Référence sur les blocs de l’éditeur et la mise en page pour connaître les types de blocs qui s’associent bien aux interactions.