Introducing the Simplest Header Footer Builder with Astra!

Introducing the Simplest Header Footer Builder with Astra!

Astra Header Footer Builder is available in BETA! Read more at the end of this post.

Get ready!

The drag and drop Header and Footer Builder is coming soon to Astra! ?

We are thrilled to introduce the most awaited drag and drop Header and Footer Builder. It opens all-new design possibilities and gives you the freedom to customize navigation of your website with a theme.

And yes, without coding! ?

Youโ€™ll soon be able to effortlessly build any type of Headers and Footers visually and more efficiently in record time! (In the Astra way, as you know). ๐Ÿ˜‰

The Header builder lets you add a logo, primary menu, secondary menu, HTML code, buttons, social icons, and more in the headers. While the Footer builder lets you add a footer menu, different widgets and social icons in the footer.

The builder gives you complete control over the positioning and styling of header and footer elements with a live editor.

Iโ€™m so eager to show you all the possibilities it entails, so here I go.

Design Stunning Headers at the Speed of Your Imagination!

Build Customized Headers to Match Your Website Style

Do you wish to play around with headers and design them just like you design pages? The Header builder gives you various styling options to customize all the elements you could include in your header.

You get styling options to manage margins, colors, borders, and typography you can control how each item in the header may look. This enables you to create headers thatโ€™ll look far different than the default ones that come with the theme.

Add Multiple Headers & Include All Necessary Elements

Do you want to add multiple elements in your header? Imagine a header with a website logo, site title, menu, social icons and a call-to-action. Wonโ€™t that look messy together?

You can add above and below headers to include these elements according to your preference. This makes sure that your headers will look neat and contain everything thatโ€™s necessary.

With the Header builder, you can add and modify an above header, below header, a transparent and sticky header too.

Improve Website Navigation with Multiple Menus

Larger websites may need two menus. Take our website for example. We have several pages with different priorities and therefore have two menus that make navigation easier.

The Header builder allows you to add two menus in the header section. You can choose to add them within the same header in different columns or different headers altogether.

Some Examples of Headers You Can Build Using the Header Builder

Design Complimentary Footers to Your Website Design!

Creating Footers Was Never So Effortless!

Have you enjoyed building footers as much as you do building the entire website? Very often we see people ignore this part of the website. But, wait. What if this is made a lot more fun and easy to play around with?

Astraโ€™s Footer Builder gives you complete freedom to position footer elements and customize them to suit your website. You can fetch widgets, social icons, footer menu and more with complete design freedom.

Organize the Footer Elements in Different Layers

Wondering what I meant by layers? Well, like headers, you can add multiple footers too. This lets you sort necessary elements and distribute them in the main, above and below footers.

The Footer Builder lets you build primary footer alongside extra footers simply by adding and positioning elements within them. You just need to manage the spacing and style to make it look amazing. 

Design Valuable Footers with All Necessary Elements

A footer is not just a place to add navigation links. You can add a lot more like your business address, contact details, social icons, a call-to-action button and more.

The Footer Builder lets you add components like widgets, social icons, a button, and footer menu to make sure the footer has everything to complement the context of your website.

Some Examples of Footers You Can Build Using the Footer Builder

Have Questions? Weโ€™ve Answered a Few Below!

1. Will the Header Footer Builder be a part of the free Astra theme?ย 
Ans: Yes! You will be able to build headers and footers with the free Astra theme. The Astra Pro addon will add more powerful features youโ€™ll love.

2. Will I be able to manage the above and below headers with the Header and Footer Builder in the free Astra theme? 
Ans – Yes. You will be able to add above and below headers using the Header Builder. Simply drag and drop elements you wish to add in them.

3. Can I customize the transparent and sticky headers with the Header Footer Builder too? 
Ans – Yes. You will be able to build and design a Transparent header or a Sticky Header using this builder.

Astra Keeps Getting Better!

We aim to make Astra better, faster and easier to use with every update. Whether it’s a new feature, some improvements, and optimization. The most recent example is the optimized customizer and color controls in Astra 2.6.0.

