Creating Custom Tabs With Icons Using Blurbs

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

73 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

      Hi Michael,
      Sorry for the late reply… Yes, closing tabs on click is possible however it would require some custom JS coding. And if you want to change the appearance of Blurb on mouse over – you should edit the part of CSS below the /* Hover Styles for Blurb Tabs – Titles */ comment. Hope this helps and thank you for your kind words 🙂

      Reply
  18. Aimee Jones

    Hi Ania,
    Thanks for the great tutorial!

    Is it possible to create anchor links to the blurb/sections? If so, I would love to know how to go about it.
    I’m not so well versed in css and jquery so not sure where to start!

    Thanks,
    Aimee

    Reply
    • Ania Romańska

      Hi Aimee,

      Sorry for the late reply… If you’d like to link to the title tabs from different part of the page you can do so, by using this section ID, so your URL (eg. inside the button settings) would look like this #blurb-tabs

      Reply
  19. David Christopher

    Hi Ania,

    I have made all the changes and it looks great.

    One issue I am having though is the background colour height of the selected tab as the amount of text contained in each tab varies. Also different screen resolutions alters the height of the text.

    I have added CSS for mobile, tablet and the dreaded iPad Pro and I am manipulating the height by finding a default and adding extra padding in the Divi spacing. But this is messy and not very consistent.

    Do you have any advice how I could make the background .tab-content colour responsive to devices and resolutions?

    Reply
    • Ania Romańska

      I think the easiest way would be to set the min-height value for each blurb and add it to the css (depending on how tall is the tallest element) and you can set different number for different screen sizes with media queries.

      Reply
  20. Marcio

    Great tutorial!
    Im using images instead of icons, is it possible to change the image of the active blurb? instead of just changing the background?

    Reply
    • Ania Romańska

      Yes, it’s possible, but would require some custom js code. In order to replace your image with another one you’d need to replace its src attribute. Here is an idea to get you started:
      $("#myImage").attr("src", "path/to/newImage.jpg");

      Reply
  21. Chris

    Hi Ania,

    Thank you so much for the video, it really helped me.

    Is there a way that I can put in a auto scroll when clicking on the tab. Because I added more tabs on my website so when you click on it on the mobile version you can’t see the content that pops up.

    Thank you for your help.

    Reply
    • Ania Romańska

      Hi Chris,
      I just edited this post with JS code, that will do that – when you click on the tab it’ll open a section and scroll to it.

      Reply
  22. Jos

    Hey Ania,

    Great tutorial!
    I only have the question like jeff, how to add a active class to the active blurb, but not hard coded but on click.
    Is that possible?

    Keep up the nice work ;p

    Best regards Jos

    Reply
    • Ania Romańska

      Hi, I’m not sure what you mean – we are adding an active class on click. Jeff issue was to have one tab active on page load (and it is explained in the post how to do that).

      Reply
  23. Jessica

    Thank you thank you thank you!!!! Was exactly what I needed.

    Reply
  24. Jemma

    Thanks for your posting.
    I am editing my page by following your tutorial. However, when I click the tab, the contents don’t show up. 404 error has been showing rather than linked id that I made as contents. do you have any idea to solve this problem? what should I do for make for working as normal? thanks!

    Reply
    • Ania Romańska

      Hi Jemma, if you’re having trouble re-creating all the steps, you can simply download the free layout and edit it.

      Reply
  25. Jemma

    Hi Ania

    As you mentioned, I’ve cleared the steps and then I paste the .json file that I download as your tutorial. But still can’t see the contents when I click the tabs. Do you think did I put the js in the wrong place?

    Reply
    • Jemma

      Don’t worry about this comment Ania. I figured out what was the problem and how to solve it. Thanks!

      Reply
  26. Connie

    Thank you, this is something I always wanted to realisze…

    Reply
  27. Alfred

    Thank you so much for a great tutorial and a great design idea.

    Reply
  28. heritier

    This is a great tuto and i like it.

    My little question is how can i add a button that on click it’ll open the section I want?

    Thanks

    Reply
  29. Philipp

    Hi Ania,
    that’s a great tutorial and module. I love it! But I do have problems to add another module to that page I generated with this module within the console. How can I do that?
    Thank you very much!

    Reply
  30. Francis

    Hi Ania,
    phantastic,. I use it for a client site. Looking fine within divi Builder. Doesn´t work fine when i exit the VB.
    Anyway a great tutorial

    Reply
  31. Sash

    I use your tab tutorial for our member dashboard, veriy nice, Thank you.

    One little problem… the last menu item is the logout button, how i can make clickable without loos the design and conflict with the script?

    Thanks you for a short response.

    Sash

    Reply
  32. Ryan

    Hi Ania,

    Awesome tutorial!

    I was wondering if their is a way that I can keep all 4 tabs side by side even in mobile?

    Any advice would be great, thank you.

    Reply
  33. Beverly

    Nevermind, I had to change the cache settings through the hosting and then I did a hard refresh and it worked.

    Reply
  34. Stephanie

    Hi, and thanks! What a great tutorial, love your work! I have one little thing. I would like to show tab2 or tab3 as a sublink in the topmenu. I have tried with #tab2 #tab3 etc., but the link will just go to the page with my #tab1 as default opened. I would like it to open with #tab2 or #tab3 through the links. Is there a (simple) way to change this?

    Reply
    • Ania Romańska

      Yes, it is possible, but a bit more complex – this informations should get you started.

      Reply
  35. Amit

    The download link is not working right.

    Reply
    • Ania Romańska