Join the cypher
Login
Divi – Double columned tabs

Divi – Double columned tabs

  • by PK
  • on 2019-06-03
  • in Divi

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!

 

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

Get Breakdance

Breakdance is, in my opinion, the best page/site builder on the market, which is why all my tutorials use Breakdance. It's also why I have an affiliate link. You don't pay extra, but I get a little commission, so it helps support the site. Thanks!
get breakdance

Get ACF Pro

Another essential plugin for site building. This isn't an affiliate link, it's just for convenience.
get ACF pro

Get WP Codebox Pro

If you'd like an easier to use, and more advanced code management plugin (instead of just editing and making files yourself) then WP codebox pro is for you. Adding php, js, and even SCSS. Pretty nice! Affiliate link below.
get WPcodebox pro

Blank Plugin

Sort of blank. It's made to be easy to use with the tutorials. Download and edit any way you see fit.
Icon

Almost Inevitable Blank Plugin File

1 file(s) 7.22 KB
Download

  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.

Leave a Reply

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

New tutorials

Auto-updating Year in Footer
Designing Beyond the Brief
Disable Gutenberg Editor on some ACF pages
ACF flexible content fields in Breakdance 2.4

Got a question? ask!

If you have any question about the content on this page, feel free to send me an email by clicking the button below.

newsletter? sign up!

Sign up to the newsletter for updates on tutorials, news, and offers.

Join the cypher!

An awesome membership program for Breakdance Builder users coupled with an inclusive, friendly community.
Learn more
I'm in! Sign me up now!

Got a question?

If you have a question about something on this page, send me an email, and hopefully I can answer, and we can solve it!