How to build a vertical tabs module using Divi, HTML and CSS.

Posted On January 16, 2020

Are you looking for a vertical tabs module that displays your content on the left or right when you select each tab, instead of below the tab selectors? WIthin Divi, there is a super simple way to add a tabs module. First, add a new section (one column), then add a tabs module.

After that, we are going to add in our tabs and customize our content within each tab.

Customize Tab Names and Content (you can put images, text, or html code into the body section).

Next, we are going to assign a custom CSS Class to our ROW, by going into our row settings and clicking the advanced tabs. For this example (and for the CSS below to work), we will use custom-tabs as the CSS class.

Adding Custom-Tabs CSS class to our row settings.

Now, we can save our design and add in the CSS.

Add CSS to Theme Options or wherever you add your CSS.

Once we save the CSS, reload the page and check out the nearly finished result!

Almost done!

Our last step is to change the tab text color to match our design, and add a couple lines of inline CSS to both the tab controls and tab custom CSS section within the tab module advanced settings. The CSS we are adding is simply: background-transparent;

And finally, we are done. Here is the final result!

/*custome tabs*/
.custom-tabs .et_pb_tab_active a {
  color: white!important;
  background:#5c5c5c;
  background-color:#5c5c5c;
  
}

.custom-tabs .et_pb_tabs_controls li {
  padding:30px;
}


.custom-tabs ul.et_pb_tabs_controls {
  float: left;
  width: 30%;
  display: block;
  background: white;
}
.custom-tabs .et_pb_all_tabs {
  display: flex;
  width: 70%;
  margin:0;
}
.custom-tabs .et_pb_tabs_controls li {
display: block;
width: 100%;
  border: 0px solid #d9d9d9;
  margin-bottom: 0px;
  margin-top:0px;
}

.custom-tabs .et_pb_tabs_controls li:not(.et_pb_tab_active):last-child {
border-right: 0px solid #d9d9d9;
}

.custom-tabs .et_pb_tabs_controls li a {
   display: grid;
  width: 100%;
  margin-right:auto;
  font-size: 18px;
  text-align:center;

  
}

.custom-tabs ul.et_pb_tabs_controls:after {
content: none;
  
  
}

.custom-tabs .et_pb_tab {
    padding: 0 30px;
}
@media(max-width:990px){
.custom-tabs ul.et_pb_tabs_controls.clearfix {
  float: left;
  width: 100%;
  display: inherit;
}
.custom-tabs .et_pb_all_tabs {
  display: flex;
  width: 100%;
}
.custom-tabs .et_pb_tab.et_pb_tab.clearfix.et-pb-active-slide {
  border-left: 0px solid #d9d9d9;
}

ul.et_pb_tabs_controls:after {

  display:none;
}
}

Written by Connor Schmitt

Hello, I'm Connor. I've been building websites for over 10 years.

0 Comments

Submit a Comment

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

Related Posts

How to Find New Website Clients After Covid-19

How to Find New Website Clients After Covid-19

It all comes down to one thing... how motivated are you? Over the past 3 weeks I have seen the market flooded with new freelancers trying to find clients on their own for the very first time. Most of these are individuals that traditionally had worked at an agency,...

read more
Physical Therapy Clinic Child Theme Divi

Physical Therapy Clinic Child Theme Divi

View live website here: https://freddie.connorschmitt.com/pain-management/ Beautiful customized physical therapy child theme for Divi. This child theme is built with the Divi Theme Builder, ensuring ease of use and installation! For pricing, email...

read more