Creating Custom Tabs With Icons Using Blurbs

by | Divi Freebies, Divi Tutorials | 107 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.
View Demo

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 🙂

Download Free Layout

I’ve saved this layout as a JSON file, which you can download for free and load straight to any Divi Page (not the Divi Library – create a new page and load it using the Import function of Divi Builder).

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!

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!

107 Comments

  1. Bernhard

    That’s really great ?Thanks for sharing ?
    How will it look like on devices where JS is disabled?

    Reply
    • Ania Romańska

      You would need to edit it a little to work with javascript disabled (remove the display:none; from the sections from CSS and hide them with JS instead, so all of the sections would be visible when javascript is disabled).

      Reply
  2. Eitel Bock

    This is indeed a great layout and accompanying tutorial. Thank you very much Ania.

    Reply
  3. Stefan

    Great post!

    This turns out to be one of the best resources for more advanced divi tutorials 🙂 thank you very much!

    One question: How would I have one of the tabs shown/enabled per default when the side loads?

    Reply
    • Ania Romańska

      Hi Stefan,

      You would need to add another class to this section, eg. tab-open (so it will have both: tab-content tab-open)
      And then in CSS right after this:

      .tab-content {
      display:none;
      }

      you should add:

      .tab-open {
      display:block;
      }

      And it should work.

      Reply
      • Jeff

        I’ve added this and it works great, is there any way to make the blurb it’s connected with display in the active color?

      • Ania Romańska

        Sorry Jeff, I’m not sure what do you mean exactly. Could you rephrase your question, or show an example of what are you trying to change?

      • Jeff

        So when the content is set to display by default as per your css suggestion, to also have the blurb it’s associated with display in the light grey color as if it’s been clicked on and active.

        https://imgur.com/5UBaCrn

      • Ania Romańska

        Yes, you’re right, I see what you mean. There needs to be second class active-tab added to the Blurb Module (it needs to have both: tab-title active tab).

      • Jeff

        That’s crazy, I had added that but it wouldn’t show. I guess I didn’t clear the cache when I had added it before.

        Thank you for this and your time!

  4. Maciej

    Great tutorial Ania! Thank you 🙂

    Reply
  5. Frederic

    Beautiful design and amazing used of DIVI with Blurb. Very creative too! Thank you very much for sharing…

    Reply
  6. Olga

    Thanks, Ania for the tutorial, this is so useful. Love your accent btw : )

    Reply
  7. Josh

    Mentioned this in our group but wanted to comment here and say thanks again for this awesome tutorial! Couldn’t have come at a more perfect time and is such a great solution opposed to trying to customize the tab module. I’ll be using this on many sites upcoming and will be referring back to your tutorials regularly!

    Reply
  8. Shawn

    Absolutely a clean, yet advanced piece of work!! Most excellent and you gave me one of the greatest Christmas presents ever, as I was wanting something somewhat similar, yet this FAR surpasses what I had in mind. Thank you for sharing this wonderful gift, the fruits of your labor, and your talents :o)

    Reply
  9. Ania Romańska

    Thank you all guys, I’m really happy that you like it 🙂 <3

    Reply
  10. Steven

    Thank you very much, Ania! Exactly what I was looking for, so I will be using this for a project next week!

    Reply
  11. Tammy

    Thanks Ana,

    This is great! I look forward to using it.

    Reply
  12. Nick

    Truly well done..been a Divi designer for many years, this has to be one of the most useful, eloquently communicated tutorials I have come across.

    Reply
    • Ania Romańska

      Thank you for your kind words, it’s very encouraging 🙂

      Reply
  13. Bobby C.

    You certainly have a new follower. I love your style and detailed explanation s. Please keep up the great work. I will surely keep you in mind when I get in a jam with a project. Having a good place to sub out work is always nice.

    Reply
  14. Sagar

    Thanks for this effort. 🙂

    Reply
    • Ania Romańska

      Hi Theresa,

      I just updated the post with instructions on how to make one of the tabs open by default. Hope this helps.

      Reply
  15. Emmanuel

    Hi Ania,
    Great tutorial !
    Just one question : on mobile, after clicking, the text module opens at the bottom of the 4 blurbs and so you can’t see that something is opening.
    Would it be possible to open the texte module just before the blurb which is clicked or have an automatic scroll to the text module ?
    I don’t know if I am clear enough ?
    Tks for your help.
    You can see it here https://www.teteenlair-parachutisme.com/

    Reply
    • Ania Romańska

      I edited my post and added a JS, so the tabs would open and scroll to choosen section on click.

      Reply
      • Manu

        Magic Ania !
        Great edit !

  16. David

    Fantastic tutorial Ania.
    I learnt so much.
    Thank you!

    One quick question – how would you go about showing the details of the first tab as default when first coming to the page?

    Reply
    • Ania Romańska

      Hi David,
      It is explained at the bottom of the post.

      Reply
      • David

        Thanks Ania – i missed that 😉

  17. Michael

    Hi I love this and I am tweaking bits to suit my design. (I just imported the Json file as I am a divi beginner) and I wondered how to adjust the mouse over settings on the blurb tab menu?
    Is it possible to have the box close if you click on the tab again?
    Thanks and love your work

    Reply
    • Ania Romańska