We’ve had quite a few enquiries off the back of our Divi short code post requesting help around customising the Divi tab module. Unfortunately short codes do not work within the title fields and the entire module in it’s default form is quite lacklustre. If you’ve never heard of Divi, we highly recommend you check out more information on the Elegant Themes website, by clicking here. Super flexible, quick and as complex as you need it to be, we love using Divi for most of our website projects.

In this post we’ll be discussing how you can customise the tab module (particularly the title field) by changing the dimensions and layout of the tabs module, adding images and descriptions. For this example we’ll be making something like the tab titles in the image below, but you can further customise the images, styles and colours to suit your website.

 

 

In this recent website of ours, we’ve customised the tabs module into a user dashboard, whereby a visitor can see a custom form depending on the tab they click relating to their circumstances. The forms have been added using Gravity Forms and feature conditional logic and ticket support integration (we won’t be delving into how we created these and what they do in this post, you can learn more about the plugin in general here).

 

Getting started with customising the Divi tabs module

 

The process of customising the tabs module will involve adding custom CSS to your theme, which is easily done in your admin dashboard (www.yourdomain.com/wp-admin). In the left hand WordPress menu go to Divi > Theme Options. Scrolling to the bottom you will find a field where you can post any custom CSS required in your project.

 

Once you’ve created your basic tab module, it’ll look something like this:

Pretty boring. The Divi tabs module doesn’t offer much in the way of customising the tab titles further than changing colours and font styles. But what if you need to add an image or change the alignment? This first snippet sets the spacing, font styles and alignment.
 


.et_pb_tabs.icon-tabs {
border: none;
}
.icon-tabs ul {
margin-bottom: 30px;
}

.icon-tabs .et_pb_tabs_controls li {
border-right: none;
}

.icon-tabs ul.et_pb_tabs_controls {
background-color: white;
}
.icon-tabs img.alignleft {
margin-right: 70px;
}
.icon-tabs .et_pb_all_tabs {
border-top: none;
}

.icon-tabs .et_pb_tabs_controls {
padding: 0 10% !important;
}
.icon-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.icon-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align:center;
color: #a3a3a3;
text-transform: uppercase;
letter-spacing:2px;
font-weight: 600 !important;
}
.icon-tabs .et_pb_tab_active a {
color: #0b83a1 !important;
}
.icon-tabs .et_pb_tab h2 {
line-height: 1.5em;
color: #0b83a1;
font-weight: 600 !important;
font-size: 24px;
}
.icon-tabs .et_pb_tab p {
font-weight: 600 !important;
}
.icon-tabs .et_pb_tabs_controls li a:before {

display:block;
font-size:40px;
color: #a3a3a3;
margin-bottom: 15px;
font-weight: 600 !important;
}

.icon-tabs .et_pb_tabs_controls li.et_pb_tab_active a:before {
color: #0b83a1;
}

ul.et_pb_tabs_controls::after {
border-top: none !important;
}

.et_pb_tabs .et_pb_all_tabs .et_pb_tab {
padding-top: 1em;
}

/*
* === Mobile Styles ===
*/
@media (max-width: 768px) {

.icon-tabs .et_pb_tabs_controls li {
width: 100% !important;
}

.icon-tabs .et_pb_tabs_controls {
padding: 0 !important;
}

.icon-tabs .et_pb_tabs_controls li {
margin-bottom: 35px;
}
}

 

After you’ve added this code to your custom CSS in the Divi backend panel you’ll see that it looks something like this:

 

divi custom tabs styles
 
Not great looking but an improvement on the default look. Within the CSS code you have just copied you’ll see the opportunities to change the colours of each element (e.g. “.icon-tabs .et_pb_tab h2” refers to the title text and you can amend the colour, size etc. “.icon-tabs .et_pb_tab_active a” refers to the active state of the tab and you can amend the colour or add your own CSS to change size, shadow or anything else).

If you’re planning on more than 2 tabs, you’ll also need to adjust the CSS within “.icon-tabs .et_pb_tabs_controls li”, setting the “width” to a percentage that’ll fit all of your tabs. For instance if you’re using 3 tabs, this will be 33%, 4 will be 25% and so on.

Once you’ve fiddled with the colours, spacing, sizing and other styles, it’s time to add some images.

 

Adding custom icons and images to your Divi tab titles

 

For this step, you’ll be adding more CSS. First you should visit the “Media” tab of your WordPress backend menu and upload the images that you’d like to add above your Divi tabs titles. We’d advise you make sure these are resized to fit your tabs exactly, as well as ensure your images are the same sizes.

Once uploaded, you’ll need to click on the image in the Media tab and find out the file URL that WordPress created for the image. It’ll be something like: www.yourdomain.com/wp-content/uploads/2018/08/house.png. Make a note of your image URLs in a document or notes as you’ll need it them in precisely 18 seconds.

Armed with your image URL’s, copy the below CSS into the same box in Divi theme options as before:

 

/*
* === Change Icons Here ===
*/

.icon-tabs .et_pb_tab_0 a:before {
content: url(**THE URL OF THE FIRST IMAGE THAT YOU FOUND EARLIER**);
padding-top: 20px;
}
.icon-tabs .et_pb_tab_1 a:before {
content: url(**THE URL OF THE SECOND IMAGE THAT YOU FOUND EARLIER**);
padding-top: 20px;
}

.icon-tabs .et_pb_tab_content a:before {
content: '' !important; }

 

divi theme tabs module customisation

 

Once you’ve copied this code and added your own URL’s, you’ll see the images appear above the tab titles. This example uses only two tabs and therefore two images, but if you’re using more than 2 you’ll just need to duplicate the code and change the tab number and image URL. For example, for a third image you’d copy (notice the tab number has changed and increased by 1, so your tabs are ordered 0, 1 and 2.):

.icon-tabs .et_pb_tab_2 a:before {
content: url(**THE URL OF THE THIRD IMAGE THAT YOU FOUND EARLIER**);
padding-top: 20px;
}

 

Adding a description to each of your tabs

 
Finally, adding a description is quite simple and unsurprisingly involves just adding a little more CSS below, again into the same box as before:
 

/* add description */

.icon-tabs .et_pb_tab_0 a:after {
content: 'this is a description';
font-size: 9px;
padding-top: 10px;
display: block;
}

.icon-tabs .et_pb_tab_1 a:after {
content: 'this is another description';
font-size: 9px;
padding-top: 10px;
display: block;
}

.icon-tabs .et_pb_tab_content a:after {
content: '' !important; }


 

This code snippet adds a description below and after your tab titles. To add your own content, it’s simply a case of removing anything between the apostrophes next to “content:” and adding your own. Again, if you have more than two tabs, you can simply duplicate one of the pieces of code and changing the number in “.et_pb_tab_1”. Your third tab, for instance, will be “.et_pb_tab_2” and so on.

 

Final thoughts

 

Once this is done, you’re all set! We hope you’ve found this post useful, as always if you have any questions please let us know. If you’re not yet using Divi, find out more here.

Related Posts

Download and use our FREE Divi Child Theme today Child themes are a really useful way to customise the code within a main theme. If you're not certain what a child theme is you should visit our guide...
Style The 404 Page And Other Non-Customisable Page... This post is a follow on from one we published a few weeks back. In this recent article we discussed how to enable shortcodes within the Divi theme so...
Add Divi Modules ANYWHERE Using Shortcodes In this tutorial we will be showing you how to place Divi modules anywhere that you like on your website. If you are unfamiliar with the Divi theme an...
Customise The Tab Titles Within The Divi Tab Module ultima modifica: 2018-09-13T15:13:32+00:00 da Liam Pedley