By default, tabs in the Divi theme are placed at the top. There is no hidden option inside the tabs module settings that allows a user to make changes in the position of the Divi tabs. And if you’re looking to make Divi tabs vertical, then the only way is to add some custom CSS.

Therefore, in this blog post, we’re going to look at how you can create Divi vertical tabs in both the left and right positions. But first, check out the preview of Divi vertical tabs created using CSS.

Divi vertical tabs layout 1

Divi is one of the best and accessible WordPress themes that allows users to create unique and extraordinary websites without spending extra time and money. And many other customization options that stand it out from the norm.

Fancy Heading Example

Looking for a theme to help you engage readers on your newly planned magazine or news website, then choose Elegant Themes’ Extra WordPress theme to do more than just engaging your readers and site visitors.

Want to increase numbers in your email list, then choose Bloom plugin to do it more creatively. Plus, many other useful features that make it one of the best opt-in plugin ever available.

Let your readers share your blog posts and other useful content available at your website across the multiple platforms using The Best Social Media Sharing Plugin For WordPress—Monarch Social Sharing plugin.

Fancy Heading Example

Create even more beautiful websites with the Divi Page Builder that takes Divi customization and website designing to the next level. And many more advanced features that makes web development super easy and fun.

Divi vertical tabs layout 2

A place where you can learn and discuss more about the WordPress features, options, and functionality from the fellow users, developers, and the whole community.

A place where you can see what’s new happening in the WordPress community and keep track of your website’s functionality, traffic, and much more.

It helps you showcase your default profile picture across multiple platforms based on the WordPress while you write a blog post, reply, or ask help.

It helps you keep your personal or small business site backed up and spam-free with the most affordable solution to get started—the security essentials for every WordPress site.

Divi vertical tabs layout 3

Divi Blog Extras plugin helps you create stylish blog pages inside the Divi theme without taking much time. It comes with 6 beautifully designed blog layouts that are unique and attractive to see when applied. And many other awesome features that make this plugin #1 choice when it comes to creating elegant blog pages.

Using the Divi Blurb Extended plugin, you can easily create interactive and appealing blurbs with multiple features. Such as read more button, hover effects, image and icon options, flip box, and different animation effects.

Divi Plus is a powerful and multipurpose Divi plugin with various modules that allow users to create Divi Breadcrumbs, Fancy headings, custom text with color and background clipping, attractive separators, before-after image slider, and many more cool features.

With Divi Restro Menu plugin, you’ll be able to create beautiful and delicious restaurant food menus on your Divi theme restaurant website. It includes multiple food menu layouts and options that make creating food menus real fun.

Divi vertical tabs layout 4

Divi is one of the best and accessible WordPress themes that allows users to create unique and extraordinary websites without spending extra time and money. And many other customization options that stand it out from the norm.

Fancy Heading Example

Looking for a theme to help you engage readers on your newly planned magazine or news website, then choose Elegant Themes’ Extra WordPress theme to do more than just engaging your readers and site visitors.

Want to increase numbers in your email list, then choose Bloom plugin to do it more creatively. Plus, many other useful features that make it one of the best opt-in plugin ever available.

Let your readers share your blog posts and other useful content available at your website across the multiple platforms using The Best Social Media Sharing Plugin For WordPress—Monarch Social Sharing plugin.

Fancy Heading Example

Create even more beautiful websites with the Divi Page Builder that takes Divi customization and website designing to the next level. And many more advanced features that makes web development super easy and fun.

Divi vertical tabs layout 5

A place where you can learn and discuss more about the WordPress features, options, and functionality from the fellow users, developers, and the whole community.

A place where you can see what’s new happening in the WordPress community and keep track of your website’s functionality, traffic, and much more.

It helps you showcase your default profile picture across multiple platforms based on the WordPress while you write a blog post, reply, or ask help.

It helps you keep your personal or small business site backed up and spam-free with the most affordable solution to get started—the security essentials for every WordPress site.

Divi vertical tabs layout 6

Divi Blog Extras plugin helps you create stylish blog pages inside the Divi theme without taking much time. It comes with 6 beautifully designed blog layouts that are unique and attractive to see when applied. And many other awesome features that make this plugin #1 choice when it comes to creating elegant blog pages.

Using the Divi Blurb Extended plugin, you can easily create interactive and appealing blurbs with multiple features. Such as read more button, hover effects, image and icon options, flip box, and different animation effects.

Divi Plus is a powerful and multipurpose Divi plugin with various modules that allow users to create Divi Breadcrumbs, Fancy headings, custom text with color and background clipping, attractive separators, before-after image slider, and many more cool features.

With Divi Restro Menu plugin, you’ll be able to create beautiful and delicious restaurant food menus on your Divi theme restaurant website. It includes multiple food menu layouts and options that make creating food menus real fun.

How to create above Divi vertical tabs layouts

It’s very simple. Once you add the Divi tabs module on a page, go to its Advanced Tab, then inside CSS ID & Classes settings, add CSS Class from given code below. For example, you choose layout one; then, its CSS Class would be vertical-tabs1.

Now, to finally achieve the above layout, there are 2 methods, which you can follow in different scenarios.

(a) When you want to use these layout on a single page: In this case, first copy the complete CSS of a particular vertical tabs layout, such as layout 1, from the given code below. And then, go to page’s advanced setting, and paste the CSS inside the Custom CSS tab.

(b) When you want to create vertical tabs on more than a single page: Go to Divi Theme Option and paste the layout’s CSS inside the Custom CSS section of the general settings. And don’t forget to add layout’s Class name to the tabs module, whenever you want to create a vertical Divi tab on a page.

Thus, you’ve successfully created vertical tabs in the Divi theme.

Divi vertical tabs’ CSS

Summary

In this blog post, we’ve shown you how to create vertical Divi tabs positioning both right and left side using the tabs module and applying some custom CSS.

If you liked this blog post and find it useful, then share it to help the other fellow users who want to create Divi vertical tabs. Moreover, subscribe to our newsletter to get updated with useful posts like this one.

Divi 4 header footer pack

Fill up your details to download the file

Please check your email for the download link.