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.

Comments

comments

Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples and Divi Theme FREEBIES.

You have Successfully Subscribed!

Pin It on Pinterest