WordPress Header & Footer Builder Is Here

Learn how to edit your WordPress header & footer using Elementor's Theme Builder! Check out the amazing header and footer templates listed below.

Designer: "I wish I could change my WordPress header" Elementor: "Now you can!"

The header and footer areas are the backbones of every website. In the past, tasks like removing the space between header and body in WordPress required going into the PHP files of the theme.

Today, we take a deeper look into how Elementor Theme Builder gives you a powerful new way to edit your site’s header and footer, visually designing it however you like. Build powerful headers and footers on any WordPress theme in minutes.

We are also introducing 25+ new pre-designed header & footer templates that will help you get started easily, as well as a one-click Sticky Header feature. If you are looking for more inspiration, take a look at these inspiring examples of headers and footers, created using Elementor.


How to Edit Your WordPress Header, the New Way

From now on, you are no longer limited by your theme’s restrictions. 

Follow these steps to get it done easily:

  • Go to WordPress Dashboard > Templates > Theme Builder 
  • Click ‘Add New Template’ and choose ‘Header’
  • Name your header template and click ‘Create Header’
  • Now you’ll be able to either choose a pre-made header template, or create one from scratch.
  • Once you have made the needed changes to the header design, click ‘publish’, and choose where to publish the header. The default is ‘entire site’.
  • That’s it! You can now see your hand crafted header live on your site.

By bringing the power of the Elementor editor to the header and footer areas, you can design them you way you like, and be able to complete projects faster than ever. You can also save header and footer templates, and reuse them on any other project.

If you are beating yourself up right now for all the hours you lost in the past over your header design, we share your feelings. From now on, using Theme Builder, things are going to be much faster

brand-new blocks

Website Header Examples

Need a WordPress header templates? Choose from a huge array of designer-made blocks available in the Template Library. Customize it and give it your own touch.

WordPress header template
Dark header WordPress
Simple footer
Top bar
Material design footer
Light header
Normal header
Contact header
Center header
Minimalistic header
Green footer buttons

accessible navigation

Sticky Header for WordPress

WordPress sticky header plugins are quite common. Now, you get the advantage of uncluttering yet another plugin, using Elementor’s built-in sticky header feature. Setting sticky headers using Elementor is easy, and believe it or not – it takes just one-click.

Why make it sticky? Sticky headers are great for bringing more focus to navigational links in menus, and helping visitors more easily navigate through the main pages of your website, regardless how far they scrolled through the page. It’s not only for navigational purposes though – They can also considerably increase conversion rates, simply by adding the right call-to-action to either the fixed top of the page.


Build Custom WordPress Header Templates for Different Pages

Want to designate different headers and footers to different pages of your WordPress site?

You can accomplish this goal in no time. All it takes is creating different header and footer templates, and assigning the proper conditions for each template, attributing the headers and footers to the relevant pages of your site.

Have a special sale? Create a header for that occasion.

Have different blog categories? Attribute a header design custom made for each one, and possibly change the header color for each category.

Want to add social media icons to the WordPress header? Just drag and drop, no other plugin required.

Want to add a header image? Same procedure – drag and drop. You’ll have complete control over the image size from the Elementor panel. 

It’s just as easy to create a video header using the corresponding widget. In fact, any widget can be added visually to your header using the header template. You can also incorporate dynamic elements like site logo and customize them in the same template.

Once you are no longer restricted by code, you can easily create as many headers and footers as you like, and spread them across the relevant categories, pages and taxonomies with a single click. The same process can be used to hide header on certain pages, and have them appear on selected others.

Customize Your Footer Design

Eye-Catching Footer Templates

Check out the wide range of WordPress footer template blocks: some are simple and minimalistic, others are extensive and full of detail. Pick your favorite and add them to your WordPress site! 

light narrow footer
gray long header
light long header
Call to action footer
dark narrow footer
dark header
dark long header
WordPress footer
Top bar footer
Button footer
dark background footer
Elaborate footer Elementor

Mobile Editing

100% Responsive Headers & Footers

Design responsive header and footer for WordPress by previewing them in Elementor’s mobile view. You can differentiate between different column structures and widths for different devices, and create headers and footers that look perfect on every device.

Header and Footer control makes Elementor’s mobile menu builder more relevant than ever. The menu automatically turns into a mobile hamburger menu, so you don’t have to do any customizations on your own.

While you can customize any header and footer for mobile devices, sometimes designers prefer to design two separate sections, showing one on desktops and the other on mobile. This can be easily done with a simple hide/show click, available under the advanced tab of the section.

