How to Add Vertical Tabs in WordPress

Using tabs is a great way of presenting information in an organized manner on a website. Whether it’s on a blog post or a landing page, tabs are used very commonly on websites these days. 

In this article, I’ll show you how to add vertical tabs in WordPress. This will help you add tabbed content to your website quickly and without writing any custom code. 

That being said, let’s jump straight into it. 

How to Add Vertical Tabs in WordPress

To add vertical tabs in WordPress, we’ll be using the UItimate Blocks plugin. It is a free Gutenberg block plugin that comes with 18 awesome blocks to help you create better content on your website. 

The plugin comes with a Tabbed Content block that we’ll be using to add vertical tabs to our content. 

Head over to your WordPress Dashboard > Plugins > Add New and search for ‘Ultimate Blocks’. Install and activate the first plugin in the list as shown in the image below. 

After activating the plugin, go to your post or page where you want to add the vertical tabs. Then click on the + icon to add a new block and search for ‘Tabbed Content’. Alternatively, you can also add the block by typing /tabbed content and adding the block. 

This is what the block looks like when you add it to your post/page. Currently, the block has horizontal tabs. 

To change it to vertical tabs, go to the block settings on the right sidebar and change the tab layout to Vertical

Now, the tabs are switched into a vertical layout as shown below: 

You can now go ahead and start adding any content to your tabs. The Tabbed Content block in the Ultimate Blocks plugin lets you add any block inside your tab content. 

You can also go ahead and style your tabs from the block settings. It allows you to customize the tab colors, tab style, and more. 

So, that’s how you can add vertical tabs in WordPress. 


Conclusion 

I hope this tutorial helped you learn how to add vertical tabs in WordPress. Using the Ultimate Blocks plugin, you can quickly and easily create tabbed content and make your tabs both horizontal and vertical. 

Moreover, the block also offers responsive controls allowing you to display different tab layouts based on devices. 

If you have any questions or doubts regarding this tutorial, feel free to ask them in the comments section below. I’d be happy to help you out with your queries. 


Also Read:

Leave a Comment

Your email address will not be published.