How to Create Custom Tabs with Icons using Blurbs in Divi Theme

Copy all of the CSS and JS mentioned in the video or download this layout for free here: divilover.com/...
On instructions where to add javascript in Divi go here: divilover.com/...
~ Ania, Divi Lover

[@Dro9291]

Hello Anya, amazing tutorial! Literally, this has to be the best tutorial on Divi ever

[@aniaromanskacom]

Thank you Sandro!

[@victoromondi7101]

Wow. Got a gig and this is exactly, exactly, exactly what the client wanted done. Thank you.

[@aniaromanskacom]

Great to hear it was useful! :)

[@frankopapadopolous959]

Thank you Ania. Wonderful to listen to a true teacher - Clearly spoken at just the right rate of speech. I must conclude you multi-talented.

[@Mythos27]

Hi Ania, I am working on my company's website and wanted to create clickable blurb modules. After a quick search on Google I got redirected to your website (blog). Thank you so much for creating that blog and sharing your knowledge with us. I have subscribed to your channel as a token of appreciation. Keep up the good work dear friend.

[@aniaromanskacom]

Thank you Tanay, I appreciate it.

[@user-rf7ng9qo8c]

This is fantastic, Ania. It took me awhile because I went through the written tutorial. But I learned a lot studying the CSS, HTML, and jQuery code. A beautiful addition to my webpage!

[@aniaromanskacom]

This is great news, thank you!

Very good and understandable tutorial. It shows you an important basics of using css and jquery together. Congratulations!

[@seraphim3469]

Ania, you are so professional!! What a joy to watch you use your skills. You were seamlessly sculpting artistic design.

[@aniaromanskacom]

Thank you for your kind words!

[@SonaalShandilya]

Hi Ania, Thanks ton for making it so simple. I was literally fed up of the standard tab module of Divi! Came across this video too late in my life... however this is exactly what I had been looking for. Thank you again! Wish you most and more!

[@aniaromanskacom]

Hi! Thank you, I'm very happy to hear it is still helpful :-)

[@MostlyNadine]

Awesome tutorial, thank you so much, Ania! You kinda rescued my layout :)

[@aniaromanskacom]

It's great to hear! Happy I could help 😄

[@devflite8782]

Damn it. Why can't we stylize it in tabs module. I mean, They have Tabs module. But, uh-uh you want to create beautiful tabs? Use blurbs module. They have tabs module that can't be used to create somehting like this naturally ? But the bright side, I'm glad I found you Ania. Thanks for the tutorials. Keep up the the great works :)

[@aniaromanskacom]

Thank you, I'm glad to hear it's helpful :-)

[@devflite8782]

@@aniaromanskacom Oh yeah, how do I make the first tabe appear defaultly without toggled first?

[@aniaromanskacom]

@@devflite8782 It's explained in the blog post.

[@devflite8782]

@@aniaromanskacom Yeah, just I just re-read and found it. Thanks :)

[@Alex-ye9pg]

Thank you so much for such a straight forward and excellent tutorial. Everything worked perfectly for me.

[@aniaromanskacom]

I'm happy to hear that Alex! Glad I could help :-)

[@bfjrd]

wow I just crossed this vid and I'm amazed. I love your style and skills in the demo. Thanks! you got subs :D

[@monicabjerke3141]

You are gold! I didn't even know that I was looking for this, but it turns out, it is exactly what I need. Thank you - great tutorial (all your tutorials are great. Like your style)!

[@aniaromanskacom]

You're very welcome! Thank you for your kind comment, I appreciate it :-)

[@Slaneous]

Thank you Ania, it's great! By the way, you should have way more subscribers! The only problem with this design is that on mobile, the tabs don't link up with the information (other than the bottom one).

[@bluestamptravel]

Best tutorial I have found about Divi yet! Thank you. Very helpful.

[@aniaromanskacom]

Thank you, I appreciate it! :-)

[@saniyasaher]

Thank you so much for this tutorial. I don't know javascript but want to make the exact tabs in divi. I have already read so many websites for this and genuinely this is best m best. You solved my problem easily. You got a new subscriber☺

[@aniaromanskacom]

Thank you, I appreciate it :-)

