Elementor Header Tutorial: 100% FREE Method

in this short video i'll show you how to create a simple pro level sticky navigation header in the free version of elementor now normally this element only exists in the paid pro version but with a simple extra free plug-in we can get the same results for free so let's go so for this tutorial i'll just assume you already have elementor installed on your wordpress website and you've already got some pages built so let's go from there and get creating okay so here we are inside of your wordpress dashboard and the first thing we need to do obviously i said before you need to already have some pages built for your site because we need those in order to build the menu which you do inside of wordpress so let's go down to appearance and menus and we're just going to make a really simple header menu and a really simple footer menu so starting off with uh let's just go ahead and rewrite this and let's name it header menu and here we're just going to make sure we have all of all the pages you have are over here they're either arranged by much most recent i'm just going to click on view all that way we have all the pages over here and you just want them to be in the right order you would like them to appear in in your navigation so there's a few things here i'm actually going to remove home because we'll link to that in a different way privacy policy that'll be in the footer so we're going to remove that this one is trash and remove that schedule a consultation i'll remove because that's going to be a call to action button terms and conditions remove okay so these are the main items i want to be in the header navigation and something cool too you know how when you go on navigation menus and you see sometimes you'll hover over one item and then the drop down will appear on top of that the way you would do that let's say we wanted pricing to be a sub menu under about us all we do is we just drag it over like that and it becomes a sub item but we don't really want to do that so we'll do this and let's say we ever wanted to change our text that we wanted to appear in the navigation uh navigation labels how we would do that so [Music] so you know this text would appear instead but i'm just going to put it back okay so now since it's the way we want it i'm just going to click on create menu simple as that now i'm going to create a simple footer menu so i'm going to click where it says create a new menu i'm going to call this footer and then create menu okay from here we're going to choose the items we want to appear down at the bottom usually these are things that are like less important to a conversion but you still want to include i'm going to click on view all so things like privacy policy terms and conditions you know that kind of thing so basically you're just choosing you're checking the ones you want and then you click on add to menu and it just brings them all over and then you can change the order if you want but i'm gonna put it back and then just click on save menu okay so now we can start thinking about actually making uh the look uh and the design of our headers and footers but first we need a plugin so you should already have elementor on your site that's how you would have made these pages to begin with but we're going to go down to plugins and add new because normally you need elementor pro to do headers and footers the right way with like uh where it pulls in the information from your menus but we have a workaround like i promised so what we're gonna search for is called i'm just going to type an elementor header and then it's this one elementor header footer and blocks template so i'm going to click on install now and then on activate all right simple as that okay so let's start by making our header so we're going to go over to appearance header footer and blocks and then on add new and we'll choose header and we'll say display on we'll just say entire website to make it easy and then we'll click on edit with oh actually we want to title this first and then edit with elementor okay so from here i'm going to assume that you already know how to work with elementor i'm not going to go over all the basics of that but i think you if you're finding this tutorial you probably have used it before so i'm just going to go and click on the plus sign and then i'm going to choose a three column layout for the header what we're going to do is we're going to put your logo here the navigation menu here and then your call to action button over here so i'm going to choose the widget icon over here the the little grid and i'm going to drag an image right into the first column i'm going to go back and i'm going to choose when we installed the header footer blocks plug-in it came with a new set of widgets so i'm going to collapse basic and pro in general and now we have header and footer blocks these are all the the widgets we get so i'm going to choose navigation menu and i'm going to drag it right into the middle here and then here's where we can choose which menu we're going to call up so remember we did two we did the header and footer so i'm going to choose the header and remember how we already chose which pages are going to go there it's calling it right up and there they are and then i'm going to choose a button for the third column so that is under basic so drag the button right on over there and obviously none of this looks that great so far so we're just going to go ahead and and get everything styled so first of all let's choose the image so click that and then click on choose image and here's where you drag your logo file over to the stage i already have one here so i'm going to click on that and then insert media and then i'm probably going to choose alignment over on the left and then here's what you can do too you can always drag the columns around so that things can go into more like more or less the place you want them to be so let's say you had many more navigation items you would obviously want to give it much more space so the first thing i want to do is make sure everything is centered in the vertical space here so i'm going to click on the whole section and under layout i'm going to go to vertical align middle and then let's go over some options we have here so i'm going to click on this icon and we can change the size of it so i think this actually looks fine but what if we wanted to make it slightly smaller we would just go down to custom and you know i might type in 100 and see what that looks like i think maybe it already was 100 let's do 75 and apply okay that looks pretty good to me actually i think i like that a little bit better and then the other thing you want to do too is you definitely want to link this to your homepage that's always good practice to make sure your logo will link back so make sure that's clicked and then go under link and then custom url and for the home page all you're going to do is type in a forward slash i'm going to click on apply here and we're good to go and then so the next thing we want to do is style our navigation menus just make sure that's clicked and then let's click on style so there's lots of things we can do here we can play with the horizontal padding you know giving them more space between and since we only have three items that might be a good idea i think it probably looks better this way and there's an alternate way to do this because notice how what that does is it also gives padding to the edges but let's say you just wanted to do the space between and not change how far it is off the edge you can just do space between that way and that works as well and then see what happens when we put our cursor over it so we can change the effect so that's link hover effect right now it's basically none it just changes the color but we can do an underline which looks like this we could do over line which is basically the same thing just goes over we could do double line which does both we could do framed which is like this or text which basically just makes the text go bigger i think i like for this one i like underline and then you can make the animation whatever you want you can make it slide so rather than just you know can just kind of slide into place i think that looks pretty nice and then of course we can change the typography we can change the font the colors so i'm just going to click on that and let's choose a nice simple font here i like matsurat the best for that and then wait we can make it bold less bold i'm just going to choose normal we can transform it to all uppercase or all lowercase or just the first word capitalized i'm just going to leave it at that and then from there you know we can change the text color to whatever we want to you can choose whatever might be in your color picker already or you can just choose a black or a dark gray it's up to you but then for the hover you want to choose a color that the text turns to when you mouse over it now if you've got this little line under underneath here you may not want to change the text color as well but you can if you want to you just click on hover and then you would make all those changes over here so let's say we didn't want red let's say we wanted a blue more to match this i'll just click that and now we've changed it to the blue now what i think i might want to do though is i think i want to center all this text in the middle so go up to content and then layout and i'm going to choose the center option here okay next we want to talk about the button so let's go ahead and click on that and whatever the text you want it to say if it's whether it's click here or schedule your free consultation and if it's that long you might want to think about pulling it out so there's it doesn't go on two lines i'm actually going to give a little bit more room because we might make that all uppercase but then you want to set your link to it so choose the page that you want uh people to if it's schedule a consultation wherever it is you want to send them just make sure you're linking to it right here and then we can also change the size of it so this is small but we could do medium which i think i like better and i'm also going to align it to the right so again this one is aligned to the left this one is centered and this is aligned to the right that way everything is going to feel nice and centered in the end but let's say we don't want the red color we just go up to style and here's where we change the background color and the text color and there are two states because when you hover over it it can change color so let's start with the normal color let's do the background color i'm going to do kind of a yellow green and then i'll probably change the text color to much darker to read better and then i might want the hover to be kind of a darker version of this so then let's choose hover and i'm going to choose the background color i'm going to choose the same green but then from there i'm just going to choose a little lower on it that way it gets darker see that and then the text color i'm going to make white so here's what happens when we mouse over it all right pretty happy with that but i definitely want to change the font here so i'm going to go to typography and i'm going to change that to the montserrat font there and transform i'm going to make it uppercase just to give it a little bit more weight and i might make the the size of the text slightly smaller well actually think i think that looks pretty good okay the last thing i want to do is just make sure there's about the same amount of space between this edge and this edge just so everything is centered nicely so just eyeball it that looks about right to me okay so the next thing we want to do now is make sure this is also going to look good on mobile so elementor makes it really easy to switch between the two views so just go down here where it says responsive mode and there's a little icon of a computer screen i'm going to click that and then i'm going to click on mobile so now we've got this to play around with so see what it's doing it's just stacking the columns which is not what we want so let's just deal with each column individually so just click on the first one on this little gray box and we'll do column width let's make this 25 then we'll choose column 2 and we'll make that 25 as well and then we'll choose column 3 and we'll make that 50 percent okay so you'll notice that on mobile view uh the whole menu has been shifted into this basically hamburger icon that people have to tap to see uh the menu which is pretty standard on mobile menus so what we need to do now is just make sure everything looks good when people tap on this so i'm going to click on it and it looks good except for i don't like how close it is to the edges so with that selected let's just go to style and notice you've got this little mobile icon popping up here that means you can style all these things independently of the desktop view so it's only going to change on mobile not it's not going to change what it looks like on desktop so let's see what this one does yeah see that looks much better when we when we push it out from the side a little bit yeah so i think this looks much nicer so from there i'm just going to click on publish and our header is ready but remember we still have to do a footer so let's go ahead and click on this little hamburger icon there and then exit to dashboard so now what we're going to do is go to appearance header footer and blocks and then add new and we're going to call this footer menu and we're going to select the option of footer and we're also going to say display on entire website and then edit with elementor okay now this loop should look familiar but this time we're doing the footer so just go ahead and choose the plus and we'll do a three column layout for the footer because what we're going to want is your logo and company name and information here as well as social icons then the simple navigation menu of all the other pages that we did not put up top and then a google map over here for for better local seo so let's go ahead and choose an image for the logo we'll just drag that there we will then drag a heading this will be your business name and then a text editor and that's going to show your your basic name address and phone number right there as well as we're going to search for social icons we're going to drag that right underneath that then we will collapse basic pro in general and we're going to bring a navigation menu to the middle and a google map over here so under basic we have google maps just drag that guy right over there all right so first of all everything's really close to the top edge here so i'm going to click the whole section and under advanced i'm going to give this a little bit of padding within it so i'm going to unlink the values so we're just dealing with the top and bottom by themselves and i'm going to give them both 50. that already feels much better let's get some more breathing room now so first let's change out this image to our logo so just click the image and then click on choose image and we'll just use the same one we used up top click on insert media and we will align that to the left and then right here we'll put in the business name and of course we can change the styling of that up here just go to typography and then here you would choose whatever font you wanted but we'll just keep it as is for now and then here what we would do is type in [Music] so we just have the phone number and address i'm just going to go ahead and bold those things right there and now we've got our social icon so you have a few choices with these so let's choose that it's kind of a compound element here where you you have everything all in one spot so you can obviously choose which ones you want you're not limited to facebook twitter and youtube you know you could add another one and then just click on icon library and you just look for what you're looking for so like instagram type that in and then insert and then if one of these didn't fit like if you weren't on twitter you just x that out and it goes away and here's something interesting so what you can do is either choose the official color because like facebook has it's blue youtube has its red instagram not sure they have the black there but that's okay i don't think we can do gradients here so the other thing you could do if you don't want the official color if you wanted to feel more branded for you you would just choose custom and then you would choose you know the primary color and then if you wanted it not to be white if you wanted it to be black on top of it or whatever you could do that as well i'm just going to leave it on white though but i'm just going to put it back to official color just to make it easy and we're going to line this on the left and if you go up to style there's a lot of things you can do here you can make them smaller if you wanted them to be less obtrusive you can give it more space between them and then uh what you would do in order to link them up you just go over under content and under facebook you know on each one of these you would just put in the link to your profile easy as that okay so moving on to column two uh this menu it's going to automatically default to having to be in a in one line horizontally but we actually want is a layout where they are vertical more like that so and what i'm also going to do here oh and by the way uh it lets you choose which menu you want so remember we did a header and a footer so if it showed the wrong one for whatever reason just go under content menu and then just choose the right one there it's pretty easy i actually want a header above this so i'm what i'm going to do i'm just going to copy this header i'm going to do copy and i'm going to do a paste and then i'm just going to drag it right on top and i'm just going to call this more pages pretty simple and then you would go on the map over here and here's you would just literally type in your address or if you have if your business is already in google my business you can pretty much just put in your business name right there but this is a fictitious business so it's not going to do it i'm just going to put in but it's also a fictitious address so it's probably not going to really show anything here but if it was a real address it would have a little map pin and it would be a nice way for google to verify that you are where you say you are and i might want to round this out by just vertically spacing everything in the middle so this isn't floating way up here so i'm going to choose the section and then layout and vertical align middle all right just a few more styling things here so if you wanted to make this a background color sometimes people like to make their footers darker you just click on the section go into style and then background type just choose whatever background color you think fits you know i like i think i like something like this i think that looks nice and of course then you would just change your text to be able to stand out on this all right just that simple now one thing that people like to do in their footers as well a lot is put a little copyright line so let's do that let's finish it out uh just text editor drag that right let's just do it right underneath the actually let's do it underneath this right here i'll just do a nice little copyright line okay then we would just style that so make it white and then usually the this kind of copyright line can be really small i like to do like maybe an eight point wait just gonna make it normal all right i actually don't like it here though so what i'm going to do is i'm just going to move it right under here i like that better all right from there i'm just going to click on a publish and then let's check it out let's see if it's working okay so before we see if it's working or not i do want to mention because i just try to do this and i kind of mess something up so go to each of one of these the header and the footer and make sure that this was saved that it's a header entire website and then you might want to check this as well enable layout for elementor canvas template so make sure that's checked as well and then click on update okay so now as you can see we've got our header working just fine and our footer as well so now that you've got your header in place i want to invite you to my free training master class that's going to show you how to create and launch your own client generating website and we'll be using elementor but also i'll be guiding you through what should actually go on your website and what to leave out to be really persuasive and effective in automating a consistent client list every single day of the week so click right here to save your seat and i can't wait to share all the good stuff with you

Channel: Wes McDowell

Views: 42,937

Keywords: elementor header tutorial, elementor header tutorial free, elementor header footer tutorial, elementor header menu, elementor pro header tutorial, elementor free header, elementor free header and footer, elementor free menu, elementor free navigation menu, elementor free sticky header, elementor menu, elementor page builder, elementor page builder tutorial, elementor transparent header, elementor tutorial for beginners, elementor wordpress, elementor wordpress tutorial, digital

Id: qlRtzUE6seY

Length: 19min 48sec (1188 seconds)

Published: Tue Sep 08 2020