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.
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.
Elementor is one of the most popular page builders out there, and for good reason. It’s fast, has an intuitive drag-and-drop interface, and even its free version offers lots of useful widgets, including tabs. However, the basic tabs widget for Elementor is, well, basic. Fortunately, our proprietary set of advanced elements, Qi Addons For Elementor, has you covered. Our (completely free) plugin contains a selection of 60 widgets which greatly expand Elementor’s original capabilities and each one is designed with versatility in mind.
And among them you shouldn’t be surprised to find beautiful and functional solutions for both horizontal tabs and vertical tabs. In this section, we will show you how to create a set of horizontal tabs, while the vertical tabs will be demonstrated in the section below.
The first thing you need to do is to install and activate the Qi Addons For Elementor plugin. Just make sure you also have the latest version (free or premium) of Elementor installed beforehand. Once you have done that, you will have 60 brand-new elements to choose from.
We have a video tutorial to show you how you can use Qi Addons to create horizontal tabs. If you prefer a text tutorial, just scroll right down:
Adding a Qi widget works just the same as it does with other Elementor widgets: simply drag it from the left-hand side menu to the desired widget area.
It will come with two placeholder tabs filled out with Lorem ipsum text. Now, while the element is selected, you will see the General tab opened by default. You can use the + Add Item button to add a tab, or Item. And you can use each Item section to change the title and contents of each tab. We have shortened the placeholder text, added an item (a third tab), and changed the tab titles.
Now, to really make our tabs stand out, we need to take a look at the styling options. They are located in the main (Style) section of the Style tab.
The first option is the Individual Tab Alignment. This option is only relevant if you choose to change the title spacing, which we will explain later. Keeping it centered, as we have, will snap the title to the center of the protruding bit of the tab.
Next down, we have some tab title options. You can change the Heading tag, but we will leave it as is. Clicking on the pencil icon will uncover some additional typography options. They are all more or less self-explanatory. We will only slide our Size slider to change the font size to 21 pixels.
In the drop-down menus you can find the options for font Weight (boldness), case (under Transform), italics and other typography styles (under Style), and underlining, strikethroughs and similar effects (under Decoration).
Next down is the Normal – Active/Hover toggle. You can use this toggle to select which tabs’ settings you mean to change. While the toggle is set at the default Normal, every option we modify will affect the inactive tabs. If we switch it to Active/Hover, we will get a new set of options that affects the look of the tabs when they are active or hovered on.
To make the inactive tabs stand out a little better, we’ll need the next option down: Title Color. Clicking the icon on the right-hand side, we can pick or enter the hex code value. We went with #000000 for black.
But now we don’t know which of the tabs is currently active. That’s not a problem: all we have to do is switch the toggle to Active/Hover and find the colour option again. This time, we have gone with #EE5151 for a brick red. It goes without saying that you can use whichever colours fit your website’s overall style.
We will select the same colour for the Title Active/Hover Underline Color below, to make it stand out even more.
Simply selecting the colour will not show the underline, though. We will also need to give it a thickness and position it. We will set the Title Active/Hover Underline Height slider to 3 pixels, giving our underline some heft. The Title Active/Hover Underline Offset governs the position of the underline in relation to the tab title. We will set it at -2 pixels, a little bit away from the title, so it doesn’t touch the tail of the Y. The Title Active/Hover Underline Draw menu is left at its default setting, which is From Left. This is the direction of the on-hover animation.
You can also change the Background Type of your tab section. We like our tabs neat as they are, so we won’t use a background for this demonstration, but you have the choice between a background image and a gradient.
We will use the Border Type control to add an underline to our tabs and outline them a little bit better. We will set the Border Type to solid, but we don’t want it to go all the way around our content box. We want to only set the top width to 1 pixel, and leave the others at 0. This way, only the top border will be visible. To do this, we first need to unlink the values by clicking on the link button. This lets us change each border (top, right, bottom, left) separately, instead of setting a single value that will apply to all four borders. We will also set the Color to #CCCCCC (a pale grey).
The remainder of the options in the main section of the Style tab are to do with the look of the textual content in your tabs. We will leave them as they are.
The next section in the Style tab is Spacing Style. Here you can set up the paddings and margins of your tab titles and content.
If you want to set different values for different sides, click your link button to the right of the value fields, as we have done with the Border Type in the previous step..
To achieve the effect you see below, we have added extra padding to the Title: 15 pixels each to the right and left, and 14 for the bottom. We have also added 26 pixels to the top of the Content, and 35 pixels to the right title margin. This makes the titles more easily clickable.
Of course, this is just one of an infinite number of ways you can use Qi Addons to set up your horizontal tabs. As you can see, the horizontal tabs widget offers a myriad of options that let you create any type of tab you can think of and customize its style to perfectly fit your vision.
Another popular way of displaying tabbed content is using vertical tabs. And, as we have mentioned before, vertical tabs are one of sixty elegant, versatile, expertly designed widgets Qi Addons For Elementor has to offer. We will show you how to set up one of literally countless versions of the widget.
We have a video tutorial on this widget too, so if this format suits you better, give it a peek:
If you prefer textual guides, though, we will take you step by step through the process.
After having installed and activated Elementor and Qi Addons For Elementor, begin as you would with any Elementor element: find the Vertical Tabs widget in the left-hand side menu either by scrolling or by searching, and drag it to where you want it on the page.
The widget will start off with two tabs and some placeholder text. In the widget’s Content tab, you can see that there are two items. Clicking on each of them will reveal that it’s in fact a tab. It contains a Title field, for your tab title, and a Content field, set up as a text editor, for its content. You can click +Add Item to add any number of items.
We will add two items and replace the default lorem ipsum text with some of our own copy.
Moving on to the Style tab and its main Style section, you will see a veritable slew of options. Up top, we find the title settings. The Title Alignment can be set to left, right, or center (we went with center), the Title Tag can be set to any heading value (H1 to H6), or to paragraph (P). We will leave it at the default H5. Finally, in the Title Typography settings you will find the usual suspects: Font Family, Size, Weight, and so on, similar to the settings described in the section above. We will leave these alone and only set the Size to 21 pixels.
Next down, we find the Normal-Active/Hover switch. These settings govern the behaviour of the tabs in their two possible states. The Normal section is the behaviour of a tab which is not selected or hovered over. You can set the Title Color to whatever you like, but we went with #1E1E1E. Next down, you can choose between the Classic and Gradient Background Types. The options for each vary, but we will be using the Classic background for this demonstration. We will set it to a solid colour: #F9F9F9.
In the options below you can set a background Image and a Border Type for your tabs. We will not be using these settings. Further down, you can find the text settings: Text Color, Text Typography, and Text Background Color, as well as Border settings for the text. We will not be fiddling with these, either: we like our text box nice and clean.
Moving on to the Active/Hover side of things, we will find more or less the same exact controls as we have for the Normal. We will set the Title Active/Hover Color to #1E1E1E to match the colour of our Normal titles, but for the background, we’ll choose an Image from our media library. You can see that it changes in the preview section immediately.
The image’s Position controls are important if your image is smaller or larger than the space it is supposed to occupy: you can choose which bit is visible. The Attachment control governs the behaviour of the image when the user scrolls. A Scroll setting will show the image as it is, while a Fixed setting will fix it to the background, moving as the user scrolls. The Repeat control is there in case your image is smaller than the space it occupies: you can choose whether and how to repeat the image. Finally, the Size control is there in case you wish to stretch the image. We will select No Repeat from our Repeat menu and not touch the others.
Further down, we find the Sideline controls. These settings are used to set up the line separating the tab from the text, but we will not be using them in this particular design. The same goes for Text and Border settings in the Active/Hover view.
Finally, we arrive to the Spacing Style section of the Style tab. Here we can set up the Title Padding, or the space between the walls of the title box and the title text. We will click to Unlink the values and enter 27 pixels for our Top padding, 40 for Right, 23 for Bottom and 44 for Left.
Similarly, we will Unlink the Content Padding controls (the space between the main text and the edges of its box), and set the Top to 4% – not pixels! Finally, the Items Space slider is the control for the space between the tabs. We will set it to 3 pixels.
And there you have it, our vertical tab widget is done!
If you’re using the Block Editor, you can consider using the Ultimate Blocks plugin to add tabbed content to your WordPress posts or pages. The ‘Tabbed Content’ block lets you add content in both horizontal or vertical ways.
Let’s install the plugin. Just go to your WordPress Dashboard and navigate to Plugins > Add New. Then search for ‘Ultimate Blocks’ and install the plugin.
Once you’ve activated the plugin, go to the page or post where you want to add tabbed content. Then click on the ‘+’ sign and search for ‘Tabbed Content’. Click on the block to insert it.
By default, it will show only one tab. You can add more tabs by clicking on the ‘+’ sign. You can add as many tabs you want.
Then give names to your tabs and content content in the body part. You can customize style, colors, layout, and more from the right-hand side options panel.
If you like to display content in vertical order, then just click on the vertical icon from the tab display.
So that’s how you can add tabbed content using the Ultimate Blocks 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.
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.
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.
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.
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.
In any case, your tabs, as configured, will appear in the post, and the procedure is the same for all other widget-ready areas.
Qode Themes: Top Picks
View Collection
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.
