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.

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:

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:

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.


Did this help?
|