How To Build Headers And Footers Using Elementor For FREE

now there are many times where using elementor pro is just overkill and simply not needed but you still want to benefit from custom headers and footers in a situation like that what exactly are our options well how about a free plug-in that does almost everything the header and footer templates of elementor pro do with some extra cool and unique features oh and did i mention it's absolutely free now not to mention it's developed by those talented peeps over at brainstorm force the talent behind the incredibly popular astra theme now i regularly release content on awesome free plugins for wordpress and elementor if you like that type of content and you find this video useful please consider clicking on that subscribe button to be notified when i release new content okay without the way let's just jump over now into elementor on wordpress and take a look at how we can use this plugin so this is the plugin we're going to be taking a look at it's the elementor header footer and blocks template it allows us to insert headers and footers and block templates and content into our designs without the need for elementor pro so one of the limitations with elementor free is you don't have the ability to globally set or choose where you want to set various different headers and footers throughout your entire site this is a pro only feature so the elementor header footer and blocks template opens up all those options to us so let's take a look at how we can implement this into our designs once you've gone ahead and installed the plugin you're going to have a new entry inside the appearance menu and that is the header footer and blocks let's open that option up and this is where we can start to get creative so we're going to do is we're going to add our first element so we're going to click add new and from there we're going to give this a title and we're just going to call this default header now you can call this whatever you want but give it a name that makes sense to whatever you're doing okay so underneath that we've got what looks like a very simple option which is the type of template we click and open that up and we can choose between headers before footer footer and custom block so header as its name would suggest is predominantly where you're going to put things like your navigation and your logo before the footer could be something like a call to action like a please subscribe to our newsletter kind of thing your footer obviously is a footer and the custom block is where you can take custom designs and insert those into your pages we're going to start off with the header option so we can get a feel for how this plug-in works open that up we now have a range of additional options display on these are the conditions we want to use to specify where this template is going to be used and as you can see there are a lot of options if you're coming over from an elementor pro sort of use case you're going to find a lot of these are going to be very self-explanatory you know you've got your basics so you've got your entire website all single templates all archive templates and so on you've also then got your special pages so you may want to have different navigation for your 404 page your front page you know right the way through to the templates or specific target items so you can target specific posts taxonomies and so on there's a whole range of really useful features inside here for how to display this information we're going to keep this really straightforward and say we want to use this for the entire website but you can also add additional rules in there you can add exclusion rules you can get really creative with this to get exactly what you want if you want to add a second rule you can do just that and all those same options are inside there we'll click to get rid of that and we can say add an exclusion rule and this is basically when to not display them so you could say one display in the entire website except for specific sections maybe the four or four page for example so by using these display on and do not display on options and rules you can get exactly what you want and display any kind of header footer you know all those different kinds of template options wherever you want throughout your entire site you also have user roles available to you and this isn't something that's available inside elementor pro this is where we can combine those display on with things like user rules so you can see we've got some basic which is everybody can see it we may have some other basic options like if you're logged in or logged out so you may like i've seen before have different menus different headers different footages for people that are logged in to those that are logged out you know those kinds of things you may also have different ones based upon the user roles that are available throughout your site you can see we've got all the normal wordpress like administrator editor and so on we also have customer and shop manager from where we have or have had woocommerce installed so as you add new roles in there these will become available inside this plugin we're going to say we stick to basic and everybody is going to see this and again we can add this user role if we want to and add more so enable layout for elementor custom canvas now if you're not sure what the custom canvas is it's basically taking whatever template or theme you've got installed as part of wordpress and ignoring it completely to give you a completely blank template to work with elementor so it gets rid of headers and footers that would normally be part of your theme but with this you can enable these elements to be included inside the elementor canvas template again it's one of those things if this is something you think is going to be useful for the project you're working on you can enable it for many use cases if not most use cases it's probably gonna be a case if you will leave it at the default which is disabled now we've set things up let's just save this draft and then open edit with elementor and then we can start taking a look at actually building our default header and what tools we have available edit with elementor let's open that up once we've done that we get the normal elementor editor now on top of the editor we also get some extra widgets which is really cool to see because it opens up more options that you'd normally have to have elementor pro to use so we just close these up we see we have a new section called header footer and blocks and inside there we have currently eight different widgets we can use so most of these are going to be super useful for us so let's start off by doing what we normally do to create a very simplistic header we're going to add in a new two column section so we're going to set it up like this so the left hand side is where our logo is going to sit the right hand side is where we're going to place our navigation now this isn't about how you style things and those kinds of things this is more a case of just showing you how this tool works because well once you start to get creative with the design you're going to go off and do whatever you want when it comes to styling things out anyway okay with that being said let's just make this section a little smaller let's just set this to be 20 and the rest of it there will be 80 percent so now we've set up the basic structure we can go ahead and start inserting the relevant elements so let's come back to our widgets and what we're going to do is we're first of all going to grab the navigation menu option and drag that over to the right hand side next up we're going to grab the site logo and drag that up to the left hand side now your site logo has been set as part of the theme in this example we're using the free astra theme but you could if you wanted to set up a custom image inside here you don't have to use the site logo you can set up whatever you want and as you can see we can use the site logo option we also have the option to set a custom image directly inside you so if we wanted to we can enable that and then choose a custom image we're going to let this use the one i've set up as part of my theme image size i'm going to set this to be full because we've got this set up for the right size for this design and you can see we can set a caption or we can set a link by default you probably want to set a link to be the home page we'll set this to default because that's pretty much going to go to the home page for us okay so there's the two widgets we needed inserted into our design layout now we can start configuring these different widgets the logo i'm perfectly happy with that for now click on the navigation on the right hand side and this is where we can start to get a little creative with how things work there's a lot of really nice options inside here first up we've got what menu do we want to use so if you have multiple menus set up you can choose which one is right for this particular section we then have the last menu item so you can see i've set an item on there called book now i want to set that to be a button so i can do last menu item i can select and i can just turn that into a button now that we set that to a button we can now go ahead and style or configure everything to do with the menu itself so we can click on layout and this is where we can control both the desktop and the mobile responsive views so you can see currently we have the layout set to horizontal but we can do vertical expand it and fly out so we have a range of really cool options inside there we'll leave this to horizontal for right now alignment we can set to left center right or justify so let's just pop that over to the right hand side so it sits with our design a little nicer sub menu items you can see under services we have skiing and snowboarding we can choose that sub menu icon from there we can choose between arrows plus sign and classic so if you choose classic for example that will update to whatever the classic option is or we can change this to a plus sign you can see we now got a plus sign sub menu animation we can choose to have the default which is kind of just fades in or we can have the slide up and you can see that slides up when we mouse over so you can fine tune and configure this to get what you want and then we've got the options for responsive so let's just switch this over now to one of our responsive modes like tablet for example and you can see now we've got the hamburger menu inside there now we can choose how this all works we can set our break points between mobile tablet and none so currently we're using the default options this part of elementor unfortunately we don't have any real control over that other than setting the basic values the alignment well let's just pop that over to the right hand side for the tablet view then we've got full width enable this option to stretch the sub menu to full width up to you if you want to use that so we can enable or disable that then you've got your menu icons you've got your hamburger menu for when you want to mouse over and click to open it up and then you've got your close icon so we click on there you can see that opens up and that changes to the little x if you can see it so now we can come over close that down but if you wanted to you could change this from anything inside the standard icon library this part of elementor or you could upload your own including svg images if you enable that option so you have a range of options inside there to customize and configure this a little bit more to the style that you may want to work with okay so let's come back out of our responsive mode and go back to desktop if we come over to the style option inside there we now have all the options to configure the styling for this now i'm not going to go through all the options on here they're pretty self-explanatory you can adjust the padding vertical and horizontal row spacing and so on so if you want to change the spacing in between each of your links you can do just that and you can also control this based upon the device that you're viewing it on so that's nice to see you have those options inside there you can also adjust the typography the options for the normal hover and active states so you can color code everything to fit exactly as you want you also have the options then to control the drop down menu how that looks the colors and again for the normal hover and active options if we close that down you've got your menu trigger and close icons which is what we just saw on the mobile responsive view so you can again control the colors the hover states and so on inside there and finally we've got the button option which for some reason has now disappeared but the option is still there okay so that's the styling options that's the basics of how you can use that let's take a quick look at this now what it looks like on the page so let's just publish this and unlike what you have inside elementor pro where you choose the conditions we've kind of already set that when we chose to create this using this particular plugin so now we've got it let's take a look at what this looks like on the actual front end of our test website and there we go there's our basic menu setup on our test site there's a few things we could do to this to make it look a lot nicer but ultimately you can see that it is working exactly the way we'd expect it to so that's how we can create a basic simple navigation element working with the footer and so on is all pretty much exactly the same so now we've seen the basics let's go back and just test out some of these other options that we have let's go back into elementor back into our navigation setup what we're going to do is we're going to just grab this navigation on the right hand side and from there we're going to come to our layout option we're going to try another option let's change it from horizontal to for example fly out click on there we now get the little hamburger menu because we need to use this as the trigger to open up our flyout menu we're going to pop this over to the right hand side and we're just going to update this so we'll update that on there and we'll jump back over to our test page we'll refresh this and we now have our navigation element in the top right hand corner click on there and you can see that now pops out our navigation on the left hand side again we'd want to style this a little nicer but you can see how super easy it is to do just that we can close that back down and there we go come back in and you can see we've got appear effect and we can say we want this to push for example and set it to the right hand side and we'll just update this come back over and refresh our page and let's test that out again and you see that now pushes things over and gives us our navigation on the right hand side we close it down closes it up so you've got a lot of options inside there to control how you want your navigation to work which is pretty cool to see so now we've seen the headers let's take a look at some of the other options now i'm not going to go over the footer side of things clicks at the top of this video it's pretty much exactly the same as what you've seen with the header section just different contents going to go in there so the routine would be exactly the same however let's take a look at some of the other things we can do let's add a new template in so let's just create something new so we're going to call this call to action and this is going to be available just to people that are not currently logged in so therefore they are potentially people that may be interested in what we do but they haven't taken that step yet to subscribe or create an account or whatever it is your current your site is actually going to do so we're going to do is type your template we're going to click and we're going to just choose the option for before footer now this is going to create a design that's going to sit above the footer whether you've created a custom footer using this or your theme may have a custom footer it will still sit above it as long as it's being called up and referenced as a footer okay well that being said display on gonna click on there and we're gonna say entire website we're going to set up a user role rule to put on this as well so we're going to just choose the option to say logged out so this is going to display it in the entire site only for logged out users anybody that's logged in will not see this so we're going to do we're going to hit publish on this we've created the rules the conditions for our called action let's hit edit with elementor open that up and let's just create something incredibly simple just so you can see how this works so i'm only going to put in a simple block we're going to just drop in a heading inside there we'll just say this is call to action so we'll say call to action there we go you can't get much better call to action than the words call to action let's just simply then set the background of this section and we're going to set that to a nice bright red so no one can really miss out on what's being done there and we'll just pop in a little bit of padding around there and set our call to action text to stand out by being white okay so really simple but you'd probably put something a lot more creative and interesting in but the principle is the more important thing so we've updated that now let's just come back over to our test site we'll refresh this and we're going to scroll down to the bottom above our footer and as you can see there is nothing there and that's because we are currently logged in so if we open up an incognito window so it's going to open up a new incognito window i'm going to drop in the url for this site drop that inside there so now we're no longer logged in so we scroll down and as you can see there's our call to action so anybody that's not logged in we'll see our call to action above our footer throughout the entire site anybody is logged in won't see it so that's how easy it is to use this above the footer option let's finally take a look at this sort of content where we can drop it in wherever we want we're back in the custom header footer and block section and what we're going to do is we're going to create a custom block so i've set my custom block we're going to come down and choose custom block as the option and you can see all that does is it gives us a very simple short code so we could then use this wherever we wanted throughout our entire site so just by copying that little bit of code we can then take whatever we put inside this design and drop it in anywhere in our site just using the short code option so let's just save this as a draft for now edit that with elementor and we're just going to create just a simple block that we just did now so we're going to just grab this block and we're going to come to content widgets and we're going to say we're going to drop in an image we'll choose an image from our media library doesn't really matter we're going to choose i'll take this one and we'll just put a title above it just saying that this is custom block there we go we'll center that and we'll set that to h4 okay there's our custom blocks we'll publish that so now that can be used any way we want on our entire site so we're just going to close this down exit to our dashboard and if you want to you could use this inside your custom templates as well however you wanted to use it so now what you need to do is go to any of your pages your templates and so on we go to all pages and we'll just go to our home page for example and we'll just edit that with elementor and once we've done that we can then just drop this wherever we want so we're going to do is going to find a place this will save this little area by here which has nothing currently in it let's grab our short code widget drop that inside there and drop our short code in and you can see that now drops our custom block inside there we'll update that and now that's been added into our design so if we come back over to our test page and refresh we'll find a scroll up and there's our custom block section now for me this is probably the least useful out of all the options that we have as part of this plugin but it does mean that you don't rely upon elementor pro to do a lot of the things that you may want to do with headers and footers pretty cool now there really is no limit to the types of headers and footage you can create with elementor for zero cost have you found this video useful and you want more great content like this check out the video that's on screen right now and drop a comment on how you normally create your custom headers and footers with elementor in the comment section below as always all the applicable links are included in the description my name is paul c this has been wp tats until next time take care

Channel: WPTuts

Views: 181,645

Keywords: WPTuts, headers and footers with elementor free, how to create a footer with elementor, how to create a header in elementor, how to make a footer in elementor, how to make a header in elementor, elementor footer, elementor header, elementor header footer tutorial, elementor header tutorial, elementor pro, elementor tutorial

Id: 2OMOqF9P5rA

Length: 18min 46sec (1126 seconds)

Published: Tue Jul 28 2020