This documentation provides comprehensive insights into the Interactions Extension developed by Zoloblocks.

Enable the Interaction Extension

To use the Navigation block from Zoloblocks, you must first enable the block.

1. Go to WordPress Dashboard > Zoloblocks Plugin dashboard.
2. Then Click the Blocks Tab.
3. Search by the Interactions block Name.
4. Enable the Interactions block.
5. Hit the ” Save Changes ” button to save it.

Find the Extension

Find the Interactions Extension to find it by following the instruction.

1. Navigate to the ” Extra ” control tab of Zoloblocks Block
2. Find the ” Interactions ” section.

Intro and Various Type of Interactions

1. Click on the ” + ” icon to add the interactions.

The interactions item cab be multiple or and work with different items.

2. After adding new item click on the toggle items.
3. Trigger: Different trigger features are available for interactions ( Click, Hover, Focus, Blur, Mouse Enter, Mouse Leave, Enter Viewport, Leave Viewport , Scroll, Content Loaded, Mouse ViewPort ).
4. Actions: Actions are available to work with ( Show Element, Hide Element, Toggle Element, Set Attributes, Remove Attributes, Toggle Attributes, Scroll To, Start Animations, Scale X, Scale Y, Skew X, Skew Y, Rotate X, Rotate Y, Rotate Z, Translate X, Translate Y, Translate Z, Opacity ).
5. Selector: These selector are available for this Self and CSS Selector.

Hide Element

1. Trigger: Select the trigger for interactions , e.g: ” Click “.
2. Actions: Select the actions ” Hide Element ” to hide the Element.
3. Selector: Select the selector Self, It will interact the action on the element only.

Toggle Element

1. Trigger: Select the trigger Click.
2. Actions: Select the Actions for the actions ” Toggle Element “, It will Hide and Show the element on trigger.
3. Selector: Selector Self, Or you can select the CSS Selector for this.

Set Attribute

1. Trigger: Select the trigger ” Click ” to fire the actions.
2. Actions: Set actions ” Set Attribute “, It will set the attributes for the Elements.
3. Key: Set the Key for the attributes, e.g.: Key: ” Headphone Brand “.
4. Value: Set the value of it, e.g.: Value: ” SONY “.
5. Selector: Select the selector for triggering the actions.

Check the attributes sets by inspecting the Browser,

3. Key: Showing the same attributeKey: ” Headphone Brand “.
4. Value: Showing the same attributeValue: ” SONY “.

Scroll To

1. Actions: Select the actions ” Scroll To “. It will scroll to destinations.
2. Target As: Select the Target as Selector or From Top.
3. CSS Selector: Set the CSS selector for this, It will appear from the class attributes.
4. Offset(Px): Set the offset position value. The value will appear on px.
5. Duration(Ms): Set the duration for the animation. It count in Ms.

Start Animation

1. Actions: Set the Actions “Start Animation ” to animate it.
2. Animation: Select the different Animation category from te
3. Speed(MS): Set the animation speed for animating.
4. Delay(MS): Set the delay animation speed, The animation will in delay.

Scale X

1. Actions: Set the actions for the scale the animation.
2. ScaleX: Set the Scale X position for the image.
3. Duration(Ms): Set the duration of scaling of element.
4. Delay(Ms): Set the delay for the animation.

Scale Y

1. Actions: Set the actions for the scale the animation.
2. ScaleY: Set the Scale Y position for the image.
3. Duration(Ms): Set the duration of scaling of element.
4. Delay(Ms): Set the delay for the animation.

Rotate

Rotate X

1. Actions: Set the actions for the scale the animation.
2. Rotate X: Set the Rotate X position for the image.
3. Duration(Ms): Set the duration of scaling of element.
4. Delay(Ms): Set the delay for the animation.

Rotate Y

1. Actions: Set the actions for the scale the animation.
2. Rotate Y: Set the Rotate Y position for the image.
3. Duration(Ms): Set the duration of scaling of element.
4. Delay(Ms): Set the delay for the animation.

Rotate Z

1. Actions: Set the actions for the scale the animation.
2. Rotate Z: Set the Rotate Z position for the element.
3. Duration(Ms): Set the duration of scaling of element.
4. Delay(Ms): Set the delay for the animation.

Translate X

1. Actions: Set the actions for the scale the animation.
2. Translate X: Set the Translate position In x for the element.
3. Duration(Ms): Set the duration of scaling of element.
4. Delay(Ms): Set the delay for the animation.

Translate Y

1. Actions: Set the actions for the scale the animation.
2. Translate Y: Set the Translate the position Y for the Element.
3. Duration(Ms): Set the duration of scaling of element.
4. Delay(Ms): Set the delay for the animation.

Skew X

1. Actions: Set the actions for the scale the animation.
2. Skew X: Set the Skew the position X for the Element.
3. Duration(Ms): Set the duration of scaling of element.
4. Delay(Ms): Set the delay for the animation.

Skew Y

1. Actions: Set the actions for the scale the animation.
2. Skew Y: Set the Skew the position Y for the Element.
3. Duration(Ms): Set the duration of scaling of element.
4. Delay(Ms): Set the delay for the animation.

Opacity

1. Actions: Select the Actions for the interactions, Select the ” Opacity “.
2. Opacity(%): Set the opacity value.
3. Duration ( Ms): Set the duration for the opacity.

Video Assist

Video Tutorial Coming Soon! Please check the demo.

Thanks for being with us.