Divi Header Design | How to make a custom header in Divi

when you first install divi on your website you get a header that looks like this but now you can style it and make it more exciting and it's gonna look like this so notice what happens here i'm gonna scroll and the background color has changed and also the header has shrunk so this is what i'm going to be showing you in today's video coming up hello everyone and welcome my name is mac and in today's video i'm going to be showing you step-by-step how to create this header so what happens is when you scroll it's going to change color and it's also going to shrink so this is what i'm going to be showing you step by step today now before i get started i'd like to remind you that if you want to create beautiful professional looking websites using tv i have a special bonus for you if you buy divi using my affiliate link you get access to my web design a formula course a course that teaches you how to design professional looking websites with devi and there's also another course that you get for free and this is called photoshop for web designer so it has everything pretty much that you need to get you up and running and i also teach you everything that you need to know to create all your websites and make them look professional and also the link to that is in the video description below so go ahead use that link and once you've done that go to funnels to income income.com on the bottom right there's a chat bubble you just click on that send me your receipt number and i'll give you access to the course all right so without wasting a lot of time let's dive in and let's get started all right so the first thing we're going to do is to head over to our theme builder because that's where we're going to create our header which then applies across the whole website so i'm going to come all the way down here to divi and then when you hover over here you're going to see the theme builder so click on it and then click on add global header and then build global header now i've chosen that option because we're going to build everything from scratch all right so i'm going to go ahead and click on start building and we are going to go with a basic layout here so i'm going to go with um let's go with this layout here okay great so now that i have that all set the next step now is to just close this and go to my header so here on the header the main thing i want to do is to just add my background color initially so that i can see where things end while i'm designing my site so i'm going to come over here and then add my background color so i'm just going to go with this really dark color here and save the next step now is to add all my elements into our row so i'm going to hover over here and click here on this plus button and here we need to add our image so i'm going to click on this plus button and search for my image so the image i'm going to add here is going to act as our logo so i'm going to click here now if you don't have your logo in your media library you need to upload it from your computer so in this case here i'm going to choose a logo that is already here so i'm going to go with let's go with this one here upload an image okay great so now i have my logo on so the next step is just to uh perhaps maybe do some adjustments here because as you can see not sure if you can see this clearly but the logo is a bit pixelated so the solution to that is to come over here to design sizing and then just reduce the size a little bit so you can just uh keep an eye on it and see what looks better okay so let's bring this down to about 56 and then all we need to do now is to save now we are going to be going back and forth making some tweaks so uh this is not our final setting next i'm gonna come over here and this is where we go to uh add our menu so i'm gonna add my menu over here and i already have a menu on my computer and if you don't have one you just get this one here by default anyways so as you can see things are not looking great because we have this background color now we don't want that so we need to come to background and then we just want to make this transparent like that now we have a new problem we can't read the text that's behind so what we need to do now is to change that text so i'm going to come over here click on menu text so our menu fonts color here is going to be this color now i can see where my text is and i can read it that's great so i'm going to do a few more tweaks here and that is to add my font so i'm going to go with poppins here i may want to make it semi-bold and also increase the size a little bit so let's go with 15. all right so pretty much i'm happy with that but we also want to add a state so let's say someone has clicked a link what color should that look like so i'm going to go with this orange here okay great so so far so good i'm going to save this so now we have our menu here now i'm going to go in and also fix this menu and make sure that it's the correct one because i don't want to have all these links here on my menu so i'll have to create a new one so back over here i can still see that the logo doesn't look good so i'm going to go back in and make some adjustments again so i'm going to go to sizing and reduce this a bit more so i'm going to go with 44 this time and then save okay that's looking much better now over here to the right we can also go in and add some social media icons and so on but uh before we do that i want to go back into my row settings so here we're going to go into design sizing now it's very important that you make your adjustments here so the first thing i need to do here is to go to use custom gutter width now the gutter width is the space between the columns so this space here is important because it determines how close things are together in your columns so i'm going to set this to two so let's go ahead and do that so i'm just going to bring this down to two i know it's a slight change next i'm going to equalize column height so i want everything to have the same uh column height as i designed this here's the next part so our width here is set to 80 so this is where you can make your adjustments and perhaps maybe even make this 80 as well but if you want to make it full width and make it go all the way you can also do that all right so now i have it at 80 percent the next step now is to head over here to the advanced tab custom css and on the main element i'm going to add this css code now what the css code does it aligns everything so everything is just going to be in a straight line otherwise you know things will be at different levels okay so now that i have this all set the next part here is to remove some padding so i'm going to come back over here go to spacing so the padding is uh pretty much in fact you know what uh let's close it so i can show you where the padding is now do you see that when i mouse over here you have this space here we want to get rid of it because right now our header is way too thick so we need to shave a bit of weight here so let's go back in here and click on design spacing so i'm going to set this to zero there we go and i'm going to add zero to the bottom as well so that's looking great so far i'm going to save this the next part now is to add our social media icons i'm going to click on this plus button and search for social there we go social media follow so i'm going to add just three icons here so first of all i just need to reset item styles and that removes the background from my icon so i'm going to do the same here duplicate this and this time i'm going to change this from twitter to instagram okay so now i have facebook twitter and instagram so back i'm going to reset this as well okay so now we have our social media icons in your case you can add more if you have more but i'm just going to use three okay so now back over here let's go ahead and make a few adjustments i'm going to come over here to design icon and let's add a color here for our icon so i'm going to go with this color now notice that this is a color from a color palette so this matches really really well so maybe i'll go with this orange here okay i'm gonna go with that now use icon font size if your icons are way too big this is where you'd come in and adjust the size but it looks like everything is okay here all right so i'm happy with that now finally i'd like to remind you that if you want to add your links to your social media platforms you want to come over here now and go to link and then paste your link in here okay otherwise they'll just remain blank so now i can go ahead and save this and so far everything is looking great so back over here now on my section settings this is where we need to make our final adjustments and that is by coming over here to the advanced tab you want to go to scroll effects and this time we want this to stick to the top okay so this is a brand new feature that was released uh recently so this makes everything much much easier so i'm going to come over here and stick to the top great so now that i have this header stuck to the top the next step now is to perhaps maybe when you start scrolling change the color and also make it shrink a little bit so how do we do that well we're going to come back over here to design spacing so at the moment our padding is way too much as you can see so let's change this by setting it to let's say 1.5 v w and we're going to set this both to the top and the bottom okay so now that i have this at the top in the bottom you're going to notice that now we have this little icon okay if we click on that so this is for our sticky options so when our item has been activated as sticky what do we need to change here and that is the size of our header now we're going to set our size to 0.7 vw and we want this to be applied both to the top and the bottom so pretty much we're very very close now to finalizing our header and um i may want to go back to the content here background so as you can see this will be our default state so again let's say you want to change color when scrolling this is where again you want to click on this little icon and making sure you have sticky selected you can change your color to that maybe we should go with okay we're going to go with this color here but of course you can go whatever color you want you can even make it transparent if you want so i'm pretty much happy with this i'm gonna go ahead now and save so right now we cannot see the changes because we need a lot of content here on this page for us to see those changes that i've just made and as i'm looking at this this logo here is very stubborn let me go back and make it a little bit smaller again so i'm going to go back to design and sizing and let's reduce this a bit more down to about let's say 30 okay that's much better now so i'm going to save this now and we are going to close here and save changes so you may be thinking okay so how do we see the changes taking effect so what we need to do is to open up a page which has pretty much all the links that we need in order for us to see all these changes happening so i'm going to go ahead now and go to our home page and while i'm here you can see now our header has changed so this is now our new header so i'm going to go with this page here because i know this page is a lot of content on it so there we go so when i start scrolling you notice that our color has changed and the size has shrunk just a little bit okay there one more time there we go really cool so this is how you can go in and quickly make your headers look cool now over here you notice that um these have a follow so if you have all your links all set if you click here it's gonna take you to whatever destination it is now while i'm here and i get a lot of questions from a lot of you with regards to uh your headers working well on mobile devices so i'm gonna just do a quick demo and let's take a look and see what our header looks like here on our website that we've just been working on okay so i'm just gonna shrink this and just uh simulate this site on a mobile device so i'm just gonna drag this drag this drag this and as you can see things are all over the place now this can be a bit tricky so there are ways to fix this and i'm going to show you in a moment how you can do that but the most important part is when i come over here and click on this hamburger icon we notice that all our links here are not visible pretty much they're stuck behind behind all this and this doesn't look great so what we need to do is to fix this and see how that's going to look alright so back now i'm going to go back into my dashboard go to divi and then go to our theme builder now let's go in and start making our changes right so the first thing we need to do is to fix our menu so i'm going to come over here click on this gear icon design so the menu that we need to fix is the drop down so i'm going to come over here to the drop down and notice that this these are all the colors that we have so i'm going to go with my color here for the background and drop down menu line color so i can just go with um i can go with that now moving on drop down menu text color let's go with this active color we're going to go with this one here and mobile background menu color so this we can go with this color here as well so that's looking great mobile menu text color we can choose our color like that now the icons i'm just going to leave that as it is now let's go ahead and save okay so now we have one more problem and that is our social media icons here don't look great you know when we uh when i showed you the site things were just stacked all over the place so what we can do is we can go in and add a bit of css code to make sure everything looks great on a mobile device so what i need to do is to come over here to my row settings advanced custom css so here you can see we have align center now this is just for our normal web page but we want to uh make sure that our mobile devices all look great so now i'm going to click on this little icon and then i'm going to go into my tablet so in my tablet i'm gonna add this css code now notice that i have display flex this is what allows everything to be on the same line and i'm gonna do the same for the mobile as well so i'm just gonna paste it in here and pretty much that's all we need to do so now i'm going to save this save this one more time close out of here save changes and i'm going to open our site in a new tab just in case i need to go back in and fix a few things all right so now i can choose a page okay so now let's take a look at our header and see what it looks like so i'm going to drag this and now as you can see if i click over here now we have a background but this is just for demo purposes only you can change this background color to whatever color you want and um this should work just fine but the most important thing is now we can see all our links here on this uh background okay now when it comes to social media icons here i mean to be honest on mobile devices the screen is really small so what i usually do is to just disable the social media icons on my mobile devices so let me show you how to do that so i'm going to come back over here go into our global header and then all you have to do i mean there's several ways you can do this you can disable it by going to the actual module or you can just come over here to our rows and then click on this column and then over here on advanced we can go to visibility and then disable on phone and tablet now if we save and save one more time and close out of this and save all changes you're going to notice that when i refresh my page and try to shrink the page we are not going to have the social media icons okay so let's try it so i'm going to shrink this and now you see it is gone so now we have a simplified version of our header and if i click here on this drop down you can see our drop down still works and this is on mobile devices all right so pretty much this is i would say the new way of designing your headers it makes it much much easier and with these features that were recently added you can really create amazing headers you can also have sub headers that show up when you scroll so it's just a matter of going in and becoming even more creative with these new features anyway that's all i have for you in today's video thank you very much for watching if you like this video don't forget to hit the subscribe and bell notification by doing so you'll be notified when i release new tutorials until next time thanks for watching and i'll see you in the next video take care

Channel: MAK

Views: 52,055

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, make online courses, online courses, online course tips

Id: cWeKtT-UQy4

Length: 16min 21sec (981 seconds)

Published: Tue Sep 08 2020