Trigger

An Interaction can be by initiated by Click, Double Click, Mouse Up, Mouse Down, Mouse Enter, Mouse Leave, Mouse Over, Mouse Out or URL Hash.

Select

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger (Click, Double Click, Mouse Up, Mouse Down, Mouse Enter, Mouse Leave, Mouse Over, Mouse Out or URL Hash)

Add an Interaction

The ➕ Icon allows you to add a new Interaction. You can ⏱ (reset), ✎ (edit) or 🗑 (remove) the Interaction by clicking the appropriate buttons.

Add

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

Target

The Target property allows you to define whether the target block is the current element you are clicking on or a selector (class, or ID using CSS conventions such as a dot for a class, a hash for an ID)

Select

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

Action

An Interaction Action allows you to apply a specific action to the specified Interaction trigger such as: Add Class, Remove Class, Toggle Class,Toggle Slide,Slide Up, Slide Down, Property, Toggle Display, Toggle Display Smooth, Custom Function.

In the Interaction Modal you can Copy, Paste, Reset or Save Globally.

!!! You can have multiple Actions per block Interaction !!!

Add

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select required Action in dropdown (Add Class, Remove Class, Toggle Class,Toggle Slide,Slide Up, Slide Down, Property, Toggle Display, Toggle Display Smooth, Custom Function)

Remove

1. Select a block

2. Open the Block Inspector

3. Navigate to the Primary tab

4. Navigate to General Settings

5. Click the Interactions property to open the Interactions Modal

6. Choose Trigger

7. Click ➕ to add an Interaction

8. Select desired target (Current, Selector)

9. If Selector, input required selector

10. Click ✎ (Edit) to open Interactions Modal)

11. Select required Action in dropdown (Add Class, Remove Class, Toggle Class,Toggle Slide,Slide Up, Slide Down, Property, Toggle Display, Toggle Display Smooth, Custom Function)

12. Click 🗑 (Trash) to remove Action.