Free Elementor Header, Footer and Blocks (Make Headers, Footers and Custom Blocks in Elementor)

hello happy people Hamzah here and welcome back to the channel and in this video we are going to explore one of the plugins that was made by brainstorm first the team behind Astra which actually enables you to make free headers footers and blocks that you can use within your elemental website doesn't matter whether it's in a free version or in the paid version but in this case I'm going to only concentrate on the free version of Elementor and when you look into here my plug-in section you see that I only have the free version of elementa and then the plug-in called elemental header footer unlocks you can't get it simply by coming over here to the plugins add new plug-in and you can simply search had food blocks and boom once it shows up at the moment it has over 300,000 active installations and it was made by brain-stone fourth now once you install it an advert then you are simply ready to go now first of all to get started let me show you the website that we have at the moment we have a wordpress website having the basic headers that were made by Astra this is a header by Astra and this is a footer that is from Astra but we are going to replace this footer and we are going to replace this header right here and we are also going to use the blocks feature by header footer blocks plug-in to position a block just below right here so now to start off we're going to head back straight to our dashboard and we are going to simply come right here under the appearance section come over to header and footer builder so at the moment I have a header template that was already created so I'm simply going to trash this so what we are simply going to do is to create a template and in this case I'm going to create a header template and for now I have to choose the type of template that I want to create in this case I'm going to choose a header and I want to display this header on the entire website now the beauty with this plug-in actually gives you the possibility to position your header somewhere else for example you can create a separate header for the single as the blog posts and you can also create a separate header for the archives these are like the archive pages you can get a special header for special pages like the 4:04 page which is the era page the search page blog post page on the front page debt archives on all these other categories so that means that you actually have the freedom to create a header template for any of these sections for your WordPress website in this case I simply want to display my website on the entire website but also it gives you the possibility to add display rules where you can add an exclusion rule and say this header will not display on such results pages now that means that this header that you're creating will display on the internet website but it will not display on this such page discuss I want to add anything like that then they use our role for example you can say this header is going to display for all people who are logged in or logged out or anyone that you simply won't have access to that specific header template we can add these same rules to even the footer and there before footer okay now let's head back to our header and right down here they also give the option to enable layout for elementa canvas template now if you have used a Dementor you realize that Elementor has two different canvases one the Elementor fluid and one the elevator campus so you can either enable this header also to be enabled or to be displayed on the elementa canvas template and remember that the elemental Converse template doesn't display header that you have set up by default to appear on your entire website but now this plugin gives you that possibility okay notice simply publish so we have our header published and I'm going to simply open with alimentar cool now we can start creating our header we can start from scratch by simply adding a section and adding some columns for example duplicate a column I can duplicate this one too now the other thing affirmation is that this plug-in the elementa ADA and footer brings you a number of new other widgets in the recent update for example when you come over here to the header footer build and blocks you see that it's now giving you these widgets and these are really widgets that were found in elemental pro version 4 exam the navigation widget the site tagline the site title and the Cyclopes were all in elemental proton and were not available in the header/footer builder plugin early on so now we have this possibility for example I can add a navigation right here I can come back here and then I can select to have a site or a site logo for example by simply dragging that over I simply have my site logo now this is now this is the logo that has set up even in Astra if you want to change and use a different logo you can simply just switch here and say custom image but if you had set up your logo in the themes section under the appearance then it will magically show up right here if I don't show the site logo I can simply just come back over here on the header footer and blog section and I can simply just drop over here my site title boom and then the site title shows up but I simply just wanted to show you that actually this plug-in either with the possibilities to have these widgets when you're creating your header I'm not going to create my header from scratch I'm simply just going to click over here on the folder icon I'm going to come here to the templates area and you realize I have some templates these are templates that are really important pricked on behalf three headed templates for example if I say insert template simply say overwrite yes boom I have right here I had a template if I can show you another template over here I can simply insert this say override okay I have another one over here and I can simply just come back here to my widgets and I can insert my navigation over right in this widget or column so I'm simply just going to come over here under the header footer and rock section I'm simply going to just drag my navigation and I insert it over I select the navigation then come over here to which men you want to display I simply want to display the primary menu please don't forget that you should have these already created when I go back here to my website come to the dashboard then come to appearance menus you see that I have already created a menu for mine and I was already created a menu as my primary menu which is this over here by selecting in this section primary menu this is the menu that is actually going to show up in our and navigation okay so now I can do some edits for example I can sign this up by changing the colors for example the new more text color I can switch this to white on hover the text color I'm going to switch it to something like yellowish something like that and on active I can just simply make it to be maybe this green when the page is active it will switch to green now let me delete these other sections that I had created from my header let me look into the responsive settings on tablet this is how it looks like now we can make some changes for example on mobile we want that our hamburger icon is on the extreme end so select this widget come to the layout section and we are going to simply just come down here and select the alignment align it on the very right we so now it's aligned on the extreme right so I'm going to simply just come now to the style I'm going to come over here to the mini trig and close icon I'm going to change the color to something like this to be white so when someone clicks over here the menu should show up and let me just go back now to the tablet I'm simply just going to come back here the content layout breakpoint I'm going to switch this back to the tablet so that even on mobile it will show still the hamburger icon I can either choose to leave the button here by disgust let me delete the button I don't want to show the button and I'm going to come over here on this column I'm going to make it to take over 60% and I'll give the logo to take 40% now that means that I'm maximizing the whole section let me change the logo I can simply just use the word but in this case I'm going to come back here to the widgets come to our section for the header and footer blocks select our site title or by site logo I'll choose to use a site logo something like that I can reduce this further owned by coming over here to the style and I can change that with and I want to align this logo to be on the right something like that when I view this logo on a desktop still I want it to be on the right I'm going to reduce it a little bit further leave it in the percentage just give it like a fattie when we view this header or this logo on the mobile you can just add some little bit so that it's a little bit more visible like a 50s okay or a 60 something of that sort and yeah we have now our logo perfectly looking nice we can come back over here and we click on the hamburger icon we see how our menu looks like when it's clicked over we now to stell this because our main is appearing but hey nothing is being seen so we're going to come right here to the style we're going to come to the drop down and the drop down we are going to change the text color to ADA black or we can just change the background to use our text color to be white and the background to be a little bit like dark something of that sort and when someone hovers our yellow shows over right there okay so let me see how this looks like on the tablet something like that okay now this looks fine we can still further change the color for this and just make it kind of uniform and we can also do the same on the mobile you have to make sure that it's a same color okay now let's preview how our header looks like okay now this is how it looks like I need to reduce further on on the logo size so I'm going to make this 20 or simply preview it okay and I'm going to extend fire on our menu to be on the extreme so I'm going to come over here let me pick up my navigator because it looks like it's messed up over here pick or select the navigation over here come to the main menu come to the content come to the layout of course our menu layout is horizontal if you want to use a vertical menu can simply just choose from any of these options right here she wanted to be expanded to build something like that wanted to fly out that's how it will look like this case we don't want to use a flyout menu but in this case let me just switch back to the horizontal menu and I'm going to simply align it on the right side let me preview this and you see now that our menu has moved on the extreme right hand side okay now we are done creating our header we have our logo and our navigation over there now we can come over here and simply say update now once we update now this means that this header will be implemented on the entire website of ours because that is what we set up now let's come over here to our website before this is the header that we had let me open up this header in a new tab or I open up the website in a new tab that's our header the active page is green for hover it is yellow we have the logo over here and the navigation over here when you compare the two you see that now there is a difference now we are done creating our header next I'm going to show you how we can create our force' using the header footer builder plug-in I'm simply going to exit this section and I'm going to say add a new one and I'm going to add a footer I'm going to select the template type to be a footer and I want this photo to appear on the entire website and of course it will be accessed for available by all users now when I say publish after publishing I can simply edit with alimentar and of course I can start creating your footer from scratch like by adding a new section another and add all your footer widgets over here columns and all that stuff in this case I'm simply going to use a template already saved up here in my templates library and I'm going to just simply choose let me say this template for the footer or important override the settings and boom we have our footer imported that's how it looks like now when I simply update now this means that our food is going to appear on our website when I come over here to our website that we are working on and I update when I scroll right down here you see that we have a footer or a new photo that is appearing on our website now this photo has replaced the default food on the footer but that was from Astra okay now using this plug-in to basically override everything right over here using Elementor so when you look at this footer and this one you see that there is a big change you can also switch templates example let me just come over here pick another footer inside this one now I have another footer and you can simply just use it any way that you want maybe in case I want to use this religion I can just copy it come over here test this one over there I'll delete this I don't need it in case you want to add some sections and other content you can just simply come over here and choose from any of the available widgets that you want to use in your footer right here but remember that you won't be able to access the pro elements from Elementor because you're using the free version of elementa and that means that the only widgets that you will be able to access others with just are in the free version of Elementor and also those widgets that have been provided to you by the header footer unlocks plug-in which are down right here okay now I'm simply going to update once I update I'm going to take you here to our preview page okay you see we have our footer I'm going to reduce a little bit right here on the padding of the footer down below simply come back over here select our footer come to the Advanced section I'm going to reduce the padding so I'm going to unlink say 20 and below 20 something I'm going to make it 10 simply update okay cool we have now our photo show up just like this so next one I'm going to do is now we are going to head back to our dashboard and I'm going to show you how to use the blocks feature for this plug-in so by simply adding a new section I'm going to add a blog section and set before footer this section will be available all will be seen on any section before the photo appears so I'm simply going to say before footer and I'm going to say I want this default for that section to appear on the entire website oh it can actually be a before filter on on the home page now let me show you if we're only going to show this on the home page which is the front page over here so this means that this template is going to appear only from a right here before the footer okay which is our home page now on other pages that block will not be shown so but over here I'm going to simply now say publish and I'm going to edit this with alimentar okay now I'm going to add that block I'm not going to create everything from scratch I'm simply just going to the template over here come to my templates I'm going to add a call to action section I'm going to insert this unlike of course you can make changes to this section using Elementor so what we are going to do is simply update once I update no that means that our widget is now available to be seen on where we have set it to be seen so coming back on a preview website you see that we have this section which is before the footer for the testimonials but now we're going to have another section or simply reload this and boom we have now this section appear before the footer of our website okay now let's see if this same section is appearing on other pages when I come to the about page I scroll down now that section is not there the same if we go to the portfolio page now the section is not there however if we wanted to set up that this call to action section is appearing on all our pages we could simply just do that let me just exit this to the dashboard and I'm going to come over here to the displaced conditions and I would simply just say I wanted to appear on their website but let me say I want to exclude this pricing template to appear on the contact page I can simply just say exclude rule and I don't want this to appear on a contact page I simply just come over here from specific target I select and then over here I will just say contact now this means that we have said that the contact page will not have that call-to-action template show up before the footer so what I'm going to do is simply now update I'm going to come back here on our website we are going to go to the home page we have a header and our before food blog show up here and our footer now let's go to the about page okay now we have also our default a section appear before the footer and the photo is off let's go to the testimonials so our testimonials page is showing our header which is appearing on the entire website and our before foot a block appearing right here and the footer it's off now let's go to the contact which we said that it should not have the before foot block appear so let's scroll and boom we don't have the before photo section appear on our contact page because simply we want to live warm-up display there and that's why we had to exclude it here in the ruins of the header footer block builder the other thing that we can do is that we can use custom sections or blocks in our elemental website using the same flag in so by simply saying add new and then you can say custom block and right here we can choose a template tab which is supposed to be a custom block and that means that we'll have this shortcode and this shortcode we will use it on every section where I want to display that custom block so I simply just copy this shortcode and I'll publish this and then I'm going to go to Elemental so that I can design my custom login Elementor of course you can do everything from scratch by adding a new section and everything by this case I'm going to use a template still come to my templates and I'm going to add a custom block that I've already imported I'll simply just import this and boom we have this custom section over here I can add here an image so simply just drag an image widget over here come over here to the images I'll simply just use this as our image for a section and I'll simply just update now once I updates I can preview this section specifically which is a custom block and this is how it looks like but now let's go and display this section on any section of our website so I'm simply just going to close this I'm going to exit to the dashboard since this is a pricing block so I will just name it to be pricing so in case you are creating more other blocks you don't get confused so simply just update I still have my shortcode which is this over here so I'm going now to go to my pages let me say on our portfolio page we want to add the custom pricing template just after the bedroom section just below here so I'm going to come back to my pages and I'm going to come over here to the portfolio and edit it with alimentar and I'm going to simply scroll right down to the section where I want to add my custom block which is below after the bedroom add in your section and then I'm going to come over here get the shortcode widget from Elementor drag it over here to my converse and enter in my shortcode and i'll simply apply and boom we have our custom block added right here after the bedroom section and before the footer section so I'm simply going out update I'm going to come to my portfolio before we didn't have any section between the bedroom and the pricing widget or section so I'm simply going to a lot days and boom here comes our section that we just made up using the custom blocks and we used a shortcode to display it basically from this portfolio page so in a nutshell that's how you can create free headers and free photos in your elements our web but also position and use that in blocks on your website based on a specific group that you set for a specific block and section for your Elementor website so in case you have any questions or comments please let me know down in the comment box below otherwise up the story approaching value and now that you have an idea on how you can get the most out of the free version of a Dementor by simply using this free plug-in from Astra

Channel: Hamza - GoTechUG

Views: 55,239

Keywords: free elementor header footer tutorial, elementor free header footer tutorial, free elementor footer, free elementor header, lementor – header footer & blocks, footer elementor, elementor - header footer & blocks, header footer elementor, how to edit footer in wordpress elementor, header elementor free, header elementor, elementor footer tutorial, wordpress header, header footer elementor plugin, nav menu elementor free, elementor header and footer

Id: w61OYYFG0jY

Length: 22min 33sec (1353 seconds)

Published: Sat Apr 25 2020