--- title: Tabs Block description: How to add tabbed content to WordPress with the Ultimate Blocks Tabs block, including tab anchors, accordion view on mobile, every style option and the Pro tab features. url: "https://ultimateblocks.com/docs/tabbed-content-block-2/" updated: "2026-11-07" category: "Content & Layout Blocks" --- # Tabs Block 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. | **Block name in the editor** | Tabs | | --- | --- | | **Plan** | Free (tab icons, tab images, secondary text, call to action tabs and sticky tabs need Pro) | | **Best for** | Product features, pricing plans, menus, specs, FAQs and any content you want to group in less space | | **Live demo** | [See the Tabs block in action](https://ultimateblocks.com/tabbed-content-block/) | ## 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 the Tabbed Content Block](https://ultimateblocks.com/wp-content/uploads/2023/05/Add-the-Tabbed-Content-Block.png) ## 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. ![Create Tab on the Tabbed Content Block](https://ultimateblocks.com/wp-content/uploads/2023/05/Create-Tab-on-the-Tabbed-Content-Block.png) ### 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. ![Add Content to the Tabbed Content Block](https://ultimateblocks.com/wp-content/uploads/2023/05/Add-Content-to-the-Tabbed-Content-Block-1.png) ## 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. ![Change Tab Type and Tab Layout](https://ultimateblocks.com/wp-content/uploads/2023/05/Change-Tab-Type-and-Tab-Layout.png) ### 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. ![Add Tab Color](https://ultimateblocks.com/wp-content/uploads/2023/05/Add-Tab-Color.png) ### 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](https://ultimateblocks.com/docs/how-to-add-icons-images-and-links-to-tabs/). [Get Ultimate Blocks Pro](https://ultimateblocks.com/pricing/) to unlock these features. ## Extensions you can use with this block - [Visibility Control](https://ultimateblocks.com/docs/visibility-control/) (Pro): show the block only to certain users or on a schedule. - [Animation](https://ultimateblocks.com/docs/animation/) (Pro): animate the block when it comes into view. - [Responsive Control](https://ultimateblocks.com/docs/responsive-control/): hide the block on desktop, tablet or mobile. - [Custom CSS](https://ultimateblocks.com/docs/custom-css/): add your own CSS to this block only. - [Saved Styles](https://ultimateblocks.com/docs/how-to-save-a-style/) (Pro): save your design and reuse it on other posts. ## Frequently asked questions **How do I add tabs in WordPress without code?** Install the free Ultimate Blocks plugin, add the Tabs block in the block editor, and click the + icon on the tab row to add more tabs. Each tab can hold any blocks. **Can I link directly to a specific tab?** Yes. Turn on Use tab anchors in the Tab Anchors panel and give the tab an anchor. A link ending in #your-anchor opens the page with that tab already open. **How do I change which tab is open by default?** Open the General panel in the Settings tab and pick a tab in Initial Open Tab. **Can tabs turn into an accordion on mobile?** Yes. In the Styles tab, open Tab Layout, switch Mode to Tablet or Mobile, and choose Accordion. Desktop visitors still see normal tabs. **Can I make vertical tabs?** Yes. In Tab Layout, set Tab Display to Vertical. You can use a different layout on tablet and mobile. **Is the Tabs block free?** Yes. The Tabs block is part of the free Ultimate Blocks plugin. Tab icons, tab images, secondary text, call to action tabs and sticky tabs need Ultimate Blocks Pro. ## Related docs - [How to add icons, images and links to tabs](https://ultimateblocks.com/docs/how-to-add-icons-images-and-links-to-tabs/) - [Accordions (Content Toggle) block](https://ultimateblocks.com/docs/content-toggle-block/) - [Expand block](https://ultimateblocks.com/docs/expand-block/) - [Content Filter block](https://ultimateblocks.com/docs/content-filter-block/) - [Responsive Control](https://ultimateblocks.com/docs/responsive-control/)