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.

Elegant Themes' Black Friday/Cyber Monday sale is still on if you want 25% discount! Dismiss

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close