Customise The Tab Titles Within The Divi Tab Module

by | Sep 13, 2018 | Divi tutorials | 6 comments

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.

Before you go adding any custom CSS, add the class “icon-tabs” to the CSS Class of the tab module’s advanced options tab.
 


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

Customise The Tab Titles Within The Divi Tab Module ultima modifica: 2018-09-13T15:13:32+00:00 da Liam Pedley

6 Comments

  1. Kev

    This is great thanks, is there anyway to add a button after the description?

    Reply
    • Liam Pedley

      Hi Kev, if you’re looking to further customise the tab titles I’d advise you look at a post like this one, where you can create a tab like sections from blurb modules.

      Reply
  2. Chris

    Hi Liam

    Thanks for your instructions. It’s frustrating how limited Divi is with tabs!

    I followed your instructions and for some reason it didn’t work. I found that if I added icon-tabs to the tabs module setting > Advanced > CSS Class it made some changes, but nothing like the full formatting. Any idea what I might be doing wrong?

    Thanks

    Reply
    • Liam Pedley

      Hi Chris,

      Have you tried adding the CSS in Divi > Theme Options (at the bottom)?

      Liam

      Reply
  3. Kieran

    Is there a way to have 2 tabs using this? If i rename all the mapping of icon-tabs to icon-tabs2 for a seperate tab on the same page, doesnt seem to work, however seems to use some assets from icon-tabs.
    If i use icon-tabs2 on a differance page it works fine, but i cant have both icon-tabs and icon-tabs2 on the same page.
    any help, cheers!

    Reply
    • Liam Pedley

      Hi Kieran, it’s difficult to say without seeing what you are working on but since we’re working with CSS classes rather than ID’s it should work if you run a search and replace for .icon-tabs to .icon-tabs-2. Remember to change the CSS class of the second tab to icon-tabs-2 as well.

      Liam

      Reply

Trackbacks/Pingbacks

  1. Understanding Divi's Dynamic Content Feature | Liam Pedley Design - […] View our tutorial on how to style your tab module like this. […]

Submit a Comment

Your email address will not be published. Required fields are marked *

Latest from the blog

Facebook Ads Vs Goole Ads

Facebook Ads Vs Goole Ads

It can be confusing about which platform, Facebook Ads or Google Adwords, is the best choice for your company’s PPC campaign. Are there any differences? Does one platform perform better than the other? We understand you may have questions about which platform to...

The Benefits of Hiring a PPC Management Company

The Benefits of Hiring a PPC Management Company

When it comes to advertising, many businesses are looking for ways to stay ahead of the competition. The simple truth is that it’s not longer enough just to have a website. Those days are gone. We live in an era of high competition online and the use of SEO to help...