Fancy Divi Icon Tabs

The Divi Tabs module is a great way to condense your content into manageable tabs of content, but the default tabs are a little bit plain. So, with the help of a little CSS code and some icon graphics you can have some Fancy Divi Icon Tabs just like in the image below.

If you are looking for alternative ways to create Divi tabs, then check out our post on How to add tabs to Divi (module & plugins).

How to customize the Divi Tabs module

To create some Fancy Icon Divi Tabs of your own, you will need to do the following.

1. Add a Divi Tabs module

Add a new section & row and then add a new Tabs module. In the Tabs module click on the Custom CSS tab and add the class fancy-tabs.

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.

3. Add custom CSS to Theme Options/style.css

Go to Divi > Theme Options and scroll down to the Custom CSS box or your child themes syle.css file. (Learn more about Where to add custom CSS to Divi). 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 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 Custom Divi tabs were created by combining code from several threads found in the Elegant Themes support forum. This is a great resource of talented ET devs 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.