Our team has worked tirelessly to perfect Astra Header Footer Builder. Every element of this new feature has been designed to help you build better headers and footers with minimal effort.

We’d appreciate if you try the Beta version and share your feedback with us.

First Beta Version Is Released! Get It Now!

Weโ€™ve released the first Beta version of the Astra Header Footer Builder in the Astra theme and Astra Pro plugin.

We invite you to try and test the beta version. You can now download beta zip for the theme and plugin.

Download the beta version of Astra Theme here.

If youโ€™ve already purchased the Growth Bundle, Essential Bundle, or Astra Pro, you can download the beta version of the Astra Pro addon from the downloads page on the store account.

Note: We strongly recommend you to use the beta version of the theme and plugin in a test environment only. Do not use it on a live site. This will let you try new features without worrying about what breaks. Know more about the Astra beta version and Automatic Beta Updates for Astra.

Helpful Resources for Astra Header Footer Builder

Here are some article links that will help you to get started with Astra Header Footer Builder.

Feel free to drop your suggestions in the comments below.

Join 304,719 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

144 comments

        1. Any news about a release date ? We’re waiting for the update to start a new website so we won’t have to build headers and footers with elementor ๐Ÿ™‚

          1. Hello Michael,

            The beta version has been released. Do give it a try on your staging environment to see if it helps. ๐Ÿ™‚

  1. Celestine Davids

    Great job. I’m really anticipating this update.

    I can see Astra becoming a page builder as well in the not too distant future.

    Kudos guys…

  2. ะ’ะธั‚ะฐะปะธะน

    ะŸะพั‚ั€ััะฐัŽั‰ะฐั ั€ะฐะฑะพั‚ะฐ. ะ’ั‹ ะดะตะปะฐะตั‚ะต ะฟะพั‚ั€ััะฐัŽั‰ัƒัŽ ั€ะฐะฑะพั‚ัƒ! ะกะฟะฐัะธะฑะพ ะทะฐ ั‚ะพ ั‡ั‚ะพ ะ’ั‹ ะตัั‚ัŒ!

  3. Sujay this is AWESOME! I was little bit concerned lately… the new Kadence theme came out and Astra did not get any new features for some time… but this! This changes a lot! Thank you!
    I hope you will also take the Schema Pro to the next level and catch up with the competitors? WooCommerce integration, more snippets etc.? ๐Ÿ˜‰
    Great work!
    Canโ€™t wait to see it live ๐Ÿ™‚

  4. As I can see from the videos, when I use an element in a position, that element is not available any more for reuse.
    If I want to put the social icons on the top bar and place it in the left column and in the right as well, what can I do? Or maybe I want to use the HTLM twice.

        1. No worries, we have the Toggle Menu Element for the Header Builder released in v3.3.0.

          I hope that helps. ๐Ÿ™‚

  5. This is fantastic! No wait, this is Astra Fantastic! LOL! Seriously, this is a huge feature that will make building a website a pleasure. Thank you good folks for making this happen. Looking forward to seeing what the Pro-version can do.

  6. Can’t wait for this! Hope it will be possible to have different headers for laptop and mobile – like logo only on mobile and site title and logo on tablet and laptop!

  7. Cool, i suppose, i’ll have to try it out to see if it’s any better than the already existing header and footer building plugins, that use Elementor to make them.
    And i suppose there is no support for vertical menu’s ?

      1. Can you elaborate on this off-page menu? Something that opens up like a mega menu from an icon?

  8. I tried to look at your video for the header and the footer but in the video the cursor is travelling at warp speed. There is no way that I can get even the slightest idea of what is going on.

  9. Great Feature time saving, but currently it can be achive using Astra hook and elementor combination. Waiting for a dual sidebar and blog magazine grid.

  10. Awesome! This is very exciting!! Can you create multiple headers, say one to show on all pages and another that appears only on a specific page?

    1. Hello Chris,

      Glad to see your excitement with the Astra Header Footer builder.

      If you are looking to create multiple Headers, we do have Custom Layouts in the Astra Pro plugin using which you can create different Headers for specific pages. ๐Ÿ™‚

      Feel free to reach out to us through our Support Portal if you have any concerns or email us at [email protected]!

  11. Is this done only in Elementor? I need one with Gutenberg. Because on my website I could reduce a few milliseconds of loading time by removing the Elementor footer and adding a basic block editor footer. I have the premium version of Astra.

    1. Hello Indike,

      This will be available in the theme’s Customizer for the Free as well as Astra Pro version. ๐Ÿ™‚

    2. Hello Indike,

      You will be able to create with the Header or footer section right from the theme’s customizer. ๐Ÿ™‚

  12. Looks Great!
    Will it have to option to greet a logged in user or say ‘hello guest’ to unlogged users?
    That would also be a huge step forward for community website.

    1. Hello RanE,

      We do have options like HTML or widgets if you are using any script you can add them to achieve this requirement. ๐Ÿ™‚

      You can achieve this in the existing theme and Pro options and with the upcoming Astra Header Footer builder too.

      1. Hey,

        Thanks for the reply! I don’t really know how to use scripts. Is there documentation or a simple guide on how to implement that? Preferably with Memberpress?

        I saw in a different theme (I think it was Kadence) that there’s an element you can drag into the header and it works instantly. That would be the best solution for non-coder such as myself.

  13. Hi, there’s not much mention of how well it performs across different screen sizes. As long as it’s easy to make multiple column footer layouts look great across all screen sizes, then I can’t wait.

  14. I can see from the videos that you cannot use the same element twice.
    So what if I want to use the social element or the HTML in 2 different spots on header?
    How would I able to do that?

  15. Are these header/footers based on blocks or widgets? Hopefully they’re block based since WordPress will be eventually moving to full site editing with Gutenberg.

  16. This is exciting news – I’m already looking forward to this new set of features!

    Since you asked for some input & thoughts from the community, I think it’s worth adding that it’s vital for a header/footer builder to have the option for mobile variants.

    Headers, especially, play a very different role in mobile than they do on larger screens. The default WordPress approach is to just responsively restyle the same content for all screens – but a header/footer builder should have the option to show or hide specific elements dependent on the device type (or screen size).

  17. This is awesome, can’t wait to use it. Will we also be able to edit the mobile menu toggle/slide out as well? That would be a cool feature.

  18. Please place step by step youtube videos out there for us “slow learners”. One for sticky, one for transparent, and footers too. Some of us grew up before computers and mobile phones. I bought a pro license so you could help me forever!

  19. Nice ! Will it be still fully compatible with the use of a page builder like Beaver Builder for the content of the pages ?

      1. Hello Isabelle / Mark,

        The Header Footer builder is built into the Customizer of the theme. If you would like to design Custom Headers we do have the Custom Layouts module which provides options to achieve this requirement.

    1. Hello Doug,

      Not at all, you will simply be able to work with the new Header Footer Builder in the Astra theme’s Customizer. ๐Ÿ™‚

  20. Rolf Fleckenstein

    Hi Astra

    Great to hear that! I’ve got a lot of speed problems with the header of Elementor the more complex it becomes -I hope that with your new header builder I can create a header that is loading faster. But on the other side your header bulder should offer as much features as Elementor header builder does (width of the columns, colours, animations, 3 sizes, etc.)

    I am very excited to try it as soon as possible

    With kindest regards

    Rolf Fleckenstein

  21. Looks great.

    I’d like to see a feature that other rivals like Kadence don’t have and that’s the ability to modify the number of columns in a header row without resorting to CSS.

    1. Hello Nic,

      Glad that you liked it!

      Currently, we have three columns in which you can add various elements of the Header section.

      Please reach out to us with some examples and we will be happy to discuss further and introduce further enhancements in future if possible. ๐Ÿ™‚

  22. This is a fantastic update! I’m very much looking forward to playing around with the new header builder as that is one of the things I love about Astra so much. Can you give us an idea of when it’ll be released?

    Thanks!

    1. Hello Paul,

      Glad to see your excitement. ๐Ÿ™‚

      We are finalizing a few things as we speak, and we are very close to the beta release mostly in the early part of this month.

      Stay tuned on our Facebook Group for latest updates and announcement about the same.

    1. Hello Morgan,

      Currently, the beta version is available [Links in the Post] once the final version is released you will be able to update to the 3.0 version to find in the update of Astra theme. ๐Ÿ™‚

    1. Hello Ramiro,

      Not sure we have understood your query. Are you talking about the Core Gutenberg, we are unsure about that. While we do have plans for the Global Colors in the Astra theme after the release of the Stable version which is coming up next week. ๐Ÿ™‚

    1. Hello Jordy,

      The beta version has been released last month. Do take it for a spin and the final version will be released soon! ๐Ÿ™‚

  23. You should of said coming soon. Not coming very soon.

    Coming very soon is like maybe 2 to 3 days but it’s been almost 25 days still you are saying coming soon.

    I hate waiting like this just tell that exact date please.

  24. Jetmir Ajredini Tech-it

    Amazing.. Beautiful Sujay

    There are more and more functions and it keeps getting better, faster and more user-friendly.
    I keep looking at different themes and solutions but Astra Theme Pro is and will be the best on the market now and in the future!

  25. This is amazing! It opens a door to better designs, happier clients, and more income. Thank you Astra Team. Great job!!!!

  26. Delighted to hear about these developments. I’ve been working on a site for a local community group and would have liked this functionality a few weeks ago! Better late than never and looking forward to seeing it in action and being able to play with it. ๐Ÿ™‚ Happy to be a tester if you are looking for that.

    1. Hello Des,

      Glad to see your excitement. Feel free to test the beta versions [Links in the post above] do share your thoughts/feedback we would be very to hear from you.

    1. Hello Mushtafa,

      It would be available in the free version with some more features and options in the Pro version. ๐Ÿ™‚

  27. On the face of it this looks like a good move as long as it does to lead to code bloat like all those Page Builders and the pagespeed that Astra is known for starts to suffer, that would be a shame.
    Gutenberg blocks are slowly providing the same functionalities that only Page Builders provided previously so I would say heading fully down the Page Builder route would be a big mistake.
    I see the ability to add blocks into any part of the theme as the next big step for Gutenberg so maybe that is what you guys should be looking at to make Astra even better.
    Good luck

  28. This is awesome! Reminds me of how the Neve theme handles the header area. On the topic of headers, I do have a concern regarding navigation with a large amount of sub-menu, and sub-sub-menu items nested under a parent menu item. I have run into an issue with items becoming inaccessible within the viewport height on desktop mode. As of now, I have [partially] solved the problem with some custom CSS code, which added scrollbars to the sub-sub menu areas with varying heights of the containers (depending on how far down they are placed in the sub-menu,). But it’s not perfect. I am wondering if this is something that your development team will be willing to implement in a future release. Perhaps a way to control this in an intuitive way within the customizer settings.

  29. I found nothing new in the website’s customization for footer after the update of the Astra theme. Can you guide me, please?

    Note:
    I am not using Elementor or Gutenberg.

    Thanks & Regards,
    Nitin

    1. Hello Nitin,

      We haven’t released the Header Footer Builder yet.

      Stay tuned to our Facebook group for details on the release. ๐Ÿ™‚

  30. Wow….I actually canโ€™t wait for this!!! Iโ€™m finally getting around to working on my own website and this is coming just on time! I think it will make things much easier.

  31. I currently use the “header” and “footer” in the custom layout function to build my header and footer. Is there a smooth transition to the header&footer builder?

    1. Hello Jack,

      The Header Footer builder replaces the Primary Header and Footer which can be built from the customizer. Regarding the Custom Layouts, they do not have anything to do with the Header Footer builder.

  32. Can we insert the cart icon (with counter of products), log in icon and whislist icon in this Header Builder? How we can do?

  33. Just tried the beta Header & Footer Builder features, it’s not ground breaking but it will makes it so much easier to create custom headers and footers. I much prefer this to the current method.
    On of the reason I switched from Genisis to Astra is because of little improvements like this that makes it more intuitive and therefore much faster to build great looking functional websites.
    Keep innovating but please don’t add bloat!

    1. Hello Lee,

      Thanks for sharing your thoughts! We will soon be releasing the stable version early next week. Do let us know your thoughts about the final outcome. Cheers! ๐Ÿ™‚

    1. Thank you so much, Michael!

      You will be able to find the beta version in the downloads section of our store. Do give it a try! ๐Ÿ™‚

    1. Hello Suman,

      Glad that you liked it! The beta version is out, do give it a try and share your thoughts.

      And regarding your other concern, feel free to open a ticket with us so that we can help you out. ๐Ÿ™‚

  34. Hi,
    First of all, congratulations with this famous Astra buildin Header and Footer builder. I really like it. ๐Ÿ™‚
    But I have 3 questions if I may?
    First, can I have 2 mobile responsive menus in the header? Now I have one primary menu who is mobile with toggle button and the second one is a language switcher (Polylang). But I don’t found options to set also this secondary menu as a mobile menu with also toggle button. Or is this not possible?
    Secondly, is there somewhere a possibility to put a row in the header as a sticky row with a fixed menu for example?
    And last nut not least, is there a comparation list with the differences between this new header and footer builder in the free version of the Astra theme 3 and the professional version?
    Thanks in advance.

    1. Hello Mahamed,

      The beta version is available, please find the links above or in the Downloads section of Store.

  35. Thanks for great news and best themplate.

    1) Does this builder slow down the site? We are now abandoning elementor, as it slows down sites very much and is hosting resource-intensive..
    1) Are there any plans for a minimalistic and fast content builder? Maybe only for Custom layouts… It will be fantastic

    1. Hello Joseph,

      Not at all, it is independent of the FSE release of WordPress. You can simply use it with the free Astra theme from the 3.0 version once released. ๐Ÿ™‚

      And use Astra Pro to add more features into the Header Footer builder!

  36. It’s a cool feature, but it broke two of my sites. For some reason some of my sites automatically opted into the new header, while others offered it as an option. I can’t figure out how to opt-out now. The issue is that I was using Astra hooks which are no longer part of the new header.

    I agree with others that this is a more elegant way of handling custom html in the header. I just wish I could revert to the old version until I have time to make the migration.

  37. Now I have a reason to recommend Astra to my friends. I think Astra is now a complete theme. Personally, I don’t want Astra to develop a Self-Builder. Light and fast is Astra’s strength.

    Astra’s biggest advantage is that users can freely select other builders (Gutenberg, Elementor, Beaver) to use with the theme.

    Rather than that… I hope that various additional add-ons (Like #Login Signup Addon, #WooCommerce Page Design Addon) will continue to be added.

    Thank you for bringing this amazing theme into the world.

    1. Hello there,

      So glad to hear your thoughts and experience with our Astra theme.

      Yes, we are introducing a few more elements like the Language Switcher, Clone, Global Color Pallete in the Astra theme. We hope you like it. ๐Ÿ™‚

    1. Hello there,

      Thanks for the suggestions, we have heard you and we will be adding this option soon. Stay tuned! ๐Ÿ™‚

  38. This is a really great add-on to the Astra Themes. Well done team. I am seeing a potential issue and not sure if it should be shared here but will anyway. I have added colored backgrounds to the header bars. However, the colors do not show up on the home page but will on every other page? Is this just an issue with my site or am I missing something? Look forward to your response.

    1. Hello there,

      Yes, if applies Sitewide. While if you are trying to use it on Specific Homepage, we would recommend using the Page Header/Custom Layouts module to design Headers for specific pages.

      I hope that helps. ๐Ÿ™‚

  39. Hi, Is there anyway to just have one column in a header? I would like a banner to go across the entire page.

    1. Hello Julie,

      Well, not exactly. You might want to use the Custom Layouts module of Astra Pro to design the Header as required.

Leave a Comment

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

Scroll to Top

Download is Just A Click Away!

Be among the first to try the beta version of Astraโ€™s Header Footer Builder. Filling the form will ensure youโ€™ll be the first to learn about updates and features.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.