Tabs

Tabs block allows you to display key information in an interactive manner that supports custom-made nested tabs designed to attract your users.

How To Add The TabsBlock

1. Open a page or a post and click on the plus icon to add a new block and look for the Tabs or you can search for it if it doesn’t pop up quickly for you.

2. By default, you'll get the below design-

How To Configure The Tabs Block

Child Blocks and Tabs Settings:

New tabs can be added by clicking the on ‘plus’ sign. After hovering over the tab, there are options to reorder or delete the tab. To add a child block or content inside the tab, you can simply click inside the body of the tab and select the blocks you want to add.

Parent Block Settings:

Switch to the 'Content' tab to configure the parent Tabs block.

Tabs

• Position - Select Horizontal or Vertical position for tabs.

• Alignment- Tabs can be aligned to the left, center, or right when the position is Horizontal and left, right when the position is set to Vertical.

How To Style The Social Share Block

Under the Style Tab, various style settings for Tabs, Title, and Content for the Tabs block are available.

Tabs

• Border Width - Set the border width of the active tab and its content area from here.

• Border Color - Set the color of the border.

• Background Color - Set the background for the active tabs and their content area.

Title

• Color - Set the title text color of the non-active tabs.

• Active Color - Set the title text color of the active tab.

• Typography - Under the Typography section, you can set typography options such as Font Family, Responsive Font Size, Font Weight, Line Height for the title.

Content

• Color - Set the content text color of the tabs.

• Typography - Under the Typography section, you can set typography options such as Font Family, Responsive Font Size, Font Weight, Line Height for content text.

Advanced Settings

Motion Effects

• Entrance Animation - Under Entrance Animation you can provide animation for the block. Various options like Animation name, Direction, Repeat, Duration, Delay, Curve are available to add customized animation for the block.

Margin

Offers individual options to customize the Top, Right, Bottom, Left margin around the block.

Padding

Offers individual options to customize the Top, Right, Bottom, Left padding around the block.

Background

You can select a background type for the block from here. The options available are:

• Classic

• Gradient

Opacity: You can set the opacity for background from here.

Border

• Border Style: You can select the style of the border as solid, dotted, double, dashed, etc. You can also choose to hide it.

• Border Width: Set a width for the border from here.

• Border Color: You can give color to the border from here.

• Border Radius: You can give the border radius to the box from here.

• Box Shadow: You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.