The Tabbed Content Block allows you to organize and present your content in separate tabs. This block is much helpful when you have multiple sections and categories to present your information. 

This block is also useful in presenting lots of information in a limited space. Let’s explore how to use the Tabbed Content Block.

Adding Tabbed Content Block #

• Open the post/page where you want to add Tabbed Content.
• Press the Plus (+) icon to add a new block.
• Type Tabbed Content in the search box.
• Click the Tabbed Content block once it appears below.
• You’ll see the block added to the post/page.

General Settings #

• Clicking the Plus (+) icon on the tab row, you can increase the tabs you want.
• To delete any particular tab, click the tab first > hover the cursor on it > press the Minus (-) icon.

• To add content, select a tab first.
• Press the Plus (+) icon of the Gutenberg block editor.
• Select the block of content you want to add.
• You may add text, image, GIF, and video content.
• We have added a text content to the tab you can see.

Style #

• To colorize, select the Tabbed Content Block first.
• Expand the Tab Style section from the right sidebar.
• You’ll get options to color the Tab Color, Active Tab Color, Tab Title Color, and Active Tab Title Color.

• From the Tab Type section, you can select any of the three styles: Tabs, Pills and Underline.
• You can set whether horizontal or vertical layout for the tab from the Tab Layout section.
• You can also set separate layouts for mobile, tablet, and desktop if you want.

Conclusion #

The Tabbed Content Block is useful in numerous use cases. You can use this block to showcase multiple product features, pricing plans, restaurant menus, FAQs, and more to make sure an intuitive browsing experience for web visitors.

Using this block, you can improve the quick navigability and readability of your content. With further customization and stylization, you can make this block a perfect fit for your web design and branding.