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
Пікірлер: 267
@Dro92914 жыл бұрын
Hello Anya, amazing tutorial! Literally, this has to be the best tutorial on Divi ever
@aniaromanskacom4 жыл бұрын
Thank you Sandro!
@victoromondi71015 жыл бұрын
Wow. Got a gig and this is exactly, exactly, exactly what the client wanted done. Thank you.
@aniaromanskacom5 жыл бұрын
Great to hear it was useful! :)
@frankopapadopolous9595 жыл бұрын
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.
@Mythos276 жыл бұрын
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.
@aniaromanskacom6 жыл бұрын
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!
@seraphim34696 жыл бұрын
Ania, you are so professional!! What a joy to watch you use your skills. You were seamlessly sculpting artistic design.
@aniaromanskacom6 жыл бұрын
Thank you for your kind words!
@SonaalShandilya3 жыл бұрын
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!
@aniaromanskacom3 жыл бұрын
Hi! Thank you, I'm very happy to hear it is still helpful :-)
@MostlyNadine2 жыл бұрын
Awesome tutorial, thank you so much, Ania! You kinda rescued my layout :)
@aniaromanskacom2 жыл бұрын
It's great to hear! Happy I could help 😄
@devflite87825 жыл бұрын
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 :)
@aniaromanskacom5 жыл бұрын
Thank you, I'm glad to hear it's helpful :-)
@devflite87825 жыл бұрын
@@aniaromanskacom Oh yeah, how do I make the first tabe appear defaultly without toggled first?
@aniaromanskacom5 жыл бұрын
@@devflite8782 It's explained in the blog post.
@devflite87825 жыл бұрын
@@aniaromanskacom Yeah, just I just re-read and found it. Thanks :)
@Alex-ye9pg2 жыл бұрын
Thank you so much for such a straight forward and excellent tutorial. Everything worked perfectly for me.
@aniaromanskacom2 жыл бұрын
I'm happy to hear that Alex! Glad I could help :-)
@bfjrd5 жыл бұрын
wow I just crossed this vid and I'm amazed. I love your style and skills in the demo. Thanks! you got subs :D
@monicabjerke31413 жыл бұрын
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)!
@aniaromanskacom3 жыл бұрын
You're very welcome! Thank you for your kind comment, I appreciate it :-)
@Slaneous5 жыл бұрын
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).
@bluestamptravel4 жыл бұрын
Best tutorial I have found about Divi yet! Thank you. Very helpful.
@aniaromanskacom4 жыл бұрын
Thank you, I appreciate it! :-)
@saniyasaher3 жыл бұрын
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☺
@aniaromanskacom3 жыл бұрын
Thank you, I appreciate it :-)
@adiquer-wordpresstutorials23703 жыл бұрын
Wow! You just got yourself a new subscriber, well deserved. You are incredible.
@aniaromanskacom3 жыл бұрын
Yay! Thank you!
@markcunningham97456 жыл бұрын
Incredible Ania. Thanks so much. One day i hope to be this talented with CSS and Divi.
@adriennewarden84406 жыл бұрын
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.
@Jamminn5555 жыл бұрын
Beautiful and very well presented, Ania. Thanks so much for posting.
@xxltulip6 жыл бұрын
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?
@liatuerlings3792 жыл бұрын
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.
@aniaromanskacom2 жыл бұрын
Thank you, Lia! I'm very glad to hear it is helpful :-)
@PabloAlvestegui6 жыл бұрын
Beautiful tutorial! Congratulations, Ania, I can tell you really know your stuff.
@aniaromanskacom6 жыл бұрын
Thank you Pablo :)
@logozrusbranding14546 жыл бұрын
Thanks Ania. Looking forward to many more great Divi Video Tutorials to come. Nice Tutorial. Thanks Again.
@aniaromanskacom6 жыл бұрын
Thank you, I appreciate it :)
@marcinc22295 ай бұрын
Dzięki Ania. Super tutorial!
@DawnClark4 жыл бұрын
Truly awesome, Ania! Thank you so much. This is one of the best tutorials I've ever seen. I really appreciate you sharing. :-)
@aniaromanskacom4 жыл бұрын
Thank you, Dawn, I'm very happy to hear it's helpful :-)
@leonardopedraza54845 жыл бұрын
Thanks Ania, thank you very much, an excellent tutorial, a greeting from Colombia. Thank you.
@aniaromanskacom5 жыл бұрын
You're welcome Leonardo, I'm glad it's useful :-)
@chrishalford13294 жыл бұрын
How do you close the active blurb? - when finished looking at blurbs/options, one always remains open?
@arebuffat3 жыл бұрын
Great tutorial, I was just looking for something like that and you save me, thanks a lot Ania
@aniaromanskacom3 жыл бұрын
Glad it was helpful!
@JasonJacobs3176 жыл бұрын
These are beautiful - thanks so much, Ania!
@aniaromanskacom6 жыл бұрын
Thank you, and you're welcome :)
@zakirhossain48766 жыл бұрын
Nice and effective tutorial. Thanks Ania!
@Mateo_YT15 жыл бұрын
A thumbs up is not enough for this work - really nice!
@aniaromanskacom5 жыл бұрын
Thank you Mateo!
@AamirSaeedTajalli5 жыл бұрын
Impressed... Very well done Ania.
@aniaromanskacom5 жыл бұрын
Thank you!
@eddiewong40015 жыл бұрын
You explained it very well step by step, Thank you.
@sergiomendoza89394 жыл бұрын
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.
@aniaromanskacom4 жыл бұрын
Hi Sergio, yes, it's possible, I explained the steps at the end of the blog posts ;-)
@mitchellwebster23925 жыл бұрын
Great tutorial, for those that know css coding, however very disappointing for those who do not :-(
@aniaromanskacom5 жыл бұрын
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.
@JenShea6 жыл бұрын
Terrific tutorial Ania, thank you very much!!
@aht7863 жыл бұрын
Unbelievably Beautiful.
@ericgarcia19123 жыл бұрын
This is a fantastic tutorial, Thank you 😊
@aniaromanskacom3 жыл бұрын
This is very kind of you :) Thank you for watching!
@kaydesignsglobal4 жыл бұрын
You know your stuff! This is great skills, thanks!
@aniaromanskacom4 жыл бұрын
Thank you :-)
@HafizRahmanBD4 жыл бұрын
Is it possible to fold it back again? Please?
@tomfraser30863 жыл бұрын
It would be great if you would do an updated version of this tutorial using the current version of Divi
@aniaromanskacom3 жыл бұрын
It's on my to-do list ;-)
@forextipsandsecrets35423 жыл бұрын
@@aniaromanskacom this is not working for me Am I doing something wrong or New version divi not support this now
@thejaybag4 жыл бұрын
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
@aniaromanskacom4 жыл бұрын
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.
@cloudcryptology3116 жыл бұрын
Wow! I need to up my game on designing and computer science, this is amazing.
@real-big-wave3 жыл бұрын
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 !! :)
@aniaromanskacom3 жыл бұрын
Great, thank you for your comment, I'll look into it, too. :-)
@zainyzain64714 жыл бұрын
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.
@aniaromanskacom4 жыл бұрын
I'm glad I could help :-)
@zainyzain64714 жыл бұрын
@@aniaromanskacom Thanks Alot 🙂
@dvdgp6 жыл бұрын
Thank you Ania! The tutorial is awesome! 😃
@aniaromanskacom6 жыл бұрын
Thanks! I'm glad you like it, hope it's useful :)
@roisabreuer55606 жыл бұрын
This is amazing!!!! Thanks. Can't wait for more.
@aniaromanskacom6 жыл бұрын
Thank you! More is coming soon :)
@TheWaqaspuri3 жыл бұрын
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
@marcinc22295 ай бұрын
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?
@muhammadilyas21794 жыл бұрын
That mouse and keyboard presses ... Oooo
@imti23376 жыл бұрын
exactly what I am looking for.. thank you so much
@kenlee70775 жыл бұрын
Thank you very much Ania!
@aniaromanskacom5 жыл бұрын
You're welcome Ken :-)
@AshanKumarasiri5 жыл бұрын
wonderful lesson.Thank you very much for this lesson.
@aniaromanskacom2 жыл бұрын
I'm happy you liked it 😊
@philippolaski65004 жыл бұрын
Woow, very nice... I hope it still works in 20202. Tqvm (subscribed ;)
@aniaromanskacom4 жыл бұрын
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 ;-)
@therad20215 жыл бұрын
absolutely in love with your videos
@aniaromanskacom5 жыл бұрын
Thank you!
@AloneinFiction6 жыл бұрын
Love this! Thank you! What css editor are you using?
@philipcook61913 жыл бұрын
Brilliant! Love your videos.
@aniaromanskacom3 жыл бұрын
Glad you like them! Thank you :-)
@kellymedia995 жыл бұрын
That is awesome!
@aniaromanskacom5 жыл бұрын
Thanks Brian!
@chrishalford13294 жыл бұрын
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?
@manishkharel40303 жыл бұрын
I am not being able to access the a tag's href attribute..Any help
@DaphneCelie3 жыл бұрын
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
@DaphneCelie3 жыл бұрын
SOLVED IT.... For anyone else: replace tab-title with .tab-item
@psychoonaut6 жыл бұрын
Thanks Anna. Keep doing what you do!
@aniaromanskacom6 жыл бұрын
Thanks, I'll do my best ;-)
@ClaytonDerby3 ай бұрын
the columns are still on top of each other for me. i cannot get them next to each other.
@aniaromanskacom3 ай бұрын
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.
@simonchen20883 жыл бұрын
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?
@EmpowHerAsia4 жыл бұрын
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?
@aniaromanskacom4 жыл бұрын
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.
@farrukhhassan49946 жыл бұрын
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.
@tjveach4 жыл бұрын
Love this my friend
@aniaromanskacom4 жыл бұрын
Thanks Tim! :-)
@johannamickle30913 жыл бұрын
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.
@BillyG8692 жыл бұрын
Ania; what editor are you using when you edit in the inspection window. How is it set up in your machine’s software?
@aniaromanskacom2 жыл бұрын
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-hilft4 жыл бұрын
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.
@jeromemoss17834 жыл бұрын
Great video thanks for sharing, helped me alot.
@aniaromanskacom4 жыл бұрын
Glad to hear it! :)
@lan14320014 жыл бұрын
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.
@aniaromanskacom4 жыл бұрын
Hi Alan, it is explained at the end of the blog post.
@janfrancispascual64314 жыл бұрын
Thank you for this tutorial it helps a lot :)
@shreyavyas76173 жыл бұрын
hi nina I was not able to find the CSS columm code? is there any reason
@thomvorst4 жыл бұрын
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
@aniaromanskacom4 жыл бұрын
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).
@DSLRVIDEOTIPPS3 жыл бұрын
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
@onixqwert2 жыл бұрын
Hi, is there any easier way to achieve this nowadays with divi? thanks.
@melitamesaric16862 жыл бұрын
Thanks for sharing!😊
@aniaromanskacom2 жыл бұрын
Thanks for watching 😊
@Cherry-t8c4 жыл бұрын
thank you! just save my day!
@aniaromanskacom4 жыл бұрын
Glad it helped! :-)
@Cherry-t8c4 жыл бұрын
@@aniaromanskacom how make it autoload the tab1 if you load the page ?
@vallabhanenimahesh24282 жыл бұрын
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
@aniaromanskacom2 жыл бұрын
There is a Code module there with the CSS and JS code, which would need to be moved elsewhere or to a different section.
@fsbinondo2 жыл бұрын
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?
@aniaromanskacom2 жыл бұрын
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.
@MirkoMancini3 жыл бұрын
Thank you so much! I love you!
@aniaromanskacom2 жыл бұрын
Glad to know I could help :)
@maduroheintz86406 жыл бұрын
Amazong Tutorial! THANKS A LOT! Keep it up :)))
@aniaromanskacom6 жыл бұрын
Thank you! I'll do my best ;)
@jbusby8253 жыл бұрын
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...
@SyedMuneebAli6 жыл бұрын
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 :-)
@jenniferkergourlay64176 жыл бұрын
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.
@iwmudika6 жыл бұрын
Great Anna. Very inspiring!
@aniaromanskacom6 жыл бұрын
Thank you so much :)
@alexandraalvarez59652 жыл бұрын
How do you make one of the tabs active and open when page loads?
@aniaromanskacom2 жыл бұрын
Instructions on how to do that are at the end of the Blog post ;-)
@MrRelaxTV4 жыл бұрын
Thank you Ania
@aniaromanskacom4 жыл бұрын
You're welcome :-)
@kwajongenscommunicatie62012 жыл бұрын
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)?
@aniaromanskacom2 жыл бұрын
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
@MostlyNadine2 жыл бұрын
I just today worked me through this with the lastest version and can confirm it works as expected :)
@maeeshameem67874 жыл бұрын
How can we inactive the content on second click on the tab title?
@aniaromanskacom4 жыл бұрын
Try modifying the JS code: instead of $(this).addClass("active-tab"); you can use $(this).toggleClass("active-tab");
@BoldonBigLad4 жыл бұрын
Great tutorial, I am about to try this for a client website. Can the JS just be added in a Divi Code Module?
@aniaromanskacom4 жыл бұрын
Hi Keith, yes, it can go to the Code module, that is how it's included in the JSON layout.
@BoldonBigLad4 жыл бұрын
@@aniaromanskacom Thank you so much
@singforamerica80166 жыл бұрын
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?
@aniaromanskacom6 жыл бұрын
Hi, sorry, but it's not possible to guess why this wouldn't work for you without your website url..
@ma.belengonzalez83234 жыл бұрын
hi!!! excelent but i cannot make it work... the jquery is not working... could it be something wrong on the code?
@aniaromanskacom4 жыл бұрын
Try downloading the JSON layout, it should work out-of-the-box.
@bobpaydar5 жыл бұрын
very nice tutorial, thank you
@helloapple5563 жыл бұрын
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..?
@aniaromanskacom3 жыл бұрын
The layout should be imported directly on the page (you'll find the instructions on the download page).
@RobStephens_com5 жыл бұрын
Nice video. Do the blurb modules have to be in a full width row with just 1 column?
@aniaromanskacom5 жыл бұрын
No, but the JS code would need to be adjusted if there were in separate columns.
@disenoerco47195 жыл бұрын
is there a way to make this in vertical instead of horizontal?