How to Create Vertical Tabs in Divi?

Divi’s default Tab Module only lets you create horizontal tabs, while you will need custom CSS to create vertical ones.

However, you can avoid the coding hassle with a Divi third-party plugin like Advanced Tabs by DiviGear.
In this guide, we will show you how to create vertical tabs in Divi using the plugin.

We will create vertical tabs from scratch on our Divi website using DiviGear’s Advanced Tabs Module. Here is what it will look like:

Step One: Install and Activate the DiviGear Advanced Tabs Plugin

At first you have to get the required plugin to create a vertical table in Divi. We are going with DiviGear’s Advanced Tab and you can get this plugin from DiviGear or Elegant Themes.

Step Two: Insert the Advanced Tabs Module

Next, insert the tab module to your page as you would with any Divi module. Tabs are basically added to pages, which is why we are also doing the same:

• Go to your WordPress dashboard > Pages > Add New Page.
• Give your page a title and click “Use Divi Builder.”
• Select “Build From Scratch” and choose your preferred column structure.
• Search for the “Advanced Tabs” module and insert it.

Step Three: Add Tab Items

After inserting the module, you will see four default tab items that you can modify or delete. Simply click on “Settings” to modify or “Delete” to remove them.

Instead of relying on default items, you can create a tab item from scratch with the “Add New Item” option.

To demonstrate the tab creation process, we are going to modify the default tab items for our demo:

• Click on the “Settings” icon of the first default tab content and then edit the tab label.
• Next, add your tab content by using the “Body” field. Use an HTML heading tag for the title and basic paragraph text for the description.
• To add an icon to the tab navigation, use the “Nav Icon Settings” function. Inside this function, you can select an icon, choose its color, and adjust its size.

Note: Instead of an icon, you can also use an image for the tab navigation. Simply toggle off the “Use Icon” to bring up the image-adding option.

• Now, add an image as your tab content by clicking the “Image” function. (Make sure to upload all necessary images to the media library first.

You can change the image placement using the “Image Placement” option in the content tab. For this demo, we are selecting “Right”.

• Next, add a button by clicking on the “Button” function. There you can write button text and paste the URL where you want the button to link.

Now, go to the “Design” tab to customize tab navigation items and tab content with functions like adjusting fonts, colors, styling, spacing, and more.

For our demo design, we will customize the button using the “Button” function.

We will change the font style to bold, setting the text color to white, the background color to light blue, and increasing the font size.

Our first tab item is ready, and if you followed the steps above, the first item of your tab should be ready too.

Next, click the “Back” button to return to the main settings panel from the child item.  Then, customize each of the remaining default items by clicking on their respective settings icons.

We modified all the remaining three default tabs. Here is the result:

Step Four: Change Tab’s Orientation to Vertical

To transform the tabs from horizontal to vertical, go to the Design tab > Nav Container Settings > Nav Placement Desktop > Left. 

You can also choose “Right” from the dropdown menu for right-side navigation.

While the vertical tab is nearly in its final shape, it still requires some styling to perfect the look. We will show you the styling and customization process in the next step.

Step Five: Customize and Style All the Tab Items

DiviGear’s Advanced Tabs module has hundreds of customization options and you will find all of them in its “Design” tab. We are going to use some of them:

• Customize Tab Navigation’s Items

To customize the tab navigation, go to the “Design” tab and click on “Nav Item”. 

We will set the background color to light gray, change the icon color to blue, and adjust the icon size to 24px. We also selected a top border style with a width of 2px and a light gray border color.

After that, customize the active navigation tab item’s appearance with the “Nav Item Active” function. Basically, it means when someone clicks on a tab, its appearance will change to indicate it’s active.

We will adjust the background and icon color, as well as the icon size.

• Customize Tab Navigation’s Text

Going to the “Nav Item Text” function from the “Design” tab will let you customize the tab navigation item’s text appearance. 

For our demo, we will change the font from default to Lato and make the title’s font weight bold.

Additionally, you can customize the text for an active navigation item using the “Nav Item Text Active”. We will change the font to Lato, make it bold, and modify the text color.

• Customize Tab Content Heading Text

DiviGear’s Advanced Tabs let you customize headings within tab content. 

To modify the heading, go to “Heading Text” and adjust font weight and color. For this demo, we will make the heading bold and the text color black.

• Add Custom Spacing

Inside the “Custom Spacing” function, you can add spacing around the tabs and tab content. 

You will find two tabs here: “Wrapper and Content.” The Wrapper tab allows you to add custom spacing around the entire module area, while the Content tab lets you customize the spacing around the tab navigation and the content items.

In the “Wrapper” section, we will adjust the top, bottom, and right padding of the “Tab Wrapper”. Additionally, we will add right and left margin to the image wrapper and right margin to the “Content Wrapper.”

In the “Content” tab, we will add top and bottom spacing for navigation item padding, and right spacing for the navigation icon margin.

After adding custom spacing, here is what the tab looks like:

• Add Box Shadow

As a finishing touch, you can add a box shadow effect by clicking on the “Box Shadow” function in the “Design” tab.

We will select a shadow and then adjust its color to light gray color.

Preview of Divi Vertical Tabs Created with DiviGear

We have successfully created vertical tabs, and if you have followed the steps outlined above, you should now be able to create one.

Save your changes and exit the visual builder to view the final output. Here is how our created and designed vertical tabs look:

Why Choose DiviGear to Create Vertical Tabs in Divi?

After seeing the ability of DiviGear’s Advanced Tab module, you may already have a good idea why we have chosen this plugin. Let us show you some more key points that make it stand out.

• Ability to create both horizontal and vertical tab layouts to suit your design needs.
• Over 100 customization settings, including colors, fonts, icons, images, and animations.
• Add various types of content within tabs, including text, images, buttons, and entire Divi layouts.
• Choose from click or hover effects to reveal tabs with 8 unique animations.
• Option to add plain text, text with icons, or even images for tab navigation.
• Sticky navigation option for persistent visibility.
• 20+ free premade tab layouts to help you jumpstart your tab creation and design process.

Wrapping Up

Now you know how to create vertical tabs in Divi.

We didn’t use a single line of code for that, and instead we utilized the features of DiviGear’s Advanced Tabs. This module is more than good enough to create vertical tabs and then customize them to match design preferences.

Ready to create stunning vertical tabs on your Divi website with ease? Get the Advanced Tabs module today and experience as well as experiment with its powerful and unique features.