March 30, 2020
How To Create Custom Headers & Footers With Elementor For WordPress With This Tutorial

How To Create Custom Headers & Footers With Elementor For WordPress With This Tutorial


In this video to show you how to create a
custom header and footer for your WordPress website if you’re using Elementor hi my name
is Adam from WPCrafter.com where I release a ton of content to help you get better results
with WordPress faster if you’re new here consider clicking on the subscribe button and the links
to everything I talked about this video will be linked in the video description down below
so something new came out for Elementor today now it’s only for Elementor Pro now if you
head over to Elementor Pro’s website ledges go over first how much this darn thing cost
it’s included if you already own Elementor Pro scrolling down here we go $49 for single
sites 99 for three sites in 199 for unlimited websites and essentially this is a companion
for Elementor the free WordPress page builder for WordPress and it’s going to give you lots
of new features one of those new features was announced today and I’ve been playing
around with the beta for a few days and essentially what they just released was seen at the ability
using Elementor Pro to create navigation menus now it might seem like a small thing but is
actually a huge thing because what were seeing happen is page builders being able to create
anything for your website with them and that is the direction that I been hinting around
that Elementor’s going it’s been obvious the writing is bent on the wall a few months ago
they released the ability to create coming soon pages and maintenance mode pages that
was the first indication then they released a way to a new feature to add the login pages
login forms to your website and now were seeing that you can build navigation menus for your
WordPress-based websites and I’ve got to say I’m a link to this of course below everything
is good to be linked down below but this has got to be the most amazing navigation menu
widget builder I’ve ever seen and you know a few months ago I reviewed a theme called
the X Pro theme and that was really the first thing that came out that had a header builder
header and footer builder and I was really harsh on it because they made it way overly
complicated and that’s the thing I love about using Elementor is it’s not complicated to
use once you get used to it and as they keep adding new features and functionality to it
you don’t have to re-go through the steep learning curve because you already know how
to use Elementor if you know how to use Elementor your know how to use whatever they add to
it and that’s the same thing with this new menu builder and it’s pretty amazing I’m to
just scroll through the blog post here to give you an indication of what it can do and
then I’m going to show you how to use it on your particular WordPress-based esteem so
you got this video here I suggest you watch Ben from Elementor created it and it’s very
revealing of all the features that come with this a builder now here is an example of it
you see I love the slow motion just by the way I should start adding them to my website
but you see right there you’ve got full control over the hover effects right there and you
can do different types of navigation menus you can have it be a vertical or horizontal
navigation menu you can also have it be where there’s a hamburger icon you click on it and
then it reveals the menu now there’s all these pointer animations and that’s what happens
when you hover over the different menu items and you could see them right here they’re
all categorized right here there’s no sense in even actually showing you this other than
that reference this page because this is where you see when everything does and I love it
I write really love everything that’s happening so there’s two different things there is the
if you notice right here it’s the way the animation happens so fade slide grow drop
and drop out and then the different types of animations right here you could see them
right here for the framed animations overline and underlined to there’s just it just keeps
going on there so many different ways to make this look exactly how you wanted to look on
your website and make your website look how you wanted so and then you have full control
over the spacing which is pretty huge as well I tell you prior to this if you want to customize
your menu say that comes with your theme it is so tedious in such a hassle but now with
Elementor you can use the page builder that you already know how to use in order to change
the spacing that colors the animation every single thing you could want to do to a menu
you can easily do now with Elementor you can even have submenus right there all the colors
are controlled you can put use all right there momentarily there was like a pill background
you could do anything with this it’s just so amazing okay so now you’re probably looking
at this and is actually good to also look through the comments but now you’re probably
thinking this is great but my theme has its own menu system how do I use this in my theme
and I want to share with you right now so there are two ways to do it so number one
there is a plug-in by the makers of the Astra Theme cup header footer Elementor now what
this is is a free plug-in that you can install on your website now your theme has to support
it now luckily right here they’ve made documentation to that you could actually send to your theme
provider if it doesn’t support and say hey can you support this or can you tell me what
I need to do in order to make this work on the theme I’m using at your the developer
up you could just send them this link and this will be linked down below as well and
this will be some simple instructions for them to add support for this plug-in and here
is the plug-in right here now here are the a list of supported teams of course Astro
they make Astro so at Astros one of the supported themes GeneratePress Genesis Beaver Builder
and OceanWP now obviously you probably wouldn’t use the Beaver Builder theme if you’re an
Elementor user but their support for that as well anyway now using this plug-in couldn’t
be any easier and I’m to show you that in this video now the second way is if you just
want to so this way you can be of the creature entire header right Bill put a logo in their
calls to action navigation menu buns whatever you want that’s the ideal situation now if
you just want to swap out the navigation menu that your theme has for what you’re now able
to create an Elementor you have to use something a little more complicated and that’s called
hooks so you’ll need a theme that has support for hooks in an easy way for you to put those
hooks and I know all the themes on this list do have that Astro though it’s the theme is
free and the ability to add hooks is free as well I am going to make a video that is
more newbie friendly on hooks what they are how to use them but that videos not out just
yet just know that’s the second way to just use this menu option with your theme now before
I actually show you using this plug-in on your theme I do want to give you a little
caveat I really think that this is almost to be something that you only temporarily
need and that’s because if this new release is any indication within a period of time
whether be a month to month by the end of this year I am pretty sure and I’d be willing
to bet my money on it that with Elementor you’re not can I need this plug in your to
be able to build the entire header with Elementor not just the menu the entire header I’d be
willing to bet money on that that that is coming so you can use this for now and then
in a few months or so if they release it when they release it you can go ahead and just
swap it out it would be very easy to do but I never recommend waiting till something is
out or a better way because you’re gonna find out that you’re waiting for a better way all
of the time so it’s best to just jump in now and use this header footer Elementor plug
in so check out your website just go appearance Ansari plug-ins and new do search for a header
footer Elementor it’s in a pop-up do the installation and the activation then under appearances
could be this new option that says header footer builder and it could be easier to use
guys so what you do here’s you go here click on add new and you can name it whatever you
want probably just header or footer would be just fine so I’ve gone ahead and created
this one that’s his header now what you want to do is right here it says Elementor header
and footer options you want to choose whether what you’re creating right now is the header
or the footer and that’s it the minute you sign it header then it’s going to go and be
active in that’s can be the header on your website then all you have to do is click on
edit with Elementor and it’s going to pop right up now I’ve actually already dragged
and dropped in the element there the named new nap menu element element now this is not
to be a tutorial in every single option with this new menu building systems and that’s
because there’s probably a and B bunch of videos coming out on that and I don’t think
I’m to be of the do a better job than what Elementor does so that’s what I’m doing something
a little differently so probably what you’re gonna want to do is add some columns so you
can just drag and drop the columns and we could toss a logo and here we can toss the
nab menu in here so if I want to do a logo I’ll just go here and I would choose the choose
the image option right here I think I might have some of these like default local looking
things here about this gift that looks fine, go ahead and insert it and there we go now
probably want a left align this like that and we have all this extra space on Marie’s
size my column like that now actually here let me do something a little more different
to let me go ahead and add a column so now we have these three columns on the go like
this and I’m going to go like that someone to go ahead and put my math here in the menu
or in the middle someone go ahead and drag it in it’s the new Pro element right here
and it is called now have menu Dragon drop that into of the first thing you’re gonna
want to do before you start doing all this is actually create a menu in WordPress it
basically pulls from that which is a very good thing so I have created a menu I just
actually threw together and so all your menus will be listed here I’ll go ahead and select
that main and then boom there is my menu not finish a couple little tips and tricks here
with alignment and making this look great on a mobile device so one of the things that
I like to do is go into one of the column settings like this and you would click on
it and it says edit column now one of things I like to do is modify this content position
so this is the alignments vertically I don’t lay whether you wanted everything on the top
or the bottom are centered so for me I like everything centered so I will go here and
I’ll choose middle and you should notice now everything’s gonna be aligned perfectly in
the middle there and there we have it so let me go ahead and save that now think what I
want to do right here is II think throw button in some to go ahead and choose the button
element right here now let me make all three of these elements centered something to go
into this column to change the content position the middle I’m in a go into this column and
I’m in a make the content position middle and there we go everything just perfectly
middle so let me go ahead and take this button and I’m going to write alignment like that
actually let go center that might look a little better and we have a fully customize header
where you got this button on the right is actually very modern header where you have
the logo than they have over there on the left and then you toss some kind of a button
on the right so let me go ahead and click and treat just some of the options that you’re
getting with this snap menu like I said it’s best to refer to the blog post if you want
to see the variety of pointer options and animation options but we have basically you
can cost everything on this on this plug in here when you go here to scroll down this’ll
probably be the best guide of what you can and cannot do with it so let me go back here
and let me just go ahead and click on save just in case let’s take a quick look at it
by going like this and we have it right there and I think this looks great so far if you
want to get some elements closer we could just change the spacing there now what you’re
going to want to do and it’s a very crucial that you do is you have to run this through
what it’s gonna look like on a mobile device okay so what we want to do is click right
here on the bottom left and choose mobile now this does not look good at all and I’m
there to show you how to tweak it now and so what I would probably want to do is I want
this in this on the same line and then I probably don’t want this button there someday hide
that on a mobile device so let me go back exit here I can start tweaking all that right
now summer click on the button I’m in a go to advanced and then right here there’s going
to be on the responsive option there’s these hide on option so actually hide that on the
mobile device and I’m probably going to go hide on the tablet at all so this is how I
wanted to look at only want that button when I’m on the desk the desktop actually I’m not
sure why it still showing them that’s alright so now we want to get these two items right
here on the same line and then we probably want to align this hamburger icon off to the
right and this is actually one of the best features of Elementor is they give you total
control of that so what you want to do is you want to go into the different column settings
for this column in this column summit click right here and then right here it says column
with and this is actually where we wanted and it’s in terms of a percent percentage
so right now it’s taken up the flow with working to make it take up less with us so we could
say make this take up 70% and you see now we’ve got this opening here to push this Colman
so if I made this 70% I just need to make this column 30% so when I click on this and
then I enter 30 like that you can see now they are on the same line now probably what
I want to do so want to click on this and hoop section I want to click on the click
on it and what I want to do is I want to make it right aligned now let’s see how that works
if I go to mobile drop down here is where the specific mobile settings for the navigation
menu will be so I don’t want to change it right here I want to change it on the mobile
drop-down options so right here it says only toggle a line I’m going to make this go to
the right and there it is that is the navigation menu that I am after so let me go back to
the desktop and you can see it’s like this and then when I go to the mobile device it’s
like that this should I don’t know why it’s actually not hiding in preview but that could
be just how it is and that’s okay so this is how it should look on a mobile device and
work and actually test that right now all right someone to go back to desktop now obviously
there’s a ton of options here I didn’t really go over them at all you can reference that
post if you wanted to there some different style options you can make this look exactly
how you wanted to look some go ahead and click on save now I’ve already assigned it to be
the header in that header footer Elementor so when I click on a refresh right here it
should show that new header right there where I have the logo and I’ve got the menu right
here in then I have this button now what I’m to do I making this video in chrome but in
Safari it has this really cool way of testing websites on different devices is one of their
developer tools and it’s right here so you can see what a website looks like on various
different devices so you can see what I was going after was that button wouldn’t be there
and so it looks sexless on what I want and so this is now what it looks like on a mobile
device I could probably play around the padding little and pull that up but I wanted you to
see how you don’t see this column or that button on the mobile device which is what
I didn’t want so when we test the toggle right here for the menu you can see everything scan
is scrunched in the side and that’s because there’s one setting that I needed to enable
that I didn’t let me go back to chrome here we are there’s this option here that’s is
full with thunder mobile drop down so what this is going to do is when it’s the mobile
option it’ll take up the full with not be stuck in that little 30% or whatever that
I set it as so if we enable this and then click on save I should be able to go back
and do a quick refresh and that should work properly so now when I go there it is you
can see it right there it is actually perfect this is exactly how I would want it so anyways
this is the new menu navigation for Elementor approach if you don’t have Elementor Pro is
a great time to purchase it I do have a link in the video description and I also have a
little promotion bonus I like to do I created an entire extensive course on Elementor and
I like to give that to

