How to Create Astra Page Headers

Fancy white scroll banner with text: Create Astra Page Header

If you’ve wondered how to create Astra page headers, this post is for you.

We’ll cover the following topics:

Astra Page Header Sample Designs
Astra Page Header with Custom Size Background
Astra Page Header with Full Size Background
Create Astra Page Header
Design Astra Page Header
Add Page Header Display Rules
No Page Header
Merge Site Header
Display Breadcrumbs

Before we get started you need to have the Astra Pro plugin installed and activated on your website.

To do so go to the dashboard Appearance > Astra Options and activate the Page Headers Module:

Astra Page Header Settings
Activate Page Headers Module in Astra Pro

Now we’ll see just how powerful this module is.

Astra Page Header Sample Designs

There are several design options when you create Astra page headers that will give you different looks.

And sometimes it helps to see what the end result is before diving in to how to accomplish it.

So let’s take a look at what the different designs are. And then I’ll discuss how to achieve that look.


Astra Page Header with Custom Size Background

First up is the page header layout where I can specify white text that is center aligned on a custom size blue background:

Image link opens larger media image that shows Codefetti main menu and blog page header
Astra Page Header with Custom Size Background

Here is the same page header using a background image:

Image link opens larger image showing main menu and blog page header with graphic background
Astra Page Header with Custom Size Image Background

Finally, here is the page header merged with the site header:

Image link opens larger image that shows Codefetti transparent header with graphic background
Astra Page Header Merged with Site Header

You see three different looks available to you by just adjusting the page header settings.


Astra Page Header with Full Size Background

Next, there is the page header layout with full size background.

This header is using the centered white text on a blue background with the primary menu at its default:

Image link opens larger image showing main menu and blog page header with blue background
Astra Page Header with Full Size Background

Or the same full size page header with a background image instead of color:

Image link opens larger image showing main menu and blog page header with transparent background
Astra Page Header with Full Size Background Image

Finally, here is a sample of the page header merged with the site header:

Image link opens larger image showing page header merged with site header
Astra Page Header Merged with Site Header

So the first thing to do is decide what your page header will look like.


How to Add Custom Page Headers to Astra

For my website I wanted a blue background with centered white text as the styling for each of my page titles like so:

Image links to larger graphic showing sample Astra page header
Sample Astra Page Header

And I initially achieved that effect through some basic custom CSS:

.my-banner {
	background-color: #095aa5;
	color:white;
	font-family:serif;
	font-size:60px;
	padding:10px;
	margin-bottom:10px;
}

But after a little research I learned how easy it is to create an Astra page header to do the exact same style and assign it to pages and posts without having to apply custom CSS.

Here’s how.


Create Astra Page Header

Once you’ve activated the Page Headers module, you’ll need to create a new page header:

  1. Go to Appearance > Page Headers and click the Add New button.
  2. Give your Page Header a name. For our example, we’ll call it “Main Page Header.”

You’ll notice 3 tabs:

  • Page Header – this tab is for the layout of your page including title and background color, alignment, and size.
  • Site Header – this tab is for specifying whether to merge the page and site headers, whether to use a different logo, and for styling the primary menu.
  • Display Rules – this tab defines which pages, posts, portfolio items, etc. on which the page header should display.
Image link opens larger image showing Astra page header tab settings
Page Header Tabs

We’ll explore each of these starting with the Page Header and Display Rules tabs.

Then we’ll take a look at Site Header last because it’s a bit more involved.

Design Astra Page Header

To create Astra page headers you’ll need to choose from 3 layout options: center aligned, inline, or no page header.

I’ll choose center aligned and then set my page header to be full width using white text on a blue background:

Image link opens larger image showing Page Header settings
Sample Page Header for Codefetti Website

Steps to create this layout:

  1. Select Layout
  2. Select title text color of white
  3. Select background size: custom allows you to control the background top and bottom padding
  4. Select background color
  5. There is also an option to select a background image which will override the page or post featured image. I’ll leave that unchecked for now.

The settings above enable me to create the following sample header:

Image link opens larger image showing blog page header styled with white text on blue background
Page Header on Blog

Next, I need to decide which pages and/or posts will display this header.

Add Page Header Display Rules

That’s where the third tab comes in. It has settings where I can choose rules for displaying headers.

Click the Display Rules Tab:

Astra Page Headers Display Rules
Page Header Display Rules Tab

Then click the Display On drop down. And check out all of the options I have for displaying this page header!

Image link opens larger GIF image with display rule options for page header
Display Rule Options

I want the page header to show on all pages with the exception of the Front Page.

So I’ll update the settings as follows:

Image link opens larger image showing display rules for page header
Page header Display Rules Selected

Then I’ll click the Publish button.

And now all pages except the front page on my website use this sample page header:

Astra Page Header

But what if there are pages where you never want a page header to show?

Instead of going through the Display Rules and adding an exclusion rule, there is another option.

You can create a “No Page Header” layout.

Here’s how.


No Page Header

To create an Astra page header that uses the “No Page Header” layout, go back to the Page Header tab.

Select the third layout which is “No Page Header.”

No Page Header Layout

That’s it. There are no other settings or options for you to choose.

This is simply a layout that will allow you to specify certain pages where you may not want to display a custom header.

For example, I’ve chosen No Page Header for my contact page, which now looks like this:

Image link opens larger image showing contact page without page header
Contact Page with No Header Page Header

Finally, we have the option to merge the site header with our custom page header.

Here’s how.

Merge Site Header

Let’s say I want to merge my page header with my site header and primary menu to create this type of seamless header:

I also want to use a different logo and merge the background color behind the primary menu.

The following settings will do just that:

Merge Page Header with Site Header Settings

I simply need to choose the Site Header tab.

Then I check the box to merge the page header with site header.

And I check the box for a different logo and upload my white logo.

But my options don’t stop there!

Customize Primary Menu

Once I merge the site and page headers, I can completely redesign the primary menu so it is styled differently for each page that uses this header.

Still in the Site Header tab I see options to customize the primary menu.

So let’s change the background of the primary menu to white and the text to blue:

Site Header Primary Menu Settings

And here is what my primary menu looks like after applying those settings:

Sample of Site Header Merged with Page Header and Custom Primary Menu

So the above example shows a site header merged with the page header.

And the primary menu has been customized with a white background and blue text.

You’ll note that there is a variety of settings for customizing the primary menu when you merge the site header with the page header.


The last setting to explore on Page Header is the Display Breadcrumb setting.

By checking that setting, you’ll have breadcrumbs displaying in your site header:

This is a great feature for sites with extensive navigation. So helpful for your users!

Summary

By now you should have a better understanding on how to create Astra page headers.

You can create some interesting headers for your website by experimenting with the basic settings.

Create your page header and choose a layout. Then apply the text and background colors/images and specify display rules for your page header.

Finally, if desired, merge the site and page headers for a seamless look. You can further customize your primary menu on the merged header.

I hope this post has been helpful to you!

Please feel free to post your comments and questions below. I’m happy to help!


Print Friendly, PDF & Email

Similar Posts