Making elements non-clickable in Webflow

Tutorial
March 20, 2023
3 min
Webflow tutorial non-clickable element
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

Abstract glowing visual with yellow and orange gradients, featuring the text “AI & DESIGN 2025” in the center, suggesting a theme focused on artificial intelligence and design in 2025.
Documentation
AI

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)
Screenshot of the Webflow Partner directory showcasing several agencies: Digidop, Finsweet, Flow Ninja, and Simon Lampert. The blue background features the Webflow Partner logo on the left, while partner cards display their status, starting price, awards, and preview of delivered websites.
Documentation
Webflow

The Webflow Partner Program

The Webflow Partner Program
Agentic AI vs. Generative AI
Documentation
AI

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Want to turn your website into your most valuable asset?

Contact us today