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)
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
Liam
The demo works on Chrome but not in the Facebook browser…. Kinda weird don’t ya think?
PK
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.