How to use the Astra Theme Header Generator

Astra theme provides a mature header design method, which is also the first place that every visitor will see. Astra Theme Header Generator It helps you to easily and happily create excellent headers without any coding knowledge. Customize and add logo, site title, style, menu, button, social icon, etc.

Old Wei shared How to use the Astra Theme Footer Generator The header and footer convey important information to visitors, so we should pay attention to it.

1. Where is the header generator

After installing the Astra theme, the header generator is integrated by default.

Install Astra Theme After that, log in to WordPress background>Appearance>Theme, search for Astra, install and enable it.

WordPress background>Astra option, click "Header Generator" on the right.

2. Header Generator

Astra header generators include:

• Site title logo: whether to display the site title, site slogan, site logo, logo width, etc
• Button1: CTA button of website
• Main menu: website main menu
• Transparent headers: settings Astra transparent navigation
• Fixed header: Buy Astra pro plug-in Only later.

3. Transparent Header

Lao Wei specially shared an article about Astra's transparent header Astra transparent navigation How to set the content used.

4. Design

• Full width: expand the title from one side of the screen to the other
• Content width: restrict the display of titles using content width, while the title background will still extend from one side of the screen to the other
• Margin: add space to the left and right of the title and the background

5. Visual Header Generator

At this time, we can see the header generator at the bottom of the real-time preview page, which includes three independent parts. You can add any element to these three parts, make an arrangement and combination, and drag the mouse to generate a beautiful and functional header.

• Click the+in the three line headers to add various elements.
• Main Header: The middle part. It is often used to add important elements such as logo, main menu, search, shopping cart and account.
• Above the header: located in the upper line, it is generally used for secondary menus, social icons, CTA buttons and other elements. Or use HTML code/short code to add some notices of current discounts, breaking news or website visitors.
• Below the header: The line below is often left blank.
• The top and bottom headings are useful supplements to the main heading. This area is used to add all the elements and information needed.

Click the "Gear" icon on the left to customize the attribute parameters of each part.

General: height of PC end, tablet and mobile phone and whether they are hidden

Design：

Bottom border size and color: add a bottom border by setting the border size to separate the title from other parts or website content. After setting the border size, additional options for selecting the border color (bottom border color) will appear

Background: set the header background color;

Padding: add padding on one or more sides of the header, that is, increase space between the edge and the content;

Margin: Add margins on one or more sides of the header. Add space between the title and another area (other titles, page/article content, screen edge, etc.);

Each header can customize the desktop and mobile device separately, and add different elements for each view. The position of the element can be changed.

Off Canvas

It is used to edit mobile terminal menus such as tablet and mobile phone menus.

As shown in the figure below, this menu needs to be switched to a tablet or mobile device to start editing. Add the required elements to this menu, and drag them up and down to set the order.

Click the "Gear" icon to open the following tabs:

General Settings

• Header type: popup Flyout (menu flies in from the right or left side of the screen), full screen or drop-down list;
• Drop down target: click the drop down target (Icon) or link (Link) to select whether to open the submenu
• Content alignment: set the Off Canvas part to the left, center or right;

6. Summary

The Astra theme header generator is very powerful, and even the free version provides so many practical functions.

Only the fixed header can be used if you need to purchase the Astra pro theme, and the others are free of charge and constantly updated.