100 thoughts on “How To Create Custom Headers & Footers With Elementor For WordPress With This Tutorial

  1. Great to see, how easy everything is.Is there an easy way to "display" the menu name given in the WordPress backend above the elementor navigation menu?

  2. hey Adam, i downloaded safari but i cant get to there developer tool. can you guide me or anyone on how to get to them? i downloaded it on windows. i have windows platform

  3. You are such an awesome instructor!, from beginning of making my own site, I've searched all possible resource, but your tutorial is the best that most of home page builder will appriciate! keep going on! Thank you

  4. Adam – With the introduction of Elementor 2.0, it seems things have become a bit more confusing when trying to work with headers and footers. I have seen, on numerous forums and Q&A, the topic of what plugins are exactly needed to use Elementor 2.0's new headers and footers as well as how to actually create the headers and footers and then DEACTIVATE the original theme headers and footers. It would be great to have an update where the choice themes are covered like Astra, Ocean WP, GeneratePress. Elementor says that headers and footers now work with "all themes" but I find that a bit of a stretch. What do you think?

  5. So let me understand this I can not build another Header Menu with Elemantor(free version) But I can with WordPress?

  6. Hi 🙂 I love your videos! Very informative and I used plenty of your tips. However, I have a problem with SEO using Elementor… You probably know already, that when it comes to Elementor and wordpress, they are not really compatible when I am trying to improve my SEO. Can you give some advise on this or (BEST!) record a tutorial? I feel hopeless. I have done everthing doble time (in wordpress and Eelementor) as it seems like whatever I do in Elementor, the SEO doesn't really see this ….. 🙁 thi is so dissapointing and exhausting… I cannot work on wordpress as it is for me dull and all the websites look similar. I love Elementor, though, and although I have just started building website for my business I cannot promote it as Google doesn't really see it… SEO (for at least home page and few others) has a GREEN light, and still it is somewhat invisible for Google searches…. 🙁 please help me… if you feel that this comment looks desperate – it does! 🙁 I need help of someone who knows how it all works, as I am going crazy…. can you contact me please?

  7. Hey, is there a way to build a custom header without the header/footer plugin? I'm just wondering if Elementor Pro has an internal option

  8. How do you create a transparent header without using a theme? I just wanna use Elementor. Please help!

  9. is it possible to make the mobile menu open fullscreen?

    Or even, is there any plugin to make the mobile menu more beautiful and dynamic?

  10. Hello Adam, Thanks for the great tutorials! Is there a video that explains how to use Astra / Elementor to edit existing content that was imported into WordPress from a Joomla website?

  11. Hi adam, really good video. BUT i have a few problems. the footer doesnt appear on the bot, it shows in the middle. also the header in mobile devices it shows cut the middle. I would appreciate if you can help me with this. Thanks!

  12. Hi Adam. Awesome tutorial! Need little help tho. Just created a header using Header & Footer builder for my Astra Theme website, how to assign it as when I try to refresh the page it doest appear.

    Hope to hear from you. Thanks

  13. Adam, so if you don't have the Elementor PRO version then this plugin won't be of any use? Just some clarification. Thanks!

  14. Hi Adam love your channel. I tried doing this with the Astra Theme and I can't figure out how to get the Nav Menu on every page. The Astra Header shows instead 🙁 Can you help or where do I get the hook and add it in Astra?

  15. How can I change the Position of the header after I created it?
    For example my setting was ,,entire site‘‘ but know I want to exclude the header on one page

  16. @WPCrafter.com WordPress For Non-Techies
    Hi Adam, I'm facing a problem in wordpress, can you tell me your email id, where I can send all details of my problem.

  17. Firstly…thank you for that
    Secondly for the next ones if you could go straight into the subject that would be amazing
    Don't take this the wrong way – only helping here

  18. I have OceanWP theme and I dont' have any option of navigation menu that you have. I can just pick the existing menu and can't change anything.

  19. Adam, I purchased the Elementor Pro through your provided link, but I couldnt access your Elementor Essentials 🙁 May I message you or emailyou privately? I can show you proof of purchase of Elementor Pro, I really love your content, so I would love to learn the course

  20. I saved a sample template with the design but with sample text, now I want to use this design on multiple pages/posts but need to change the text. How to do it? Thanks

  21. Im using Elementor Pro and there are really a lot of bugs in it. When I insert a footer via Elementor Template, my Sydney Theme header disappears.

  22. Thanks so much! I was going to pay someone to design a header, but paid to update Elementor to Pro instead! Great buy!

  23. Need help! i am using free elementor for oceanwp theme. I Created the header, footer, mid on one template. The problem is how to apply now. I imported as well but no idea how to apply by going to custom header. That file is not showing there.

  24. why did not full width nav list move down in toggle icon formate or mobile formate ? Issue is that the content are not move down as well as list move down .

  25. I am in need of the newbie friendly hook video if it is out already. I am looking to replace my Elementor created nav menu with the Astra
    base menu. I have no idea what a hook is. Any help would greatly be appreciated. Thanks. Great content Adam.

  26. At 9:57, you add a 3rd column within the double column. I tried to do this by rolling over the icon as you did but nothing appears. Any idea what I need to do differently?
    Thanks

  27. Is there any way I can implement the header I created with the pro version on the website I have created already? Or will I have to redo everything? I Used elementor for my layouts on my web page, but just upgraded, and created a custom header. Now I can't figure out how to implement it, or replace the header I originally had. Thanks in advance. Great video.

  28. I'm using the GeneratePress theme and it is not supporting it. It does not give me the option from where I can choose to build header or footer.

  29. Adam, I want to thank you for all the in-depth tutorials which are free. Similar content from other professionals would literally cost thousands of dollars. Since following your blogs and courses we have never looked backwards. Your suggestion of Inmotion hosting was an absolute lifesaver. After 15 years on a major UK hosting platform, I moved four sites to inmotion and ZERO downtime. If some users and viewers find your delivery a little too fast, they can just watch them again and again as we do. You are without a doubt the Gold Standard for WordPress education.

  30. Hi Adam, Great tutorial. I would like to implement the same header (two menus) as your site have. How can I do that?

  31. I have a question, I have selected my header to appear on each page haha which initially seemed like a good idea but now I can see it will be annoying for user, do you know how to switch my existing header back to appearing on the entry page only rather than popping up at the top of each page on the site?

  32. I've been building sites with Avada, X, and Divi. The type of design I'm looking for wasn't an easy built with Divi so..after watching your videos I went and got Astra…so far I'm loving this theme flexibility more than any the others I named ( ok maybe not Avada.) I went with elementor and though the first 30 min. It felt like a pain in the neck, I'm now loving it as well. Thank you Soo so much!

    I have one question for you. To implement these custom menus …is there a way I could do is only on selected pages? My client is pretty happy with the front end so I don't want to change that. But I would love to make the back end unique by adding the custom menu.

    Thanks

  33. Hey Adam, Happy New Year I have recently installed the Electro2 Madras Theme on my website and Elementor Builder but, i want to know if I can edit the existing theme header to my own design.

  34. I can figure out how to make my own footer, and even apply it site wide. I cannot for the life of me figure out HOW TO REMOVE THE DEMO FOOTER. That damn "Mark Brownn" footer is on every single page and will not go away. I have deleted every template called "footer" and it is still there. When I create my own footer, it just shows UNDER THE MARK BROWNN DEMO FOOTER. It is driving me absolutely bonkers. You need to be a coder to remove the friggin demo footer? So I beg to differ – It IS COMPLICATED TO USE. If not downright impossible. Unless of course your name is MARK BROWNN :/

  35. Hi ! Great content.
    How do you hide the header/footer for creating a simple landing page without having those two elements with elementor & Astra?

  36. Adam…quick question. I don't have Pro yet but I installed the header footer plugin and pretty much was able to get the header look I needed. Only 1 issue I can't figure out which was your very last step in this tutorial. When I click my hamburger menu in mobile view it does what your was doing…pushing the logo down on the left and only displaying on the right which looks horrible with the logo floating down. you rectified it with "MOBILE DROPDOWN>>>FULL WIDTH ON." However with the plugin version I don't see that option so how can I rectify this?

  37. Actually I figured out that the actual tutorial was 3 or 4 minutes, but it went on for a long time without actually starting … – sorry buddy.

  38. Adam Thanks so much … I've learned a great deal from your tutorials. Where can I find that Multi-Device Tester for testing mobile and tablet setting?
    Thanks in Advance and keep up the great work my friend. ( ^__^)

  39. hey, great content. can you tell me how to use this for a multilingual website? because when the website changes the language, the header remains still

  40. Could you please tell me if there is a way to use a custom Elementor header if I already have the WP header in place? I'd hate to have to redo the whole site and I really don't want to use another plugin or have to do some CSS codeing 🙂 Thank you, John

  41. Seriously, if you need the pro version to complete a tutorial, you should let people know in the title, or at least at the start of the video.

  42. great video sir, it really helped me a lot. I am also facing the same problem when it coming to mobile device button doesn't hide on the preview.

  43. Hi… would you be kind enough to tell me where to put Google Analytics tracking code when using Elementor Theme Builder custom header and Ashe template? I believe Ashe is a BDthemes template, like Astra. I think 🙂

  44. How can you remove the header and footer from original astra? In addition I think now you can select the directly the block footer right? thanks

  45. This is driving me nuts…

    Could you possibly give me a bit of help?

    I CAN NOT edit (or change) background color in a section. When I click on edit section, there is nothing there when I click on the Style tab. Layout and Advanced are there but not Styles. I've tried adding blocks both from Elementor and Envato. I've tried adding the heading and text elements and nothing I do shows me the Style settings.

    I'm using the free Elementor and OceanWP. Both current versions. I've also tried deactivating all plugins. Nothing works.

    It should be a simple thing to create a colored bar at full width and put text in it, but it is NOT working out that way.

  46. I need to remove the elementor header from some specific pages on my site, but I am unable to find and set specific pages in display conditions while saving the header ( it does not let us select the exact page name to remove the header from ). Can you kindly help me with that, please?

  47. Hlw sir i have a problem when i Adsense code past my WordPress site theme.php there but not showing any </head> tag no doctyp
    What can i do now pls help me

  48. You took over 7 mins before you even taught your headline.You talk far to fast and your voice is not easy to listen to
    I was shouting for god sake be quiet because you hardly took a breath
    Why do you tech guys all talk fast it takes time to find the bits
    !

  49. Great. Makes a video about making headers without elementor pro and decides to use a function of elementor pro in 6:30 without any explanation on how people using the free version can do it. Thanks for wasting 10 minutes of my life, really.

  50. I've seen in your previous videos you've had the header transparent so it just uses whatever background color the page you're on has. How do I do that? I can't seem to figure out how to make the header transparent. Just keeps being white.

  51. Hello folks, how can you apply these custom headers for Woocommerce pages like single product, cart, check out? Thx for the support.

  52. hi. how can i set header and footer only for a single page and then create a different header and footer for a different page on the same website? is it possible?

  53. Adam, have you released the video for newbies on "web hooks" if you have, thanks i will search for it. 🙂

  54. I followed your steps but after publishing and viewing my site the changes don’t show .

  55. I wish you could have shown the search for this plugin. I’m not sure if I’m finding the correct one

  56. Very nice and informative video, i just created mine. But can't remove it and make it default. I would be highly grateful if you could tell me how to remove it and revert it to default one

  57. i had made website with wordpress not with elementor but i want to insert a elementor footer block to my existing pages of website how to do this??

  58. Thanks a bunch! I went ahead and bought Elementor Pro just because of this tutorial. Keep up the good work 🙂

  59. you really should announce ahead of time that this is an out-of-date video….instead of us wasting time downloading unnecessary plugins !!!

  60. Nice tutorial! Is there a way to create the same Nav Menu widget but without menu link (only fake links)? This is because I'm in a 'staging' host and I don't want to display links to other pages that I'm working on. Thanks so much

  61. Thanks for the great tutorial mate. But have one giant issue which i believe you can solve it with a couple words. My footer doesn't always stick to bottom. When my page has less content or no content in it, footer jumps in the middle of the page or top of it. What should i do ?

  62. ok but does google register these custom headers as actual headers or is it something similar to thrive themes landing page designs where you can create headers also but they arent actual headers when google reads your website?

  63. Hello Adam, thanks for your tutorial, yet I've faced a problem about the menu button is missing when the screen shows in mobile version. Can I get your help?
    Many thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *