Creating Custom Tabs With Icons Using Blurbs

by | Divi Freebies, Divi Tutorials | 183 comments

How to add icons to Divi Tabs? How to add different module inside Divi Tab?

Instead of adding icons to Divi Tabs Module or looking for a way to display another module inside each tab I took a different approach and created custom tabs layout using Blurbs as tabs titles and regular Divi sections for each tab content. This way we aren’t constrained by the default Tabs Module settings and can put any modules inside each tab. How great is that? My layout scales nicely for mobile and is available for you to download. Below I’m giving a step by step instructions on how it was made.

Step 1 – Create Titles Structure

Add a standard section and set this section padding to 0. In the Advanced Tab set the CSS ID to blurb-tabs.

Inside this section, there should be a row with one column. We don’t need to worry about the number of columns for each tab, we will control it via custom CSS (flexbox property to be exact). The demo uses four columns for the titles, but with some tweaks, it can easily be adapted to have either more or fewer columns.

For the row settings – make the row fullwidth and set Custom Gutter Width to 1.

Now we add four Blurbs Modules. You can style the blurbs as you wish, in my layout I’m using icons and I’ve set different padding for desktop, tablet and mobile and gave each blurb different background colour. The important thing is to add a custom class of tab-title to each and also set the link URL to #tab1 (#tab2, #tab3, #tab4 – each blurb links to different id).

Step 2 – Style The Titles

Obviously right now we have four fullwidth blurbs. It can be easily fixed with CSS flexbox. If you’d like to learn more about it – there is a fun game called Flexbox Froggy, which teaches you all the flexbox properties. Here is our CSS to fix it:

/* Style the Blurbs Tabs */
#blurb-tabs .et_pb_column {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}
#blurb-tabs .tab-title {
	width:25%;
}

We need to use media queries to change the width of blurbs on smaller screen sizes, like this:

@media (max-width: 767px ) {
	#blurb-tabs .tab-title {
		width:50%;
	}
}
@media (max-width: 479px ) {
	#blurb-tabs .tab-title {
		width:100%;
	}
}

To use a different number of columns for tabs you’d need to adjust those width values.

In my demo layout, I’m also adding a few adjustments for the tablet and mobile view (like changing the icon size and moving the icon to the left on mobile). Here are full media queries styles for this layout:

/* Tab Titles Mobile Styles */
@media (max-width: 767px ) {
	#blurb-tabs .tab-title {
		width:50%;
	}
	#blurb-tabs .tab-title .et_pb_main_blurb_image {
		margin-bottom:10px; /* Reduce icon bottom margin */
	}
}

@media (max-width: 479px ) {
	#blurb-tabs .tab-title {
		width:100%;
	}
	#blurb-tabs .tab-title .et_pb_blurb_content { /* This moves icon to the right */
		display:flex;
		align-items:center;
		justify-content:flex-start;
	}
	#blurb-tabs .tab-title .et_pb_main_blurb_image { /* Fix icon margins on mobile */
		margin-bottom:0;
		margin-right:30px;
	}
}

This gives us nice, responsive look for blurbs, but we also use some custom CSS to create hover effects for each tab/blurb, as well as set different colours for “active” tab. Here is the code:

/* Hover Styles for Blurb Tabs - Titles */
#blurb-tabs .tab-title {
	transition:all .3s ease-in-out;
}
#blurb-tabs .tab-title:hover {
	cursor:pointer; 
	background:#222; /* Tab hover background color */
}
#blurb-tabs .tab-title.active-tab {
	background:#D9DFE2; /* Active tab background color */
}
#blurb-tabs .tab-title.active-tab .et_pb_blurb_container h4 a {
	color:#000; /* Active tab title color */
}
#blurb-tabs .tab-title.active-tab .et-pb-icon {
	color:#666!important; /* Active tab icon color */
}

Step 3 – Add your content

We need four section – one for each tab. The best part of this layout is that you can put literally anything you like in each tab – as long as it fits inside a single section. I’m using an Image, Text and a Button Module in each section/tab.