[@adiquer-wordpresstutorials2370]

Wow! You just got yourself a new subscriber, well deserved. You are incredible.

[@aniaromanskacom]

Yay! Thank you!

[@markcunningham9745]

Incredible Ania. Thanks so much. One day i hope to be this talented with CSS and Divi.

[@adriennewarden8440]

Wonderful tutorial...I've done this with Divi a few ways always have a problem with the default open tab...Thanks for sharing...All the best to you...Looking forward to more turtorial from you.

[@Jamminn555]

Beautiful and very well presented, Ania. Thanks so much for posting.

[@xxltulip]

It works but how can I go back to previous, closed state? The last blurb stays active. Is there a way to click somewhere and close all active blurbs?

[@liatuerlings379]

Thank you so much for this Ania, it has helped immensely as I try to to adapt my own design. Your explanations are very step by step and easy to understand. I learned heaps and refer back to this little video often while trying to get things right. It's so cool to see the changes happen when I do things right. Thanks again.

[@aniaromanskacom]

Thank you, Lia! I'm very glad to hear it is helpful :-)

[@PabloAlvestegui]

Beautiful tutorial! Congratulations, Ania, I can tell you really know your stuff.

[@aniaromanskacom]

Thank you Pablo :)

[@logozrusbranding1454]

Thanks Ania. Looking forward to many more great Divi Video Tutorials to come. Nice Tutorial. Thanks Again.

[@aniaromanskacom]

Thank you, I appreciate it :)

[@marcinc2229]

Dzięki Ania. Super tutorial!

[@DawnClark]

Truly awesome, Ania! Thank you so much. This is one of the best tutorials I've ever seen. I really appreciate you sharing. :-)

[@aniaromanskacom]

Thank you, Dawn, I'm very happy to hear it's helpful :-)

[@leonardopedraza5484]

Thanks Ania, thank you very much, an excellent tutorial, a greeting from Colombia. Thank you.

[@aniaromanskacom]

You're welcome Leonardo, I'm glad it's useful :-)

[@chrishalford1329]

How do you close the active blurb? - when finished looking at blurbs/options, one always remains open?

[@arebuffat]

Great tutorial, I was just looking for something like that and you save me, thanks a lot Ania

[@aniaromanskacom]

Glad it was helpful!

[@JasonJacobs317]

These are beautiful - thanks so much, Ania!

[@aniaromanskacom]

Thank you, and you're welcome :)

[@zakirhossain4876]

Nice and effective tutorial. Thanks Ania!

[@Mateo_YT1]

A thumbs up is not enough for this work - really nice!

[@aniaromanskacom]

Thank you Mateo!

[@AamirSaeedTajalli]

Impressed... Very well done Ania.

[@aniaromanskacom]

Thank you!

[@eddiewong4001]

You explained it very well step by step, Thank you.

[@sergiomendoza8939]

Such an awesome work, looks really nice in my web. I was just wondering if i can mark as active a tab from the begining. Thank you so much for sharing.

[@aniaromanskacom]

Hi Sergio, yes, it's possible, I explained the steps at the end of the blog posts ;-)

[@mitchellwebster2392]

Great tutorial, for those that know css coding, however very disappointing for those who do not :-(

[@aniaromanskacom]

I'm sorry you feel that way. Please note that you can download the JSON file and use it as-is, without touching any CSS. Just replace your content using the Divi builder.

[@JenShea]

Terrific tutorial Ania, thank you very much!!

[@aht786]

Unbelievably Beautiful.

[@ericgarcia1912]

This is a fantastic tutorial, Thank you 😊

[@aniaromanskacom]

This is very kind of you :) Thank you for watching!

[@kaydesignsglobal]

You know your stuff! This is great skills, thanks!

[@aniaromanskacom]

Thank you :-)

[@HafizRahmanBD]

Is it possible to fold it back again? Please?

[@tomfraser3086]

It would be great if you would do an updated version of this tutorial using the current version of Divi

[@aniaromanskacom]

It's on my to-do list ;-)

[@forextipsandsecrets3542]

@@aniaromanskacom this is not working for me Am I doing something wrong or New version divi not support this now

