Select Page

Free Divi layout for fancy Divi tabs with icons

A Free Divi layout available to download from Divi Theme Examples.

1 – Add a Divi Tabs module
Add a new section with a full with row, then add a tab module. In the tab module click on the custom CSS tab and add the class fancy-tabs.

See the Divi Fancy Icon Tabs tutorial @ Divi Theme Examples

2 – Add your icons to the media library
Create your icons at 50px x 50px and upload them to your media library. You will need the URL for these icons for editing the code in step 3.

See the Divi Fancy Icon Tabs tutorial @ Divi Theme Examples

3 – Add CSS to ePanel/style.css
Go to Divi > Theme Options and scroll down to the custom CSS section (or go to your child themes syle.css file) and add the following CSS code;

@media (min-width: 981px) {
/*set a minimum height (at least as tall as your tallest tabs content) for the tab section so the page doesnt jump with different tab content heights*/
.fancy-tabs .et_pb_tabs {min-height:500px;}

/*edit the tab BG + text/hover colour for tab text*/
/*width % is dependant on how many tabs you want. 100/number of tabs=xx%*/
.fancy-tabs .et_pb_tabs_controls li {width: 20%; background-color: #efefef!important; }
.fancy-tabs .et_pb_tabs_controls li a { min-width: 60px; text-align: center; display: block; margin-top:-30px;padding-top: 60px!important; color:#ccc} /*alignment and size of tab icon/text*/
.fancy-tabs .et_pb_tabs_controls li a:hover { color:#333; }

/*edit the URL to the icons (50pxx50px) + edit for the number of tabs you have*/
.fancy-tabs .et_pb_tabs_controls li:nth-child(1) a { background: url(‘http://www.divibuilderexamples.com/wp-content/uploads/2016/02/tabs-1.png’) no-repeat top center; }
.fancy-tabs .et_pb_tabs_controls li:nth-child(2) a { background: url(‘http://www.divibuilderexamples.com/wp-content/uploads/2016/02/tabs-2.png’) no-repeat top center; }
.fancy-tabs .et_pb_tabs_controls li:nth-child(3) a { background: url(‘http://www.divibuilderexamples.com/wp-content/uploads/2016/02/tabs-3.png’) no-repeat top center; }
.fancy-tabs .et_pb_tabs_controls li:nth-child(4) a { background: url(‘http://www.divibuilderexamples.com/wp-content/uploads/2016/02/tabs-4.png’) no-repeat top center; }
.fancy-tabs .et_pb_tabs_controls li:nth-child(5) a { background: url(‘http://www.divibuilderexamples.com/wp-content/uploads/2016/02/tabs-5.png’) no-repeat top center; }
}
*You will need to edit the code above to suit your required tabs. The demo is for 5 tabs so there are 5 icons referenced for the 5 tabs. Just add the URL’s from step 2 into the code above for each of the 5 tabs. Follow the pattern for more or less tabs in the section commented /*edit the URL to the icons (50pxx50px) + edit for the number of tabs you have*/

These tabs were created by combining code from several threads found in the Elegant Themes support forum*. A great resource of talented ET dev’s that many of us sometimes forget to utilize. If you have a problem, do a search in the support forum and chances are the solution is already there.

See the Divi Fancy Icon Tabs tutorial @ Divi Theme Examples

Divi Theme Examples. The place for Divi CSS hacks and hundreds of live Divi Theme Examples.