Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Create Tabbed Content in WordPress

How to Create Tabbed Content in WordPress

While indispensible in transferring information, large chunks of text have a tendency of looking scary and/or boring – not good UX, in either case. Readers prefer short sentences and smaller blocks of text. But what if there were a way to make your text appear smaller, though it is only broken down into more “digestible” units, without a need to sacrifice any of the important details?

Tabs save space and make your text better organized and more manageable, making them especially useful for user instructions and similar text. It is also a great way to make very long text seem shorter and more friendly to the reader. If you feel like your WordPress website could use tabbed content, you are in the right place.

WordPress does not offer this functionality by default, unfortunately. However, plenty of themes with the Tabs functionality exist already, and these are always our first choice. If you don’t have the budget for a theme which has an in-build tab functionality, if you have already built a website using a theme you are loath to change, or prefer working from the ground up, there is an easy way to sort and organize your content into tabs using the Elementor page editor, or using a plugin. We will show you both.

But firstly, we would like to discuss tabs and why they are useful to you and attractive to your users. If you have already decided you want to use tabs to display your content, you can just jump down to the tab creation methods you prefer.

Why Are Tabs Useful?

Firstly, tabs allow you to organize your content into logical wholes. Your visitors do not need to navigate to different pages to maintain access to your content, and can easily find the bit of it they need by clicking on the tab heading. Think of it as having multiple tabs open in your browser, except all the tabs are related to each other and all concern what you came for in the first place: a bulk of content is instantly easily legible. This, of course, goes only for information which does not need to be compared or accessed simultaneously.

Secondly, the order of the tabs is content in itself. Think of your tab headings as chapter titles. They should correspond to a logical order of steps (in an instruction text, for instance), or levels of complexity or difficulty, allowing your users to know at a glance which parts of your content are immediately relevant to their interests.

And thirdly, tabs mean interactivity. They contribute to user engagement, which makes for an overall better experience, as the user gets better control of the content they want to see. Also, for users with shorter attention spans, more interactivity means easier getting around. Of course, this means it is up to you to create a logical and intuitive system of tabs in the first place. Otherwise, the users will be easily frustrated and give up.

Now, if you think your content can benefit from being organized into tabs, let’s get down to the brass tacks.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

How to Create Tabs in Elementor

If you are using Elementor, adding tabs is about as easy as it gets. To add tabs to a post, simply find the Tabs widget in your left-hand side menu and drag it to where you want it.

Elementor Search Tabs

Next, you can edit your tab content by changing the tab Title & Description, copy tabs using the copy icon, add new tabs by clicking on the +ADD ITEM button, and change the tab Type between horizontal and vertical. You can use the Style ab to change typography and colour of title and text, but we will not be touching those options, nor the Advanced options for this demonstration.

With Elementor’s drag-and-drop editing system, your tabs are ready in no time at all.

Elementor Edit Tabs

The same works with a page, or any widget-ready space.

If you want more advanced options, such as nested tabs and more style options, you may want to try the Essential Addons for Elementor plugin. Its Advanced Tabs widget offers many more styling options than the standard Tabs widget we have demonstrated here.

How to Create Tabs Using a Plugin

The plugin we will be using is WP Tabs. Once you have installed and activated the plugin, find it on your list of Installed Plugins and click to Add Tab Group.

Installed Plugins

At the top of the Add New Tab Group you will find the group name field (we named our group Lorem ipsum). You will also want to take note of the Publish button. You will need to publish your tab group in order to use it. Finally, you will find the Add New Tab button.

Add New Tab

We will use the Add New Tab button to generate three tabs, and populate our tab group with some placeholder text and media, in this case an image. Editing a tab works exactly like editing a post.

WP Tabs

Scrolling down, we see the Tabs Settings tab. We have left all the settings on their default values, but here you can change the Tabs Layout between Horizontal and Vertical (only available with the Pro version of the plugin), Tabs Alignment between Left and Right, change the Activator Event (when tabs open or close) from between On Click and Mouseover (on hover), and toggle the Preloader (this option, when left ON, hides the tabs until the entire page is loaded). Finally, at the very bottom, you will find the Shortcode for this tab group which you need to copy.

WP Tabs Shortcode

Once you are satisfied with your settings, you need to scroll all the way up and Publish your tab group. Having copied the shortcode, you can now paste it anywhere you want it.

If you are using the Gutenberg block editor and want to show your tabs as part of a post, you need to click the + sign, create a shortcode block, and paste your shortcode in its field.

If you are working with the WPBakery Page Builder, the procedure is more or less the same: you need to use the shortcode element and supply it with the shortcode for your tab group. For the Classic editor, simply paste the shortcode where you want it while making sure you are using the Text editor. Of course, if you prefer your plugin-generated tab groups to Elementor’s tab widget, you can use Elementor’s Shortcode widget instead.

Tabs Shortcode

In any case, your tabs, as configured, will appear in the post, and the procedure is the same for all other widget-ready areas.

Tabs Preview

In Conclusion

As you have seen, sorting and organizing your content in tabs is easy, takes next to no time at all, and doesn’t need to cost any money. Our first suggestion is always to use a theme which already has a tabs functionality, as it is bound to have been tested and proven to work with the theme, but you can achieve a similar effect with Elementor or a plugin. If you feel your content could benefit from them, there is no excuse not to try them.

Post your comment

Comments0