Divi header design - Divi 4.0 theme builder tutorial

in today's video I'm going to show you step-by-step how to create a header using Divi 4.0 theme builder now the head I'm going to show you how to design is also going to be sticky and it's also going to look awesome on a mobile devices alright so before we begin if you buy Divi using my affiliate link in the video description below I will give you access to my Divi a blueprint for course which teaches you how to design professional-looking websites using Divi the other way you can also get this course is by becoming a VIP member over add funnels to income comm so head over there check it out and it's only $11 per month alright so let's dive into the tutorial so when you take a look here you can see that I'm running the old Divi header and this is the default one that comes with Divi right so let's go ahead and start designing this I'm going to come over here click on dashboard and I'm going to come all the way down here to Divi just hover over here and then choose theme builder so this is the main interface the first thing you want to do is to click on add global header so I'm going to click here and then click on build global header right so for this design I'm going to build everything from scratch so I'm gonna go ahead and select this and we are going to go with a layout which has three columns I'm gonna go with this one here because we're going to add a few elements to this header so first of all before I start adding any elements here I'm just gonna save this and then I'm gonna come over here to my section so what I normally do before I get started is to add a background color and remove the padding so I'm going to come over here so the column were to go with is for this example is just this really dark gray next I'm going to remove my padding by coming over here to design spacing and then I'm going to add 0 to my padding here for the top and the bottom and now you can see that my space here has this decreased which is brilliant so I'm gonna save this next I'm gonna come over here now to my padding of my row settings and I'm also going to do the same by coming over here to design spacing and I'm also going to add 0 padding to the top and the bottom and now this has made my header really really thin and that's how I prefer it but of course if you want to make it slightly bigger you can just add you know your padding until you're pretty much happy with it so let me just bring those down to seven all right so that's what I need to do here I'm gonna save and then now I can start adding all my modules and the way we add our modules it's pretty much similar to how we use the Divi builder all right so I'm gonna come over here to my module and the module I'm gonna add here is pretty much the image module because this is what's gonna have our logo so I'm gonna click here on image and then I'm just gonna click anywhere in here and choose a logo so the logo I'm gonna go with is I'm just gonna go with a default one here that we have in our library so I'm gonna click upload an image there we go so that's our logo the really cool thing about this as well is you can come over here to your link and then you can specify a link so since this is our main logo for our website we want that when people click on the logo it takes us to the home page so the link I'm gonna add is right here at the top so this is the URL I'm gonna add it over here before I save I can also make a further adjustment so let's say the logo is way too big and you want to make it slightly smaller you can come over here to design and then you want to click on sizing so this is where you can adjust the width so as you can see here I've brought it down to about 60% and pretty much I prefer it that way sometimes when you add the logo it can be slightly less quality so if you reduce the size a little bit this fixes that problem so that's all I need to do here I'm gonna save and over here now I'm gonna add my menu module so I'm just gonna come over here and select menu so over here I have a menu that I've already created what I want to do next is I want to remove this color here because we prefer having this menu on a background color that we have on our section so I'm gonna come over here and I'm just gonna make this fully transparent just like that now we have a different problem we can't read the text on this dark background so what we need to do now is to go to design menu text so this gives us all our options to customize this so first of all our active link color so this is the link that shows when someone clicks a specific page so I'm gonna choose this color here from my color palette and then I'm gonna come over here and choose my main menu color so I'm gonna go with this because that's easier to read on a dark background so moving on the next stage now a add my font so the font I'm gonna go with here in fact in your case you can choose any font you want I'm gonna go with poppins okay so I prefer using that I'm gonna make it all caps and let's make it blow up bold so I'm gonna come over here in fact let's go with semi bold so the next stage is you can either increase the size so that's pretty let's pump it up a bit to about let's say I think 15 is fine and we can also add letter spacing it's gonna add a little bit here so it's easier to read so I'm just gonna add one pixel and line height you can also add your line height here so I'm just gonna bring this up to about one point spring to upper one point six so that's our line height one point six so that's looking great the next thing I'm gonna do is the alignment so you can decide either to have it centered or to have it right aligned so I think it looks much better when it's right aligned because then you have the logo on one side you have all your text on the other side right so what else can we do here we can also add some icons so I'm gonna come over here so if you have a shopping cart this is where you can add you know your colors for your shopping cart but you need to select it first before you can actually add it so let's come over here to our content click on elements so here we can add our shopping cart so if you don't have woken was installed of course you don't need to add this but you can add it right here and then you can change the color and also you can add a search icon so this could be beneficial for the visitors of your website to come in and search whatever they need to search on your website so I'm gonna leave that on and we're going to customize it so I'm gonna come over here and click on icons so as you can see here I have my my search icon so I can adjust the size here but we're just gonna keep this simple here let's leave it at 17 now the next stage is to work on the hamburger menu so this is also very important because when you shrink your websites to tablet size or mobile device you are going to get that hamburger icon so that is the view into mobile so what you want to do as well is to adjust its size and also change its color so hamburger icon color I'm gonna go with this color right here now if you can't see it what you may want to do is to click on expand settings and then you sort of go to your mobile view so now you can see the color is now showing so you can change around you know choose whatever color you want to go with so I want to go with this color here because it looks really nice now the next stage is as you can see here we also have this drop-down that we can customize so over here you go to a drop-down menu and look at all these options that we have so we can start here with our menu but menu background color so let's go with this one here and then we want to have our menu line color so let's go with this color here and as you can see I'm just choosing colors from my branding in fact you know what for the drop-down background color I'm gonna go with this okay so that looks much better but of course you have many more options here that you can go with right so now that we have all this in place I want to save and then we're going to take a look here at something else that we can add and this is to actually have it without a background so I'm going to come over here click on background and then set this to transparent go back click on Twitter set the background to transparent and you can also give this a color you know so let's go with that let me just save that so let's say you want to give these icons a color you can also do that by coming over here to design icon and we can add our icon color now you can see instantly I've just added my color there and that looks really really nice and it's also following the colors from our branding so right now I just have to let's add one just to make it a bit more balanced so I'm gonna come over here and instead of having this as Twitter I want to choose Instagram get rid of the background and there we go those are all three icons okay so I'm gonna save this and save this one more time so now as you can see we have a slight problem here on this logo so let's go in and add a bit of margin so I'm gonna click here on design spacing and I'm gonna add a bit of margin just to Center it ok so that looks much better now okay so let's go ahead and save so pretty much that's our menu now there's a few things that you can also do here you can make this full width if you want to but now the setting for that is over here on row settings okay so you click here on design sizing and first of all you have to change your here so you can make it a hundred percent or 96 percent whatever it is and our maximum with here game that can be 90 percent now let's take a look at our menu so now you can see here now it's really taking you know majority of our space here on the screen so I can also see here that we have quite a lot of space now left over here to the right so what we may want to do is to go in and fix that by choosing this option here so I'm gonna go with this and now you can see we've added a bit more space over here so that was that's looking much better okay now at any point if you decide to get rid of any of these modules it's easy you can just go in and get rid of it alright so I'm happy with this I'm going to save it then I'm gonna close it here and save it now let's take a look at how the website looks now in a new tab with our new header there we go so that's our brand new header now I go to shop okay that's our shop right there and our header is going across the whole website now there's a problem I'm going to show you here which is quite annoying so let's enable the visual builder here so I can show you the three views right so if I go to my tablet view you'll notice that our menu here is all over the place and that doesn't look really nice to be honest so let's fix this a first problem so I'm gonna come back over here let's go into our global header so to fix this problem what we need to do is to go into our row settings and add a bit of CSS code so I'm gonna come over here to advanced custom CSS and on the main elements I'm gonna add this display flex so what this CSS code does it's makes sure that every time we go to a different screen size everything stays in one line and that's really cool let me show you that I'm gonna save this close it here save and exit and I'm gonna save it one more time and then I'm gonna come over here to my shop refresh the page okay so let's go in and change our view look at that so now we don't have that staggering of all our elements on the main header so everything is next to each other and we have our social media follow and we can also do our search so you can go in here and start searching okay pretty cool now there's something that I noticed when I click here on the hamburger you can see that this is behind this information on my page we can also fix that by coming back over here now there's two things that we need to do here when I scroll this you can see here that everything just disappears let's say we want to make our header sticky so that means we want our header to stay on the top as we are scrolling through our website so that's the next thing I'm going to show you how to do so to make our header sticky let's head over back to our global header here right so let's go into our section settings advanced custom CSS and this is the CSS code we need to add and by the way if you want to use the exact same CSS code as adding here I am going to leave all the CSS on to the post which I'll link to in the show notes below and also I'd like to give credit I can't remember who it was but this code was supplied on the live stream that we did last time so unfortunately I can't remember the name but anyway this is how you do it so you add your CSS code here on the main element of your section settings now there's also one thing that you want to do here and this is to make sure that your menu is above everything that's on your website and that is done by coming over here to visibility and setting your z-index to something very high I normally just set it to 999 click on save and we're also going to save this one more time and now when we exit our builder here and save if we go now to our website hopefully this should work right so I'm gonna fresh refresh this page and let me log out so you can really see the full menu so if I start scrolling notice what happens that stays on the top and it's above all the content and again as you can see I can do the scroll and my header stays at the top okay so now let's test it and see if it looks nice on mobile devices so I'm just gonna grab one corner here and just start dragging it and now straight away we can see that everything is showing and if I continue that's how the tablet view is going to look like so that's our header here we come we have our logo of which if we click on it it takes us to the home page and we have all our elements we can search and we also have our social media icons here pretty cool so that is how you create a custom header which is fixed and also looks great on mobile and tablet views so thank you very much for watching if you have any tips that you have in order for headers to look great please leave them in the comments box below and I'll edit in my next tutorial so thank you very much for watching don't forget to subscribe and also head over to funnels to income com see you in the next video

Channel: MAK

Views: 126,389

Keywords: Augustine mak, Divi header design, Divi 4.0, Divi header Design, Divi theme builder

Id: UABdOJQ3pdo

Length: 14min 4sec (844 seconds)

Published: Wed Oct 23 2019