Making elements non-clickable in Webflow

Tutorial
March 20, 2023
3 min
Webflow tutorial non-clickable element
Use AI to summarize this article
Key points

When developing a project in Webflow, you may need to ensure that certain elements on your page cannot be selected or clicked on.

In this quick tutorial, we will see how to implement this in Webflow.

Step 1: Add an Embed Element to Your Page

For this step, we recommend adding an embed element to your page, which you can hide (display: none) later. If you're using the Client-First methodology, on each of your pages, you can add the "Global Styles" component that contains an embed.

If you are not using the Client-First method, we suggest creating a component for your embed so that you can reuse it across multiple pages in your project.

The advantage of placing the code in an embed directly on the page, rather than in your page or project settings, is that you can see the property working immediately in the Designer.

Step 2: Add the Code

In this second step, you will need to add the following code to your embed element:

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

If you have cloned the base Client-First project, this code is already included in the "Global Styles".

Step 3: Add a Class to an Element

Once this code is on your page, you can add to the element that should not be selectable the class 'pointer-events-off'.

This class will ensure that the element is no longer a "target" for your mouse (or finger).

This class can be useful instead of using z-index (in certain circumstances), especially when a decorative element overlaps a button. This class can also be beneficial in other very specific situations.

In three simple steps, you can ensure that on your Webflow site, specific elements of your page cannot be clicked or selected.

Explore more about the global styles of the Client-First cloneable.

Update 2024 : Native event

The feature is now natively available in the Webflow Designer.

Events none or auto image Webflow (CSS feature)
Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Events
Webflow

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.
Visual overview of several modern web typefaces in 2025, each displayed on a vibrant background: Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, and more — a graphic composition highlighting typographic diversity.
Documentation
Design

The 20 Best Fonts for a Modern and Impactful Website in 2025

The 20 Best Fonts for a Modern and Impactful Website in 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

Want to turn your website into your most valuable asset?

Contact us today