How to Create A Divi Header - Divi Header Design

in today's tutorial I want to show you a step by step how to create a header for your website so this header is also going to be sticky so when you start scrolling this is going to be stuck at the top it's also going to be mobile friendly which means it's going to look great on mobile devices so let's go ahead and let me show you how to create this the first thing we need to do is to create our menu before we can start building our header so I'm going to come over here now to appearance and then click on menus now I already have a few pages here already but let me show you how to create this so I'm going to come over here to create new menu and we're going to give this a name so let's call this Mac menu I'm going to assign this to my primary menu and then click on create the next step now is to add pages to the menu that I've just created so I'm going to click here on view all and I'm just going to add a few pages here like that maybe even the sample page add to menu and what I'm also going to do here is I'm going to add a drop down so to create that you just need to drag this slightly to the right and this becomes a sub menu let's go ahead now and click on Save now we need to go to Divi hover over here and click on theme Builder this is where we need to create our menu that covers pretty much the whole website so I'm going to click here on ADD Global menu build Global menu so the first thing I do is to head over here to my section settings go to my background and add a background color so this menu here is going to be a doc menu so I'm going to go with the dot color now while I'm here I'm also going to go to the design Tab and scroll over here to spacing and just make sure I set this to one percent for the top and bottom padding let's go ahead and Save now it's time to add our menu so I'm going to click here and go for a column layout which is a quarter three quarters so I'm going to go with that now over here this is where we're going to add our logo so I'm going to add an image and select it so instead of just adding an image in here what we're going to do is we're going to delete this first and then add this as a dynamic item so I'm going to choose a side logo so whatever logo that we set is the logo that is going to show up here and I'll show you towards the end of the video where you need to upload your logo alright so now that we have it you can see here it's way too big this is where you need to come over here to design so we're going to adjust our width here by dragging the slider down and we're going to bring it down to about 24 now this is going to vary based on the size of your logo all right so I'm going to save this for now we are going to come back later on to tweak it now over here we're going to add a menu so let's go ahead and search for our menu here and select it now remember I created a menu called Mac menu this is where now we need to come over here and select it so it's important to create it ahead of time so that we can Target it over here okay so now that we have this we can see already we have a problem here we have a background color in here so we need to get rid of it by coming over here and just setting this to transparent so now you can see that this is looking much better our font here is way too dark and we can't see it on a dark background so let's go ahead and fix that problem so I'm going to come over here to my menu text and I'm going to leave my font as it is but I'm going to make it all caps next I'm going to add my active link color so I'm going to go with that but of course in your case you can just choose any color from your color palette and then over here we are going to choose our menu text color so I'm going to select this so now we can see it's easier to read let's increase the size a little bit here to maybe about 15 and I'm also going to add some letter spacing okay so I think I'm happy with that now while I'm here I'm also going to remove some spacing so I'm going to come over here set this to zero and do the same to the bottom and save okay now we can see here we have quite a bit of padding inside here let's get rid of it by clicking here on our row settings and I'm going to go straight over here to design spacing and I'm also going to do the same set this to zero and do the same both for the top and the bottom so this allows me to see what size my logo needs to be so now I can go and adjust this ever so slightly so I'm going to click here and I'm going to make this slightly smaller by coming over here to design sizing and let's bring this down a little bit I know it's way too small so we're going to go for 18 and save now over here ideally I would like this aligned over to the right so let me go in and fix that so I'm going to come over here to design menu text and I'm going to scroll down here until I find my text alignment which I need all the way to the right just like that all right so so far so good I think that's looking great but um this does not stick to the top so let me show you what I mean so I'm just going to open our website now in a new tab and there we go so now I have my header but you notice that when I scroll it doesn't stick to the top so some of you may want that feature where it sticks to the top and all and also over here my drop down here doesn't look great so we are now going to fix those two things so back over here I'm going to go into my section settings advanced and then I'm going to come over here to scroll effects and here by default it says do not stick so I want this to stick to the top so I'm going to set to that and Save all right so now this is going to stick to the top now if I save this and test this one more time and come over here refresh this and now when I scroll you can see it is now stuck to the top brilliant so that's how you make it sticky to the top okay so now let's work on our drop down here I'm going to click on this gear icon to go into my menu settings and click on design menu text in fact I need to go into the drop down menu all right so here on the drop down menu I'll drop down background color is going to be this color here because I want this to match my background color here my line color I don't need any lines so I'm just going to add this as my color my menu text color is going to be this color here and my active is going to be that and mobile menu background color is going to be that as well and this is going to be my text color and for the icons I'm going to go with okay for the shopping icon let's just make it simple we're going to go with that search icon that and the hamburger menu is going to be this okay now let's go ahead and save and let's save this one more time now before I uh do a quick review I just want to come over here to my tablet View and see what this looks like so right away we see that this is pretty much all over the place right so what I normally do is I create another menu specific for the mobile devices and let me show you how to create that that's going to make this look much much better so what we're going to do is we're going to duplicate this by coming over here but we are going to go in now into our columns and just make sure we have one single column and we are going to delete this logo here so what we're going to do in our menu here is to add the logo in the actual uh menu by coming over here so I can add my logo by coming over here set my site logo fix the size oops we need to be in here sizing or logo width so it depends what you want to work with so I normally work with my logo with so just make sure that you have this to a size that's reasonable okay so I'm going to keep that and the next step now is to come over here to my Advanced visibility and I'm going to set this to disable on the desktop okay so this is only going to be visible in the tablet and the phone save that so let's do a quick test and see what this looks like so far save and exit now I know my logo right now is not showing because I haven't uploaded it so I'm going to do this in a moment all right so over here now if I refresh now let's resize this and see what happens so you notice that we have two icons here that is because the top one was not disabled so let's go ahead and do that quickly I'm going to come over here so we need to make sure the top menu is also disabled otherwise it will show two menus over there so this one here is the top one so I'm gonna go in like that go to my advanced visibility and I want to make sure this is disabled on the phone and the tablet that's something that I forgot to do but anyway I'm glad because I was able to show you how that is done okay now let's close out of here save changes let's go ahead and add a logo so that we complete our header design so right now I just have to leave my theme Builder here and go to my theme options I'm going to come over here to logo clip click on upload and I need to upload a logo so I'm gonna go with something that's already here so I'm going to go with this as my logo set as logo save changes so now when we come to our website if I refresh this we can see now that our logo is now showing and one quick tip here on the logo make sure if you have a dark background your logo is light because you need to have that contrast so now let's drag our window here and see what happens when this changes over to the desktop so you can see now that this looks much much better if you want to learn how to design professional looking websites I have a free course the link to that is in the video description below and also if you like this tutorial please give me a thumbs up and don't forget to subscribe and hit the Bell notification until next time thanks very much and I'll see you in the next one take care

Channel: SiteKrafter

Views: 13,483

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, online courses, create online courses, online course business, best website them builder, how to build websites for beginners, wordpress websites, how to build wordpress websites, how to build websites from scratch, how to build wordpress websites from scratch, how to create a website from scratch, divi theme builder, how to create a wordpress website for beginners, how to make money online

Id: 6ZpTeAkyupg

Length: 10min 33sec (633 seconds)

Published: Thu Mar 09 2023