Creating Custom Tabs With Icons Using Blurbs

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

237 Comments

  1. Peacecamper

    I’m looking for a way to link from another page to a specific tab, can you help me with that?

    Reply
  2. Jae

    This is great. But I cannot load the json file. When I try importing it into my Divi Library (I’m guessing that’s what I’m supposed to do with it?) I get an error message, “This file should not be imported in this context.” Am I missing something?

    Reply
    • Ania Romańska

      Please follow the instructions provided on the download page – you need to load the JSON file directly on the page and not in the Div Library.

      Reply
  3. Luis Guzman

    Hello! Thank you for this amazing tutorial.

    I wonder if is possible to make a toggle effect, so if press once, the tab block appears

    If press twice it disappear.
    So far there is always one displayed.

    Reply
  4. Deon

    Hi Ania, thanks so much for this!

    Its working great, the only issue I have is that when I have added the extra classes and css to make one tab open on page load, it will show the first tab content on load – but when clicked on the blurb again the content disappears?

    Thanks in advance, your help is appreciated.

    Reply
    • deonknoes

      The previous problem has been resolved. Thanks. I would like to know how I would add padding between the blurbs, but to still have them aligned with my content grid? Gutters are set to 1, and if I change, the lat blurb moves down. Thanks

      Reply
    • Helen

      Hi Deon,

      I have the same problem. How did you solve yours?

      Thanks for your reply.

      Reply
      • Emily

        I’m also having this issue. Any tips on how you resolved it?

        Thanks!

      • Karl

        Heya team, I had the same issue, found it was because I added the #tab1, #tab2 etc. to the MODULE Link. It needs to be on the TITLE Link to work

  5. Caitlin

    How do I change the column width of each blurp, so it’s possible to put more blurps/ columns next to each other?

    Reply
    • Ania Romańska

      You’d need to adjust the CSS code.

      Reply
  6. daniel

    T H A N K S ! ! !
    Fantastic! Works without expensive plugins!
    Great job!

    Reply
  7. Van

    Hi Ania,

    Thanks for the tutorial! I have a question.

    I have 2 rows of 8 tabs each. How do I remove the ‘active tab’ on the 1st row, when I click on a tab in the 2nd row?

    Because the background color of the active tab on the 1st row stays when I click a tab on the 2nd row.

    Thanks a lot!

    Reply
    • Ania Romańska

      I’m sorry, but this code is not going to work with multiple instances on one page, you’d need to modify the JS.

      Reply
      • Van

        I figured it out!

        Made 3 different scripts for each row and changed

        ‘this’

        to

        ‘css class of each row’

        Thank you so so much Ania! 🙂

  8. Webmediacy

    Hello, great tutorial, but I could not get it to work at the jQuery part.

    I have checked and rechecked everything, I copied and pasted but it still does not work. I checked for jquery conflicts, there was an error page with dealing with Divi Booster, I deactivated the plugin but not better.

    Thanks for your help!

    Reply
    • Ania Romańska

      Instead of trying to recreate the steps – try importing the JSON layout and tweak it to your needs.

      Reply
  9. Rumy

    Hi,

    A bit of a weird issue – if I understand the code correctly, the following part should remove the “active-tab” class from previously clicked blurbs when I click on another blurb:

    $(this).siblings().removeClass(“active-tab”);

    However, it doesn’t seem to work. When I click away, it leaves the “active-tab” class on what has already been clicked. Is there a way around that?

    Reply
    • Rumy

      Please ignore! Figured it out. 🙂

      Reply
      • Vojtěch

        Hi,
        I have same problem like you, but i can´t figured it out.. I still have active tab only at first section and at click on another section status don´t change. What was trouble in your case? Only different can be using buttons instead of blurbs, but the JS code is modified and showing content at click work´s perfectly.
        Thank you so much for response!

  10. 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
      • Kristen

        This is beyond my expertise. Any more specific instructions you can give me?

      • Kristen

        Can you please help? I don’t know how to write JS, so I can’t do anything with your response. Can you be more specific? I have been searching online for possible help, but since this uses sections – and all I can find is references to tabs and accordions – I don’t know how to adapt for this situation. Thank you!

      • Daniel

        Thanks for your Comment. Interestingly I found the comment from Kristen. I have the same question. How is it possible, to link directly to a specific tab, so that the active tab would be the tab, the visitor is landing on. I Think some hints would be fabulous. Nevertheless, your tutorial is really fantastic. Thanks!

  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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?

  24. 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
  25. 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
  26. 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
  27. Ł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
  28. 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
  29. 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
  30. 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