Rendre des éléments non cliquables dans Webflow

Tutoriel
12/12/2022
3 min
Tuto Webflow élément non cliquable
Key points

Lorsque vous développez un projet dans Webflow, il se peut que vous ayez besoin de faire en sorte que certains éléments sur votre page, ne puissent pas être sélectionnés ou que l'on ne puisse pas cliquer dessus.

Nous allons voir dans ce tutoriel rapide comment mettre en place cela dans Webflow.

Étape 1 : Ajouter un élément embed sur votre page

Pour cette étape, nous vous recommandons d'ajouter un élément embed dans votre page, que vous pourrez cacher (display: none) par la suite. Si vous utilisez la méthode Client-First, sur chacune de vos pages, vous pouvez ajouter le component "Global Styles" qui contient un embed.

Si vous n'utilisez pas la méthode Client-First, nous vous recommandons de créer un component pour votre embed afin de pouvoir le réutiliser sur plusieurs pages de votre projet.

L'avantage de mettre le code dans un embed directement sur la page et non dans les paramètres de votre page ou projet est de voir directement la propriété fonctionner dans le Designer.

Étape 2 : Ajouter du code

Dans cette seconde étape, il faudra ajouter le code suivant dans votre élément embed :

<style>
.pointer-events-off {
  pointer-events: none;
}
</style>

Si vous avez cloné le projet de base Client-First, ce code est déjà présent dans les "Global Styles".

Étape 3 : Ajouter une classe à un élément

Une fois que ce code est dans votre page, vous pouvez ajouter à l'élément, qui ne doit pas pouvoir être sélectionné, la classe 'pointer-events-off'.

Cette classe va faire en sorte que l'élément ne puisse plus être une "cible" de votre souris (ou doigt).

Cette classe peut être utile à la place d'utiliser des z-index (dans certaines circonstances) notamment lorsqu'un élément de décoration vient se superposer à un bouton. Cette classe peut-être utile également dans d'autres circonstances très précises.

Voilà en trois étapes, vous pouvez faire en sorte que sur votre site Webflow, on ne puisse pas cliquer/sélectionner des éléments bien précis de votre page.

Aller plus loin sur les styles globaux du clonable Client-First.

Update 2024 : Native event

La fonctionnalité est maintenant disponible nativement dans le Designer Webflow.

Events auto:none Webflow designer
Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

Mise à jour automatique de la date de copyright dans le footer
Tutoriel
Développement

Mettre à jour automatiquement la date du footer en JavaScript

Mettre à jour automatiquement la date du footer en JavaScript
Dans les coulisses d’une séance photo avec Thibaut et Pierre (Digidop).
Storytelling
Digidop

Nouvelle année, nouveau site, nouvelles photos !

Nouvelle année, nouveau site, nouvelles photos !
Représentation visuelle de sites Web et des tendances en matière de webdesign en 2025
Documentation
Design

Les 5 tendances du webdesign en 2025

Les 5 tendances du webdesign en 2025

Transformez votre site web en un moteur de croissance.

Nous contacter