Tilda Blog

Zero Block: Exploring the Pointer Events Parameter

💫  If you're using Zero Block to create clickable elements or custom animations, you are definitely using a parameter called Pointer Events. It makes elements transparent on click or hover. You can enrich your website with a whole bunch of amazing stuff thanks to Pointer Events.

Let's see how it works:
  • Add a button to Zero Block, then place an arrow with a transparent background over it.
  • Click on the top element → open its Settings → Pointer Events → None.

The item on top is now inactive: when users click or hover over it, the element below reacts.

If you set Pointer Events to "Auto", the button becomes non-clickable as it is blocked by the element above it.

Quick recap: the Pointer Events parameter is useful if you need to place elements on top of the buttons. It works pretty much like a mask. For example, you can place an icon above the image gallery navigation button or add an image on top of the Submit button, and keep those buttons clickable.
2021-02-09 12:00