Interaction builder guide

What's the interaction builder?

The Interaction builder takes the Maxi blocks to a whole new level. It allows you to create interactions between the blocks without having to mess with JavaScript or CSS code.

All you have to do is to select the blocks you want to interact with each other, choose the interaction and let the magic begin!

How to use it?

To start using the Maxi Interaction builder, you need to have at least two blocks added to the page. Optionally, add a custom name for the block that you wish to add an interaction to. To add a custom name, select the block and change its name from the settings tab.

When you have many blocks on the page, adding a custom name helps you identify the block easily.

Step 1: Adding blocks

For example, let's add a Maxi button and a Maxi icon block. Let's now add an interaction to change the icon's colour when we click the button. With the interaction builder, this is a one minute job!

Step 2: Creating new interaction

Select the button block and go to the Advanced tab in the sidebar. There, toggle the Interaction builder and click "Add new interaction". Inside the name field, assign your interaction a uniqe name.

Step 3: Choosing the target block

Next, choose the block you want to affect. From the dropdown menu select the block you want to add an interaction to. If you gave this block a custom name earlier, you will spot it here easily.

Step 4: Selecting the action

The action option in the settings is to choose whether you want the interaction to be triggered on click or hover.

Step 5: Adding the interaction

Finally, time to add the interaction itself! From the "settings" dropdown, choose what target block's settings you would like to affect. In our example, we want to choose the icon colour and change it to something other than the default one.

After saving the settings and checking the page on the frontend, you should see the interaction in action.

You may add multiple interactions, but don't overdo it. Adding too many interactions may affect the speed of the page. But, you're free to play around with the Maxi Interaction builder and see what works the best for you.

Select the icon