R26: How to use the tabs module for content navigation

by | Dec 13, 2016 | Menus, Tabs

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

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

How to use the tabs module for content navigation tutorial for divi

 

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

How to use the tabs module for content navigation tutorial for divi

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

How to use the tabs module for content navigation tutorial for divi

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.

How to use the tabs module for content navigation tutorial for divi

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.

How to use the tabs module for content navigation tutorial for divi

 

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.

Full CSS
/*--------------------------------------------------------------------*/
/*----------Tabs Module for Content Navigation by Divi Soup-----------*/
/*--------------------------------------------------------------------*/


/*Remove padding and set the background color for the tabs*/

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

/*Remove the tabs border*/

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


/*Remove the border for the tab controls*/

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


/*Style the tabs controls*/

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


/*Style the individual tabs controls*/

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


/*Evenly space the tab controls*/


/*Replace the number 8 with the number of tabs you have*/


/*Divide 100 by the number of tabs you have and replace the width value with your result*/

.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%;
}


/*Position the active tab*/

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


/*Add the bottom line effect animation to the tabs*/

.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);
}


/*Animate the bottom line effect*/

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


/*Set the tab image to fullwidth for larger screens*/

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


/*Style the tab text content*/

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


/*Style the tab text links*/

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


/*Add the bottom line effect animation to the tab text links*/

.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);
}


/*Animate the bottom line effect on the tab text links*/

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


/*Adjust for smaller screens*/


/*This creates two rows of tabs, set the width percentage based on the number of tabs you want on each row, 25% = 4 tabs*/

@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;
        /*set the height of the tabs when using multiple rows*/
    }
}

@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;
    }
}


/*At this breakpoint, the tabs will stack one on top of the other, set the height of the tabs based on how many you have, 100 / 8 = 12.5*/

@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;
    }
}


/*Hide the body text on smaller mobiles*/

@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;
    }
}


/*--------------------------------------------------------------------*/
/*--------End Tabs Module for Content Navigation by Divi Soup---------*/
/*--------------------------------------------------------------------*/

 

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

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!