How to Shrink Your Global Header’s Size When Scrolling with Divi’s Theme Builder

hello divination and welcome in today's tutorial I'm gonna show you how to shrink your global headers size when scrolling with TV's theme builder this is the final results were aiming to achieve so without wasting a lot of time let's dive in and let's get started alright so our work here is going to start in the theme builder so right now I'm logged into my WordPress admin dashboard so I'm gonna come over here hover over it says Divi click on theme builder so since we're building the header we need to come over here to the global header so I'm gonna click here add global header click on build global header so now this is going to take us into our builder so I'm gonna click here on a build from scratch and then I'm just gonna close this for now so the first thing you want to do here is to go into our section settings add a background color so the color we're gonna add here is going to be white some some add white here to my background next I'm gonna come over here to design click on sizing and on the width here it's currently set to auto we need to change this to 100% so the next thing we need to do is to come over here to spacing and add some padding so the pattern we're gonna give here is to VW both to the top and the bottom and we also need to give us a box shadow so I'm gonna come over here to box shadow and I'm gonna go with the first option here and then I'm gonna set by blur strength to 50 pixels so currently it's set at 18 so I'm just gonna change this to 15 and then shadow color here should be fine so let me just double check yes so our shadow color is okay as it is so the reason why we're adding a shadow color color there is just to make a distinction between the header and whatever comes down here on the content area now the next stage is to add a bit of CSS so let's come over here to the Advanced tab and click on CSS ID and classes and on the CSS ID we need to add this ID called section padding and then next we need to add some custom CSS and by the way if you want to use the exact CSS azam using throughout this tutorial I will leave a link to the post in the show notes below so here is where I need to add my CSS code and make sure it's added in the main element and then we also need to go to the index so I'm gonna scroll down here to visibility and on the set index here I'm just gonna give this a very high number so I'm gonna give it nine nine nine nine now this just ensures that whatever happens on your page this header will be above everything all right so now that we have this all set I'm gonna save this and then we need to add a column structure so I'm gonna click on this plus button here and the structure that we need is this one right here so I'm gonna go with these one quarter two thirds and one quarter okay so there we go so now that we have this in place before we start adding any elements we just need to go into our row settings and make some changes so I'm gonna click here on row settings and then I'm gonna start with my gutter width so I'm gonna click here on design sizing so the gutter was here needs to be set to one now the gutter width is just the space between the columns so make sure it's set to one now this removes any spaces between the columns next we want to make sure that the columns are equalized so I'm going to click on equalize column height and our maximum width here is going to be a hundred percent so whatever we have here is gets gonna be edge to edge now let's head over to spacing so on the spacing here we need to add a padding of zero both to the top and the bottom and on this row we need also need to add some CSS I'm gonna click on the Advanced tab and CSS ID and classes and then on the CSS ID we're going to add this CSS ID and as I mentioned before if you want to use the exact same CSS as am using throughout this tutorial I will leave a link to the post in the show notes below alright so next we need to add CSS to the to the main element here so I'm gonna paste it like that and then we're gonna save now it's time to add all our modules so as you can see here I don't have the ability to add my logo here so what I want to do is I'm going to click on these three little dots here click on wireframe mode and then now I have access to my modules so I'm gonna click on this plus button and the first one here is going to be an image module so I'm just going to search for it and select it okay so I might as well switch over here to my desktop mode so I can see what during now I can add my image by placing this by clicking on this plus button media library so as you can see I have a logo here already so I'm gonna go ahead and select it upload an image so now I have a logo so what I'm gonna do next is to head over here to design sizing and we need to add a width of 5 V W okay so now you can see the size has reduced significantly so what I'm gonna do is well ease I might as well just add in my mobile sizes so I'm gonna click here on this little icon click on tablet and on the tablet this needs to be 9 V W so now this is very important if you really want your website to look great on all devices next I'm gonna clicking on the phone and on the phone it's going to be 13 V W there we go so now I have all my sizes set I want to save this next I'm gonna come over here to column 2 click on this plus button and this time on column 2 this is where our menu is gonna go so I'm gonna select it so depending on how many menus you have you just need to make sure you choose the right menu here on this drop-down so as you can see I only have main menu so that's the one I'm gonna select and I only have two links here but of course you can add mobile links on your menu and the next thing I'm going to do now is to remove the color on the background of this module so I'm gonna click on background and then I'm just going to take you on this transparency icon now let's head over to the design tab so over here if we need to go to layout so as you can see it's left aligned ideally we want this centered and then on the drop-down menu direction it needs to be set to downwards so I think the default should be fine here now let's customize our menu text so I'm gonna click here on menu text and just make sure that my color here is set to black and my fonts is Rubik so I'm gonna search for it now here these fonts are absolutely free so you can use these the google fonts so go ahead and use them next I'm gonna come over here to my menu text size so again we also want to make sure that we set our sizes for all mobile devices just to make sure that it looks really nice so I'm gonna go ahead and add my size here next I'm just gonna hover over here and add my size for the tablet as well so for the tablet it needs to be 2 V W and then for the phone it's gonna be 3 V W all right so I have all my sizes now in place now if you're going to have any drop-down menus you might as well you know add all your colors for your drop-down so I'm just gonna collapse this and go to my drop-down menu so on the drop bar drop-down menu here you need to set your menu background color so I'm gonna set this to white and then we also need the line the drop down menu line color it's gonna click on this eyedropper tool so I can add my custom color here so as I mentioned these colors here that I'm using can be found in the link which I'll link in the post which I'll link to in the show notes below now we can also further customize the hamburger menu icon color here so let's look for that so we need to come over here on icons and here we go so this is the hamburger menu color click on this eyedropper tool and paste my color in here and then save right so we're almost done here the next stage is to add a button to our third column here so I'm gonna click on this plus button and search for my button module and selected so of course when the button comes in here you can see it's very plain we need to go in and customize it so let's start here by in fact that this text button text here you can leave it as it is or you can just you know name it whatever you want but the most important thing here is to make sure your button has a link URL so in this case I'm just gonna add a blank link but in your case you need to make sure that this link links to whatever page or wherever you want this to link to alright so now let's go ahead over here to design and start customizing this so the alignment here needs to be set to right because we want this all the way over here to the right so that's the first thing you need to do so now let's go to our button settings so I'm gonna come over here to button and for you to customize this button you need to make sure you activate use custom styles for buttons I'm go ahead and activate that now let's start with our button text size I know we have a default of 20 but we're just gonna go and add our own sizes here so that's gonna be our size for the desktop now let's click on this little icon and also add the sizes for the tablets and the phone so for the tablet here we're gonna set this to 1.5 VW and for the phone it's gonna be to the W okay so now let's switch back over here next we want to add our button text color so for our button text color here we're gonna set this to white and then for our background color we are going to paste our color in here so now you can see here the button has been added next we want to work on our button border width so for our button border width we're gonna set this to zero so I'm moving on on the border radius we also need to set this to zero and for our letter spacing let's set this to 1 pixel and then for our font let's set our font here to the Rubik this is just that we have the same form that we used here on our menu alright so moving on we also want to make this uppercase so we're gonna come over here to button style set this to uppercase so as you can see this button here needs some breathing space so to achieve that we need to head over here to spacing so over here we need to end our padding here on the top of 0.8 and that needs to be same with the bottom as well so I'm activate this chain and now we also need to add left and right padding so I'm gonna add 1.5 V W here both to the left in the right and now you can see the button looks way much better so the next stage here is to add a box shadow so I'm gonna come over here choose the first option here and then we need to customize these values so first of all I'm gonna come over here to my shadow color so I'm going to click on this eyedropper tool and between the brackets we are going to add these values and these values can be found in the show notes below alright so now that I've added my color I'm also going to adjust my box shadow or blur strength so currently it's at 18 it said this to 30 and our vertical position it said this to 20 so pretty much that's all we need to do here let's go ahead and save so the final part of this tutorial is to add the feature that allows the shrinking effect so to add that we need to come over here to the second column and add a code module so I'm just gonna go ahead and search for my code module and select it so the jQuery and CSS code I'm going to use can be found in the link to the post in the show notes below so I want to start here with the jQuery code so notice is that this code here starts with the script tag and ends with the script tag the next one here is going to start with the style because this is the CSS code and then I'm just gonna paste it between these tags like that and then save so now that we've added our code all I have to do now you save the page one more time we can close out of this and make sure that you save all changes on the Builder as well all right so let's test this and see if it's working now so I'm just gonna scroll up and as you can see it's shrinking I'm gonna scroll back down it's also working so there you have it thank you all for watching if you like this video please give me a thumbs up and do follow us on our social media platforms by doing so you'll be notified every time we release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: Elegant Themes

Views: 21,249

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme, shrink header size

Id: oIKTWqUlD98

Length: 12min 14sec (734 seconds)

Published: Mon Jan 06 2020