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

hi I'm Ana I would like to show you today how to create nice-looking tabs in Devi but we won't be using the default tabs module and instead we'll use blurbs as titles and standard sections for the content so let's have a look at the layout we'll be creating as you can see we have four blurb modules here with nice hover effect and if I click any of those herbs you can see that they work as tabs showing the different content for each tab and what's great about is that you can place any modules you like inside each tab as it's just a standard TV section let's go ahead and recreate this layout okay so as you can see I just created a new page I will choose to use the Divi Builder and first thing I want to do is remove the padding from the section and also I will add custom CSS ID tabs for the row settings it is important to make it full width and also choose to use custom gutter with and set it to one I will also remove the padding okay next step is to add our blurbs so I'm not concerned about the number of columns because we'll be setting the width of blurb using flexbox so you can have four six eight any number of columns and we will control it via CSS I'm adding a new blurb let's call it this cover you can choose to have title description use icon or or don't just leave only the title it's up to you what's important is we have to set the blog URL and it will be different for each but it has to link to one of the tabs later next I will choose to use icon let's add a background color and in the design tab I would set the icon color to be white and I want to have different icon size for mobile and tablet and phones so I will decrease the size of the of my icon and I will also want to make sure my text is centered and its light color and I want to have different font size for for mobile as well what I will also do is set some padding I'm giving it 40 pixels from each side on desktop and then for tablet I will decrease it to 20 and for the smartphone let's set top and button to 10 pixels and what's the important part here is we need to add a custom class let's call it tap title and that's it let's save the next step is to duplicate the blurb we will change the title we'll change the link URL and also the icon and the background color let's save and make another copy and save and the last one okay now if we update the page we can see what we have done so far so this looks pretty good now we need to edit it with CSS I'm using the Chrome browser if you right-click choose to inspect you'll see the source of your page and CSS which is being applied if we are going to use flexbox we need to find the parent element for our blurbs so as you can see these are the blurb modules and the parent container is actually a column so let's add a new row two tabs section and column within that section and we'll say display flex a line items Center content center legs that will be useful for mobile styling okay that looking pretty good but we will also need to set the width of each verb so let's add a row for each tab title within our section we'll say we want this to be 25% okay that's looking great now let me open my child theme stylesheet I'm connected through FTP with with my server so I can edit my child theme style.css file directly but you can place your CSS in the the theme customizer as well let me grab this and place it here that's not okay I will save the file and now if i refresh the page should say the same great okay the next thing we want to do is to add a hover state for each blurb we need to take our blood and add some style for hover will change the cursor to hand cursor which is called pointer and we change the background color to be something almost black we may also want to add some transition for smooth transition okay let's save that and now if i refresh yep that's very nice okay but what about the mobile view if I resize my browser window it's looking pretty good but yeah we need to fix how it looks for smaller screen sizes we need to write some media queries for tablets it's max width 767 pixels and let's say that when it it hits that size we want each tab to be 50% with if it's smartphone let's set it to full width okay refresh the page let's see how that looks okay we might want to remove the margin here and maybe move the icon to the side on mobile view so it takes less space okay let's inspect that [Music] which a man has this margin I'm guessing it's random mine blurb image as you can see it has margin bottom of 30 pixels if we make it zero that will look much better actually maybe make it 10 pixels we will remove the margin on mobile okay let's refresh yes that's great and we can again use flexbox to remove the icon to the side the parent container is this one if we make it okay we'll need to add some margin to the image yeah that looks pretty good let's remove the padding from the header as well okay so first thing was the the content and then image margin alright let's make 30 pixels and also the age for module header padding button set to 0 okay that should do it save and refresh lovely okay as you can see that looks very nice now we need to create the rest of the page structure we'll be adding 4 sections one for each tab like I said before it doesn't matter what you put inside the section so I'll just going to place some sample image here and some text dummy content what's important is we need to set the custom CSS class for each section tab content and each section needs to have a unique ID we used before and I will also add a background color now we can duplicate the sections we need four of those and I'm just going to go inside each one to change its content I will change the text here actually this is design this is discover this should be develop and deliver and like I said unique ID for each section okay let's update the page now if we refresh we have four sections but we don't want them to be visible at first so we are going to use CSS to hide them to hide these sections we just need to use the custom CSS class we gave for each of the section it was tab content and we set it to a display:none save and refresh now we need to use jQuery to actually make it work so we want to show each section on click on the blurb there is a few different ways you can place JavaScript code in a TV website but what I like to do is I place it within my child theme files in a custom script J's file I'm using an q function in my functions PHP as you can see it loads my custom scripts J's file which is inside the Jas folder you can see my child theme files here and there is the JavaScript file as well first let me paste the jQuery function and we want to target each of the blood what we need from each blurb is to get the Ashraf attribute from the link to know which section it connects to as you can see we are setting a variable section ID and it's taken from the tab title element and looks for the a tag it in and takes the href attribute from from this link we will also want to remove the link because we'll be using our own custom function for click event so each time the tab title is clicked we want this to show the correct section but we also need to hide the other sections okay let's see how that looks I will save the file refresh the page and as you can see it opens good tab each time I click different link so that's great but what I think it's necessary here that we mark the active tab make it look different so we know which one is active and to do that we are going to add a custom CSS class so let's go back to the JavaScript file we want to add a class of active tab and we will remove the active type class from other elements and now let's add some style for the active title so I'm taking my tab title and when it has active tab class as well let's change its background to be the same as the background for my section okay I will save the file and now if i refresh the page lovely we want to change the icon and the title color as well so let's inspect that [Music] so span element with et PB icon class so let's go back to our style sheet and make it darker I will save and if i refresh it didn't change but as you see it's been overwritten because the color for the icon is in line in from DV we need to add an important rule so let's head back here not important okay once again I will refresh right and title is actually a an a element link inside the module header it for let's make it black save refresh wonderful let's have a look at the original demo page once again as you can see you can also play with some animations and that's it you should be able to recreate this layout you can find all the CSS and JavaScript code on my blog and also if you just want to simply get the layout you can download the JSON file and import the layout to your site and make your customizations there okay thank you let me know if you have any questions in the comments thanks for watching I hope you find it useful and see you next time

Channel: Ania Romańska

Views: 47,211

Keywords: Divi, Tabs Module, Blurb Module, Divi Theme, Divi Tutorial, Free Divi Layout, Tabs with Icons

Id: OKMUIGDTDQ0

Length: 24min 48sec (1488 seconds)

Published: Wed Dec 20 2017