How To Create a Stunning Astra Theme Header?

Headers are vital for any content on your web page as they serve not only readers but also search engines. Stunning and well-written headers have the potential to attract readers to your post and increase clicks. The headers can range from H1 to H6, depending on the hierarchy of your content. The main title of your page or article is H1, while H2 is the subheadings that make sections in your documents. The H3 to H6 headers provide further subheadings into your document under H2. Before moving on to how the Astra theme can help you create stunning headers in your content, let us consider the importance of headers

Table of Content:

• Why Are Headers Important For Your Web Pages?
• 1. Topic Identification
• 2. Accessibility
• 3. Search Engine Optimization
• 4. Makes Pages Scannable
• 5. Mobile Devices Usability
• How To Create A Stunning Header With Astra Theme?
• Pros and Cons Of Using Astra Theme For Headers
• Final Words

Why Are Headers Important For Your Web Pages?

Here is why you have to make sure to include headers in your text

1. Topic Identification

Headers play an essential role for the search engines and readers to pick the keywords they are looking for in the article. The primary header in the text helps to identify the topic of material, and the subheadings navigate the reader to their area of interest.

2. Accessibility

People today mostly use screen readers to go through any content. Headers in any content are easily picked up by screen readers and are essential for effectively using screen readers. They also allow the readers to jump from one heading to another to get to the required topic.

3. Search Engine Optimization

When headers make your topic identifiable, search engines rank your page for search queries. The more you make your headers well-drafted and filled with appropriate keywords, the more the search engines will increase your ranking.

Here is a guide on using the free Astra theme features to create stunning headers for your pages. Follow the procedure to make a header of your choice.

4. Makes Pages Scannable

By using headers, you are making the pages as scannable as possible. It is common knowledge that no one reads the whole article — especially line by line. That’s why it is important for pages to have headers. Out of all the headers, the most important header is the first header as it sets the tone for the whole post or page.

Next comes the subheading as it divides the content into chunks which are better for consumption. Not only that, the structure of the article is shown by the headers and sub-headers. In short, the right set of headers means that you can attract the audience with your engaging content.

5. Mobile Devices Usability

With time, mobile is becoming more dominant than ever. It is no doubt that sites will get more traffic from mobile than ever before. So, if you put your content right, you are bound to gain viewers from mobile as well as desktop.

In short, headers optimize the webpage for not only readers but also the search engines.

How To Create A Stunning Header With Astra Theme?

First things first, to access the Astra Header Builder, log in to your WordPress dashboard, and from the lefthand sidebar, go to Appearance > Astra Options > Header Builder as shown in the image below:

Click on it, and it will take you to the Header Builder section in the WordPress customizer. The interface should look similar to what we have here:

As you can see, the header builder is divided into three vertical sections, one stacked on top of another. You have the “primary header” in the middle with an “above header” at the top and “below the header” at the bottom. 

Each header has its own set of “header settings”, which you can access by clicking on the gear icon to the left of the header.

From here, you can customize the Header height, border size, background, padding & margin.

Also, notice how each header is divided into three sections. You can add and remove header elements from these sections to make them more featureful. As of the time of writing this tutorial, you have access to 12 header elements:

• Site Title & Logo
• Primary Menu
• Button 1
• Button 2 (pro)
• Search
• Account
• HTML 1
• HTML 2
• Secondary Menu
• Social
• Widget 1
• Widget 2
• Widget 3 (pro)
• Widget 4 (pro)
• Cart

Now, to add a new Header element, hover your mouse over that section and click the “+” button. This will bring up a list of available elements. Pick the one that you want to use, and it will get added to the header section.

Similarly, just click on the “x” button beside the header element to remove a header element.

You can also move around the header elements between header sections by simply dragging and dropping.

All the header elements you have used will show up in the left-side menu, right under the General tab. Under here, you’ll also find the option to change the Header type. Free users only get the option for “Transparent Headers.” However, if you are using Astra Pro, you can enable “Sticky Headers.”

From here, you can access the specific settings of the header element.

Right beside the General tab, we have the Design tab. From here, you get a few basic design options to change the Width and Margin of the header. More advanced settings are available to Astra Pro users.

The Astra Header Builder also allows you to fine-tune how the site header will look on different screen sizes like desktop, mobile, or tablet. To pick a different screen size and customize it, use the device selector at the screen’s bottom-left corner.

As you can see, on a smaller screen, you get an additional area called “Off Canvas.” This allows you to save space on the header and move some of the stuff off-screen that visitors can toggle if and when necessary.

