This article relates to the editor for advanced designers | Editor X

Editor X: Adding Click and Hover Interactions (Beta)

Important:

This feature is in beta mode

. This means we're working on enhancing it before it's available to all of our users.

Add Interactions to create an animated experience as visitors click or hover over elements. The interaction can affect the same element that triggered it, or any other element on the page. Either way, you have full control of the interaction's look, feel and timing so it's truly effective.

Step 1 | Access the Interactions tab in the Inspector

To get started, open the Inspector panel

and click the Interactions tab. This tab is split into two areas - Effects and Triggers - so you can work on them separately as well.

To access the Interactions tab:

Click the Inspector icon at the top right of Editor X.
(In the Inspector) Click the Interactions tab .

Tip:

This tutorial guides you to start with Triggers tab, but you can also work the other way around and set up your Effects first.

A screenshot of the Inspector panel in Editor X, clicking the Interactions tab to start creating an interaction.

Step 2 | Add a trigger (click / hover)

Create an interaction by defining a new trigger – hovering over or clicking your chosen element. You can then choose which element gets animated, the effect that should appear and the exact action that happens on hover or click (e.g., apply the effect, toggle it on / off, etc.)

To add the trigger:

Select the element that should trigger the interaction.
(In the Inspector) Click Triggers in the Interactions tab .
Click Add a Trigger.
Choose which action triggers the effect: Hover or Click.
Set up your trigger:

Choose the affected element

Select an action type

Choose the effect

In the example below, clicking the text box triggers the small image on its left, making it grow using our pre-designed effect:

A screenshot of the Interaction Setup panel in Editor X, setting up the trigger, effects and timing.

Changed your mind?

You can always remove the trigger you just created. Hover over Click / Hover and click the More Actions icon

to delete it.

Note:

You can add multiple interactions to an element so it triggers different effects on hover or click.

Step 3 | Design your custom effect

Chose a pre-designed effect?

You can skip to step 4.

When creating a custom effect, you can really tailor it to your needs. Add all kinds of layout and design transforms, changing your element's size (Scale), position (Translate), angle (Rotate), fill color and more.

To design a new custom effect:

Enter a name for your effect and click Start Designing.
Under Adjust, customize the following settings:
- Opacity: Change the opacity of the element by entering a value lower than 100%.
- Rotate: Make the element rotate in a certain direction by entering an angle in the text box.
- Scale: Make your element shrink or grow. You can either enter the same value in both X and Y so that your element resizes in its original proportion, or enter different values for the width (X) and the height (Y).
- Skew: Make your element turn sideways. Enter a value for the width (X) and the height (Y) of the element.
- Translate: Move an element right/left (X) or up/down (Y) by adjusting the X and Y values.
Under Design, customize the following settings:
- Fill Color & Opacity: Choose a different color and opacity for the element's background .
- Border: Choose a different color, opacity and width for the element's border.
- Corners: Make the element corners more round or square.
- Shadow: Add shadow to the element and adjust its color, angle, opacity and more.

In the example below, we designed a custom effect that makes this image rotate in 20 degrees, move 100 px to the right and display shadow:

A screenshot of the Inspector panel in Editor X, while creating a custom interaction.

Step 4 | Review and manage the Effects list

In the Effects tab, you can find all of the effects designed for a certain element and create more, if needed. This list also includes the element's initial state, which is the way it looks to visitors before they interact with it. You can adjust the element's initial opacity, angle, size and positioning.

To review and manage your effects:

(In the Inspector) Click Effects in the Interactions tab .
Click an action below to learn more about it:

Edit the element's initial state

Edit an existing effect

Rename or delete an effect

Preview an effect

Using a preset effect?

You can customize it further by adding layout and design transforms (e.g., Opacity, Translate, Scale, etc.) After setting the duration and ease, click the Edit icon

next to the effect's name.

A screenshot of the Inspector panel in Editor X, managing an effect you've finished designed.