See the Advanced Tabs block live on the demo site (opens in a new tab)

Adding the block#

1. Click the “+” (Block Inserter) button.
2. Search for “Advanced Tabs” and select it. It is added with three tabs.
3. Click a tab title in the editor to switch to it, then add blocks to its content area.
4. To add a tab, click the Add Tab button below the tab titles.

Parent block: Advanced Tabs#

Settings on the parent control the layout and look of all tabs.

General tab#

Configuration

Setting	Description
Tab Trigger	How visitors switch tabs: Click or Hover.
Tab Orientation	Horizontal (tab titles in a row) or Vertical (tab titles in a column beside the content).
Horizontal Tab Alignment	(Horizontal) Puts the tab titles at the Top or Bottom of the content.
Vertical Tab Alignment	(Vertical) Puts the tab titles on the Left or Right.
FullWidth Tabs	(Horizontal) Stretches the titles to fill the full width.
Tab Space	Gap between tab titles, in px.

Design tab#

Icon/Image

Setting	Description
Icon Color / Active Tab Icon Color	Icon color for normal and active tabs.
Icon Font Size	Size of the tab icons.

Alignment

Icon/Image Alignment: position of the icon or image next to the title text: Top, Left, Right, or Bottom.

Tab Title

Use the Title / Active Title switch to style normal and active tabs separately.

Setting	Description
Tab Background Color / Tab Text Color	Colors of inactive tabs.
Active Tab Background Color / Active Tab Text Color	Colors of the selected tab.
Typography	Font settings for tab titles.
Border / Radius	Border and rounded corners of each tab title.

Container

Padding, Margin, Border, and Radius of the tab content area.

Child block: Advanced Tabs Item#

Each tab is an Advanced Tabs Item. Select it (click the tab, then use the block breadcrumb or List View) to edit its title and button.

General tab#

Tab Content

Setting	Description
Title Type	What the tab title shows: Text, Text with Icon, Text with Image, Only Icon, or Only Image.
Title	The tab label.
Icon / Image	Pick an icon or upload an image, depending on the Title Type.

Button

Setting	Description
Show Button	Adds a button at the bottom of this tab’s content.
Button Text / Button Link URL	Label and link of the button.

Design tab#

Panel	What it controls
Icon/Image	Icon color (normal and active), icon size, and Image Size for this tab.
Button	Button Alignment, text and background colors, and Use Icon on Button (icon, position, show on hover, icon color).
Container	Padding, margin, border, and radius of this tab’s content.

Advanced tab#

See Common Advanced Settings.

Tips#

• Vertical tabs work best for 4 to 8 tabs with short titles. Use Horizontal for 2 to 5.
• Hover trigger is fast on desktop, but Click is more predictable on touch devices.
• Use Only Icon titles for a compact, app-like look, and add text inside the tab content.