Make elements not clickable in Webflow

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

We will see in this quick tutorial how to set this up in Webflow.

Step 1: Add an embed element to your page

For this step, we recommend you to add an embed element in your page, which you can hide (display: none) afterwards. If you use the Client-First method, on each of your pages, you can add the"Global Styles" component which contains an embed.

If you are not using the Client-First method, we recommend that you create a component for your embed so that you can reuse it on several pages of your project.

The advantage of putting the code in an embed directly on the page and not in the parameters of your page or project is to see directly the property working in the Designer.

Step 2: Add code

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

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

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

Step 3: Add a class to an element

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

This class will make sure that the element can no longer be a "target" of your mouse (or finger).

This class can be useful instead of using z-indexes (in some circumstances), especially when a decorative element is superimposed on a button. This class can also be useful in other very specific circumstances.

In three steps, you can make sure that on your Webflow site, no one can click/select specific elements of your page.

Go further on the global styles of the Client-First clonable.