R26: How to use the tabs module for content navigation

Recipe #26 was inspired by another Divi community member. I had been meaning to write a new recipe on the tabs module for quite a while and the question in the Facebook group gave me some inspiration on what to create.

Here we are using the tabs as a kind of menu to switch between content within each tab. You can add anything you like within the content area of each tab, but I have used an image with an overlapping div to create a slider type effect.

This layout will work for standard, fullwidth and fullwidth with zero gutters.

Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes.

Some images to use in the tabs, mine are from Pixabay

Cooking time

This should take you around 15 minutes max.

Preparation

First let’s set up our tab module. On your page, add a new standard section with a single column and add a tabs module..

Method

Next, open up the row settings and apply the following depending on how wide you want the tabs module to be:

Standard width:

Make this row fullwidth: No
Use custom gutter width: No

Fullwidth:

Make this row fullwidth: Yes
Use custom gutter width: No

Fullwidth zero gutters:

Make this row fullwidth: Yes
Use custom gutter width: Yes
Gutter width: 0

It doesn’t matter which option you choose, this layout will scale nicely if you change your mind later, as long as your images are wide enough to fill the width setting you have chosen, but its a good idea to start with the standard width to make sure your text fits in the available space.

Then save & exit.

Now open up the tabs module settings and click on the custom CSS tab and give the module a custom class of ds-tab-navigation

Next you will want to go into the advanced design settings tab and adjust your settings for the following:

Active and inactive tab background colours, tab font, tab font size, tab text colour, body font size and body font colour.

The font size will depend on which font you are using and how long your tab titles are. You don’t need to set the font sizes for tablet and mobile, we will handle that with CSS using percentages so everything scales down nicely.

Once you have all your settings how you want them, click on the general settings tab and then add new tab.

This is where we add the content we want to display in each tab. I am using an image with dimensions of 1920x1080 px so at fullscreen it will fill the available space, there is also a little bit of CSS included later to scale that image to 100% width for users viewing on even larger screens.

Here is the HTML I am using in my tabs 

<img class="ds-tabs-image" src="IMAGE URL HERE">
<div class="ds-tabs-text">
<h2>TITLE HERE</h2>
<p class="ds-tabs-body">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>
<a href="LINK URL HERE">LINK TEXT HERE</a>
</div>

And this is what we are doing:

Assigning the ds-tabs-image class on the image allows us to add a width of 100% in the CSS so it fills the space no matter what screen size it is viewed on. You will want your images to be at least 1920px so they don’t pixelate too much on very large screens.

Creating a <div> and assigning it a class of ds-tabs-text so that in our CSS we can position it to sit over the image rather than below it. We are putting all our text content within that <div>.

Assigning the <p> a class of ds-tabs-body so that we can hide it on mobile and just show the title and link text. Leaving the body text visible on small screens will mean we either have to make the font size really small or have the text cover most or all of the image, which doesn’t look good.

So once you have created your first tab, save it and then duplicate it for how ever many tabs you want to show. Then go in and edit the content of each tab, changing out the tab title, image url, title, text and link text and url for each one. When your’re done, save and exit the module.

Now for the CSS. There are full comments in the complete CSS below but here is an overview of what each bit is doing:

Here we are setting the background colour that shows when the tabs change and removing borders and padding

.ds-tab-navigation .et_pb_all_tabs {
    padding: 0;
    background: #000 !important;
    border-top: 0;
}

.ds-tab-navigation .et_pb_tab, 
.ds-tab-navigation .et_pb_tabs_controls a, 
.ds-tab-navigation .et_pb_tabs_controls .et_pb_tab_active a {
    padding: 0;
}

.ds-tab-navigation.et_pb_tabs {
    border: none !important;
}

.ds-tab-navigation .et_pb_tabs_controls ul {
 border-bottom: none;
}

Next we are positioning the tabs absolutely so they sit on top of our image rather than above it, we are giving them a width of 100% and a transparent background so we can see the image through them (you will need to have set transparency in the tab background colour in the advanced design settings of the module for this to take effect).

Then we are styling the individual tab controls so they have a fixed height and the text is aligned to the center both horizontally and vertically, then there is a little transition so they change gradually rather than instantly.

.ds-tab-navigation ul.et_pb_tabs_controls {
    border: none;
    position: absolute;
    width: 100%;
    background: transparent;
    z-index: 10;
}