The important part is to set proper CSS classes and IDs. Each section needs a tab-content class and a unique ID of tab1, tab2, tab3 and tab4 (the names should be the same as Blurbs URL attributes, without the # symbol).

Step 3 – Hide the Tabs on page load

We’ll hide the section with css, like this:

/* Hide the tabs content/sections */
.tab-content {
	display:none;
}

Step 4 – a little jQuery magic

Now – with some jQery – we’ll add an active-tab class to each Blurb Title when clicked, and show a section with the same ID as the Blurbs href attribute (URL), while making sure that other sections are being hidden. This is the working code:

jQuery(document).ready(function($) {
	/* Blurbs as Tabs */
	$('.tab-title').each(function () {	
		var section_id = $(this).find("a").attr("href");
		$(this).find("a").removeAttr("href");	
		$(this).click(function() {
			$(this).siblings().removeClass("active-tab");
	                $(this).addClass("active-tab");
			$('.tab-content').hide();
			$(section_id).show();
		});
	});
});

If you are not sure where to put that jQuery code – I have written some detailed instructions on how to add javascript to your Divi page. That’s it – you should be able to easily recreate this layout on your Divi website 🙂

Edit:

How to make one tab open on page load?

To make one of the sections visible by default you would need to add another class to this section, eg. tab-open (so it will have both: tab-content tab-open, without the comma – just the space between the two). And to make corresponding tab active the Blurb Module also needs second class active-tab (it will have both: tab-title active tab).

And then in CSS right after this:

.tab-content {
	display:none;
}

you should add:

.tab-open {
	display:block;
}

Edit #2:

How to add a smooth scroll to choosen section on tab click?

I’f you’d like your page to automatically scroll to the selected section, like on that demo page (which can be useful on mobile devices), you’d need to add this line to jQuery function:

$('html, body').animate({scrollTop: $(section_id).offset().top}, 1000);

right after

$(section_id).show();

so the full JS code would look like this:

jQuery(document).ready(function($) {
	/* Blurbs as Tabs */
	$('.tab-title').each(function () {	
		var section_id = $(this).find("a").attr("href");
		$(this).find("a").removeAttr("href");	
		$(this).click(function() {
			$(this).siblings().removeClass("active-tab");
	                $(this).addClass("active-tab");
			$('.tab-content').hide();
			$(section_id).show();
			$('html, body').animate({scrollTop: $(section_id).offset().top}, 1000);
		});
	});
});

And if you are using a fixed navigation you’d need to edit this new line of code (and replace 80 with your navigation height):

$('html, body').animate({scrollTop: $(section_id).offset().top - 80}, 1000); 

That’s it!

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page!


Can’t see the form? Click here

Feeling generous?

If you like my tutorials and want to see more free resources like this, please consider making a donation.

Personal Info

Donation Total: €5.00

Have you seen our Divi Child Themes?

We offer a great selection of high-quality designs to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

183 Comments

  1. Łukasz

    Hi Ania, Thank you for this superb tutorial. I had a need to create more blurbs than you (8). And small problem I have is that when I resize page (when it’s still not mobile size but tablet, then some text titles of blurbs are going out of borders. How can I fix it?

    Reply
    • Ania Romańska

      Hi,
      You would need to add a new media query targeting the problematic screen size you and alter the blurb-tabs width or font size inside it.

      Reply
  2. Ahmad

    How di I make the first tab defaultly appeared without need to toggled it first?

    Reply
    • Ania Romańska

      It’s explained in the end of the post.

      Reply
  3. David McLeod

    What an awesome video, AND blog post. This is one of the best tutorials I’ve seen recently. Thanks so much for posting this!

    Reply
  4. Bernd

    Hi Ania, thanks for that good solution. My question is what i have to change on the script, if i want to show different background-color for each active tab?

    Reply

Submit a Comment

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


Sign up to our newsletter!


Shares

Sign up for the good stuff!

Free Resources for Divi Lovers!

Join our Newsletter!

We'll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Pin It on Pinterest