Go Beyond Your #WordPress Theme Limitations #Elementor #ThemeBuilder


Header & Footer Builder - Unleashed!

With Elementor Theme Builder, we solved a huge problem known by every WordPress user.

Never again will you have to wait for the developer to change your header.php file, switch to another theme just to move a header logo, or work hard to customize the CSS header and footer elements of your site. Elementor Pro 2.0 makes header and footer design quick and super-simple.

Finally, your website vision can truly come to life. Join Pro today, and gain complete control over your entire website design.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Liked This Article?

We have a lot more where that came from! Join 1,365,209 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


166 Responses

  1. Nice one Ben. Was really hoping for, at this stage, a bit more advancement to the header area, like more complex navigation options and adding saved sections as menu dropdowns. Hopefully still on the cards for potential features. Thanks

  2. I am new to WordPress and Elementor. I have seen countless of reviews and they are really good, and I am sort hook. I also like that you seems to be progressive and that important to me, I do not want to be jumping from on company to the next. I was using Adobe Muse and it is now an EOL. I have read that WordPress in not all that secure and can be hacked easy, Elementor being a Frontend builder, how secure is it using Elementor to build websites? I would appreciate your response. Thanks in advanced.

    1. I do not represent Elementor but I’ve been building WordPress websites for a very long time; most of your legitimate security threats are either equally or less effective against a WordPress site. One thing it does, though, is extends its simplicity and accessibility to allowing you to make your own choices to take additional steps to secure your site.

      I cannot speak for this software specifically in terms of security, but from my experience with it, it is if nothing else the quickest, leanest and most stable page builder pound for pound (and I’ve used just about all of them). I have yet to have an issue of any kind that could possibly be interpreted as a threat or even as data loss.

    1. I have been working with Page Builder Framework Theme, that mainly designed to work with PageBuilder – and it’s looks ok to me.

  3. Hi, in regards of Sticky Headers – when it’s will be possible to adjust the Header while on Scroll?
    so let say, I have big fat Header with Big Logo, menu, search, social icons. I would like to make it Sticky, but I don’t want all of the elements be the same while I’m scrolling. I want Logo and menu become smaller, height of header smaller, no search, no icons, maybe change the background color while on scroll? can you suggest anything at the moment or is there anything in roadmap?

    1. I am not Elementor but I’ve done this using Elementor by writing new CSS for the entire section that toggles elements off by class name. In that scenario, before now, we made the header sticky ourselves, which involved waiting till the scrolling crossed a certain distance down the page and adding a class to the header. Since you can add a class to just about anything in Elementor, I just took the things I wanted to show only in sticky mode and made them “display:none;” by default, and “display:block;” once the class kicked in.

      I haven’t used the new sticky header here but it may work off of the same principle, so I’d check to see if anything like that is happening when you do it.

      The only caveat is that it temporarily looks goofy in the back end to have two of everything (not giving you much of a accurate view of how it’ll present) when you’re trying to still preserve everything temporarily to be able to edit it, but that’s an issue with the approach, not the builder.

  4. Oh my gosh.. this is, orgasmic? yeah.. that is a really cool expression, thank you guys, because of you I al ready delete half of the plugins I have been using, and now.. in a way.. i would just take Underscores as a theme… jajajaja I will only miss the hooks on Generate press, that’s it.. 🙂

    1. ohh sorry I for get, Take in consideration to Change the “merge tag” that the acceptance check box generate on the forms. At the moment is “ON” but is better something like “acepted and confirm” or “read and acepted” or just “acepted” that “on”, special on mailchimp. Or better, if we can personalized by ourselves. Is because of the RGPD 😛

  5. We’re using premium theme based on Elementor, and talked to theme developer about this Header/Footer features, their reply was like, Header & Footer is hard-coded. Still, we can change these Header/Footer as per this post??

  6. Ha ha ha… Nice one…


    I was desperately looking for such a feature as I was sick of being limited to the themes header & footer customisation functionality, but no longer.

  7. Hi Elementor !
    Great great great work ! Congrats!
    One question though : is it possible to roll back ? When de-activating a custom header, there seems to be no navigation anymore. The only way to get the original navigation back is to disable Elementor and Elementor Pro.

    1. Of course! Just delete the header and footer templates or remove their conditions. It is important to make sure both header and footer templates are disabled, because some themes require changing them both and not just one of them with Elementor.

  8. Wow wow wow — JUST what I wanted too!! This just gets better and better!! Well done — love it!
    I have been building and designing websites since 2001 and have been through everything from hand build HTML websites and then table based websites using CSS to style it up using Adobe Dreamweaver and then I started using WordPress and Themes but for the past 2 years I have been able to EASILY build custom and unique looking Responsive Flat websites with Elementor Pro! Its been a wild ride from Floppy Discs – Dial up internet all the way to now — I feel like a pioneer!

  9. How does it integrate with the Woocommerce cart function?
    And how about header / footer markup regarding search engines?

  10. Hi ben, excellent work is a great help for the design process, Thanks. I have a question, it is possible to place the shopping basket icon in the header like others e-commerce?

  11. What is your commitment to maintaining that elementor-hello-theme? I used to use Toolset’s Starter Theme a lot so I could use their Layouts plugin to design all the page templates including headers and footers but they really don’t do anything to maintain the template and I’m not sure it is even up to date from a security perspective.

  12. Hey Ben. I’m officially confused. Why do you actually need a theme? It seems you can build everything you need now you have archives, single post, header/ footer, 404 etc in combo with an Elementor Canvas page. Not sure what is ‘missing’ that enforces the requirement of a theme. Might be missing something obvious though…?

  13. Hi guys,
    Well done on this addition. Mya question is how can we add a Cart /Shopping Basket to the menu/navigation. As we’re trying to explore the woocommerce features and we’re stuck on that.


  14. Elementor team thank you for your hard work! I’m well aware of how much time it takes to push out these features so I have no problem with what I’m seeing! Keep up the hard work. You guys are making it harder for me to use any other platform! ?

  15. Hi Ben,

    Hope you can include a block for a vertical sticky header the next round. Not easy to get that right. The footer expansion looks awesome, thanks.


  16. These developments look great. One question with footers, is there the option to make these sticky? i.e. stick to bottom of the screen rather than at the end of a long scroll? Thanks!

  17. Hi Ben, yup that did the trick. Thanks for that!
    And thanks for enriching the WP community and making our lives easier with such a product 🙂

  18. Nice!, BUT…be careful not to add to many features. Many startups forget about their key competitive advantage and get lost in feature fatigue. Your key differentiator is simplicity to quickly designing new content in WP. Your key differentiator is not to being able to do everything. Love the product so far!

    1. Speaking as a consumer and as a developer, the real takeaway from me is that Elementor doesn’t get in the way of making things like other builders do. Instead, it just “falls away” and I don’t really feel it there after a while.

      They could add a hundred more features and it wouldn’t affect my enjoyment, because I’m still only doing one thing at a time, and the *approach* is the same. That execution is, to me, their key differentiator. They make the -doing- part of things more BS-free.

      Even when there are “too many” of a thing, like an increasing list of widgets or templates, it’s searchable. So added controls or things like that are just a matter of getting used to their presence by doing it a couple times. Long before I complain about the newly consumed real estate, I’ll be jumping up and down for one less clump of stuff to maintain or overwhelm beginning users.

      Different strokes and all, but consolidating so much of the process into one tool feels like progress to me, especially since it blends so nicely into how WordPress operates anyway. It piggybacks on top instead of doing its own thing like other themes, builders and combos.

  19. really great
    we wold like to see more options for the stiky header like transperency nav over slider and full width and height hamborger that open all over the screen
    the thing is where i work we use constncons with elementor but whenever we want to putt nav over slider revulotion and simulrs slider only template is an optional right know.

  20. Hi Ben, I been waiting to be able to this a long time and have to compromise. I have a suggestion, if you please, transparent headers over sliders/banners. This is one my most requested feature from my clients. Pretty please!

  21. Hi Ben,

    Thanks for keeping up the good work. Is it possible to embed a shopping kart icon in the Elementor menu?

  22. Hey, first you’re amazing !!! A wonderful plugin and people who work around the clock. Keep going!

    Now, I’ve designed a header through Elementor, marked it as sticky, and yet when I scroll through the page it does not stick …

    what could be the problem?

  23. When I go to my templates there is no header or footer tabs available?!?! Only content, and section options? I have updated to the new version. Any help would be greatly appreciated!

  24. I have been using Elementor for over a year now and had no security problems what soever while some of my fellow associates have had problems with their other front end builders…they now use Elementor. This is the way to the future!

  25. Ben, Are the Header & Footer Builder features only in the Pro version?
    If so I am ready to sign up.

  26. Hi Ben

    Thanks for the reply! So far we absolutely LOVE the footer we made by Elementor, created in half an hour orso. The header, however, is much more difficult because of the cart function and Astra not being so flexible as Elementor.

    Any idea about a launch date for the upcoming release (or a rough estimate)? If this is in the near future, we’re better off waiting.



    1. In the words of Randy Jackson, “Heel, dawg, heel!”

      We were -just- making a site with Elementor where we did the sticky part ourselves. It’s crazy how much you guys are packing into this thing. I hope the price doesn’t jump up too much (well, I mean, if it needs to to keep you guys in business, that’s okay =) but if it does, I am glad I got in now because this is insanely affordable for all it does.

      Genuinely, I see plugins that have a single small task, or add-ons for existing plugins, that people try to sell for 100-400 dollars a pop based on their license. This is, what, 49, and for many sites could be all you need to get a small business a web presence in just a couple days.

      I hate to sound like a shill but it really is just that good at making the process simple and fast. It’s also the most fun I’ve had constructing pages, which makes my job easier.

  27. If you have a single-page layout with header items that only use anchor links, how would you get the pointer options to display correctly? Currently, all items appear as though they are being hovered over…

      1. You mean the pointer effect? If so, that’s already set to none. The hover styles in the style tab are already cleared as well, yet the menu still doesn’t dismiss itself when tapping on an anchor link.

        Additionally, there is a bug on desktop when the sticky header is enabled where the page will slowly scroll up on its own…

  28. i am like trying to make a header with logo at the top and nav menu below it. It looks fine on the PC version. But in the mobile version i want my logo and nav menu button in the same line (Parallel to each other). But i am not able to change the header containers in the mobile version. Is it possible to have different style of headers on pc and mobile with current tools available?

  29. This is an amazing feature, thank you so much! I do not see the scrolling effect option in the section advanced tab in order to create the sticky menu. Any ideas on why that is showing up?

  30. Hi,

    How can i make my transperent sticky header change color as i roll down my website so i it wont be transperent and i couls see it?

    Thank you

  31. hi there. so im testing these new features.. awesome. but: if i set a footer (active site-wide) the theme’s header is also removed. why?

    1. This is true to some themes, because of how the template is created in the theme level. When you edit the header you have to edit the footer as well.

  32. Hi,

    I’m having a problem on some of my pages since adding the sticky header where the page automatically starts scrolling to the top. Even when scrolling down it just seems to scroll up until it reaches the top. Support has told me its a bug, any idea when it will be fixed?


  33. HELLO BEN.

  34. Hi Ben, Why is it that I don’t get the “Display Conditions” pop up after I update/publish?

    I’m having problems with the header/footer only showing in the page I created it. I’m using GeneratorPress Premium as my theme.

    Please help! Thanks in advance.

  35. I would like to make both the top bar and the menu sticky. But when I scroll, they always overlap. Is there a solution for this? Or could you implement one?

  36. Why isn’t it possible to design only the footer with Elementor, but not the header?
    When I do it, the original header disappears

  37. Does the header and footer feature only work with Pro version of Elementor? I can’t create a header template with the Elementor version I’m using. Or could it be because of the WP theme I’m testing? I beleive the theme is called 2017 (twenty seventeen). Thanks!

  38. Hi
    I have created a footer for the first time. It is set to show on entire site bit is not showing on the home page. Any ideas why?

    1. It’s OK I have sorted it. Had the home page template set to Elementor Canvas instead of Elementor Full Width

  39. First of all, thanks for a great plugin!

    I have had problems with my footer for 2 weeks now. Always when I’m trying to make changes and save it, I get Forbidden 403. Saving changes for header works well. I tried to make another footer with same look, doesn’t help. Any advices?

  40. Just downloaded the pro version of elementor. Tried using the header feature with the U-Design theme… headers would not show up. Now I downloaded the “Hello” blank elementor theme… still not showing up. Do I have to put code in to insert the header?

  41. Hello Ben,
    Is it possible to use only Footer template? I love my own header with my theme. But when I use the Footer template which design with Elementor. My header also gone.

    So, isn’t it possible to design only the footer with Elementor, but not remove the header?

    Thank you.

    1. Hey Elementor Team, I’m wondering the same. Can I change only footer without header? I love my header, it fits perfectly.

  42. WordPress it self is very secure (the core files), yet most issues and vulnerability is come from plugins (not the wordpress it self) Although there are many complaints about wordpress out there, yet the fact is wordpress is still get the most market share in terms of CMS, so these complaints proved nothing. Just be cautious with plugins, read reviews and when the plugin was recently updated before using it in productions site, and of course our common sense play a big role here. As for elementor? I’ve been using it since beta version, and I have no security issues while using it (and no, I’m not affiliated with elementor, just a satisfied customer).

  43. Elementor is probably the best page builder (or may be a theme builder now) in the space! I cannot argue with that! one problem though, why in GSC these headers and footers (which is built by using elementor) is not detected/displayed as wp header and wp footer? and yes, I mark it as header or footer in HTML tag within elementor, any clues? did I miss something?

    1. Hi, The reason for this is that your theme partially supports the theme builder functions.

      We require both header and footer to be implemented together because most themes have an opening DIV tag in the header.php file and a closing tag in the footer.php file.
      If Elementor replaces the original footer file without the header, some DIV tags will remain open causing UI issues.

      To fix the theme, locations have to be added by the developer of the theme:

      You can either contact the support of your theme, or you can add the code given in the aforementioned guide in your child theme.

  44. I’ve built 3 headers for mobile/tablet/desktop, and have shown/hidden them appropriately. I applied each header to the “entire site” via Update>Add condition. However, the desktop header appears to be hidden. As I reach the tablet breakpoint the tablet header appears, however again as I reach the mobile breakpoint the mobile header does not show. Any idea why this might this be happening and how it might be fixed? The site is on OceanWP theme. Thanks

  45. Hi ! I’m having little issues with elementor header :

    First : I want to add some php (for the login button and user dropdown menu ) can I do it and where should I find the template files of the header template

    Second : the header is displayed perfectly on every page but there is the profile page where it displays the theme default header how can I overwrite the page template.

    thank you

  46. No freaking help at all. All I wanted to know was how to edit the damn header. I CANNOT find it. Elementor is horrible. I am sorry I am using it. What a nightmare. the fact that I can just click on the header and change it is ridiculous.

  47. Hi Elementor,

    I’m writing about Elementor pro. I just bought it today and in the dashboard it does not contain ‘My Templates’ in Elementor menu.

    Help need fast.

    Best regards

  48. Hi Ben. I created a custom header using Elementor’s Theme Builder. When I designed it, I checked that it looked right using the viewing options for Desktop, Tablet and Mobile. They all look perfect. But when I view them live, the header only shows up on the Desktop. On Tablets and Mobiles it just show my logo and the hamburger menu. None of the customizations I made for those show up. I have Elementor Pro, and I’m using OceanWP theme.

  49. I tried to do that, but it says I haven’t signed up for any premium packages. Which is kind of true. I got my Elementor Pro from the person who started created my website. She has an unlimited package. So how do I get support?

    1. We provide support to our Elementor Pro customers. Therefore, the person who created your website needs to contact us, or alternatively transfer you his license.

  50. Hello, this video is no longer valid. I’ve been trying to find a current video that will properly guide me how to make a header, but none of the pages or videos I’ve found are accurate… is there somewhere we can get tech support?

    1. *(also, I’m unable to submit a ticket… it keeps saying “please enter a url” … but my url is entered… please help)

          1. i finally played with enough different options to figure out creating a header… but now the header I created wont show on my main page, even though I followed the video directions for creating criteria and assigning it to my “home” page (the only page I’ve created so far)

            Is there another set of settings somewhere else that also needs to be used?

            Also, does Elementor offer support? or is this the support forum?

  51. Hello ! I’m having little issues with elementor header :

    How to disable or hide footer section for a particular page. or How can I use another footer section on some particular page?

    1. Yes, you can create 2 footer sections on the page, and select only one of them to show/hide, depending on the device. We wrote about it here. Although this doc is about columns, it is exactly the same principle for sections.

  52. Great plugin, but is there an issue with Elementor 2.5.9? Just upgraded and Header & Footer Builder no longer works correctly. Now there’s a blank white screen when trying to edit existing headers and footers that were created prior to the upgrade.

  53. Hi there,

    I bought the PRO version and it is AWESOME, however, i was perplex when i found that we cannot have a transparent header, c’mon guys make this happen.




  54. hello, I´ve made the custom header templates and the menu doesn´t see on movile. How can I fix it? it seems as if it where behind the background…


  55. hi there, I downloaded the elementor-plugin “header & footer” theme-builder that you offer here.

    one simple question to you. Is that plugin a free addon in addition to the main and free plugin of elementor?

    I didn’t find that plugin at the wp-community! I tried it to find too at the backend of wordpress by searching the plugin

    thanks a lot for giving me an answer.

  56. Hi,
    I have been using Elementor Pro, the only thing I didn’t find is how to create custom button on header. Could you pls tell, how can I make custom “Register” button on the header?

Leave a Reply

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

Want to learn how to build better websites?

Join 1,365,209 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.