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