Astra Header Footer Builder is the new and advanced way to design a creative header/footer in Astra.
The Header Footer Builder feature has been released in Astra 3.0.0 version.
This article will help get you started and to understand all available options with Astra Header Footer Builder.
Before starting you can read FAQs about Header Footer Builder here.
Getting Started
Once you have the Astra theme (3.0.0 version and above) installed go to Astra welcome page under Appearance > Astra Options. Here you can see a small notice and a button that says 『Use New Header/Footer Builder』.
Click on the button to start designing with New Header/Footer Builder』.
Then visit the Customizer by clicking on 「Go to Customizer」. Once you are in the customizer you will see new options for Header Builder and Footer Builder.
Editing Header
Header Builder contains –
Visual Header Builder – with an above header, primary header, and below header.General tabDesign Tab
You can add and manage header elements with Visual Builder and customize them from the General and Design tab.
Visual Header Builder
Visual Header Builder is a flexible and advanced header builder. Changes you do in the visual builder will instantly reflect on your header design.
It gives you 3 rows to build a unique header structure – Above, Primary, and Below;You can click on the plus sign to add different header elements – Button, HTML, Widgets, Social, Primary Menu, Secondary Menu;You can drag and drop elements to different sections to place them in the required position.
Note:
Site Identity section can now be found under the Customizer > Header Builder > General > Site Indentity & Logo
Configure styling for above, primary, and below header
Click on the setting icon on the left side of each header section and it will take you directly to styling options.
General Tab
Elements you add in the visual header builder will be available under the General tab. You can click on the individual element and edit the settings.
Design Tab
This will give you design options for header width and spacing.
Header Types
You will observe one more tab under the General tab i.e. Header Types This will give you options to configure different header types.
With the Astra theme, you can enable the Transparent Header and configure it.
With Astra Pro, you can have options for Sticky Header.
Note:
We also have other elements available like WooCommerce Cart, EDD Cart in our Header Builder. For the same, you might require some other plugins that need to be added.You can find the complete list here.
Note:
The Sticky Header is the Astra Pro feature, so this option is only available when Astra Pro Addon is active.
Design Mobile Header
With Astra Header Builder you can design a header look on responsive devices.
Read the article here to know more.
Header Builder Elements with Astra theme and Astra Pro
Astra theme offers an entire structure for a new header builder. While you can unlock advanced features with Astra Pro.
Here is a list of header elements that are available with the Astra theme and Astra Pro
With Astra
ButtonHTML 1HTML 2LogoPrimary Menu Secondary Menu SearchSocial
With Astra Pro
Note: You can extend the number of elements further in Astra Pro. Read more.
Button 1Button 2HTML 1HTML 2LogoPrimary menu Secondary MenuSearchWidget 1 Widget 2Widget 3Widget 4