Actions and Events Overview

Video Tutorial:


Actions are scripts you can use on elements and layers on your page according to events that happen.
Actions and events can be set at page, layer and element level.
To set actions and events for your whole page, click Actions in the top toolbar. To configure actions and events for a layer, click the three dot menu next to that layer’s name in the Layers dialog and click Actions and Events. And to configure actions and events for an element, click to select your element and go to Element Properties > Actions and Events. Then, click Add New Action.

Event Type

This specifies what kind of event has to happen to trigger the action you’ll select next.
Click - when the user clicks the element or layer (elements and layers only)

Exit Intent - when the user moves to exit the page (page only)

Mouse Movement - when the user’s mouse enters or leaves the element (elements only)

Scroll - when the top or bottom of the element scrolls into the viewport (elements only)

Time - on a set duration of time after a layer is shown or the page loads (layers and page only)
This is where you choose what happens after the event you specified.
Show - fades in or shows the target

Hide - fades out or hides the target
This is where you choose which element or layer you’ll apply the action and event to. Click the dropdown to choose from the available options, and toggle Include Contained Elements to On to affect the elements contained within the target element or layer.
NOTE: to apply actions and events to elements, you’ll need to give the elements a name. You can do this by selecting the element and going to the Properties Panel > General Properties.