No results found. Try again with different words?

Search must be at least 3 characters.

‹ BACK TO DOC

Tabs Block

Tabs block one of the most requested features is being introduced in v1.21.0 and above. With tons of customizations, styling and layout options that helps create Tabs in just a few clicks.

Tabs Block

Let’s dive in and take a look at some features –

Key Features –

  • Apply different Vertical layout styles and Horizontal Layout styles respectively for Desktop, Mobile, and Tablet view.
  • Select a Stack mobile design.
  • Set Border, Margin, Padding Stylings to the Tab Header and Tab body
  • Choose which tab to set Open from the Initial Open Tab setting
  • Add Icon, and modify Icon stylings in the tab header.
  • Set Tab Header alignment
  • Style with body-color stylings and tab title color styling
  • Icon Position and Spacing feature
  • Box-shadow styling
  • Add any child block or multiple child blocks inside tabs body

Tabs Style

This section will help you select the right style for your Desktop / Tablet / Mobile view with further options to choose from 10 different layouts with 5 each of Horizontal and Vertical Styles.

Tabs Style

Tabs Title Settings

This section provides some options which has the setting for Initial Open Tab. Simply, we need to select the tab which will open by default.

Alignment: This option aligns the Header Title under the Vertical Layout styles or while you have enough width on the Horizontal Layout styles.

Enable Icon: This option enables the Icon and displays another section which will allow you to select the Icon, Icon Color, Icon Size, etc.

Tab Title Margin/Title Padding: As the name suggests you can manage the margin and spacing of the Tab title and also other Color and Typography options.

Tabs title setting

Tabs Body Settings

This section allows styling the body content of the tab blocks.

Body Background Color: This option will help choose from the default or custom color for the Body background color of the Tab block.

Body Text Color: This option will help choose from the default or custom color for the Body text color of the Tab block.

Tab Body Margin: This option will help manage the body margin of the Tab block.

Body Padding: This option will help manage the body padding of the Tab block.

Tabs body settings

Border Settings

Border Style: This option allows selecting from the styles like Solid, Dashed, Dotted.

Border Color: This is an section right inside the Border Settings that allows managing the Border Color, Border Width, and Border Radius

Tabs border settings

Was this article helpful?


Did not find a solution? We are here to help you succeed.

Get access to growing library of 40+ innovative widgets and 300+ creative templates.

Ultimate Addons for Gutenberg Is Now Spectra - 

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Scroll to Top