Apr 2, 2020 | Divi Resources

How to create Divi vertical tabs (6 examples with CSS)

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 plus fancy heading example 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.

Divi plus fancy heading example 2

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.

Divi plus fancy heading example 3

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.

Divi vertical tabs layout 1Divi plus fancy heading example 4

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.

Divi plus fancy heading example 5

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 plus fancy heading example 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.

Divi plus fancy heading example 2

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.

Divi plus fancy heading example 3

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.

Divi plus fancy heading example 4

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.

Divi plus fancy heading example 5

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.

Divi tabs module advanced tab settings

Note: When you copy the class, please make sure you do it right. As there’s no gap or space in between there characters. For example, vertical-tabs1 is not vertical – tabs 1.

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.

Vertical tabs page custom CSS

(b) When you want to create vertical tabs on more than a single page: Go to Divi Theme Options 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.

Vertical tabs theme options CSS

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.

Posted By:
Karan
Karan loves making web beautiful with his keen eyes toward design.

28 Comments

  1. Claire

    Hello Karan and thanks A LOT for this !! Love it !

    I’m testing it on a site right now, but I encountered a problem and can’t figured out a solution.

    Whenever I write some text (or copy paste it) in the Divi tabs settings visual editor, I can’t create line breaks between sentences.
    If you can take a look here : https://150910demo.ovh/spells-2/ (password: jdr). You can see the problem in the first tab titled “tab test”.)

    I tried some basic horizontal tabs (without the CSS you so gently share) and it works fine (you can see it in the vertical tab just below the first one)

    So I’m wondering what in the CSS can cause something like this ? Maybe I did something wrong by touching it a little to look like I wanted…

    I’m so sorry to bother you with that but I’m stuck. :/

    Have a great day !

    Claire

    Reply
    • Karan

      If you’re using the custom CSS mentioned above, then make sure you use the HTML tags properly. As there is no problem with the CSS. I hope this would work.

      Reply
  2. Félix Pérez

    It doesn’t works. It is copied, pasted, and nothing happens. It seems to me that something is not finished explaining because what appears in the screenshot CSS Id Classes (vertical-tabs 1) is not what appears to that screen when you copy the code (/ * Divi Vertical Tabs 1 * / .vertical-tabs1 {bord …)

    Reply
  3. Aithne

    Hi, thanks for this. I’m having issues with the text as it goes below the tabs (not beside it). Can you recommend a way to fix this? Cheers 🙂

    Reply
    • Karan

      Hi Aithne,

      Could you please share the URL where you have issues?

      Reply
  4. Ed

    Thanks for sharing Karen. I have the same issue with the content of each tab going below instead of the side.

    Reply
    • Karan

      Could you please share the URL?

      Reply
  5. Ben

    Hi Karan,

    This has worked great for me, im using vertical-tabs3. I haveone issue i hope you can help me with?

    Im looking at using some custom icons instead of the ETA icon fonts. Which i did by doing this to the CSS code

    .vertical-tabs3 .et_pb_tabs_controls li:nth-child(4) a:before {
    content: url(‘https://golfpricecompare.com/wp-content/uploads/2020/07/Golf-Club-Icon-e1595245896984.jpg’)
    }

    This did the job, but im struggling to get the new custom icon and the text to remain middle aligned. The icon is bigger than the text but this is how i want it.

    A link to the site is here https://golfpricecompare.com

    Click the menu item “Golf Products”

    Any help with this would be greatly appreciated. Thanks

    Reply
    • Karan

      Hi Ben,

      Add below CSS snippet.

      .vertical-tabs3 .et_pb_tabs_controls li a {
      display: flex;
      align-items: center;
      }

      Reply
  6. Adam

    Hi Karan, I’m having the same issue. The text is displayed below the tabs rather than along side them. Can you help? Thanks!

    Reply
    • Karan

      Hi Adam,

      Could you please share the URL where you have issues?

      Reply
  7. Leonel Arguello

    Thanks so much for this.

    I just want to change the background colors of active and inactive tabs on vertical tabs 2. I tried to change them but i always getting the red and light gray.

    what can i do?

    Reply
    • Karan

      Hi Leonel,

      The background colors of the tabs controlled with CSS.

      Please replace your Color code in the below-given CSS.

      .vertical-tabs2 .et_pb_tabs_controls li {
      width: 100%;
      border-right: none;
      border: 2px solid transparent;
      background: #f4f4f4;
      }

      .vertical-tabs2 .et_pb_tabs_controls li.et_pb_tab_active {
      border: 2px solid #FF5733;
      background: #FF5733;
      }

      Reply
  8. Drew Downz

    I’m having same problem with text at the bottom of tabs and not on side

    Reply
    • Karan

      Hi Drew,

      Could you please share the URL where you have issues?

      Reply
  9. Humphrey Swanzy

    Thanks so much for this.

    I’m using vertical-tabs2 and it works perfectly. I have managed to change colors and everything works perfectly the way I want it.

    The only thing I’d like to ask is how do you let the content of a specific tab point directly to the arrow when clicked. As it is now, all the content stays at the top but for-example, if you have 5 tabs, how to do let the content of the tab5 point directly to the content of the 5th tab.

    Thank you and any help would be appreciated

    Reply
  10. Caitlin

    Hello, I saw this is an older post but wondering how the issue where the “text at the bottom of tabs and not on side” was fixed?
    I am also having the same problem and have run out of ideas to fix it :- (

    My website isn’t live yet but I can send a screenshot of the table/tabs if needed?

    Reply
    • Karan

      Hi Caitlin, need the URL to find the actual issue.

      Reply
  11. Giulia

    I think I resolved, in the builder, it is below but in the live page it looks ok.

    Reply
    • Karan

      Hi Ignacio,

      I can see the content is on the sides not on the bottom, Please recheck.

      Thanks,
      Karan

      Reply
  12. Ignacio

    Thanks Karan,

    I can see that the problem happens when I am in the visual builder. When I exit the visual builder everything is allright. You know what could be the reason?

    Thank you

    Best regards

    Reply
    • Karan

      Hi Ignacio,

      Please clear your cache or try page reload.

      Thanks,
      Karan

      Reply
  13. Alexandra

    This is fantastic. Thank you.
    I have one issue, though. I’ve used vertical-tabs2 and I feel it doesn’t work very well on mobile as the tabs take up most of the height and it’s difficult to see the info below. What work around would be appropriate for that?
    Cheer, Alex

    Reply
  14. Ingrid

    Hi – love it! However, it is hard for the user on mobile as the content comes AFTER all of the tabs content. Anyway for the content to low under each tab on mobile? So, essentially, it works like the regular horizontal tabs module on mobile?

    Reply
  15. ingrid

    And sorry, that’s now how the tabs works in mobile, either. That said, is there any way to show the content right under the tab on mobile and not all the way at the end of the tab list?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

28 Comments

  1. Claire

    Hello Karan and thanks A LOT for this !! Love it !

    I’m testing it on a site right now, but I encountered a problem and can’t figured out a solution.

    Whenever I write some text (or copy paste it) in the Divi tabs settings visual editor, I can’t create line breaks between sentences.
    If you can take a look here : https://150910demo.ovh/spells-2/ (password: jdr). You can see the problem in the first tab titled “tab test”.)

    I tried some basic horizontal tabs (without the CSS you so gently share) and it works fine (you can see it in the vertical tab just below the first one)

    So I’m wondering what in the CSS can cause something like this ? Maybe I did something wrong by touching it a little to look like I wanted…

    I’m so sorry to bother you with that but I’m stuck. :/

    Have a great day !

    Claire

    Reply
    • Karan

      If you’re using the custom CSS mentioned above, then make sure you use the HTML tags properly. As there is no problem with the CSS. I hope this would work.

      Reply
  2. Félix Pérez

    It doesn’t works. It is copied, pasted, and nothing happens. It seems to me that something is not finished explaining because what appears in the screenshot CSS Id Classes (vertical-tabs 1) is not what appears to that screen when you copy the code (/ * Divi Vertical Tabs 1 * / .vertical-tabs1 {bord …)

    Reply
  3. Aithne

    Hi, thanks for this. I’m having issues with the text as it goes below the tabs (not beside it). Can you recommend a way to fix this? Cheers 🙂

    Reply
    • Karan

      Hi Aithne,

      Could you please share the URL where you have issues?

      Reply
  4. Ed

    Thanks for sharing Karen. I have the same issue with the content of each tab going below instead of the side.

    Reply
    • Karan

      Could you please share the URL?

      Reply
  5. Ben

    Hi Karan,

    This has worked great for me, im using vertical-tabs3. I haveone issue i hope you can help me with?

    Im looking at using some custom icons instead of the ETA icon fonts. Which i did by doing this to the CSS code

    .vertical-tabs3 .et_pb_tabs_controls li:nth-child(4) a:before {
    content: url(‘https://golfpricecompare.com/wp-content/uploads/2020/07/Golf-Club-Icon-e1595245896984.jpg’)
    }

    This did the job, but im struggling to get the new custom icon and the text to remain middle aligned. The icon is bigger than the text but this is how i want it.

    A link to the site is here https://golfpricecompare.com

    Click the menu item “Golf Products”

    Any help with this would be greatly appreciated. Thanks

    Reply
    • Karan

      Hi Ben,

      Add below CSS snippet.

      .vertical-tabs3 .et_pb_tabs_controls li a {
      display: flex;
      align-items: center;
      }

      Reply
  6. Adam

    Hi Karan, I’m having the same issue. The text is displayed below the tabs rather than along side them. Can you help? Thanks!

    Reply
    • Karan

      Hi Adam,

      Could you please share the URL where you have issues?

      Reply
  7. Leonel Arguello

    Thanks so much for this.

    I just want to change the background colors of active and inactive tabs on vertical tabs 2. I tried to change them but i always getting the red and light gray.

    what can i do?

    Reply
    • Karan

      Hi Leonel,

      The background colors of the tabs controlled with CSS.

      Please replace your Color code in the below-given CSS.

      .vertical-tabs2 .et_pb_tabs_controls li {
      width: 100%;
      border-right: none;
      border: 2px solid transparent;
      background: #f4f4f4;
      }

      .vertical-tabs2 .et_pb_tabs_controls li.et_pb_tab_active {
      border: 2px solid #FF5733;
      background: #FF5733;
      }

      Reply
  8. Drew Downz

    I’m having same problem with text at the bottom of tabs and not on side

    Reply
    • Karan

      Hi Drew,

      Could you please share the URL where you have issues?

      Reply
  9. Humphrey Swanzy

    Thanks so much for this.

    I’m using vertical-tabs2 and it works perfectly. I have managed to change colors and everything works perfectly the way I want it.

    The only thing I’d like to ask is how do you let the content of a specific tab point directly to the arrow when clicked. As it is now, all the content stays at the top but for-example, if you have 5 tabs, how to do let the content of the tab5 point directly to the content of the 5th tab.

    Thank you and any help would be appreciated

    Reply
  10. Caitlin

    Hello, I saw this is an older post but wondering how the issue where the “text at the bottom of tabs and not on side” was fixed?
    I am also having the same problem and have run out of ideas to fix it :- (

    My website isn’t live yet but I can send a screenshot of the table/tabs if needed?

    Reply
    • Karan

      Hi Caitlin, need the URL to find the actual issue.

      Reply
  11. Giulia

    I think I resolved, in the builder, it is below but in the live page it looks ok.

    Reply
    • Karan

      Hi Ignacio,

      I can see the content is on the sides not on the bottom, Please recheck.

      Thanks,
      Karan

      Reply
  12. Ignacio

    Thanks Karan,

    I can see that the problem happens when I am in the visual builder. When I exit the visual builder everything is allright. You know what could be the reason?

    Thank you

    Best regards

    Reply
    • Karan

      Hi Ignacio,

      Please clear your cache or try page reload.

      Thanks,
      Karan

      Reply
  13. Alexandra

    This is fantastic. Thank you.
    I have one issue, though. I’ve used vertical-tabs2 and I feel it doesn’t work very well on mobile as the tabs take up most of the height and it’s difficult to see the info below. What work around would be appropriate for that?
    Cheer, Alex

    Reply
  14. Ingrid

    Hi – love it! However, it is hard for the user on mobile as the content comes AFTER all of the tabs content. Anyway for the content to low under each tab on mobile? So, essentially, it works like the regular horizontal tabs module on mobile?

    Reply
  15. ingrid

    And sorry, that’s now how the tabs works in mobile, either. That said, is there any way to show the content right under the tab on mobile and not all the way at the end of the tab list?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Facebook modules to Share, Update, Like, Comment, and much more

Divi Facebook modules to Share, Update, Like, Comment, and much more

Over the last decade, Facebook has become one of the online platforms that can bring huge profits to any business. Nevertheless, Facebook alone doesn't create the buzz about your business in the world, but the community behind it makes the difference. The comments you...

Divi Sticky feature & everything you can do with it

Divi Sticky feature & everything you can do with it

The Divi 4.6 update brought an impressive feature to the theme, which was missing for a very long time. The Divi sticky element option for every module. Using this particular option, you can now stick any module of the builder on the edge of the browser. Furthermore,...

How to create Divi post carousel & recent posts slider

How to create Divi post carousel & recent posts slider

Post carousels are very useful when it comes to increasing user sessions on a blog. You can add a recent post slider at the bottom of an article, and when users interact with it, they might navigate to it. That's it, from one blog post, you've brought readers to...