How To Add Tabbed Content In WordPress For Gutenberg

Wondering how to add tabbed content in WordPress for Gutenberg is familiar. But newbies still need help using it and wonder if it is required. In this blog, we’ll share the details on how to use tabbed content, why you should use it, and how easily you can do it in a few steps.

To create a user-friendly website, organize content into accessible sections. One effective method is by adding tabbed content to your WordPress site.

Tabbed content mostly allows you to group related information into tabs. It makes it easier for visitors to navigate and find the content they want. Without blabbering let’s get started, shall we?

What is Tabbed Content?

Tabbed content is a design where content is split into sections, each linked to a tab. Users can switch between tabs to view different sections without scrolling or leaving the page. This design is common in websites, apps, and software to organize information efficiently.

Why Add Tabbed Content Sections?

Tabbed content provides several benefits that enhance both user experience and website functionality. Below are some of the primary reasons for adding tabbed content sections to your WordPress site:

• Quick navigation: Easily found and accessed.
• Focused Attention: Grouping related content under tabs helps users focus on one section at a time. This reduces information overload.
• Enhanced Aesthetics: Tabs contribute to a cleaner and more organized page layout.
• Efficient Space Use: Tabs let you show more content in a smaller space keeping your pages uncluttered.
• Lower Bounce Rates: Tabs improve navigation and user engagement reducing bounce rates and boosting SEO.
• Faster Load Times: Tabs load only the content you need. This can speed up page load times.

How To Add Tabbed Content In WordPress For Gutenberg Without A Plugin?

Creating tabs within the WordPress Gutenberg editor enhances your content’s readability and organization. You can create tabbed content using the default blocks available in Gutenberg.

Step 1: Prepare Your Content

Before you start creating tabs, plan out the content you want to include under each tab. This will make it easier to structure your content during the design process.

Step 2: Create a New Section for Tabs

Start by creating a new post or page, or edit an existing one where you want to add the tabs. Click the “+” button to add a block. Search for the Group block and select it. This block will serve as the container for your tabs.

Step 3: Design the Tab Titles

Inside the Group block, add a Columns block. Choose the number of columns equal to the number of tabs you want to create. For example, if you want three tabs, select a three-column layout. (optional)

Within each column, add a Buttons block. Inside each Button block, add a Button block for the tab title. Customize the button text to reflect the tab content (e.g., “Tab 1”, “Tab 2”, “Tab 3”).

Step 4: Add Links

Click each tab button and a temporary link using the “#tab”. By this, you can link the individual button with the specific content.

Step 5: Add Navs

Click on the mother tab and centralize it. Now click on the Advanced Tab of the block and add CSS “tabs-nav”. We will need this for later coding purposes.

Step 6: Add Media & Text

Now click on “+” and select Media & Text. This widget will allow you to add images and content at the same time.

Add images and content that you want to show. You can add spacing and padding.

Step 7: Duplicate

You can create more content for other tabs. Or you can duplicate the first one and edit the contents.

Step 8: Class Id

Now add class and the same id as we added on button links. Click on Media & Text > Block > Advanced and add an HTML anchor. Add content to Additional CSS.

Step 9: Publish

Now publish the page. But this is not the end. There are a few steps to follow.

Step 10: Snippets

Now go to your WordPress dashboard and enable the Snippets plugin. If you already have it, click on Add New Snippet and create a snippet to connect the tabs. Copy the code, paste it into the created snippet, and save the changes.

<script src=’https://code.jquery.com/jquery-3.6.0.min.js’></script>    

<script>

$(document).ready(function(){

$(‘.tab-content’).hide();

    $(‘.tab-content:first’).show();

  $(‘.tabs-nav .wp-block-button__link’).click(function() {

    let currentTab = $(this).attr(‘href’);

    $(‘.tab-content’).hide();

    $(currentTab).fadeIn();

    return false;

  });

});

</script>

Your snippet should look like this. Make sure you add the code in the HTML section. And do select “<>Display in site section”. After saving activate it.

Step 11: Preview

Now view the page and see if everything is working or not.

How To Add Tabbed Content In WordPress For Gutenberg With ZoloBlocks?

If you’re not comfortable working with code or want a more user-friendly approach, you can use a plugin like ZoloBlocks to add tabbed content. ZoloBlocks is a user-friendly block library plugin for Gutenberg.

It comes with a variety of pre-designed widgets that make your website creation more flexible and fun. We have shown you can add tabs to your WordPress website with ZoloBlocks in four simple steps.

Step 1: Install ZoloBlocks Plugin

Go to your WordPress dashboard. Navigate to Plugins > Add New. Search for “ZoloBlocks“. Install and activate the plugin.

Step 2: Add ZoloBlocks Tabbed Content Block

Open the post or page where you want to add the tabbed content. Click on the “+” and search for “Tabs” in the block search bar. Select the Tab block provided by ZoloBlocks.

Step 3: Add Content

Inside the tabs, you can add content, images, buttons, etc just the way you want. Here we have selected Tabs > Tab 1 > Column (50:50) > Image > Paragraph. Or you can add Media & Text for a much easier process.

Step 4: Publish Your Changes

After you’ve customized the tabbed content, simply publish or update your page. ZoloBlocks will handle the necessary styling and scripting.

Final Thought

Adding tabs to your pages can significantly improve how information is displayed and accessed. This makes it easier to organize content and enhance user experience. You can do this through coding or by using a plugin like ZoloBlocks.

One big news is that ZoloBlocks is expanding and now more creative widgets have been added to it. If you want to experience something new and different, ZoloBlocks is your ultimate source. Get ZoloBlocks now!

Frequently Asked Questions