And that about wraps up our quick guide on how to create a header using the Astra theme. Once you’re done adding all the Header elements and making the necessary design changes, click the publish button, and that’s it. 

Your newly created Astra header is now up and running on your WordPress website.

Astra Header Builder: A quick overview of available options

In the above tutorial, we created a very basic header using the Astra Header Builder to give you an idea of how the feature works. However, there are tons of tools and options within the Astra Header Builder to help you create more complex and stunning headers.

Here’s a quick look at the various options you have at your disposal:

Primary Header

The default header in Astra is the primary header. It will show a logo and also a navigation menu that is customizable with various primary header settings in Astra.

Just install Astra and go to the Header section to choose the primary header option and get to the customization.  Header > Primary Header

You can make use of the following customization settings

Layout

The layout settings will manage the position of the logo for your page. There are three different positions available in Astra for the logo

Left Logo

The logo in this setting moves to the left side of the navigating menu. It is a typical style of positioning a logo.

Right Logo

The logo in this setting moves to the right side of the navigating menu.

Center Logo

The logo in this setting moves in the center above the navigating menu. It is a good option in the case of a long menu.

Width

Width settings manage the width of the header for the text. You can customize your header width as

Full Width

In full-width settings, your header will be stretched from both ends and fit your browser page size.

Content Width

In content width settings, the header adjusts according to the container width set, and you can set it by selecting the following

Global > Container > Width

Border

By selecting the border, you can add a border under your header and customize its color and width.

Mobile Header

The navigating menu, on responsive devices, changes into a hamburger. Therefore, the primary header on these devices will only display the hamburger menu and the logo. You can customize the layout of the logo concerning the menu in the responsive widgets.

Stack

In the stack option, the logo will move above the hamburger menu. Opting for the stack can prove useful if you have a big logo.

Inline

In the inline option, the logo and menu will be in line with each other and can be a good option in the case of a small logo.

Color Themes

The primary headers can be presented in various colors using the Astra theme. The global colors will be available for free, but you need to use the addon plugin of Astra Pro for more advanced features. For using global colors in Astra, you need to go under the Appearance tab, select customize, then global, and finally choose the colors option. Appearance > Customize > Global > Colors

Typography

The typography settings for the page or site apply automatically to the primary header with Astra Theme. You can select and customize typography settings by going to the Appearance tab, under global. 

Appearance > Customize > Global > Typography

Transparent Header

Transparent headers are an easy way to create beautiful and attractive headers for your page. The background of the primary header will be set to transparent and will pull the content of the page to the top. The content of the page and the primary header will merge, which means that the top portion of the content will become a background of the transparent header. For instance, if the image is on the top section of the page, it will go up to become a background for the transparent header.

How To Add A Transparent Header?

The transparent header formulates in two quick steps to make your page attractive 

Step 1

You can find the option of transparent header under the customizer and then can edit it

Appearance > Customize > Header > Transparent Header

Step 2

Under the transparent header options, you can enable it for the whole website, choose the border at the bottom, color schemes, and the logo layout

Enabling On Complete Website

If you want the transparent header settings for the whole website, you can enable this option by ticking the checkbox. If you tick the checkbox, there are still some exclusion rules that you can enable for specific posts or pages. You can disable the transparent header option for the following pages

Disable on Archives, Search, and on 404

The transparent header setting can be disabled on these special pages by ticking the checkbox.

Disable on Blog Index Page

The front page of your blog becomes the blog index page if you change the settings from your homepage. For making a blog index page, you can go to homepage settings and under the tab of “Your Homepage Display,” choose “Your Latest Posts.”

Your Homepage Display > Your Latest Posts

If you want to disable the settings of the transparent header on this blog index page, you can tick the checkbox for this.

Disable on Pages

If you want to disable the transparent header’s option on all the pages, tick the checkbox.

Disable on Posts

If you want to disable the transparent header’s option on all the posts, tick the checkbox.

Colors and Background

You can customize the background and color settings of your transparent header with the following available options

• Background
• Site Title
• Menu
• Submenu
• Content

Pros and Cons Of Using Astra Theme For Headers

Pros

• Opportunity for the transparent header is available
• The headers of both full width and content width are available 
• Color and typography customization is available

Cons

• Sticky header option is not available
• Advanced color features are not available

Final Words

Astra is one of the best themes out there. And, if you are using it, then you are on the right path for maintaining your site.

The free theme of Astra allows you to design beautiful and attractive headers for your web page. The option and customization of a Transparent header are also available, which can enhance the viewer’s experience. Overall, a lot of header customization choices in the Astra theme let you create a stunning header.