How to use the Tabs block by Zoloblocks

This documentation provides comprehensive insights into the Tabs Blocks developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Tabs block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Tabs list and its child block.
3. After on the right side, Click on the Block. Then the tab details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab (Parents Blocks)

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences. Customize for the Parent’s blocks. Any changes applied will all items.

General Section

Go to Basic > General

This section provides control for the general section for tabs,

1. Initial Open Item: Set the number for the initial open item.
2. Layout Type: Set the layout for the tabs ( e.g.: Horizontal, Vertical ).
3. Content Style: Set premade style for the tab’s content (e.g.: Style1, Style2, Style3)

4. Show Icon: Enable the switcher to show the icon for the tab item.
5. Show Title: Enable the switcher to show the title.
6. Show Description: Enable the switcher to show the description for the tab.

7. Show Active Indicator: Enable the switcher to show the active indicator.
8. Indicator Style: Choose the indicator style from the selector.

Alignment Section

Go to Basic > Alignment

Set alignment for the tabs item,

1. Tab Alignment: Set alignment for the tab.
2. Tab Content Alignment: Set the alignment for the tab content.
3. Icon Alignment: Set the alignment for the icon.

Spacing Section

Go to Basic > Spacing

Make spacing for the nav and tab-content following it,

1. Nav Spacing: Set spacing between the nav of the tabs item.
2. Tab-Content Spacing: Set space between the tabs and content.

Tabs Section

Go to Basic > Tabs

Make the tabs customization by following them,

Add new tab

1. Click on the ” + ” icon to add a new tab item. You can add as many as you want.

After adding a new item the new item will appear on the left.

Edit Tabs Content

By following this you can edit the tabs items,

2. Click on the carrot icon and the tabs option will open to customize,
3. Title: Set the title for the tabs item.
4. Description: Set description for tabs item.
5. Select Icon: Select an icon from the icon library by clicking on it.

Remove Tab Item

6. Click on the ” trash ” icon to remove any tab item.

Style Tab (Parents Blocks)

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Tabs Wrap Section

Go to Style > Tabs Wrap

Set the tabs wrap by following this,

1. Background: Set the background for the tabs wrap.
2. Border: Set the border for this.
3. Border Radius: Set the border-radius.

4. Padding: Set padding for the tabs wrap.
5. Box Shadow: Set box shadow for the items.

Tab Item Section

Go to Style > Tab Item

Make the tab item visually good by following the controls, The changes will apply to the appearances,

1. Width: Set the width for the tab item.
2. Border Radius: Set the border corner edges rounded by setting the radius.
3. Padding: Set padding for the tabs.

Normal State For Tab

The changes will appear in the normal state,

3. Border: Set the border for the tab item.
4. Box Shadow: Make a shadow for the tab item by setting the box shadow.
5. Background: Set the background for the tab item.

Hover State For Tab

The changes will appear in the hover state, Hover over the mouse and you will see the changes,

7. Border: Set the border for the tab item.
8. Box Shadow: Make a shadow for the tab item by setting the box shadow.
9. Background: Set the background for the tab item.

Active State For Tab

The changes will appear in the Active state, When the tab is active the changes will be visible.

7. Border: Set the border for the tab item.
8. Box Shadow: Make a shadow for the tab item by setting the box shadow.
9. Background: Set the background for the tab item.

Icon Section

Go to Style > Icon

Make the icon more customizable by following these controls,

1. Size: Set the size for the Icon.
2. Border: Set the border for the icon.
3. Border Radius: Make the border-radius by following it.

4. Padding: Set inner spacing by following it.
5. Margin: Make space from the outer by setting the margin.

Normal State For Icon

The customization will appear in the normal state,

6. Color: Set the color for the icon.
7. Background: Set the background for the icon.

Hover State For Icon

The customization will appear in the hover state, Hover over the mouse and you will see the changes,

8. Color: Set the color for the icon.
9. Background: Set the background for the icon.

Active State For Icon

The customization will appear in the Active state, Can see the change for the active icon.

8. Color: Set the color for the icon.
9. Background: Set the background for the icon.

Title Section

Go to Style > Title

Customize the Title by following these,

1. Typography: Set typography for the title.
2. Margin: Set margin for the title.

Normal State For Title

Title changes will appear normally,

3. Color: Set color for the Title.

Hover State For Title

Title changes will appear on mouse hover,

4. Color: Set color for the Title.

Active State For Title

Title changes will appear for the active mode,

5. Color: Set color for the Title.

Description Section

Go to Style > Description

This section provides control for the description,

1. Typography: Set typography for the description.
2. Margin: Set margin for the description.

Normal State For Description

You can customization descriptions for the normal state,

3. Color: Set Color for the description.

Hover State For Description

The changes will be visible on mouse hover,

4. Color: Set Color for the description.

Active State For Description

The changes will be visible on the active tab,

4. Color: Set Color for the description.

Active Indicator Section

Go to Style > Active Indicator

Make the appearance changes for the active indicator,

1. Indicator Color: Set the color for the active indicator.
2. Active Indicator Height: Set the height for the activated indicator.

Select Tab ( Child Block )

Select the child tab from the tabs parent block,

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Select the Tab Child block under the Tabs List parent blocks.

Add Block for the Child Tab

3. Click on the ” Add Block ” icon to add a new block for the tab.

4. Search by the block name
5. The searched block will appear and select the block, You can select any block that you want to work with.

6. After adding the block you will see it belongs to the child tab.

7. All the blocks appear to belong to the tab (child block). By following this you can add blocks for the tabs.

Extra Tab Controls

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial Coming Soon!

Thanks for being with us!