Divi – Double columned tabs

Divi – Double columned tabs

The inspiration

I got a request for this layout on the Divi page:

Looks harmless, but how to recreate it in Divi???

Well, it took a bit of work and some restructuring, but it works out pretty well with just CSS. (Because the Divi tabs already have jquery working for them)

Check out the preview

 

The Video

Watch the video for a short breakdown of how the code was put together. (so you can edit it for your own uses)

 

The Build

First, add a custom class to the tab module

And make 8 tabs.

Next, just add the CSS.

Before you go, if you want a slightly different vertical layout,

 

note: The other styling is up to you. I tried to stay out of the way in terms of styling the details so it won’t clash with what you’re doing. If you’re having problems, please let me know.

 

The Code

And here’s the CSS 

.et_pb_module.et_pb_tabs.tabs-content-tabs {
  position: relative;
  height: 450px;
  width: 100%;
  border: none;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls:after {
  display: none;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li {
  float: none;
  position: absolute;
  display: block;
  border: none;
  width: 130px;
  padding: 10px;
  text-align: center;
  background: white;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 8px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 1px 1px 8px 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li:hover {
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_0, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_1, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_2, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_3 {
  left: 0;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_4, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_5, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_6, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_7 {
  right: 0;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_0, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_4 {
  top: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_1, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_5 {
  top: 33%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_2, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_6 {
  top: 67%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_3, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_7 {
  top: 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_active {
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li a {
  display: inline-block;
  padding: 0;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_all_tabs {
  width: calc(100% - 320px);
  height: 450px;
  overflow: auto;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_all_tabs .et_pb_tab {
  padding: 0 20px;
}
@media all and (max-width: 768px) {
  .et_pb_module.et_pb_tabs.tabs-content-tabs {
    height: auto;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls:after {
    display: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li {
    float: none;
    position: relative;
    margin-bottom: 20px;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_0, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_1, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_2, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_3 {
    left: 0;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_4, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_5, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_6, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_7 {
    right: 0;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_0, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_4 {
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_1, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_5 {
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_2, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_6 {
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_3, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_7 {
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_active {
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li a {
    display: inline-block;
    padding: 0;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_all_tabs {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_all_tabs .et_pb_tab {
    padding: 20px;
  }
}

.et_pb_row.extra-padding {
  padding: 60px 0;
}

 
[sc name=”customcss”]

 

And there you have it!

 
If you want to learn how to do this all yourself and/or solve your own problems easily

[sc name=”learn css”]

 
If you want to learn how to make Divi awesomely responsive

[sc name=”responsive-ad”]

 

Some awesome ideas coming up soon, so sign up!

[gravityform id=”1″ title=”False”]

 

update

ET has posted a tutorial for this themselves (I guess due to the popularity of the layout) so you can also check it out here: //www.elegantthemes.com/blog/divi-resources/how-to-recreate-ets-click-video-walkthrough-with-divi

Photo by Faruk Kaymak on Unsplash

Why no ads?

Hi, my name is PK, and welcome to my website, almost inevitable design. I maintain and publish on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.
  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to product better content.

Any bit of interest helps. Even sharing with your feidns, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

The Web Design Space

TWDS is my web design agency. If you're looking for premium quality, reliable, web design and development, come see what we're about!
Learn More
Choose "Paythen" at checkout for an interest free 10 week payment plan.
Leave a Reply

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

  1. The demo works on Chrome but not in the Facebook browser…. Kinda weird don’t ya think?

    • Hi, when was this? I have updated the preview page link since I was having problems on this website. There’s no reason for the discrepancy since the tutorial is CSS only. The Divi jquery is the same.

New tutorials