The Tabs block in Ultimate Blocks lets you split content into clickable tabs, so readers can switch between sections without leaving the page or scrolling. Each tab can hold any blocks, such as paragraphs, images, videos or lists. The block is free, and Ultimate Blocks Pro adds tab icons, tab images, secondary text, call to action tabs and sticky tab navigation.

What you can use it for #

• Show product features, specifications and reviews in separate tabs on one page.
• Compare pricing plans or service packages side by side without a long page.
• Organize restaurant menus, course modules or event schedules by category.
• Group instructions for different platforms, for example Windows, Mac and Linux.
• Turn tabs into an accordion on phones so content stays easy to read on small screens.

How to add the Tabs block #

1. Open the post or page in the WordPress block editor.
2. Click the + (Block Inserter) button.
3. Search for Tabs and click the Ultimate Blocks Tabs block to add it.
4. The block starts with one tab. Click the tab title to rename it, then add your content below it.

Add, remove and reorder tabs #

• Add a tab: click the + icon at the end of the tab row. The new tab opens so you can name it.
• Rename a tab: click the tab title and type. You can make the title bold or italic.
• Remove a tab: click the tab, then click the small x icon on it. You cannot remove the last remaining tab.
• Reorder tabs: drag a tab by its drag handle (the dotted icon) to a new position. Its content moves with it.

Add content to a tab #

Click a tab to make it active, then click inside the content area under the tabs and add blocks with the + button. You can use any block: text, images, galleries, videos, buttons or other Ultimate Blocks blocks.

Settings tab #

Select the block and open the block sidebar on the right. The Settings tab (gear icon) has these panels:

Tab Type #

Choose the look of the tab titles: Tabs (classic tabs), Pills (rounded buttons) or Underline (the active tab is underlined).

General #

• Initial Open Tab: choose which tab is open when the page loads. By default it is the first tab.

With Ultimate Blocks Pro, this panel also holds the tab icon, tab image, secondary text, call to action and sticky tab options. See the Pro features section below.

Tab Anchors #

• Use tab anchors: give each tab its own anchor so you can link directly to it.
• Anchor for current tab: type an anchor for the selected tab (spaces are removed). For example, with the anchor pricing, a link to yourpage/#pricing opens the page with that tab already open. Select each tab in turn to give it an anchor.

Styles tab #

Switch to the Styles tab (half-circle icon) to change the layout and look of the block.

Tab Layout #

Use the Mode buttons (Desktop, Tablet, Mobile) to set a different layout for each screen size:

• Tab Display (desktop): Horizontal shows the tabs in a row above the content. Vertical shows them in a column next to the content.
• Tablet Tab Display and Mobile Tab Display: choose Horizontal, Vertical or Accordion. Accordion turns the tabs into collapsible panels on that screen size, which works well on phones when you have many tabs.

Color #

• Tab Color and Active Tab Color: background of the inactive and active tab titles. These are hidden for the Underline type (unless tablet or mobile uses Accordion).
• Tab Title Color and Active Tab Title Color: text color of the inactive and active tab titles. With the Underline type, the active title color is also the underline color.
• Content Color and Content Background: text and background color of the tab content area.

Border #

• Tab Buttons Border Radius: round the corners of the tab titles.
• Tab Contents Border Radius: round the corners of the content area.

Dimension Settings #

• Padding and Margin around the block.
• Gap: space between the tab titles and the content.

Pro features #

• Tab icons: add an icon to each tab title with the Tab Icon option.
• Tab images: show a small image in a tab title with Tab Image, and set its size with Image Height and Image Width.
• Secondary text: add a second line of text under a tab title, for example a short description or a price.
• Call to action tabs: turn on Convert current tab into call to action to make a tab title work as a link. Clicking it opens a URL instead of showing content, which is useful for a “Buy now” or “Contact us” tab.
• Sticky tab navigation: keep the tab titles on screen while readers scroll through long tab content. Use Apply on to choose Mobile only, Desktop only or Both, and set a Top offset in pixels so a sticky site header does not cover the tabs.

Read the full guide: How to add icons, images and links to tabs. Get Ultimate Blocks Pro to unlock these features.

Extensions you can use with this block #

• Visibility Control (Pro): show the block only to certain users or on a schedule.
• Animation (Pro): animate the block when it comes into view.
• Responsive Control: hide the block on desktop, tablet or mobile.
• Custom CSS: add your own CSS to this block only.
• Saved Styles (Pro): save your design and reuse it on other posts.

Frequently asked questions #

Related docs #

• How to add icons, images and links to tabs
• Accordions (Content Toggle) block
• Expand block
• Content Filter block
• Responsive Control