In this post, we look at the scope of moving the Divi tabs vertically with a live implementation. Want vertical tab in both side, then check out this blog post, How to create Divi vertical tabs (6 examples with CSS).
Goal
Our goal is to change the default position of the Divi tabs module and bring it to the left vertically.
We are not making this
Assign a CSS Class to Tab
Assign a class to the tab module. We will name it .custom-tabs in this demo implementation.
Add CSS to Page/Divi Theme Panel
In the next step, we will paste the following code to our Divi Theme panel.
It can also be added to the page using Divi Builder but this needs to be repeated on all pages where you want to use the layout.
If you use the code in Divi theme panel, simply add .custom-tabs class to the tabs on new pages where you use the module.
Goal Accomplished
This was a simple and easy implementation for creating vertical Divi tabs which can be applied to an existing tab module in less than 2 minutes.
See this code in action here.
