Creating Custom Tabs With Icons Using Blurbs

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

153 Comments

  1. Kristoffer

    Hi Ania,

    Great post!
    Regarding to the automatical scroll down, then the link to the test site dont work, so I can se the function. But will it then be possible to link from a different site, to the choosen section? For example, http://xxx.com/blurbs-as-tabs#section2

    Reply
  2. Alex

    Hi! You best!
    But I have question about sections
    We have 4 blur tab1, tab2, tab3 and tab4
    but for all tabs i need one more sections like tab1.1, tab2.2, tab3.3 and tab4.4
    First i need Speciatly section and next standrat section
    Can you say how i can do it? TY

    Reply
  3. Sarah

    Hello, I’m wondering if I could put a photo in the tab rather than text + icon. Theoretically, could this work? I do know CSS and HTML, but haven’t dug into your code yet.

    Reply
    • Ania Romańska

      You can add any Divi Module you like inside a tab, it’s a standard Divi section.

      Reply
  4. Andrei

    Hi!

    I have a problem, the 5th tabs doesn’t show the correct content. It shows the 4th content. Please help me!

    Thanks!

    Reply
    • Ania Romańska

      Blurb link target needs to be the same as section ID (with the #).

      Reply
  5. 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
    • Ania Romańska

      Hi Andre,
      Yes, I’ve noticed that too, but no, I don’t have a fix for this issue.

      Reply
  6. 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
  7. 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
  8. 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
  9. 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!

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

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

  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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