Divi - Double columned tabs - Almost Inevitable Design

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;
}

To add custom CSS, either..

Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
Add it to the Custom CSS field in Divi > Theme Options > General or..
Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

And there you have it!

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

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

If you want to learn how to make Divi awesomely responsive

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

Some awesome ideas coming up soon, so sign up!

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: https://www.elegantthemes.com/blog/divi-resources/how-to-recreate-ets-click-video-walkthrough-with-divi

Photo by Faruk Kaymak on Unsplash

2 Comments

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.

The inspiration

The Video

The Build

The Code

Notice

update

2 Comments

Leave a Reply Cancel reply

Related Posts

almostinevitable