[@thejaybag]

Is it possible to close all tabs after you clicked on one of them and it opened? click once open, click again close? seems like 1 tab always stays open after you clicked. many thanks

[@aniaromanskacom]

I'm sure it's possible with some additional JS modifications, but I don't have the code I could share, sorry. I'll try to create an updated version of this method in the future.

[@cloudcryptology311]

Wow! I need to up my game on designing and computer science, this is amazing.

[@real-big-wave]

So great! It works like a charm. But I got one problem and solve it. I added jQuery Codes -- jQuery(document).ready(function($) { /* Blurbs as Tabs */ Blar Blar -- to Divi Theme Options > Integration. It works only one time. If I reload pages, it doesn't work. So I removed comments (/* Blurbs as Tabs */) and the problem was disappeared. I don't know why but if someone get the problem like me, try to remove comments. Thank you again, Ania !! :)

[@aniaromanskacom]

Great, thank you for your comment, I'll look into it, too. :-)

[@zainyzain6471]

you solve my problem thanks alot for making vedio on this topic. i think divi has to need to make another tab module where we can add multiple module and link to gether.

[@aniaromanskacom]

I'm glad I could help :-)

[@zainyzain6471]

@@aniaromanskacom Thanks Alot 🙂

[@dvdgp]

Thank you Ania! The tutorial is awesome! 😃

[@aniaromanskacom]

Thanks! I'm glad you like it, hope it's useful :)

[@roisabreuer5560]

This is amazing!!!! Thanks. Can't wait for more.

[@aniaromanskacom]

Thank you! More is coming soon :)

[@TheWaqaspuri]

I need to make the first tab active. ? how to do that, i have done overall, just need to have the first tab active. please help

[@marcinc2229]

Czy możesz pomóc z tym by pierwszy tab ładował się otwarty? I czy można zrobić tak by użyć id tab jako linku by otworzyć dany tab z innej podstrony?

[@muhammadilyas2179]

That mouse and keyboard presses ... Oooo

[@imti2337]

exactly what I am looking for.. thank you so much

[@kenlee7077]

Thank you very much Ania!

[@aniaromanskacom]

You're welcome Ken :-)

[@AshanKumarasiri]

wonderful lesson.Thank you very much for this lesson.

[@aniaromanskacom]

I'm happy you liked it 😊

[@philippolaski6500]

Woow, very nice... I hope it still works in 20202. Tqvm (subscribed ;)

[@aniaromanskacom]

I'm glad you like it and yes, it still works, but I'm also working on a new and improved version, so stay tuned ;-)

[@therad2021]

absolutely in love with your videos

[@aniaromanskacom]

Thank you!

[@AloneinFiction]

Love this! Thank you! What css editor are you using?

[@philipcook6191]

Brilliant! Love your videos.

[@aniaromanskacom]

Glad you like them! Thank you :-)

[@kellymedia99]

That is awesome!

[@aniaromanskacom]

Thanks Brian!

[@chrishalford1329]

Not able to get the drop-downs work in mobile mode. the buttons work well, and link to the content, but all display insteand of revealing. see here: mob.i-stock.uk/how-to-choose/ any clues?

[@manishkharel4030]

I am not being able to access the a tag's href attribute..Any help

[@DaphneCelie]

I don't seem to get the .tab-title; width 25% to work. I don't see .tab-title in de CSS code when I inspect the element. Anybody having this problem? I'm using divi 4.6.2

[@DaphneCelie]

SOLVED IT.... For anyone else: replace tab-title with .tab-item

[@psychoonaut]

Thanks Anna. Keep doing what you do!

[@aniaromanskacom]

Thanks, I'll do my best ;-)

[@ClaytonDerby]

the columns are still on top of each other for me. i cannot get them next to each other.

[@aniaromanskacom]

If the step by step instructions aren't working, please try starting with the JSON layout available on our blog - you can customize as needed.

[@simonchen2088]

Hi. Anita. The tutorial is wonderful.it was very useful. Just a little question: about the tab-content, you choose to display none. But If I want to display the tab-content 1 as default. What should I do?

[@EmpowHerAsia]

