Astra Pro: Configure A Stunning Header

Headers are an essential part of any article, blog, or website. Readers navigate through the material, and customers click on your website, only if they are interested in the header. Headers can, therefore, make or break your online authority. Here are some amazing benefits you can get out of an attractive header

How Can A Stunning Header Benefit Your Blog/Website?

Attractive headers can serve you by

1- Making Your Page Scannable

Headers on your page will give the readers an idea of the content. They can quickly scan through and get to the part that interests them instead of not reading it altogether.

2- Increasing the SEO Ranking

Search Engines love the headers filled with the right keywords. A well-drafted header is the best way to increase your SEO rankings and, in turn, your potential leads, clicks and, sales.

3- Navigating In Voice Search

As the recent trend of voice search is gaining momentum, headers have become a valuable tool to navigate information. When someone uses a voice search to find any information, the search engines pick up the words and display results with matching headers.

Here is a step-by-step guide on how you can configure a stunning header with the Astra Pro theme. Follow the procedure to make a header of your choice in no time

How To Configure A Header With Astra Pro?

You can create a page header with Astra Pro, including a background image, in various colors and breadcrumbs. You can also choose to design a site header according to the suitability of your page header. Before using these features, make sure you have the Astra Pro Plugin installed on the WordPress website.

How To Install Astra Pro?

Follow the simple steps mentioned below to install the plugin of Astra Pro on your WordPress

Install the Astra theme

  • Login to the Store of Brainstorm Force
  • Navigate to the Accounts and then click on the Downloads (Accounts > Downloads)
  • Select the option of Astra Pro Plugin to get a zip file installable on the computer
  • Install the zip file on the WordPress website and activate the Astra Pro plugin
  • Add the Addon Astra Pro license

Configuring Page Headers With Page Header Module 

Using the module f Page Headers in the Astra Pro theme, you can configure headers in any style and design of your choice. Follow the below-mentioned steps for doing so

Step 1

After installing Astra Pro, Open your WordPress dashboard and navigate to the option of Appearance. Activate the module under “Astra Options.”

WordPress Dashboard > Appearance > Astra Options

Step 2

To create the page headers, visit the “Page Headers” area in the Astra Options like this

 Appearance > Astra Options > Page Headers

Step 3

After the activation off Page Headers Module, go the option of Settings to get begin designing

Step 4

Under the settings, you can view the option of “Page Headers” in the Appearance tab. From there, you can make a new header with the name of your choice. Next, you can further customize it with the various options available for page header, display rules, and site header. Select and try settings of your choice and make a perfect header.

Customization Options For Page Headers in Astra Pro

Astra Pro provides the customization options in the following domains for designing page headers


If you are creating a header with any page builder, you can make your page header

Stick: It dictates if your header will become sticky or not

Stick On: It will make your header stick on the mobile/desktop

Shrink: If you stick your header on the top end of the page, this option will decide if it will shrink or won’t. Shrink effect removes the bottom and top space of the header

You can also arrange the title of the page with the following layout options

Centre Aligned: It will make the page title and also the breadcrumbs (if activated), lie on one another in the page center.

The front end view of this option can look like this

Inline: It will make the page title and also the breadcrumbs (if activated) towards the right and left side

The front end view of this option can look like this

Display Breadcrumbs

You can either choose to display breadcrumbs on your website or not with this option. Breadcrumbs represent the site’s current user location and help users navigate from top to bottom in the link hierarchy

It will be visible on your front end like this

Color and Title of Breadcrumbs

You can choose the text for the breadcrumbs on your website and can also select the colors for it as shown

It will be visible on your front end like this