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 Business Toolkit, Essential Toolkit, 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.
- FAQs – Astra Header/Footer Builder
- Create a Header with Astra Header Builder
- Create Mobile Header With Astra Header Builder
- Create a Footer with Astra Footer Builder
- Add Multiple Elements in Header Footer Builder
Feel free to drop your suggestions in the comments below.
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!
Awsome! Can’t wait!
Thank you much.
When this new version will be introduced into the Market
Very soon this month! 🙂
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 🙂
Hello Michael,
The beta version has been released. Do give it a try on your staging environment to see if it helps. 🙂
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…
You’re most welcome, Celestine!
Glad that you liked it. Stay tuned on Astra’s Facebook Group! 🙂
Amazing!
Потрясающая работа. Вы делаете потрясающую работу! Спасибо за то что Вы есть!
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 🙂
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.
Astra will have filters using which you can increase the number of times you can use any element.
Finally!!!
Will it be possible to create a Desktop hamburger menu with this new feature?
You can do this already by changing the breakpoint under Header – Primary Menu
No, unfortunately, this is no longer possible 🙁
No worries, we have the Toggle Menu Element for the Header Builder released in v3.3.0.
I hope that helps. 🙂
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.
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!
Yup.
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 ?
There is support for an off-page(Off-canvas) menu, if that’s what you’re asking.
Can you elaborate on this off-page menu? Something that opens up like a mega menu from an icon?
Hello Geoffrey,
We meant the Off-canvas Menu, you can refer more about the same here.
Hope that helps. 🙂
Is it a good assumption that the headers and footers won’t be editable/usable within Elementor?
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.
You can download the beta and test it out yourself
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.
Amazing.. Beautiful
Hello there,
Glad that you liked it! 🙂
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?
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]!
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.
Hello Indike,
This will be available in the theme’s Customizer for the Free as well as Astra Pro version. 🙂
Hello Indike,
You will be able to create with the Header or footer section right from the theme’s customizer. 🙂
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.
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.
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.
For what date will it be ready?
Very soon, Alberto!
We are planning for the beta release early next month. Stay tuned on our Facebook group! 🙂
You are The Best! I look forward to it, early next month 🙂
And the final upgrade?
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.
Great news! I am struggling with making a transparent sticky header and hope this feature makes it easy…
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?
Hey there folks 🙂 this looks excellent 🙂 will there be an option for transparent, sticky headers too?
Hello Linda,
Yes, all the existing options will be manageable in the new Header Footer builder. 🙂
Awesome! I’ve been waiting for it for a long time!
Glad to hear that, Massimo!
We are close to the beta release stay tuned on our Facebook Group! 🙂
Is there a choice to have a vertical menu?
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.
This is AWESOME!
Awesome, looks great! I want to try it once is available
Thank you.
Hello Sebastian,
Glad that you liked it! We are close to the beta release early next week. Stay tuned on our Facebook Group. 🙂
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).
You can use the customizer’s native mobile view option and design a completely different header just for mobile.
Can you still build mega menus in the new header builder?
Yup.
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.
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!
Detailed videos and documentation will come with or before the release. 🙂
Hello Yuvraj,
Yes, we do have published a few documents already, feel free to open a ticket and let us know what else would you like to be added. 🙂
Nice ! Will it be still fully compatible with the use of a page builder like Beaver Builder for the content of the pages ?
I’d like to know this also.
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.
Much Appreciated, Can’t-Wait
Awesome! The sooner the better I could use it now.
Is this reliant on Gutenberg being enabled?
Hello Doug,
Not at all, you will simply be able to work with the new Header Footer Builder in the Astra theme’s Customizer. 🙂
Excellent! Thanks for the reply!
Ooooooo, NICE!
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
Will we be able to remove mega menu on mobile devices? That`s something that I am looking forward to … 🙂
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.
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. 🙂
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!
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.
Cannot come out soon enough!!!! PLZ BRING IT!!!!!
How do I access the header builder? Will it just become available when I update my Theme?
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. 🙂
Hi there.
They plan to add global colors for gutenberg in the new update?
Cheers!
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. 🙂
Hey Guys,
This post dates from about 2 weeks ago. Any estimate for releasing it?
Thanks,
Jordy
Hello Jordy,
The beta version has been released last month. Do take it for a spin and the final version will be released soon! 🙂
Glad to see this being developed and released. It is much needed.
Thank you so much, Matt! 🙂
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.
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!
Hello Jetmir,
So glad to hear about your experience with our theme! 🙂
This is amazing! It opens a door to better designs, happier clients, and more income. Thank you Astra Team. Great job!!!!
Hello Steven,
So glad to hear that! 🙂
Stay tuned you will soon we will be able to give it a try.
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.
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.
support vertical navigation drag and drop…?
Not yet! But, sooner. 🙂
Free version or PRO?
Hello Mushtafa,
It would be available in the free version with some more features and options in the Pro version. 🙂
Can’t-Wait
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
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.
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
Hello Nitin,
We haven’t released the Header Footer Builder yet.
Stay tuned to our Facebook group for details on the release. 🙂
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.
Glad to hear that, Holly! 🙂
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?
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.
Can we insert the cart icon (with counter of products), log in icon and whislist icon in this Header Builder? How we can do?
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!
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! 🙂
EXCELLANT WORK GUYS
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! 🙂
Its awesome !! I am waiting for the last updated date include in the single blog post in next update.
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. 🙂
Is this out yet?
Hello there,
The Beta version is live do check it out! 🙂
Will this work with your mega menu Astr-Pro add on? That’s pretty critical.
Can we use shortcodes in the header or footer ? I’d like to be able to pull in Elementor customer blocks.
Apologies, I meant custom blocks.
Great job Team Astra! Can this be used on WordPress themes outside of Astra?
Hello Joshua,
Sorry, this feature is only based on the Astra theme. If you are using Elementor, we do have a free plugin – Elementor – Header Footer & Blocks.
Where can i send a bug report? 🙂
Hello Dieter,
Feel free to open a ticket through our Support Portal and we shall look into the same. 🙂
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.
Hello Alain,
I hope you have gone through the comments policy. If you are looking for help please open a Support Ticket we will be more than happy to answer your concerns.
Regarding the Comparison chart, yes we do have an article on the same – https://git-staging.wpastra.com/docs/elements-in-header-footer-builder/
Hope to hear from you soon! 🙂
When will it release?
Hello Mahamed,
The beta version is available, please find the links above or in the Downloads section of Store.
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
Is this dependent on the release of FSE into core WordPress?
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!
Hi,
When will this be released? Not the beta version, but the final version.
Looking forward to trying it!
Hello Pete,
The Stable version 3.0 is releasing early next week! 🙂
Glad thank you, i find this topic in google 🙂
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.
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.
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. 🙂
It will still be good to add mobile menu breakpoint option. Thank you.
Hello there,
Thanks for the suggestions, we have heard you and we will be adding this option soon. Stay tuned! 🙂
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.
Any progress on AMP compatibility for the new Header & Footer feature?
Great but how to disable footer?
Hi, how does this apply to all the pages? I have my header on homepage but the rest all empty header.
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. 🙂
Hi, Is there anyway to just have one column in a header? I would like a banner to go across the entire page.
Hello Julie,
Well, not exactly. You might want to use the Custom Layouts module of Astra Pro to design the Header as required.
I have both Astra Pro and Elementor Pro. This gives me a lot of options in creating headers & footers. If I am already using the Astra Pro custom layouts for headers & footers with the Elementor page builder, are there any reasons to switch to the new Astra header/footer builder?