.ds-tab-navigation .et_pb_tabs_controls li {
    height: 80px;
    text-align: center;
    padding: 5px 10px !important;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-transition: background 0.3s, color 0.3s;
    transition: background 0.3s, color 0.3s;
}

This next bit is what makes the tabs equal widths and fill the entire horizontal space. In my demo I am using 8 tabs, so this is the CSS for 8 tabs. If you are using a different number this is what you need to do:

Change both number ‘8‘s to the number of tabs you are using
Change 12.5% to the result of this sum: (100 / your number of tabs). So for instance, if you want to use 5 tabs it would be (100 / 5 = 20), so change 12.5% to 20%.

.ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8),
.ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8) ~ li {
    width: 12.5%;
}

Now for the tab animation. Firstly we are setting the position of the active tab to relative, so we can add a pseudo element to it for the animation. The second and third sections are the actual animation, we are hiding a bottom border effect initially by setting the scale width to 0, and then when that tab becomes active, the third section sets the scale to 1, or fullsize, and so animates the effect.

.ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active {
    position: relative;
    bottom: 0 !important;
    height: 80px;
    margin-top: 0;
}

.ds-tab-navigation .et_pb_tabs_controls li:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    -webkit-transform: scale3d(0, 5, 1);
    transform: scale3d(0, 5, 1);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
    transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
}

.ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active:before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

In this section we are setting the styles for the classes we added to the content area previously, so the image, text and link. Then we are adding the same animation effect to the link, but on hover rather than when it is active. We have also changed the position of the animation so it sits centrally underneath our link.

.ds-tab-navigation img.ds-tabs-image {
    width: 100% !important;
    margin-bottom: -10px;
}

.ds-tab-navigation div.ds-tabs-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.ds-tab-navigation div.ds-tabs-text a,
.ds-tab-navigation div.ds-tabs-text h2 {
    color: #fff;
    text-transform: uppercase;
}

.ds-tab-navigation div.ds-tabs-text a {
    padding: 10px 20px;
}

.ds-tab-navigation div.ds-tabs-text a:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40%;
    width: 20%;
    height: 2px;
    background: #fff;
    -webkit-transform: scale3d(0, 5, 1);
    transform: scale3d(0, 5, 1);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
    transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
}

.ds-tab-navigation div.ds-tabs-text a:hover:before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

And finally, our media queries. Eights tabs wide won’t look good on smaller screens screens so we are switching it to four wide under 1280px. Then we are adjust the font size so it scales down and bit and everything still fits in.

After that, Divi will automatically stack our tabs one on top of the other, so we setting the height of each tab to 12.5% so that they fill 100% of the height of the tab. Again here you will want to adjust this based on the number of tabs you have. Use the same calculation I mentioned earlier for the width.

The last bit reduces the font size again and hides the <p> text when the screen gets too small for it be viable to show it.

@media only screen and (max-width: 1280px) {
    .ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8),
    .ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8) ~ li {
        width: 25%;
    }
    .ds-tab-navigation .et_pb_tabs_controls li, .ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active {
        height: 40px;
    }
}

@media only screen and (max-width: 1023px) {
    .ds-tab-navigation ul.et_pb_tabs_controls {
        height: 100%;
    }
    .ds-tab-navigation div.ds-tabs-text h2 {
        font-size: 80%;
    }
    .ds-tab-navigation div.ds-tabs-text a {
        font-size: 70%;
    }
    .ds-tab-navigation div.ds-tabs-text p {
        line-height: 1em !important;
    }
}

@media only screen and (max-width: 766px) {
    .ds-tab-navigation .et_pb_tabs_controls li, .ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active {
        height: 12.5%;
    }
    .ds-tab-navigation p.ds-tabs-body {
        font-size: 70%;
    }
    .ds-tab-navigation .et_pb_tabs_controls li a {
        font-size: 70%;
    }
    .ds-tab-navigation div.ds-tabs-text {
        right: 0;
        width: 75%;
        padding: 10px;
    }
}

@media only screen and (max-width: 500px) {
    .ds-tab-navigation p.ds-tabs-body {
        display: none;
    }
    .ds-tab-navigation .et_pb_tabs_controls li a {
        font-size: 50% !important;
    }
}

Here is all of the CSS with full comments. Copy and paste this into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box and be sure to save.

And that’s it. Now you should have a tabs module with content navigation just like my demo.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X