How to Create Tabs in WordPress to Organize Content

If you have to publish lots of information of various types on blog posts or pages concisely, tabs could be a helpful web element to do this. They allow you to organize content in separate sections so users can selectively explore and find the information they need.

With the Gutenberg block editor, you can easily add tabs to your blog posts. In this article, we’ll show you how to create tabs in WordPress to organize content. Before that, we’ll answer some basic questions.

Tabs serve as a navigational tool, allowing you to display lots of information in various sections. As a result, users don’t have to depend on excessive scrolling to explore vast information on your post or page.

They provide a structured format so users can find the specific information they seek by clicking on them. People normally use the tab element to display their web pages in the hero and header sections.

But today, with the help of certain Gutenberg plugins, you can create tabbed content anywhere on any post or page.

Tabbed content works exceptionally when you have a large amount of information that needs to be displayed in a tabular format. This element is particularly effective in organizing the following information types.

Product Descriptions: You can use this block to cover product specifications, features, and customer reviews in separate tabs.

Service Offerings: If you have multiple service plans or packages, showcasing them in separate sections is better.

Pricing Plans: It is already a common practice to display multiple pricing plans in different tabs on websites.

FAQs: Although most people love to use FAQ and content toggle blocks for the FAQ section, you can also use the tab block to cover this section.

Comparative Information: If there is any information that would be better presented in a side-by-side section, the tab block is useful in this case.

How to Create Tabs in WordPress

The default block library of Gutenberg doesn’t have the tab block. You must use a plugin like Ultimate Blocks to have it in the block library. The plugin has 25+ additional plugins by which you can take your web design and content marketing to the next level.

Step 01: Install and Activate the Ultimate Blocks Plugin

Go to Plugins > Add New Plugin. Type Ultimate Blocks in the search bar on the top-right corner. Install and activate the plugin after it appears below.

Install and activate the Ultimate Blocks plugin

Step 02: Insert the Tabbed Content Block

Open a post or page. Find the Tabbed Content block by pressing plus (+) button. Once you find the block, add it to the Gutenberg editor.

Add the Tabbed Content block to the Gutenberg editor

Step 03: Add New Tabs and Rename Them

By clicking the plus (+) icon, you can add as many tabs as you want to the block.

Add new tabs to the Tabbed Content block

Take your cursor and click on the tab one by one. You’ll be allowed to rename them. So, rename the tabs based on the content you’ll display.

Rename tabs of the Tabbed Content block

Step 04: Add Content to the Tabs

Select a tab where you want to add content. Then place the cursor in its editor. You’ll see the plus (+) button of the Gutenberg editor appeared. Click and choose the content block you need.

Add content to the tab

For the tutorial, we have added the text and image blocks to the tab. The same way, you can add other blocks as well to the tab. Do the same in other tabs.

Texts and image added to the Tabbed Content block

Step 05: Customize the Tabs

Come to the right sidebar while keeping the Tabbed Content block selected. You’ll find various options to configure, like the Tab Types, Tab Anchor, and Responsiveness.

Once you upgrade to the premium version, you’ll be allowed to add icons to the tab titles, secondary texts, and call to action buttons to the tabs.

Configure settings of the Tabbed Content block

Next, come to the Styles tab. You’ll get options to colorize the tabbed content, change the tab layout, and set a new dimension. Hope you can explore and do these yourself.

Stylize the Tabbed Content block

Conclusion

The Tabbed Content block coming with the Ultimate Blocks plugin is automatically responsive on all devices. As a result, you don’t have to spend much time on making it device responsiveness.

But what you need to do is placing the block on a suitable place that makes your entire post/page perfect. Explore our another post – how to create a call to action button in WordPress.



The Tableberg Team