Header & Footer Builder Is Here

Elementor now offers never-before-seen flexibility to visually design the header & footer areas, including a one-click Sticky Header feature, 25+ brand-new stunning header-footer blocks and full compatibility to virtually any WordPress theme.

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

The header and footer areas are the backbones of every website. 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 header & footer Blocks that will help you get started easily, as well as a one-click Sticky Header feature.

Design Your Own Header & Footer

From now on, you are no longer limited by your theme’s restrictions. You don’t have to settle on any pre-made header or footer. By bringing the power of the Elementor editor to these areas, you can design any header or footer you can think of, and 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 Elementor Theme Builder, things are going to be much faster.

brand-new blocks

Unlimited Header Layouts

Choose a header from a huge array of designer-made blocks, readily available in the Template Library. Customize it any way you like, and give it your own touch.

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

accessible navigation

Sticky Header

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.

Conditions

Multi-Headers & Footers

Want to designate different headers and footers to different pages of your 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.

Landing page? Give it its own header and footer.

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.

brand-new blocks

Eye-Catching Footer Layouts

Check out the wide range of footer blocks: some are simple and minimalistic, others are extensive and full of detail. Pick your favorite and start customizing! 

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

Mobile Editing

100% Responsive Headers & Footers

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

Conclusion

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 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 is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

121 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…

    Indeed!

    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.

    Thanks
    JP

  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.

    John

  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.
    John

  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.

    Thanks!

    Gilles

    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?

    Thanks

  33. HELLO BEN.
    I HAVE TRIED TO REPLACE MY FOOTER AND BY DOING IT MY HEADER DISAPPEARED, OR IS THAT IT IS NOT COMPATIBLE WITH MY THEME, EYE USE A PRIMIUM THEME.

  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.

  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.
      https://developers.elementor.com/theme-locations-api/

      To fix the theme, locations have to be added by the developer of the theme:
      https://developers.elementor.com/theme-locations-api/registering-locations/

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

Leave a Reply