How to Animate Your Global Header with Divi

hello divination and welcome in today's video I want to show you how to animate your global header with Divi this is the final result we're aiming to achieve so without wasting a lot of time let's dive in and let's get it started alright so here we are in the admin dashboard so the very first thing we need to do is to come all the way down here to the bottom click on the in builder and then we're going to add a global header so here I'm going to click on add global header build global header and then we're gonna build this from scratch next we want to just close this for now and then we want to go into our section settings click on design and then we're gonna come all the way down here just spacing and give this zero padding both to the top and the bottom next we want to come over here to box shadow and we are going to go with this first style here and the next thing we need to do here is to add our blur strength and we're gonna set this to in fact this needs to be the Box shadow blur strength so here we need to set this to 80 and then we also need to adjust our color here so I'm going to click on this eyedropper tool and just paste my values between the brackets now if you want to use the exact same colors as I'm using throughout this tutorial I will leave a link to the post in the show notes below alright so now I have my shadow color the next thing we need to do to make sure that our header is above all the content on our page is to come over here to the Advanced tab click on visibility and on the z-index in fact the set index now is here on position you want to drag this all the way up to say about 500 if you want you can just added you know to 900 or whatever it is as long as it's the highest item on the page it's good now it's time to add our column structure so I'm gonna save this I'm gonna come over here click on this plus button and the column structure I'm going to go with is this one right here so I'm gonna go ahead and select it now before we actually add all our modules what we need to do is to go into our row settings click on design and then here in sizing make sure use custom gutter width is set to yes and we want this reduced all the way to 1 because this is the space between the columns we don't any spaces between the columns great all right moving on equalize column Heights make sure it's set to yes now here on the width is very important we need to set this to 100% and maximum with 100% now this ensures that this row is edge to edge now let's head over here to spacing and here we're going to add a padding of zero both to the top and the bottom now let's head over here to advanced tab click on visibility and here on the horizontal overflow we're going to set this to visible and on the vertical as well set it to visible now it's time to add our background colors for all our columns so I'm gonna click here on content let's start with the first column here click on this little gear icon click on background and then I'm just gonna click on this plus button to add my color so that's gonna be my color right here go back next I'm gonna add my second color and I'm gonna click here on this gear icon become this plus button add my color go back and now we're going to add the color for the last column so I'm gonna click on this gear icon click on the plus button paste my color in here now the next stage is to add some top and bottom padding for each and every column so I'm gonna come back over here and start with this very first column click on design spacing so my top padding here is gonna be 0.5 v W I'm gonna add the same for the bottom as well go back now you need to do the same for the other two columns so the next step now is if we want to make sure that all the column content is vertically centered we need to add these lines of CSS code and again like it said I'll leave a link to the post in the show notes below alright so let's start with the first column so I'm going to come over here click on this gear icon advanced custom CSS and in the main element this is the code we need to enter now you need to do this to the other two columns as well so go ahead and do that now finally on column one we also need to add a z-index of 10 so I'm going to come over here to this little gear icon advanced position and then we want to add 10 here to our z-index now it's time to add all menus so I'm gonna save this save this one more time so let's start off here with the first column so I'm going to click on this plus button and let's add our menu so I'm going to search for my menu module here and select it and over here now this is very important if you want your menus to show you need to make sure that you've create a menu first and then you selected here on this drop-down so mine is already created so I'm gonna go with my main menu gonna come over here to my logo click on this plus button and now I'm gonna upload my logo so in your case you need to uh play upload a logo that you I mean for your company or for your website in this case I'm just going to use one of our logos here from our layout packs click upload an image and then right now you can see we have this ugly background it's not really looking cool here so to remove it all you have to do is to come over here to background and then click on transparent now let's head over here to the design tab so for our layout you want to make sure this is said to left aligned and for our drop-down menu direction it needs to be said to downwards now let's work on our menu text so I'm gonna come over here so for the font here we're gonna set this to monster at search for it here and there it is I'm gonna select it and for our menu text color we're gonna set this to black and then over here for our menu text size you're gonna set this to 0.7 vbw now it's important now that we go in and also set the sizes for the tablet and the smartphone so how we're over here on the menu text then I'm gonna click on this little icon choose my tablet here I'm gonna add two V W for my size go to my phone set this to three V W now we're gonna go to our drop-down settings I'm gonna come over here to drop down menu so all I need to do here is to add my drop-down menu color and set this to white so over here on the line color set this to white next we need to go to our icon color so I'm gonna click on icons and here for my hamburger icon so I'm gonna click here on this eyedropper tool and paste my color in here now as you can see this logo here is way too big we need to reduce the size so what I'm gonna do is to come over here to logo in fact we need to all the way down here to sizing and logo max width this is what we need set it to 6vw now let's set it up let's set it up for the tablet as well so I'm gonna click on this little icon click on tablet and on the tablet you can see it's way too small let's set it to 9 V W on the phone we're gonna set this to 13 V W this is the color you can see our hamburger icon color there has been changed as well now let's head over and set this back to desktop so the next thing we should do is to come over here to spacing and we are just going to give this a margin of two V W both to the left and the right just to give this a bit of breathing space so pretty much we're done here I'm gonna save next we're gonna come over here to this first column and add a code module so I'm gonna add in fact right now as you can see I'm unable to add a second module here so I'm gonna click on these three little dots come over here to wireframe mode and now I can add it here so this needs to be a code or module so I'm going to select it and in this code module I'm gonna add this code so again as I mentioned before this will be in the link out in the show notes below alright so now I can save this and then we're gonna switch back over here to the desktop view over here on the second column let's add some social media icons so I'm gonna click here on this plus button search for social media select my social media follow and to add more social media icons here you just click on this plus button and click on this drop down then you can choose from any of these down here so let's say we need to add Instagram go ahead and select that now we need to go it into each and every one of these and reset item Styles so I'm gonna right click here click on reset item styles and once you do that it removes this color here so I'm gonna do the same and all we're going to be left with it's just the icons now let's head over here to design alignment we also want this centered now remember you also need to come back over here into each and every item here and add your link URL so right now I'm just gonna add a blank one but in your case you want to add your link URL to your Facebook Twitter ad also Instagram all right so with that done I'm gonna save this save it one more time and then over here now I am going to add a button so search for it select it so over here you can just add you text so in this case I'm just gonna say signup and then on the link here this is where you need to add your button link URL then next I'm gonna come over here to design and line and again for this to look really nice it needs to be centered so now I'm just gonna head and scented it so now we need to style the button so for us to style the button we need to come over here and choose button and then we want to use and then here away it says use custom styles for button activated - yes and now this gives us the ability to go in and start customizing our button alright so what I'm going to do now is to start off by adding our button text size so I'm gonna come over here set my size to 1vw my text color white and for my border width I'm gonna set this to zero and then moving down for our button border radius this needs to be set to zero as well now for our font as you if you recall we used monster rattler here for this font here we need to do the same let's choose monster rat and then for our font wage we're gonna make this ultra bold style we're gonna make it all uppercase so pretty much we're almost done here I'm gonna save this now we need to add our animation so we're gonna start here with column 1 so let's head over here to our row settings so for column 1 what we're going to do for animation style is to in fact come over here to design animation and we are going to do the zoom style so I'm going to come over here and select it animation direction we're gonna set this to up and for the starting opacity we're gonna set this to a hundred percent so we're gonna save this now let's move on to the second column because the animation we're going to use here is slightly different so I'm gonna click on this gear icon design animation and we're also going to use the zoom but this time our animation direction is going to be down animation delay is going to be 500 and the opacity is going to be a hundred so now finally we're going to do the third column so I'm going to click on this gear icon design animation zoom and for our animation direction here it needs to be up animation delay let's set this to a thousand and finally for the starting opacity we're gonna set this to 100 so now that we've added all our animations to our columns I'm gonna save this save this one more time now we need to go into each and every one of these modules so I'm going to start off here with my menu and then I'm gonna come over here to design animation fade animation delay here we're going to set our animation delay to 1500 now you need to do this for each and every one of these modules so go ahead and do that so pretty much this is all we need to do now if you want to style this in a different way all you have to do is still play around with these different animation styles so you can use a slide you can use fold you can use bounce and so on so there's so many opportunities here to use different types of animations but basically this is how you do it so I'm gonna save here you're gonna save the Builder settings close out of this save and exit and now we also need to save the global header great so now let's take a look at our website and see the animation here we go so you can see there our animation is happening and everything comes to life so there you have it thank you 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: 12,631

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 4.0 Tutorial, Divi Tutorial, Divi Builder, animated global header

Id: VreQtKkcCxo

Length: 12min 8sec (728 seconds)

Published: Sun Feb 02 2020