Creating Custom Tabs With Icons Using Blurbs

by | Divi Freebies, Divi Tutorials | 214 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!

214 Comments

  1. Kristen

    This is great and working perfectly, thank you! I want to link to these tabs from another page (in other words, one button would link to tab 1, another would link to tab 2, and so on). I can’t get this to work and think maybe I’m not giving the right element/module the class id? How can I achieve a link to any open tab?

    Reply
    • Ania Romańska

      You’d need to add more JS, to open the tab (make section visible) on page load based on some parameter in the URL.

      Reply
  2. Ozki

    Can I use buttons or text (ul) instead of blurbs?

    Reply
    • Ania Romańska

      Yes, but with buttons you’ll need to modify the JS, as it looks for a link inside the module and the Button module is a link.

      Reply
  3. marine

    Hello,

    How can I remove the hover effect ? I don’t want it
    Thanks

    Reply
    • Ania Romańska

      You’d need to remove the corresponding part of the custom CSS code.

      Reply
  4. Adam Wills

    This is an excellent tutorial, but I cannot get it to work. I followed this tutorial several times over and double-checked my work. Everything seems to be reflected properly except the jQuery isn’t executing properly. I even downloaded and installed the layout template, and same result. Any ideas?

    Reply
    • Ania Romańska

      It’s most likely some JS conflict. Check your browser inspector if there are any JS errors in the console.

      Reply
  5. Jonathan Baldwin

    Hey Ania,

    Brilliant tutorial, thank you. I am trying to find a way to turn tabs into toggles (or an accordion) on a mobile… so that the content displays directly below each tab when it is activated, instead of displaying at the bottom of all the tabs. Would this be possible with your code?

    Reply
    • Ania Romańska

      No, it wouldn’t be possible with this code, it would need to be modified or a completely different layout structure would need to be used.

      Reply
  6. Rumy

    Thank you for the great tutorial, Ania! I was looking to use the Person module instead of the blurb module but I was wondering, does the person module link act differently than the blurb? I click the person module and nothing happens.

    Reply
    • Ania Romańska

      I think the difference is in the link – the Person module doesn’t include any link by default, so you’d need to include a text link in the description or modify the JS.

      Reply
  7. Arundhathy

    Is there a way of making the blurbs/tab display like an accordion on mobile, so that the blurbs open below the relevant tab and not below the bottom tab?

    Reply
  8. Samantha

    Hi Anna,

    Thank you for this amazing, in depth tutorial! I have followed the video several times and worked on the code. For some reason, I cannot get the modules to show? Any suggestions?

    Reply
  9. Karthikeyan

    Hi Ania,

    Thanks for the tutorials. can we make the tabs switch to next tab on some time intervals and make them stop on mouse enter and mouse leave. Is it possible?

    Thanks

    Reply
  10. Iggy

    Hi Ania,

    excellent idea and solution.
    I’ve done all that you have with success but i have a problem with animating my sections when i click on coresponding blurb. I tried animation on whole section and on elements in that section and nothing works.
    Do you have any advice what should i do or try?

    Thanks in advance,

    regards

    Reply
  11. Egor

    I loved your lesson! It’s almost what I was looking for. Tell me, what would it look like if the tabs are on the left (vertically), and the content to the right of them ? Is that possible? it is possible tab1 tab2 tab3 tab4 to register the modules, and not sections ? That is, there will be one row with 2 columns, in the first column there will be modules “blurb”, and in the second there will be modules “text”. Right ? Here’s an example of what I want to do: https://themes.bestdivichild.com/business-pro/#

    Reply
  12. Michal

    Hi Ania,
    Thanks for this excellent tutorial, the result is beautiful and elegant. I was just wondering, is there a way of making the blurbs/tab display like an accordion on mobile, so that the blurbs open below the relevant tab and not below the bottom tab? (I have five on my page)
    Many thanks,
    Michal

    Reply
  13. Robert Young

    In your “How to make one tab open on page load?” section, you are missing a dash in this part in parenthesis “(it will have both: tab-title active tab)”… “active tab” should be “active-tab”. I was copying and pasting so couldn’t figure out why it wasn’t working. Glad I looked closer. Thanks for this though!!

    Reply
    • Ania Romańska

      Thank you, Robert, for letting me know!

      Reply
  14. DANNY ABRAMOV

    Hi Ania,

    What if I want to use images instead of icons? At the moment, when I try to use images, and remove the tab title, there is a large margin below the image, and its not centered properly.

    What class should I use to control the image I use instead of and icon?

    I tried .et_pb_main_blurb_image but it doesn’t work.

    Thank you for your help and awesome tutorial!

    Reply
    • Ania Romańska

      It’s hard to advice without seeing the page live, but the .et_pb_main_blurb_image is the container that has the 30px margin bottom added, so removing this should help. To target the image itself you could use .et_pb_main_blurb_image img

      Reply
      • DANNY ABRAMOV

        Problem fixed, thank you!

        One more quick question. I would like the first tab from the left to be open from the start. What needs to change in the code for that?

  15. Krzysiek

    Hi there. Is there any option to hide a tab (all tabs) by clicking the title/icon?

    Reply
    • Robert

      My client is asking for this now… Help! =D

      Reply
  16. Regina

    Hi Ania,

    can I do all the modifications in the Customizer of the Divi Theme or do I have to install a Divi Child Theme?

    Reply
    • Ania Romańska

      Yes, you can add your CSS in Theme Customizer, or keep it in the Code module. And you can add JS code to the head of your website via the Integration Tab of the Divi Theme Options. You do not need a child theme.

      Reply
  17. Tain

    Hi Ania

    Could you please explain this in a bit more detail for me?

    How to make one tab open on page load?

    I have seen your answer above, but still can’t get it right.

    Thank you

    Tain

    Reply
    • Ania Romańska

      I’m sorry Tain, I don’t know how else I can explain it other than what I’ve already written in the post – https://imgur.com/G7VdraH.

      Reply
  18. Ł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
  19. 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
  20. 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
  21. 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
    • Jack

      Hi Ania, thanks for this nice option ! I have the same question as Bernd.. could you tell us how to have different color for each tab activated? many thanks!

      Reply
      • Ania Romańska

        Each blurb would need to have an additional CSS class (ed. tab-title tab-red) and then you’d need to add some CSS to target that tab, when it’s activated, something like:

        .tab-title.active-tab.tab-red {background:red;}

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