Right now it works bud the other are automaatically collabsed. A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. Just one question, if I wanted the 4th tab/blurb to link to a new page rather than content likes tabs 1 – 3. It shows the 4th content. Add your own styling and photos, move or edit modules, expand or reduce the layout, etc. I have a question.. How do I do that? $(this).siblings().removeClass(“active-tab”); This is indeed a great layout and accompanying tutorial. I am using the ‘title link url’ as it makes everything work. Hi Anna, thanks for such a great tutorial! I can’t believe I overlooked the edit. The problem is in the image of the first slide, which does not show. https://www.naequus.clientesdesignar.cl/recetas/. Add a standard section and set this section padding to 0. Thank you for sharing this wonderful gift, the fruits of your labor, and your talents :o). I tried this and added tab4,5,6… but it does not seem to be working. I’ve included the #tab1 link in both the Title Link URL and the Module Link URL, because without doing both, it doesn’t function at all. 1 of 12 Blurbs. Is there a way of making the blurbs/tab display like an accordion on mobile, so that the blurbs open below the relevant tab and not below the bottom tab? Thank you. . Keep up the good work! Hi We'll provide you with updates on new tutorials, webdesign assets and special offers. What if I want to use images instead of icons? POWr Tabs Divi Builder Plugin is free to use, mobile responsive, and easy to edit, with no code required. Annia loved this tutorial, very clear , easy to follow and absolutely fantastic. Thank you for your kind words, it’s very encouraging . Try modifying the JS code: instead of $(this).addClass("active-tab"); you can use $(this).toggleClass("active-tab"); thanks a lot for that nice tutorial. Are you able to assist me if I need to add an extra tab in? but it is still not showing , hi Ania – thanks SO much for this, its exactly what I needed for my clients Services page: https://www.brain-whisperer.co.uk/services/ 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). Using Divi, you can create any number of tabs that will look great inside any sized column. Fantastic! Nevertheless, your tutorial is really fantastic. Sure, it is inside the Blurb module settings (default Divi animations). I was recently working on a Divi WordPress theme project that required a few blurbs with images. http://91z.6f9.myftpupload.com. The site also jumps down every time a link is clicked – is there a way to stop this issue as well? Thanks again. Hi, thank you for this great tutorial. Hello beautiful tab layout, wondering if you tried tabs on the right with the content on the left? Hi, I do know CSS and HTML, but haven’t dug into your code yet. Great tutorial Ania!!! here it would be 4 x H4) but only normal paragraph text. $(‘html, body’).animate({scrollTop: $(section_id).offset().top}, 1000); How can I make that only trigger @media (max-width: 767px )? I look forward to using it. Do you have an idea how I can make this work with modules? Here is the code: We need four section – one for each tab. Read the blog post. Blurbs are a great way to showcase small bits of important information in WordPress, and are often used in rows to display skills or features. I’m so embarrassed. How to create above Divi vertical tabs layouts. I do have a couple of questions: i forgot to add the CSS Class: tab-title!!! Would love to discuss this via email or something. Read the blog post. Hi Ania, Marcus. Is there a list on your site of other Divi Tutorials / Customisations you have developed? The CSS width of the Blurb modules would need to be changed as well (for a two column layout). On this page https://melitakes.gr/βίντεο/ four videos are shown when a blurb is clicked. Any idea how can I fix that? Visit http://divisoup.com/r26 for the accompanying blog post to grab the CSS used in this recipe. Hi Philipp, And there is an issue with the quotes in your code – check the lines 6 and 11 in the custom-scripts.js file and replace the quote symbols. I was copying and pasting so couldn’t figure out why it wasn’t working. This is awesome. This is beyond my expertise. Switched it and it works perfectly. 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: https://imgur.com/a/x3foc4x This is a demo page of a layout made by Ania Romańska from Divi Lover. If you are experiencing issues in the backend please try disabling the JS when you are in the VB and enabling it back once you finish with your edits. One quick question – how would you go about showing the details of the first tab as default when first coming to the page? I will pull a row into a module by implementing a tag [showmodule id=”012345″]. }); blurbs_as_tabs_divi_5-1. On mobile, I decided to keep all the tabs side by side, and just keep the icon with no title – stacking doesn’t work when you have 5 tabs. Hi Ania, Great tutorial, thank you ! I followed all your instructions and made a few modifications to the css but left the js the same but can’t seem to get the tab content to display. OR is there a way to increase the tabs number? Your demo site seems to be affected too. Fantastic! I learnt so much. . I was trying to use text modules for the tabs instead of blurbs. This is amazing! example.com/page.php?tab=1 or example.com/page.php?tab=3. It’s the bottom margin on the Row in the first section on this page (the one above the Blurbs) , Thanks for your quick response, I’ve played with the margins and it doesn’t seem to have fixed the issue. Lorem ipsum dolor sit amet, con sec tetuer adipiscing elit. I am using it on my HR and upcoming payment forums, jusy wondering if i can use the blurb tab system on the same page multiple times to reduce scrolling, its awsome you rock! I hope you can help please. Divi Next Blurb Design Tab. I would like the first tab from the left to be open from the start. Try googling how to make a shortcode from a Divi Layout, there is a few tutorials and a free plugin as far as I know (our Divi Toolbox also has this functionality) – you should be able to insert any layout inside the standard accordion with a shortcode. One question: How would I have one of the tabs shown/enabled per default when the side loads? Thank you for this amazing tutorial. How di I make the first tab defaultly appeared without need to toggled it first? Hello There, I couldn’t find the CSS file to add the styles. Loved all about this post, Ania. To do so, click the Divi Blurb module settings: Module settings. 2. I think it’s with jquery, could you help me? Hi Ania Hope I have described the problem correctly. You have JS error, you should not defer the jQuery script. It is possible you have an empty space character inside the Blurb description, check the Blurb setting via the standard builder. Hi Ania, Thank you for this superb tutorial. If you click on each tab, there is a white space that increases in size between tab and content. The previous problem has been resolved. But remaining two tab does not load the thumbnail. The important part is to set proper CSS classes and IDs. I click the person module and nothing happens. 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. uups – that’s just what I did: changing the structure of the tabs. However, editing the tab content sections is proving a pain as I have to use the back end builder. I am using the extra css code for the 1st tab content to be by default open. What needs to change in the code for that? $(‘.tab-content’).hide(); Before I can even begin to work on styling for this site I need to get this working. function loadPerson() { We offer a great selection of high-quality Divi products to speed up your work. That was before I added the js and css. This is one of the best tutorials I’ve seen recently. Hi Ania – thanks for this tutorial, it’s awesome! I’ve put this into my active tab, then it shows when loaded. I am using these tabs on a site and the client LOVES them. Right ? Blurbs as Tabs in Divi | Divi Lover Demos. I’m working with your solution now for a few weeks. Pls help me out, thank you! What a great tutorial, love your work! Distribution of source files is not permitted. When i press the first blurb, i suppose it is working, but when i press the second or the third, it is just scrolling me up some pixels.. Hi, check if you’ve added the #tab1 to the “link URL” and not the module link. 0 Comments. i have two questions: is it possible to have no H. titles at all instead of titles je blurb (e.g. Bastien. Just one question : on mobile, after clicking, the text module opens at the bottom of the 4 blurbs and so you can’t see that something is opening. I know that I can unsubscribe at any time. 1 Can I add dynamic things to the hidden blurb, e.g. Click here for instructions on how to enable JavaScript in your browser. It shows how to make one tab open and correct tab-title active at the same time. Thanks so much! There is a problem with the tab url, it doesn’t show. Dear Ania, I noticed that the animation within each tab-content is not starting anymore with a click on the corresponding tab. The issue was that the default Divi blurb image was way too small. Once I have built and customized my blurb tabs, how do I include it on my home page? I have same problem like you, but i can´t figured it out.. I’m using this on a website and it really looks great. Hi Ania, Please follow the instructions provided on the download page – you need to load the JSON file directly on the page and not in the Div Library. Hi, Demo: http://beverlycassidy.com/livingwell Having a good place to sub out work is always nice. Thanks Ania for a fantastic tutorial for functionality I know I can use again and again. here is my project http://alpoh.dev-inmotto.de/project/unternehmen-2-unterhaltung/. On my browser it seems that it doesn’t work on your demo page either. However, when I click the tab, the contents don’t show up. Support is provided for 6 months from the date of purchase. }else{ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Thank you good wishes! Btw just bought Divi Toolbox and i’m loving it. Thanks so much for been so generous with your knowledge. Thanks so much! display:none; Could you please guide me on how to get this to work. Divi layouts are easy to use and provide a great place to start – saving you lots of design-time. Cheers from Mexico. The page start with one of the tabs already open but if i try to select any tab (including the opened one) : content disapear and cant be shown again :/, Ok i found the problem : it doesnt work if Blurb modules (class : tab-title) are used only with text (no icon and no title). We will of course add several animations on hover so our module will be more interactive and will gather more attention. Do you have any advice what should i do or try? He wants a specific URL to lead to each Gallery to share with customers. Make sure you are adding the link in the “Title link URL” and not the “Module link URL” in the Blurb settings. I removed siblings() and it worked perfectly. I figured out what was the problem and how to solve it. I can see in the comments I am not the only one asking… Can you puh-lease help us ?? $(this).click(function() { Helo Sheila, Your maxqsoft website was designed using WordPress. : https://www.eloorac.com/transportgestell-modelluebersicht#drawings. You can put the code in the “Code Module” in Divi Builder on the page where the blurbs are, but it should work from the “Integration Tab” in Divi Theme Options as well. Divi animations seems to be inactive when title’s content is deployed while they works well on normal pages. Please advise. In the Advanced Tab set the CSS ID to blurb-tabs. }. I know some CSS coding but not the jQuery thingy. Take a look at 20 Divi blurb layout examples. Is it possible to make these sections show in the VB? No, it wouldn’t be possible with this code, it would need to be modified or a completely different layout structure would need to be used. Go to the link provided on computer. Ps. I was able to tweak a little the jQuery and CSS to get this working as I was mention. Any kind of content can be placed within a tab as tab content is controlled using the standard WordPress post editor. I tried adding them with Divi to the section, row or module, but each time, when the section opens, everything is already displayed. I don’t want it pozdrowienia from canada. Tks for your help. Theoretically, could this work? Thank you! Should you tell me how to correct this problem ? Add a title and content: Title and Content. If you are using Divi, it comes with blurb modules that you can easily place them in any column that you create in your blog layout. Is there anyway to disable the jquery scroll jquery line at the end only for desktops and tablet . Is there a (simple) way to change this? Thank you, this is something I always wanted to realisze…. Thanks Ania, that makes sense . What class should I use to control the image I use instead of and icon? Once I did that I now only see the one. Is there a way to implement 3 tabs instead of the 4 tabs? Edit the tab content to add your text. You’d need to look at jQuery .mouseover() event and modify the JS. Hi, it should be a matter of adding more blurbs, more sections with corresponding IDs and editing the percentage width of blurbs in CSS. How will it look like on devices where JS is disabled? Having difficulty importing the .json layout file. $(section_id).show(); (pretty please!). I have one issue: the blurps are clickable everywhere but clicking on the image does nothing, around it and on the text works. Is there any way to have the screen scroll down automatically when you click on the first image that opens the tab? Best regards, Lukas. Hope this helps and thank you for your kind words . I want to link to these tabs from another page (in other words, one button would link to tab 1, another would link to tab 2, and so on). Thank you thank you thank you!!!! You are incredible—and a lifesaver! I’ll be very grateful for any assistance and help with this problem! I want to stay in touch! When I refresh the browser the first 4 tabs show going down the line but the last 2 are not. I’ll be using this on many sites upcoming and will be referring back to your tutorials regularly! So when when it is Wednesday, the active tab would be on Wednesday. Could you help me to resolve this please? Sorry, but I don’t think this would be easy to achive, should be possible with custom JS, but you might want to consider changing the section to a different one on mobile, which would be a simpler solution.. Hi, I have downloaded your layout as a starting point, and have added the code in the positions indicated, but the tabs do not open when clicked, the show the colour change but nothing else. And then in CSS right after this: .tab-content { How is it possible, to link directly to a specific tab, so that the active tab would be the tab, the visitor is landing on. jQuery(‘html, body’).animate({scrollTop: jQuery(id).offset().top-100}, 1000); Dear Ania, Thanks for the great tutorial. So, adding 1000 (this is in milliseconds) as a parameter, like so: My question is what i have to change on the script, if i want to show different background-color for each active tab? I’ve experimented with adding Custom ID’s to different elements in the layout but with no success as yet . I was looking for a tutorial like this for a long time, thanks again ! I registered but cant seem to get access to download the Jason file. Thank you so much for response! Please do reply ! align-items:center; can I do all the modifications in the Customizer of the Divi Theme or do I have to install a Divi Child Theme? When my business is launched and flying I promise to come back and buy you a coffee! Lorem ipsum . .tab-open { So when the content is set to display by default as per your css suggestion, to also have the blurb it’s associated with display in the light grey color as if it’s been clicked on and active. But I have a problem, clicking on another tab does not remove the active-tab class in the tab that should be inactive. I tried to put the css code you have in but it still does not work? Thank you so much. Thanks. }); hi i would like since i like your tutorial above see if you provide remote assistance and help with development of website ? ! (I have five on my page) Hi, You can try using the min-height property with some CSS media queries (targeting the titles directly). $(‘.tab-content’).addClass(“active-tab”); I have a question though. Compliments/Praises: This tutorial is simply one of the best tutorials I’ve seen in years regarding adding beautiful functionality to Divi. That’s really great tutorial! jQuery(document).ready(function($) { How do I manage to have it in its selected color? I decided to use the Google Chrome inspect tool and discovered the issue. Did you ever find a solution for this? I have tried with #tab2 #tab3 etc., but the link will just go to the page with my #tab1 as default opened. Issue is, he wants to use them for different pages and some of those pages have more than 4 tab subjects/titles. Thank you for this amazing, in depth tutorial! Thank you very much!! Many thanks for this tutorial it has been a great help. Sorry, I’m not sure what exactly seems to be a problem. Hi Ania Thank you very much for this tutorial. Great tutorial. What an awesome way to use the blurbs! Hi Nina, Do you know how to fix this. to create something that’s uniquely yours. I’m having an issue with the link not working correctly if the cursor is over the Title text or icon, rather than over the background. Is there a way to get the tabs to horizontally scroll on mobile instead of stacking on top of one another? I have the same question as Bernd.. could you tell us how to have different color for each tab activated? Thanks! I only want to send some love, thanks for all! I hope you can help me. I can not open the tabs… the “open” tab (tab-open) is there, still I click on one of the blurb-tabs. The code would need to be changed. As you mentioned, I’ve cleared the steps and then I paste the .json file that I download as your tutorial. I used white as the selected background color for active tabs, but it wont change until I click on it. I am having a small issue with my site. This tutorial is brilliant! thanks! Oh, and I forgot to tell you, I have animations in my tab section modules, but they don’t work. Thanks for this though!! I also have two questions to make it work on my site: 1. }); Hi Anya! $(section_id).slideToggle(); Your desktop version doesn’t seem to be working either. I meantwhat would be the media query for the java script on mobile to appear below each tab? Quick question, is there a way for tabs to change dynamically depending on the day? Then use Divi’s Multiselect feature to select all three blurbs and then copy and paste them into column 4. I am so close to my goal, but without a quick fix for the following, I couldn’t use the free tabs layout for my project. Great tutorial and thanks again! Only on page load the animation is visible within the active-tab. var id = url.substring(url.lastIndexOf(‘#’)); In order to post comments, please make sure JavaScript and Cookies are enabled, and reload the page. At ¼ columns, tab buttons are stacked and remain visible. Thank you! Thank you so much for a great tutorial and a great design idea. That is my guess, but if you already added it in a correct place then I would need to see the URL to be able to advice anything . is there a way to move the tabs to the bottom instead of the top? Divi child themes? ... Customising the Divi Blurbs module Content tab. I’ve been attempting to do it with the ID’s that are already in place but I wonder if it’s just not possible as it conflicts with the other code? I tested also firefox and it doesn’t work. Hi, I tried to subscribe and get the layout, but I never received an email on either of the emails that I tried. Once the tab is open, is there a way to make it so if I click the tab again it’ll close? width:25%; However, changing section_id to module_id in the jQuery doesn’t work. display:none; On one thing I have a problem. by Michelle | Dec 14, 2020 | Layouts. First i need Speciatly section and next standrat section the layout has become irresponsive on mobile is there an easy fix for this? The item cannot be offered for resell either on its own or as a part of a project. Truly well done..been a Divi designer for many years, this has to be one of the most useful, eloquently communicated tutorials I have come across. The module adds several information tabs, each displaying information related to PHP, WordPress, and the current page or post that the module is added to. I am using divi video sliders in the content for the blurbs. This is the tab you will use to change how your module looks. Thank you so much, seems to be all working now. I’m just having what I think is one issue… On page load, the content on /example-county/ renders appropriately, with the designated active tab showing and all other tab content being hidden. I have a dev site test here https://staging1.roamconsultingllc.com/testing-tabs/. “There are no secrets to success. Hello Ania, thanks for the amazing tutorial, it saved me! I would like to include it in my navigation. search module needed If you’d like to learn more about it – there is a fun game called Flexbox Froggy, which teaches you all the flexbox properties. (I just imported the Json file as I am a divi beginner) and I wondered how to adjust the mouse over settings on the blurb tab menu? Hello, I’m wondering if I could put a photo in the tab rather than text + icon. This is great! } Thank you very much. I have the same problem. But I have question about sections It’s very simple. That is, there will be one row with 2 columns, in the first column there will be modules “blurb”, and in the second there will be modules “text”. Hi Ania, great post! You’ve added the tabs IDs to text modules and not sections, only the tab2 is correctly set up. Here is an idea to get you started: Check out Recommended 
Divi & Web Resources, Learn Divi Theme with our Practical Guides, Jump Start Your Project with a Premium Child Theme. When I click an new tab, it leaves the “active-tab” class on what has already been clicked. I want to close the tab as well on the second click. Another question is whether it is possible to place the title above the icon. Hi Lukas, the link (#tab1, #tab2…) needs to be added in the “Title link URL” and not the “Module Link URL”. How did you solve yours? When I click away, it leaves the “active-tab” class on what has already been clicked. Thanks! Divi Lover Shop. How i can fixed it please help me. It’s hard to guess what could be the issue there. Thank you very much Ania. I use an image instead of an icon how can I change the image if the tab is active? Could you point it out for me? Thanks, Ania for the tutorial, this is so useful. Read our Privacy Policy to learn how we manage and protect your submitted information. // Custom code for the blurbs as tabs module Is there a way to do this by adding the flexbox code within Divi instead of through the browser? Any advice about how to rectify this and avoid it happening in the future would be appreciated. Is that possible? 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: so the full JS code would look like this: 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): We’ll provide you with updates on new tutorials, webdesign assets and special offers. I am trying Edit 1 above and I am sorry to bother you but I am missing something. I need to equalize the height of the tabs so no matter how long is the titles always the tab heights are going to be the same. Hi, it’s most likely caching, as it works fine for me. I just can’t seen to find a solution. It’s not possible to change the image with CSS, you’d need to edit jQuery code. The content for all sections is supposed to be like that on the /beaufort-county/ page (which does not yet have “tab-content” classes implemented, just so it’s easier to see what’s in all the tab sections without switching to wireframe view). One little problem… the last menu item is the logout button, how i can make clickable without loos the design and conflict with the script? Thank you for this, the video was awesome and it worked perfectly for my site. I have 2 rows of 8 tabs each. I Think some hints would be fabulous. i will be needing some support and little bit a script development i believe .. I will surely keep you in mind when I get in a jam with a project. Thank you! I can´t import the json file. Hi Ania, I love the tutorial and have been using the layout for over 2 months now by your grace THANK YOU! Thank you! If there is then please share. Great tutorial ! I have copied and pasted from your tutorial and have compared your demo page, unsure what is missing here. Great tutorial and a very useful setup. I have followed everything. Yes, the URL is hidden, it is not just you, it’s how it works. If so, I would love to know how to go about it. Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. All right, at least I know I tried. when I resize my screen in order to test tablet size. Just enjoying playing with the appearance now… . $(‘.tab-content’).hide(); How can I remove the hover effect ? Load more module Yes, you’re right, I see what you mean. Learn how to style a Divi Blurb Module in this easy to follow free tutorial. Hello Ania. $(‘.tab-content’).not(this).hide(“slow”); $(this).find(“a”).removeAttr(“href”); Can you please help? You certainly have a new follower. Steve. } It is the result of preparation, hard work, and learning from failure.” Hi there, this is great thank you, just wondering if it is possible to open a tab via URL. Thank you so much for this tutorial….I’m a complete CSS and JS novice and its helped so much. $(this).click(function() { I have a feeling that a Divi Update changed something here. Thank you very much for sharing…. I just changed the structure back according to your tutorial and everything works fine. Hi… My name is Yana, I saw your website and it´s perfect. It would require additional JS code, it’s not a part of this tutorial, sorry. If following the steps doesn’t work, please try importing and tweaking the JSON layout instead. Yes, it is how it works unfortunately, the animations inside thehidden section aren’t visible. Blurb link target needs to be the same as section ID (with the #). } }, And the page where I am asking you to please look is on the contact page. Fantastic tutorial Ania. Regarding to the automatical scroll down, then the link to the test site dont work, so I can se the function. That’s crazy, I had added that but it wouldn’t show. /* Blurbs as Tabs */ At the moment, when I try to use images, and remove the tab title, there is a large margin below the image, and its not centered properly. The thing that is tricky for me is that in the visual editor the content for each blurb-tab does not show only when I go to the wireframe view. 2. Hi! In your “How to make one tab open on page load?” section, you are missing a dash in this part in parenthesis “(it will have both: tab-title active tab)”… “active tab” should be “active-tab”. Thanks! Many thanks, Works without expensive plugins! It’s impossible to guess, can you share a link? I’ve implemented it on my own site and it looks great. – First of all, I did follow the steps to have an active tab on page load, but it won’t work for some reason. But when I insert the jQuery code, these four links do not work at all. Every Divi module has a long list of design settings that you can use to change just about anything. Our main demo page doesn’t include that code, but look here, it works both in Chrome and in Firefox, so it has to be something on your end I’m afraid.