How to use Extra Tab Controls by Zoloblocks

This documentation provides comprehensive insights into the Extra tabs controls developed by Zoloblocks.

Extra Tab

This section enhances the interactivity and engagement of blocks by incorporating additional features. It allows for customization such as setting background colors and adding animations to sections, thereby making the blocks more visually appealing and interactive.

Spacing

Spacing refers to the amount of distance or separation between elements in a layout. It can include padding and margin.

1. Margin: Margin is the space around an element, outside of any defined borders. It creates separation between the element and surrounding elements
2. Padding: Padding is the space between the content of an element and its border. It adds internal space within the element,

Background

The background property allows you to set its color, image, position, and size to create visually appealing designs and enhance the overall look and feel of blocks.

Normal Tab

These tabs behave in the normal state for the background. The appearance changes by following it.

Set Color for Background

1. Background Type: Set the background type to Classic.
2. Background Color: Set the background color by clicking on it.

Set Gradient Color for Background

1. Background Type: Set the background type Gradient.
2. Gradient Color: Gradient color refers to a transition between two or more colors, Set the gradient color.
3. Type: Set the type for the gradient (e.g.: Linear or Radial ).
4. Angle: Set the angle for the gradient.

Set Image for Background

1. Background Type: Set the type for the background Classic.
2. Background Color: Set the background Image. Click on it and the media library will open then select an image.

3. Position: Set the position for the image (e.g.: Center Center, Center left, center right, top left, etc.).
4. Attachment: Set attachment for the image (e.g.: Fixed, scroll ).
5. Repeat: Set repetition for the image ( e.g.: No Repeat, Repeat, Repeat- x, Repeat-y ).
6. Size: Set the size for the image ( e.g.: Default, auto, cover, container, custom )

Overlay Color for Background

1. Enable Overlay: Enable the switcher to color for the overlay. Overlay color typically refers to a semi-transparent color layer applied on top of an element.
2. Overlay Opacity: Set the opacity for the overlay.
3. Background Type: Set background type Classic to set the color.
4. Overlay Color: Set overlay color for the background.

Overlay Gradient for Background

1. Enable Overlay: Enable the switcher to open and set the overlay color.
2. Overlay Opacity: Set opacity for the overlay.
3. Background Type: Set the background type gradient for the background.
4. Gradient Color: Gradient color refers to a transition between two or more colors, Set the gradient color.
5. Type: Set the type linear for the color.
6. Angle: Set the angle for the color.

Hover Tab

The appearance changes on mouse hover.

Background Color for Hover State

1. Background Type: Set the type classic for the background.
2. Background Color: Set color for the background.

Background Color Gradient for Hover State

1. Gradient Color: Set the gradient color.
2. Type: Set type for the gradient linear.
3. Angle: Set the angle for the color.

Overlay Hover Color

This appears to change on the mouse hovering.

1. Overlay Opacity: Set the overlay opacity for the
2. Background Type: Set the background type for the overlay color.
3. Overlay Color: Set overlay color. The appearance changes on hover.

Overlay Image

1. Overlay Opacity: Set opacity for the overlay.
2. Background Type: Set background type classic.
3. Overlay Image: Set the image for the overlay.

Border

A border is a visible line or perimeter around an element in a webpage. It can be used to visually separate elements.

1. Border: Set border for the container element.
2. Border Radius: Border radius is used to create rounded corners on elements, such as divs or buttons. By applying a border-radius, you can soften the sharp edges of an element, giving it a more visually appealing and modern look

3. Box Shadow: shadow effect on an element’s box, creating depth and dimensionality. It allows you to specify the size, spread, color, and blur radius of the shadow.

Responsive Control

Responsive controls in web design refer to elements or techniques used to ensure that a website adapts and displays appropriately across different devices and screen sizes.

1. Hide on Desktop: Enable the switcher to Hide this element for desktop devices.
2. Hide on Tablet: Enable the switcher to Hide this element for Tablet devices.
3. Hide on Mobile: Enable the switcher to Hide this element for Mobile devices.

Overflow

This property is useful for controlling the behavior of content within elements, especially when dealing with content that may extend beyond the boundaries of its container.

• Visible: Content is not clipped and may overflow the container.
• Hidden: Content that overflows the container is clipped and not visible.
• Scroll: Content is clipped, and a scrollbar is added to allow users to scroll and see the overflowed content.
• Auto: Similar to scroll, a scrollbar is added only when needed, based on the content size.

Z Index

It’s commonly used to control the layering of elements in a webpage, especially in situations where elements overlap.

