Click & hover interactions

Create engaging interactions triggered when visitors click or hover on site elements. Learn how to fully customize their behavior and how to tailor them for every breakpoint.

Adding triggers

To add a trigger, click Interactions in the Inspector panel. Then, from the triggers tab, click Add a Trigger. Finally, choose Click or Hover.Note: On mobile and tablet breakpoints, interactions are converted to on tap interactions.

Screenshot showing Editor X. A container is selected and the Inspector panel is open showing interaction trigger options. The cursor is placed over the Add a Trigger button and a dropdown shows options for Click and Hover

Setting up an affected element

Choose the element you’d like to add a click or hover interaction to. The element can be the same as the trigger element or it can be any other element on the canvas.

A screenshot of Editor X where the Interactions setup menu is open in the Inspector panel. The cursor is hovering over the Affected element dropdown and the option Container (self) is selected.

Setting up an action type

From the Action type dropdown, you can choose what happens when a visitor clicks or hovers on the triggered element.

A screenshot of Editor X where the Interactions setup menu is open in the Inspector panel. The cursor is hovering over the Apply an effect option under the Action type dropdown

Setting up an interaction’s effect

Choose which effect you’d like to apply to the target element. You can choose between the preset effects or create a new, custom effect.

A screenshot of Editor X where the Interactions setup menu is open in the Inspector panel. The cursor is hovering over the Effect dropdown showing the various options available including Grow, Shrink, Float, Sink, Float and Grow and Skew

Using a preset effect

From the dropdown menu, you can choose between preset effects including Grow, Shrink, Float and more. Then, you can set its duration by adding start and end points. You can also choose the effect’s easing type.

A screenshot of Editor X where the Interactions setup menu is open in the Inspector panel. The Effect dropdown is open and the cursor is placed over the Float and Grow option

Designing a custom effect

To create a custom effect, choose Custom from the Effect dropdown. Name the effect and hit Start Designing.

Navigating between initial state and effect design

From the dropdown, you can navigate between the element’s initial state—the way it will look when the page loads— and the element’s effect in order to choose which one you want to design.

A screenshot of Editor X where a container is selected. An effect has already been applied to the element. There is a menu bar near the top of the editor with a dropdown for navigating between the initial state and the effect design

Adjusting & designing the element

Under Adjust, you can edit the element’s appearance and its transform properties. You can change the element’s opacity, rotate it, and set the scale, skew, and translate values in their relevant units of measure. Depending on the type of element you select, you can also edit the fill color & opacity, border, corners, shadow, text and spacing.

A screenshot of Editor X where the Inspector panel is open showing the Adjust menu for a container that’s been selected on the canvas. In this menu there are options for editing the opacity, rotation, scale, skew and translate of the element. There are also options for editing its fill color and opacity, border, corners and shadow.

Timing the effect

When editing an effect from the floating menu, you can set its duration by adding start and end points and choosing its easing type. Click Done to complete the setup.