How To Create a Header With Astra Header Builder?

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 (4.0.0 version and above) installed go to Astra welcome page by clicking on Astra from the WordPress dashboard. Here you can see the Header Builder option under Quick Settings.

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 tab
• Design 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. 

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. 

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 

• Button
• HTML 1
• HTML 2
• Logo
• Primary Menu
• Secondary Menu
• Search
• Social
• Widget 1
• Widget 2

With Astra Pro 

Note: You can extend the number of elements further in Astra Pro. Read more.

• Button 1
• Button 2
• HTML 1
• HTML 2
• Logo
• Primary menu
• Secondary Menu
• Search
• Widget 1
• Widget 2
• Widget 3
• Widget 4