i don't understand how to add the CSS code inside of google chrome - why don't i add it in the divi builder within the modules > advanced and CSS style?

[@aniaromanskacom]

I'm using Chrome Inspector just to check if the CSS works, I'm adding the code to my child theme stylesheet. It can also go to the Theme Options, Page Options or Code module, but not in the Module Advanced options.

[@farrukhhassan4994]

First thanks for this awesome tutorial, secondly, I'm trying to show different images onclick() to different blurbs(or any other module with simple text) in horizontal position using 2 division row 1. for three blurbs and 2. for corresponding images. instead of sections as described in the video, but! i can't see hidden images onclick() followed the video same as I'm at very beginner level and have not much idea about codes.

[@tjveach]

Love this my friend

[@aniaromanskacom]

Thanks Tim! :-)

[@johannamickle3091]

Great Tutorial! I have one question about ordering the content for mobile. I would like to have the appropriate text module open up right under the tab when clicked in mobile version (at 100% width). Is this possible to accomplish? Currently all 4 blurb tabs are stacked, followed by the content.

[@BillyG869]

Ania; what editor are you using when you edit in the inspection window. How is it set up in your machine’s software?

[@aniaromanskacom]

I'm working in a code editor (Coda) which is connected through FTP with my server, I'm editing child theme files directly in there.

[@frank-hilft]

Wow! Thank you so much. I´m a fan

[@alanna7181]

Hello Ania, Thank you so much for putting this video together. Can you tell me if I am putting this on a product page and I want to have one of the middle tabs be the woocommerce review module, how can I have the stars when a user clicks it open that module up, would i need to have the url of the section for it to toggle that tab open, the url of the tab or the blurb or something different? thank you!

[@aniaromanskacom]

Hi Allana, it won't work if the "tab title" is a separate element like the Woo stars. It would require a separate bit of JS code. You'd need to target the stars and write something like: if stars element is clicked, remove CSS classes from active tabs and add CSS classes to corresponding blurb and tab content. Sorry, but I won't be able to help with the exact code.

[@jeromemoss1783]

Great video thanks for sharing, helped me alot.

[@aniaromanskacom]

Glad to hear it! :)

[@lan1432001]

Thanks a lot. But, I have one question. After checking the video it does not mention your code. when you open the page and tab1 must be shown.

[@aniaromanskacom]

Hi Alan, it is explained at the end of the blog post.

[@janfrancispascual6431]

Thank you for this tutorial it helps a lot :)

[@shreyavyas7617]

hi nina I was not able to find the CSS columm code? is there any reason

[@thomvorst]

Hey Ania, Really great work. I like your tutorials. You dive into it very deep. One question especially to this tut: How can I leave the first tab on for the first load of the page? Thanks and greetings from Vienna Thomas

[@aniaromanskacom]

Hey Thomas, Thank you, I'm glad to hear you like my tutorials. Opening a tab on page load is explained at the end of my blog post (link in the description).

[@DSLRVIDEOTIPPS]

Hello Ania and thank you very much for this awesome menu :-) I´d like to know where to get your theme which you use on your website. Du you have a link for this? Best regards and greetings from sunny Cologne in Germany, John

[@onixqwert]

Hi, is there any easier way to achieve this nowadays with divi? thanks.

[@melitamesaric1686]

Thanks for sharing!😊

[@aniaromanskacom]

Thanks for watching 😊

[@Cherry-t8c]

thank you! just save my day!

[@aniaromanskacom]

Glad it helped! :-)

[@Cherry-t8c]

@@aniaromanskacom how make it autoload the tab1 if you load the page ?

[@vallabhanenimahesh2428]

no use video, i imported the layout after edited complete i was unable to remove read this blog post text, if removing the text the entire section getting crash

[@aniaromanskacom]

There is a Code module there with the CSS and JS code, which would need to be moved elsewhere or to a different section.

[@fsbinondo]

Hi Ania, I am using your javascript code and pasted it on divi dashboard > theme option > integration > Add code to the < head > of your blog but it did not work anymore. Is there something issue with the new updated of divi with this code?

[@aniaromanskacom]

No, it should work with the latest Divi version. There's probably something else missing, but it's not possible to tell without your URL, sorry.

