Divi Tabs module + icons

The Divi tab module* is a great way to condense your content into manageable tabs of content, but the default tabs are a little bit blah. So, with the help of a little css and some icon graphics you can have some Fancy Divi Icon Tabs just like this.

fancy-icons-divi-tabs

Customizing 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 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.

fancy-divi-tabs-module

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.

tabs-module-url

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.

Pin It on Pinterest