1. Set Z Index: Set value for Elements with a higher z-index value will appear on top of elements with a lower z-index value.

Custom Attributes

Custom attributes are particularly handy for developers who want to extend the functionality of HTML without relying on non-standard attributes or cluttering the markup with unnecessary classes or IDs.

1. Add Wrapper ID: You can replace “wrapper” with any unique identifier you prefer. This ID can then be used for styling with CSS or for targeting the element with JavaScript.
2. ADD CUSTOM CLASS: You can replace “custom-class” with any unique class name you prefer. This class can then be used for styling with CSS or for targeting the element with JavaScript. If you want to add multiple classes.

Custom CSS

Custom CSS allows you to define your styles to apply to elements. This customization allows for unique designs and better organization of styling code.

1. Custom CSS Input fields: Set your custom CSS code in the input fields. This helps you write the CSS code to achieve that design.
   Note: To work with the zolo block CSS you need to use {{ZOLO}} as a prefix.
2. Suggested Classes: The suggested classes will appear here. Select any Zolo block item.

Motion Effect

Motion effects in web design refer to the use of animations, transitions, or dynamic changes to create visual movement or interactivity on a webpage. These effects can be applied to various elements such as text, images, buttons, and backgrounds to enhance user engagement and create a more dynamic user experience.

Entrance Tab

Entrance animations are motion effects applied to elements as they appear on the screen,

1. Entrance Animation: Enable the Entrance Animation switcher to work with it.
2. Animation Type: Set the animation type for the entrance( e.g.: Fade, Scale, Top, Bottom Medium, etc.)
3. Delay(ms): Set delay time to show the entrance animation.
4. Transition Duration(Ms): Set the duration of the transition.

Floating Tab

Floating animation is a dynamic effect where elements appear to float or move gently across the screen.

1. Floating Animation: Enable the switcher to show the floating animation.
2. Translate: The Translate function is used to move an element along the X and Y axes.
3. Rotate: The Rotate function is used to rotate an element around a specified point.
4. Scale: The scale function is used to resize an element along the X and Y axes.

5. Skew: The function used to distort an element along the X and Y axes
6. Opacity: This property that controls the transparency level of an element.
7. Easing Type: Set easing type that can be applied to CSS animations and transitions to create more natural and visually appealing motion effects.
8. Perspective: The perspective” is a property used in 3D transformations to create the illusion of depth and distance on a two-dimensional plane.

9. Delay(Ms): The “delay” property specifies a time interval before the animation or transition begins.
10. Transition Duration(Ms): The “transition-duration” property specifies the duration over which a transition effect occurs.

Transform

Transformations can be combined and applied simultaneously to create dynamic visual effects and animations on web elements.

The appearance changes will be visible in normal and hover states. Let’s customize it.

Translate

1. Translate: The Translate function is used to move an element along the X and Y axes.
2. translateX: The translateX() function in CSS is used to move an element horizontally along the X-axis.
3. translateY: The translateY() function in CSS is used to move an element vertically along the Y-axis.

Rotate

1. Rotate: The function is used to rotate an element around a fixed point determined by its center.
2. Rotate: Set value for rotation.
   

Scale

1. Scale: It allows you to specify scaling factors for both axes, controlling the element’s size relative to its original dimensions.
2. ScaleX: The function is used to resize an element along the X-axis only.
3. ScaleY: The function is used to resize an element along the Y-axis only.

Skew

The function is used to skew an element along the X and Y axes. It allows you to specify angles of skewing for both axes.

1. SkewX(deg): It allows you to specify an angle of skewing for the horizontal dimension of the element.
2. SkewY(deg): It allows you to specify an angle of skewing for the vertical dimension of the element.

Flip

Flipping an element involves reversing its appearance along either the horizontal or vertical axis.

Flip Horizontal

1. Flip Horizontal: Enable the flip horizontal switcher to work with Flip.
2. X Anchor Point: To specify an anchor point for transformations along the X-axis (e.g.: Left, Center, Right ).
3. Y Anchor Point: To specify an anchor point for transformations along the Y-axis (e.g.: Left, Center, Right ).

Flip Vertical

1. Flip Vertical: Enable the flip vertical switcher to work with Flip.
2. X Anchor Point: To specify an anchor point for transformations along the X-axis (e.g.: Left, Center, Right ).
3. Y Anchor Point: To specify an anchor point for transformations along the Y-axis (e.g.: Left, Center, Right ).

By following this you can make the layout more interactive and visually stylish.