[@MirkoMancini]

Thank you so much! I love you!

[@aniaromanskacom]

Glad to know I could help :)

[@maduroheintz8640]

Amazong Tutorial! THANKS A LOT! Keep it up :)))

[@aniaromanskacom]

Thank you! I'll do my best ;)

[@jbusby825]

Ania, this is an amazing tutorial - thank you for sharing your wisdom with all of us. Everything works perfectly, but I do have 2 questions: 1. I have one of the tabs (tab1) set to open when the page loads and it works great, but the tab is not taking on the "active-tab" class on page load only the content is displaying. how do i get that particular tab to take on the class of "active-tab" so the colors of the tab reflect it is open? 2. How would I create a link that would directly open a different tab upon page load? So, tab 1 is defaulted upon page load, but let's say that in some other page on my site I want to link to information within tab 2 and when that link is clicked the page loads, but tab 2 opens and displays - how could I do that? Thank you so much, I know you stay busy - we all appreciate your insight into all things divi...

[@SyedMuneebAli]

What if I want to do the same but something like when I only "hover" over the menu, I'll get posts in the similar manner of that category? Please Help :-)

[@jenniferkergourlay6417]

Great tutorial, easy to follow and really useful! Will be checking your next videos! I got one question. I am struggling to change the "animate scrollTop" option. Instead of it scrolling at the top of the tab, I would like it to scroll at the top of the blurb lists (the blurb list being at the top of the page) Is there a way to achieve this? Thank you.

[@iwmudika]

Great Anna. Very inspiring!

[@aniaromanskacom]

Thank you so much :)

[@alexandraalvarez5965]

How do you make one of the tabs active and open when page loads?

[@aniaromanskacom]

Instructions on how to do that are at the end of the Blog post ;-)

[@MrRelaxTV]

Thank you Ania

[@aniaromanskacom]

You're welcome :-)

[@kwajongenscommunicatie6201]

Great, is it still the good option for Divi version now? And is it possible to add a 'click' to hide the section below, once it is opened? (like: click on an X mark right top on the grey section)?

[@aniaromanskacom]

It will still work with the latest Divi version and yes, it is possible to add an X close button, but it would require additional bit of JS, something like: $('.close-link').click(function(){ $(this).closest('.tab-content').hide(); $('active-tab').removeClass("active-tab"); }); close-link would be a CSS class of an element that is the X somewhere inside the tab content

[@MostlyNadine]

I just today worked me through this with the lastest version and can confirm it works as expected :)

[@maeeshameem6787]

How can we inactive the content on second click on the tab title?

[@aniaromanskacom]

Try modifying the JS code: instead of $(this).addClass("active-tab"); you can use $(this).toggleClass("active-tab");

[@BoldonBigLad]

Great tutorial, I am about to try this for a client website. Can the JS just be added in a Divi Code Module?

[@aniaromanskacom]

Hi Keith, yes, it can go to the Code module, that is how it's included in the JSON layout.

[@BoldonBigLad]

@@aniaromanskacom Thank you so much

[@singforamerica8016]

Hello when my theme updated it stopped working, I downloaded the layout from your website and didn't have to place the jq anywhere. now I tried to place it in theme options but it didn't Mae it work if it was in there either...can anyone help?

[@aniaromanskacom]

Hi, sorry, but it's not possible to guess why this wouldn't work for you without your website url..

[@ma.belengonzalez8323]

hi!!! excelent but i cannot make it work... the jquery is not working... could it be something wrong on the code?

[@aniaromanskacom]

Try downloading the JSON layout, it should work out-of-the-box.

[@bobpaydar]

very nice tutorial, thank you

[@helloapple556]

Wow so Great.. is still available to download.. and how do I import to divi theme, can u guide me.. can I first import to divi library and then page..?

[@aniaromanskacom]

The layout should be imported directly on the page (you'll find the instructions on the download page).

[@RobStephens_com]

Nice video. Do the blurb modules have to be in a full width row with just 1 column?

[@aniaromanskacom]

No, but the JS code would need to be adjusted if there were in separate columns.

[@disenoerco4719]

is there a way to make this in vertical instead of horizontal?