Astra 3.0 brings a new visual – Header/Footer builder. This will give you enhanced experience of designing header and footer on your website.
If you are existing Astra customer and updating Astra from version 2.6 to 3.0, this article will help you to get started.
Note (for Astra Pro users) – Make sure to update both Astra theme and Astra Pro plugin to version 3.0 to use new Header/Footer builder.
How to enable a new Header/Footer builder?
Once you update Astra theme and Astra Pro to version 3.0, you would first need to activate new Header/Footer builder.
To activate it, visit Appearance > Astra Options and click on button Use New Header/Footer Builder.
This will activate the Header/Footer builder and add new options in the customizer. You can visit customizer and explore new options under the Header Builder and Footer Builder tabs.
Note that, new Header/Footer builder brings a new structure to the customizer. This offers an advanced visual builder that replaces old header and footer settings. With this, your old header/footer design might have some changes to adjust to the new structure. Read this article further to see all expected changes with a new structure.
In case you wish to continue with old header/footer settings you can skip activating new one.
How can I rollback to the old header and footer settings?
In case you activated new Header/Footer builder and need to go back to old settings and design, you can rollback easily.
Go to Appearance > Astra Options, click the button Use Old Header/Footer to switch back to old controls and design.
You can continue working with Astra 3.0 and still use old header and footer settings. But we recommend to switch to new Header/Footer Builder for future benefits.
Why I should not rollback and continue using the new Header/Footer Builder?
Astra’s future updates will include enhancement for the new Header/Footer builder only.
Enhancements and fixes for old header and footer controls will no longer be released with Astra future updates.
Moreover, the new Astra Header/Footer builder offers the most advanced way to design creative headers and footers. It is an easy and powerful visual builder that gives you a great user experience.
So we recommend you to switch to new Header/Footer builder and create advance header/footer for your website.
What will I retain?
When you switch to the new Header/Footer builder, your old header/footer design will be adjusted in the new 3-row structure. This new structure will try to retain the exact old header/footer design. You might observe small changes in header/footer design but most of the elements and design will be retained.
Some of the header/footer elements that are primarily needed will be retained. Like logo, primary menu in the header and copyright, widgets in the footer.
Few of the things will change. Those things are mentioned below.
What will change, and what should I recheck?
Once you switch to the new Header/Footer Builder do check the following things. Since a new structure is introduced with a visual builder, few of the old structures might change.
1. Any custom CSS added to the header/ footer will no longer be effective.
This is because the new structure contains new CSS classes and targets. So custom CSS written with old targets will not work. You can check and target new CSS classes and write CSS again if needed.
2. Check mobile and tablet view.
Switch customizer view to tablet/mobile and check if it looks the same. New Header/Footer builder allows you to design mobile header separately from the desktop header. You get new controls in the mobile header. This might slightly change the mobile/tablet header view. Similarly, check the footer on the mobile and tablet view.
3. Elements in header and footer.
Many new elements are added to a new Header/Footer builder structure that can replace old ones. Example – Copyright section in the footer previously used Text section. While in a new structure you will see new dedicated copyright elements instead of text.
So do check all elements added to both header and footer.
Above, below and primary header/footer now have dedicated spacing options. When you click on the gear icon you will find this option under General tab.