Creating An Interaction

There are two ways you can create interactions:

  1. From the Block Toolbar
  2. From the Top Toolbar

From the Block Toolbar

  1. Select a block on your page.

  1. Click on the WP Interactions button on the block toolbar

  1. Pick an Element Interaction from the list of trigger options.

    Once you select a trigger, additional WPI settings will instantly open up on the right sidebar of the Editor.

    This is where you will find the interaction controls for the resulting action/s when the trigger is activated.

  1. In the WPI Settings sidebar, toggle the switch to “Active” for the interaction to take effect in the frontend of your website.
  2. Enter an Interaction Name, or keep the default one.

  1. Add an action, or series of actions, by clicking the (+) icon in the Action Timeline panel.

    In this example, we added the actions “Move” and “Background Color”

When you click on an action, a window will open up where you can customize the behavior of the action.

We set the Y property of the “Move” action to -20 so the button moves up on mouse hover, which is the trigger for this action.

We also added an action to change “Background Color” to blue.

Then we set the Starting Time for both actions to 0.00 so both actions start at the same time when you hover over the button.

You can change the Starting Time by typing the time directly on the left side of the timeline.

Click the “Preview” button to preview the interaction in the editor.

  1. “Save” your interaction before adding a new one, or “Discard” if you want to start over.

From the Top Toolbar

Click on the WP Interactions button on the top toolbar to open up the Interaction settings.

Next, pick the type of Interaction you want to create:

  • Element Interaction
  • Page Interaction
  • My Interactions

Element Interaction

Element Interactions define actions that occur when a user interacts with elements on your page. It starts out with a trigger such as “Click” or “Mouse hover”.

When you pick Element Interaction, first choose the Element Trigger from the dropdown list: Block, CSS or Class Selector.

If you choose Block, click the target icon to select a block in the editor or type in the Block Anchor ID.

Then pick an interaction from the options that follow.

Click the target icon to select a block in the editor

Repeat steps 4-9 in the above section “From the Block Toolbar”.

Page Interaction

Page Interactions define actions that occur when there’s a change in your page’s state. It starts out with a trigger such as “Page load” or “While page is scrolling”.

When you pick Page Interaction, choose from the list of interactions.


Repeat steps 4-9 in the above section “From the Block Toolbar”.

My Interactions

My Interactions are a collection of all the interactions you have added to your website. You can reuse interactions that you have already created.