How to Create Astra Page Headers
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:
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:
Here is the same page header using a background image:
Finally, here is the page header merged with the 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:
Or the same full size page header with a background image instead of color:
Finally, here is a sample of the page header merged with the 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:
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:
- Go to Appearance > Page Headers and click the Add New button.
- 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.
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:
Steps to create this layout:
- Select Layout
- Select title text color of white
- Select background size: custom allows you to control the background top and bottom padding
- Select background color
- 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:
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:
Then click the Display On drop down. And check out all of the options I have for displaying this page header!
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:
Then I’ll click the Publish button.
And now all pages except the front page on my website use this sample 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.”
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:
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:
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:
And here is what my primary menu looks like after applying those settings:
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.
Display Breadcrumbs
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!