How To Create a Header With Astra Header Builder?

No results found. Try again with different words?

Search must be at least 3 characters.

    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 (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.

    Header and Footer Builders

    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 Builder

    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. 

    Header Settings

    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.

    Header Types

    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 

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

    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
    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    [EXTENDED] Cyber Monday Sale

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    Don't Miss Our Biggest Discount

    ***LIMITED TIME ONLY***

    100% Unconditional Money-back Guarantee

    Purchase today & lock in your deal!

    Scroll to Top
    Now choose your preferred
    page builder addon
    Choose your preferred page builder addon

    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.