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 for vertical tab

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.

Do you want to add 50+ new modules to your Divi Theme? 

Hope you find this article helpful. Before you go, we would like to introduce you to Divi Plus, our multipurpose plugin that comes with some great features you might like.

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

43 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
  16. Amber

    These worked great! I have one question – I am using iframes to display other pages from the same domain. I am having the issue of content being cut off at the end. Does anybody know how to fix this?

    Reply
  17. Lorena

    Hi, its so helpfull for mi, i using vertical-tabs3. I have a problem, i put there many tabs with some iframe that have an url who call some reports in another server. The problem is that all de reports upload simultanealy and the charge speed of de page take about 40”. Is there any way to call one by one when de user click in the tab? The site is in develope state.

    Reply
  18. Josh

    Hello, I am using Divi vertical tabs layout 3 as shown in your examples here and it is working great! Thank you so much for taking the time to share the examples here.

    I have a question… How can I add additional text above the tab ‘buttons’ just on the left hand side and push the tabs down below this text.

    I have been trying jQuery ‘prepend’ but it does not seem to be working. Any guidance or support you could give me on this would be greatly appreciated. Let me know.

    Thanks!

    Reply
  19. rambabu Tadepalli

    Hello,

    Thanks for the examples, do you have an example of vertical tabs panel contains (nested )horizontal tabs and with accordion style. so that it can be easily link to menu bar.

    your help would be appreciated in advance.

    Reply
  20. Todd Berman

    How do you create the fancy titles to posts you have in the tabs?

    Reply
  21. John Callanan

    The content in the tabs are all top-aligned, rather than aligned next to the tab. How do we correct that?

    Reply
    • Karan

      Hi John,

      It’s not possible only through CSS.

      Thanks.

      Reply
  22. Dallas

    The formatting of my text is acting weird when I have tabs vertically. New lines are often appearing “up and to the right” rather than as normal. Any ideas what is causing this problem?

    Reply
    • Karan

      Hi Dallas,

      Need the URL to find the actual issue.

      Thanks.

      Reply
  23. Kenneth Splane

    Thank you for this CSS code! How can the inactive tab font color be changed?

    Reply
    • Karan

      Hi Kenneth,

      You could change the inactive tab color from the module’s “Tab Text” setting in the design tab.

      Thanks.

      Reply
  24. Tim

    Hi Karan,

    Do you have any suggestions on how to make a specific tab Active? For instance how can I designate tab 2 as the default open tab? I know there are tricks to do this for accordions but I’m not aware of anything for tabs.

    Thanks
    Tim

    Reply
  25. Anne Schnurman

    This is excellent! Thank you, I’ve been looking for this solution. I was a little thrown when I saw the content below the tabs but realized that it is only like that in the visual builder. Once you exit, everything looks great. THANK YOU!

    Reply
  26. Jirka Burda

    Hello,
    is it possible to change background color in active tabs? e.g. first tab background color is red, second tab has blue background color.
    Thank you.

    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.

43 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
  16. Amber

    These worked great! I have one question – I am using iframes to display other pages from the same domain. I am having the issue of content being cut off at the end. Does anybody know how to fix this?

    Reply
  17. Lorena

    Hi, its so helpfull for mi, i using vertical-tabs3. I have a problem, i put there many tabs with some iframe that have an url who call some reports in another server. The problem is that all de reports upload simultanealy and the charge speed of de page take about 40”. Is there any way to call one by one when de user click in the tab? The site is in develope state.

    Reply
  18. Josh

    Hello, I am using Divi vertical tabs layout 3 as shown in your examples here and it is working great! Thank you so much for taking the time to share the examples here.

    I have a question… How can I add additional text above the tab ‘buttons’ just on the left hand side and push the tabs down below this text.

    I have been trying jQuery ‘prepend’ but it does not seem to be working. Any guidance or support you could give me on this would be greatly appreciated. Let me know.

    Thanks!

    Reply
  19. rambabu Tadepalli

    Hello,

    Thanks for the examples, do you have an example of vertical tabs panel contains (nested )horizontal tabs and with accordion style. so that it can be easily link to menu bar.

    your help would be appreciated in advance.

    Reply
  20. Todd Berman

    How do you create the fancy titles to posts you have in the tabs?

    Reply
  21. John Callanan

    The content in the tabs are all top-aligned, rather than aligned next to the tab. How do we correct that?

    Reply
    • Karan

      Hi John,

      It’s not possible only through CSS.

      Thanks.

      Reply
  22. Dallas

    The formatting of my text is acting weird when I have tabs vertically. New lines are often appearing “up and to the right” rather than as normal. Any ideas what is causing this problem?

    Reply
    • Karan

      Hi Dallas,

      Need the URL to find the actual issue.

      Thanks.

      Reply
  23. Kenneth Splane

    Thank you for this CSS code! How can the inactive tab font color be changed?

    Reply
    • Karan

      Hi Kenneth,

      You could change the inactive tab color from the module’s “Tab Text” setting in the design tab.

      Thanks.

      Reply
  24. Tim

    Hi Karan,

    Do you have any suggestions on how to make a specific tab Active? For instance how can I designate tab 2 as the default open tab? I know there are tricks to do this for accordions but I’m not aware of anything for tabs.

    Thanks
    Tim

    Reply
  25. Anne Schnurman

    This is excellent! Thank you, I’ve been looking for this solution. I was a little thrown when I saw the content below the tabs but realized that it is only like that in the visual builder. Once you exit, everything looks great. THANK YOU!

    Reply
  26. Jirka Burda

    Hello,
    is it possible to change background color in active tabs? e.g. first tab background color is red, second tab has blue background color.
    Thank you.

    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.

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Running a website for the business is one of the crucial aspects of running a business in today’s time. Whether you’re manufacturing fashion apparel or designing web projects, an online platform is always a plus. Based on this, more and more businesses are adopting...

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

Divi Scroll Effects are a great way to turn a simple Divi website into a modern one. And not only modern but highly interactive with enhanced engagement for different areas of the site. You could highlight CTAs, content sections and hook users to the purpose you've...

7 Easy Steps To Create Popups for Divi With Divi Modal Popup

7 Easy Steps To Create Popups for Divi With Divi Modal Popup

Popups can help you do many beneficial things on your site. For example, showing discount coupons, sales, announcements and much more. With them, you could easily boost interaction on your site and turn more leads into conversion. Therefore, if you're looking for a...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts