Comment rendre une card entière cliquable dans Webflow avec Finsweet Mirror Click ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment dupliquer un événement de clic d'un élément à un autre dans Webflow avec Finsweet Attributes Mirror Click.

Comprendre le cas d'usage

Mirror Click permet de déclencher le clic d'un élément B quand l'utilisateur clique sur un élément A. Le cas d'usage le plus fréquent : cliquer sur une zone personnalisée (ex: une card entière, une image) pour déclencher un lien ou un bouton caché que Webflow ne permet pas de cibler directement.

1. Ajoutez le script dans le head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-mirrorclick@1/mirrorclick.js" defer>script>

2. Définissez la paire source/cible

Sur l'élément déclencheur (ex: la card entière), ajoutez :

• fs-mirrorclick-element="trigger"
• fs-mirrorclick-group="card-1"

Sur l'élément cible (ex: le lien caché), ajoutez :

• fs-mirrorclick-element="target"
• fs-mirrorclick-group="card-1"

3. Utilisation dans une Collection List

Dans une Collection List, vous n'avez pas besoin de nommer chaque groupe individuellement. Finsweet associe automatiquement chaque trigger avec le target du même item CMS. Contentez-vous des attributs element="trigger" et element="target" sans l'attribut group.

Conclusion

Mirror Click est indispensable pour les cards cliquables dans Webflow. Cas d'usage :

• Cards de blog entièrement cliquables
• Éléments de liste CMS avec zone de clic étendue
• Déclenchement d'une modal depuis une image