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-
.png?alt=media&token=152e1c57-f85f-4e0b-b934-b9d9c6b06e28)
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.
.png?alt=media&token=c7a68b7e-790d-442e-86fd-32f4ecc7502f)
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.
.png?alt=media&token=df457e97-a7b4-4466-8ffb-6643b6e3328e)
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.
.png?alt=media&token=3b720eb7-89da-4431-aa51-e2c662190b39)
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.
.png?alt=media&token=b05ac837-9e13-420f-a858-9ca4a92dffbe)
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.
.png?alt=media&token=71b58e97-e3e2-440b-b991-ba4960dd65fe)
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.
.png?alt=media&token=a686842c-2dc3-4531-9367-d39c458eace6)
Margin
Offers individual options to customize the Top, Right, Bottom, Left margin around the block.
.png?alt=media&token=3607ab36-23d7-478e-b61b-4b15e08950be)
Padding
Offers individual options to customize the Top, Right, Bottom, Left padding around the block.
.png?alt=media&token=414899d0-8145-404f-be62-b2eb70d29346)
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.
.png?alt=media&token=badf8468-b617-4e01-b2fc-6f866d487d4f)
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.
