How to Create Custom Tabs with Icons using Blurbs in Divi Theme
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- 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
Wow. Got a gig and this is exactly, exactly, exactly what the client wanted done. Thank you.
Great to hear it was useful! :)
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.
Hello Anya, amazing tutorial! Literally, this has to be the best tutorial on Divi ever
Thank you Sandro!
Thank you so much for such a straight forward and excellent tutorial. Everything worked perfectly for me.
I'm happy to hear that Alex! Glad I could help :-)
Very good and understandable tutorial. It shows you an important basics of using css and jquery together. Congratulations!
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!
This is great news, thank you!
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.
Thank you Tanay, I appreciate it.
Awesome tutorial, thank you so much, Ania! You kinda rescued my layout :)
It's great to hear! Happy I could help 😄
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!
Hi! Thank you, I'm very happy to hear it is still helpful :-)
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☺
Thank you, I appreciate it :-)
Best tutorial I have found about Divi yet! Thank you. Very helpful.
Thank you, I appreciate it! :-)
Ania, you are so professional!! What a joy to watch you use your skills. You were seamlessly sculpting artistic design.
Thank you for your kind words!
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)!
You're very welcome! Thank you for your kind comment, I appreciate it :-)
Thanks Ania, thank you very much, an excellent tutorial, a greeting from Colombia. Thank you.
You're welcome Leonardo, I'm glad it's useful :-)
wow I just crossed this vid and I'm amazed. I love your style and skills in the demo. Thanks! you got subs :D
Incredible Ania. Thanks so much. One day i hope to be this talented with CSS and Divi.
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.
Thank you, Lia! I'm very glad to hear it is helpful :-)
Beautiful and very well presented, Ania. Thanks so much for posting.
Beautiful tutorial! Congratulations, Ania, I can tell you really know your stuff.
Thank you Pablo :)
Dzięki Ania. Super tutorial!
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 :)
Thank you, I'm glad to hear it's helpful :-)
@@aniaromanskacom Oh yeah, how do I make the first tabe appear defaultly without toggled first?
@@devflite8782 It's explained in the blog post.
@@aniaromanskacom Yeah, just I just re-read and found it. Thanks :)
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.
Unbelievably Beautiful.
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).
A thumbs up is not enough for this work - really nice!
Thank you Mateo!
You explained it very well step by step, Thank you.
Thanks Ania. Looking forward to many more great Divi Video Tutorials to come. Nice Tutorial. Thanks Again.
Thank you, I appreciate it :)
Wow! You just got yourself a new subscriber, well deserved. You are incredible.
Yay! Thank you!
Great tutorial, I was just looking for something like that and you save me, thanks a lot Ania
Glad it was helpful!
Nice and effective tutorial. Thanks Ania!
These are beautiful - thanks so much, Ania!
Thank you, and you're welcome :)
Thanks Ania, I've been learning a lot, great tutorials!
You know your stuff! This is great skills, thanks!
Thank you :-)
Impressed... Very well done Ania.
Thank you!
Terrific tutorial Ania, thank you very much!!
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?
Truly awesome, Ania! Thank you so much. This is one of the best tutorials I've ever seen. I really appreciate you sharing. :-)
Thank you, Dawn, I'm very happy to hear it's helpful :-)
This is a fantastic tutorial, Thank you 😊
This is very kind of you :) Thank you for watching!
Wow! I need to up my game on designing and computer science, this is amazing.
How do you close the active blurb? - when finished looking at blurbs/options, one always remains open?
Thank you very much Ania!
You're welcome Ken :-)
This is amazing!!!! Thanks.
Can't wait for more.
Thank you! More is coming soon :)
wonderful lesson.Thank you very much for this lesson.
I'm happy you liked it 😊
exactly what I am looking for.. thank you so much
Thank you Ania! The tutorial is awesome! 😃
Thanks! I'm glad you like it, hope it's useful :)
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.
Hi Sergio, yes, it's possible, I explained the steps at the end of the blog posts ;-)
That is awesome!
Thanks Brian!
absolutely in love with your videos
Thank you!
Great tutorial, for those that know css coding, however very disappointing for those who do not :-(
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.
It would be great if you would do an updated version of this tutorial using the current version of Divi
It's on my to-do list ;-)
@@aniaromanskacom this is not working for me Am I doing something wrong or New version divi not support this now
Brilliant! Love your videos.
Glad you like them! Thank you :-)
That mouse and keyboard presses ... Oooo
Thanks Anna. Keep doing what you do!
Thanks, I'll do my best ;-)
Woow, very nice... I hope it still works in 20202. Tqvm (subscribed ;)
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 ;-)
Love this my friend
Thanks Tim! :-)
Great video thanks for sharing, helped me alot.
Glad to hear it! :)
Wow! Thank you so much. I´m a fan
thank you! just save my day!
Glad it helped! :-)
@@aniaromanskacom how make it autoload the tab1 if you load the page ?
Thank you for this tutorial it helps a lot :)
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.
I'm glad I could help :-)
@@aniaromanskacom Thanks Alot 🙂
Amazong Tutorial! THANKS A LOT! Keep it up :)))
Thank you! I'll do my best ;)
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 !! :)
Great, thank you for your comment, I'll look into it, too. :-)
Is it possible to fold it back again? Please?
Thanks for sharing!😊
Thanks for watching 😊
Thank you so much! I love you!
Glad to know I could help :)
Great Anna. Very inspiring!
Thank you so much :)
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
Thank you Ania
You're welcome :-)
very nice tutorial, thank you
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.
Love this! Thank you! What css editor are you using?
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
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.
Love it! Thank you!
Thanks David, glad you like it :)
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...
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
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?
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
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).
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?
I am not being able to access the a tag's href attribute..Any help
Awesome work
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.
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.
incredible!
Lovely!
Thank you :)
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.
Hi Alan, it is explained at the end of the blog post.
Thats great Ania (thank you) - any idea how we can implement cookies to this solution so that if you are on tab3, navigate to a link in this tab and then hit the browser back button that the page brings you back to tab3 active with tab3 content open?
Thanks Ania
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!
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.
Wow, you are very talented and a good teacher. I am thankful for your blog and your channel.
So nice of you, thank you! :-)
Hi, is there any easier way to achieve this nowadays with divi? thanks.
Amazing!!!! Thank you
Thanks Wayne, I'm glad you like it.
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..?
The layout should be imported directly on the page (you'll find the instructions on the download page).
Merci Ania
hi nina I was not able to find the CSS columm code? is there any reason
Great tutorial, I am about to try this for a client website. Can the JS just be added in a Divi Code Module?
Hi Keith, yes, it can go to the Code module, that is how it's included in the JSON layout.
@@aniaromanskacom Thank you so much
Thanks Ania, great tutorial! Does it have any updates for newer version of Divi? I tried to use it, but with no luck :-(
It still works with the latest Divi version. If you have trouble recreating the layout yourself, feel free to download the working JSON file from the blog: divilover.com/creating-custom-tabs-icons-using-blurbs
@@aniaromanskacom Thanks a lot!! I'll give it a try 🤗🤗🤗
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 :-)
Hi Ania. Is it possible to put more than one section into one tab? Tnx
the columns are still on top of each other for me. i cannot get them next to each other.
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.
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?