Creating Custom Tabs With Icons Using Blurbs

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

146 Comments

  1. Andre

    Dear Ania, I noticed that the animation within each tab-content is not starting anymore with a click on the corresponding tab. Only on page load the animation is visible within the active-tab. Your demo site seems to be affected too. I have a feeling that a Divi Update changed something here. Do you know how to fix this. Thank you! Andre

    Reply
  2. Alex

    Dear Ania, Thanks for the great tutorial. Is there a way to have the first blurb tab in its selected color on page load? I used white as the selected background color for active tabs, but it wont change until I click on it. Thank you very much! Alex

    Reply
    • Alex

      Sorry, I forgot the “-” in “active-tab”, Doh! Keep up the good work!

      Reply
  3. Manuela

    This is really fantastic and what I was looking for.

    I just want to make a few adjustments but I do not know how. I hope you can help me.

    In my case, the tabs have no background color. So I would like the icon and the title and the circle to change color in hover (instead of the background) How can I do that?

    Another question is whether it is possible to place the title above the icon.

    Thank you very much and kind regards
    Manuela

    Reply
  4. Dana Elza

    Hello,

    Using Divi Theme

    Having difficulty importing the .json layout file.

    I created a custom mime type in mu-plugins . . .

    <?php
    function json_mime_type($mime_types){
    $mime_types['json'] = 'application/json';
    return $mime_types;
    }
    add_filter('upload_mimes', 'json_mime_type', 1, 1);

    and added

    define( 'ALLOW_UNFILTERED_UPLOADS', true );

    to the wp-config.php file

    but I still receive this error message when importing your .json file:

    This does not appear to be a WXR file, missing/invalid WXR version number

    Your assistance greatly appreciated.

    Reply
    • Ania Romańska

      1. Create a new page and activate the Divi Builder
      2. Use the import function to import the page layout onto the page.

      null

      It won’t work if you try to import it directly to a Divi Library and you don’t need any additional functions or edits in wp-config.

      Reply
  5. David

    Wow! This is fantastic and so effective. I’ve implemented it on my own site and it looks great.

    However, editing the tab content sections is proving a pain as I have to use the back end builder. In the Visual builder those sections don’t display at all, even in wireframe mode.

    Is it possible to make these sections show in the VB?

    Reply
    • Ania Romańska

      I think you could add this CSS to your page (in a code module or in page settings):

      .tab-content {display:block!important;}

      Adn then remove it once you’re ready to publish your changes (it should work, but I haven’t tested it).

      Reply
      • David

        This worked a treat. I enclosed it in comments which I can just undo whenever I want to edit the page.

        Nice idea, thanks!

  6. jlconwa

    Hi Ania,

    Thank you so much for this tutorial . It is one of the best I’ve seen – ever!

    A quick question – the tabs look great on a mobile device. However, when you select a tab the content changes below the viewable area on phones. Is there a way to easily scroll down to the center of the content on mobile devices? I just can’t seen to find a solution. Thank you!

    Reply
    • Ania Romańska

      Hi,

      Thank you 🙂
      The scroll-to-section modification is explained at the end of my post here https://imgur.com/a/tdn0L7Y

      And if you’d like to scroll to work *only* on mobile – you would need to look at wrapping the code in condition that will be checking the device width.

      Reply
      • jlconwa

        Thank you! I’m so embarrassed. I can’t believe I overlooked the edit.

  7. Mazhar Imam

    Hello Ania.
    It’s a great tutorial. I applied all the CSS and Javascripts as per your guidance and it’s working fine.
    But it is not going to close when I clicked it again. Am I missed some code or this tutorial doesn’t have any code for closing the tabs.

    Thanks in Advance

    Reply
    • Ania Romańska

      Hi,

      No, sorry, this code doesn’t close the tabs on click.

      Reply
  8. Sheriss

    Hi, thank you for this great tutorial.
    Would the jquery code work with buttons instead of blurbs?

    Reply
    • Ania Romańska

      Hi, no, it won’t work with buttons. The code looks for a link inside the element that’s targeted, and with a button, the link is the targeted element itself (if that makes sense). The code would need to be changed.

      Reply
  9. Matthias

    Hi Anna,

    first of all thanks for your tutorial! I need your advice on the following obstacle. Every selected tab (blurb) has a white background, but if the page loads up the first time, the first tab has its default (unselected) color. Only on click it changes to white. How do I manage to have it in its selected color?

    Thanks,
    Matthias

    Reply
  10. Baladev

    Hi Ania, I love the tutorial and have been using the layout for over 2 months now by your grace THANK YOU!

    But since I have changed the CSS code from [flex-wrap:wrap; TO “flex-wrap:nowrap;”] in this code.

    #blurb-tabs .et_pb_column {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    }
    #blurb-tabs .tab-title {
    width:25%;
    }

    the layout has become irresponsive on mobile is there an easy fix for this? If there is then please share.

    Thanks for the tutorial once again 🙂

    Reply
    • Ania Romańska

      I’m afraid you need the tabs to wrap to new line on mobile, so flex-wrap needs to stay “wrap” for this method to work 😉

      Reply
  11. Mathis Claudel

    Hi Ana ! Thanks for the tutorial, but is it possible to do this with the equivalent of a full page (and thus different sections) ?

    I’d need to create a create a custom tab for 3 different pages as each of them has subcategories, but they all contain different sections.

    Thanks in advance,

    Mathis

    Reply
    • Ania Romańska

      Hi, Mathis. I’m actually writing a tutorial that should help you do what you need, but it works other way around – you would add your tabs to each page as a header (different layouts with different tab active for each page) instead of adding pages below tabs. It’ll be ready after this weekend 🙂

      Reply
  12. epecho

    Ana,

    Thank you! A great design. Is there a way to just point your mouse at the tab to display the content, ie without clicking?

    Thank you kindly

    Reply
    • Ania Romańska

      Yes, this method should help.

      Reply
  13. Scott

    Hi! Great tutorial. Is there a way to implement 3 tabs instead of the 4 tabs? OR is there a way to increase the tabs number?

    Reply
    • Ania Romańska

      Yes, you’d just need to adjust the tabs width in CSS. You can use as many as you like.

      Reply
  14. Steve

    Ania, Great Tutorial. Is there a way to do this by adding the flexbox code within Divi instead of through the browser? I’m not good at this but it seems there should be a way to do this within Divi’s customization capabilities which would make it simpler for people to implement.

    Reply
  15. John Westhrop

    Hi Ania
    You have a lovely way of conveying information; you have a natural flair, probably in the same way you have a flair with CSS and JQuery etc.
    Keep up the good work!

    Reply
  16. Diego Moreno

    Hi.

    Thank you very much for this great tutorial.

    I have implemented it on my website. But I have a problem, clicking on another tab does not remove the active-tab class in the tab that should be inactive.

    Any suggestions?

    This is the website:

    https://www.naequus.clientesdesignar.cl/recetas/

    Reply
    • Ania Romańska

      Hi, it’s most likely caching, as it works fine for me.

      Reply
  17. Steve

    Hi Ania,

    very nice tutorial. On one thing I have a problem. I will pull a row into a module by implementing a tag [showmodule id="012345"].

    When I use it on the first tab (section) it’ll work fine but when I use it on one of the other tabs its not showing any section. Also when I disable the js, its showing all tabs (sections) with the code inside. Is there a problem with showing code inside tabs?

    Hope I have described the problem correctly.

    Best regards and thumbs up to all your great work,
    Steve

    Reply
  18. Alex

    Hi Anja, Hats off for the tutorial!
    I am using the extra css code for the 1st tab content to be by default open. My problem is that i cannot make the 1st button to show as “active” by default. Is there something i have to change on the js code?

    Thanks in advance
    Alex

    Reply
    • Ania Romańska

      Make sure your active Blurb Module has second CSS class of active-tab added (it will need both: tab-title active tab).

      Reply
      • Alex

        Thank you Ania for the quick feedback. I forgot to add a “-” between “active-tab”. Everything works fine. 🙂

  19. Shannon

    You’re awesome! I hope that more people tip!

    I am trying Edit 1 above and I am sorry to bother you but I am missing something.

    When setting one tab as active when the page opens, the blurb is active but the text below isn’t showing up. Any suggestions?

    Thank you for your time.

    Reply
    • Ania Romańska

      Thank you Shannon,
      To make this section visible you should add another class to it, eg. tab-open (so it will have both: tab-content tab-open, without the comma – just the space between the two) and also this bit of CSS:

      .tab-open {
      	display:block;
      }

      https://imgur.com/a/x3foc4x
      Hope this helps.

      Reply
  20. Lee

    One other thing, there seems to be a conflict on your page / website when viewed in Safari, your Girly theme block to the left is invisible, also the GDPR tick box on the signup form doesnt work. I used Chrome to signup and all is fine there, just seems to be an issue with Safari (latest version here).

    Reply
  21. Lee

    HI Ania, Great tutorial, thank you. do you have the js code to toggle the tabs shut on click also please as I think that would be really useful. Thanks in advance Lee

    Reply
  22. Chris

    This is exactly what I needed. Thank you so much. Just one question, if I wanted the 4th tab/blurb to link to a new page rather than content likes tabs 1 – 3. How could I do that?

    Thanks in advance.

    Chris

    Reply
  23. Maknoo

    Hello,Ania so far your article is very help full,

    I have a question, like how can we center align blurb module ,divider for mobile devices only,
    Thanks

    Reply
  24. Mark

    Hey I would like to know how to add more than 4 blurb sections? I tried this and added tab4,5,6… but it does not seem to be working.

    Reply
    • Ania Romańska

      Hi, it should be a matter of adding more blurbs, more sections with corresponding IDs and editing the percentage width of blurbs in CSS.

      Reply
  25. Mark

    Ah yes, I missed that line – all working now. Fantastic!

    Is there a list on your site of other Divi Tutorials / Customisations you have developed?

    Reply
  26. Mark

    Great Tutorial – really is.

    Website in development – question for you:

    Have used the customisation and all works fine but when clicking a blurb/tab module – the content floats upwards above I-level of the browser.

    Have I missed something?

    Reply
    • Ania Romańska

      Hi Mark, yes, you actually did miss one little thing 😉
      At the end of that Scroll-To customization description I mentioned that if you are using a fixed navigation you’d need to edit one line of code (and replace 80 with your navigation height).

      Reply
      • Mark

        Thanks Ania, that makes sense . Appreciate the reply.

        I am struggling to find where that line of code lives. Could you point it out for me?

        I’m sure it’s straightforward but your knowledge would be very much appreciated.

        Thanks again.

      • Ania Romańska

        Please look at the code at the end of my blog post. (screenshot)

  27. Paul Dymel

    czesc ania, thank you for this tutorial, very neat and easy to customize. pozdrowienia from canada.

    Reply
  28. David

    Thank you! A great design. I have a hard need you help! Just point your mouse at the tab to display the content, ie without clicking?
    Thank you good wishes!

    Reply
  29. alpine

    Hi Ania,

    Excellent tutorial. I am attempting to implement your tab solution, but am running into a problem with short codes from the library remaining hidden in the final result. The tabs that have content, but no short codes are working perfectly. Any idea how to fix?

    Many thanks,

    Matt

    Reply
    • Maya

      Hi, I’m having the same problem. Any luck?

      Reply
  30. Elvis

    Hi Ania,

    Thanks for that great tutorial.

    I will use it soon for a specific project.

    Actually i need to customize it a little bit and i hope you can help (finger crossed 🙂 ).

    I need to get the 4 blurbs aligned vertically (on the left) and the content on the right.

    How can i do that ?

    Many thanks for your help

    Elvis.

    Reply
    • Ania Romańska

      Hi Elvis,

      You could try to use Specialty Section, place all the blurbs inside the sidebar and use rows instead of sections for the tabs content. You’d need to edit the CSS (the .blurb-tabs wouldn’t need flexbox anymore). I have this layout and a tutorial on my to-do list, but I’m afraid no date has been set on this yet.
      Hope this helps.

      Reply
  31. Bastien

    Hi Ania,

    First, thanks for the great tuto !
    Is it possible, instead of blurbs, to have a button open the tabs ? It would be easier to style it for me.

    I tried to do it, but obviously I miss a step : http://agricampus.madamepoppins.fr/test-tabs/

    Any help would be gladly appreciated !

    Reply
    • Ania Romańska

      Hi Bastien,

      Your JS code should be a bit different, as there is no need to search for the link url inside the module, as button module already is a link. I think you would just need to remove the .find(“a”) parts from the code.

      Reply
      • Bastien

        Hi,
        Thanks so much, it works perfectly.
        I was looking for a tutorial like this for a long time, thanks again !
        Bastien

  32. Ankit

    Hi Ania,

    Thank you for this wonderful tutorial. This is exactly what I was looking for. But, I am facing a small issue. I am using divi video sliders in the content for the blurbs. The tab which is active by default loads fine with thumbnails at the bottom. But remaining two tab does not load the thumbnail. Could you please guide me on how to get this to work.

    Ankit

    Reply
    • Ania Romańska