Are you tired of using the default header/footer that came with your WordPress theme? Does it need a remodification? Have you ever seen the easy settings of the Astra header and footer builder? Let’s discuss all this stuff in this blog post.
A unique header and footer will give you more attention from website visitors. When handling an authority website or well-known brand, tweaking the header and footer would be one of the essential things you need to do.
This article will teach you how to create custom headers and footers with the Astra WordPress theme. Keep reading this article if you want a simple way to build a custom header or footer for your WordPress/WooCommerce website.
But before going deep into the article, let’s learn why you should edit the header and footer of your website.
Why Editing Header & Footer Is a Great Idea?
The header and footer are two of the crucial elements of every website.
When someone lands on your website, the first thing he would notice would be the header section. By default, the header section will contain your logo, a navigation menu (and social media icon widgets or search icons if your theme supports it).
Adding your important links here will always help you. This way, users can easily navigate to specific pages without any hassle. On top of that, if you represent a brand, making the header unique would be a great idea. It is an excellent way to stand out from the crowd.
The same plan goes for the footer section.
Most themes will divide the entire footer section into 3 or 4 areas. And insert custom widgets to these areas to make your website more accessible to users.
Now you know why editing the header and footer is a great idea. Let’s move to the next step.
Why Use the Astra Header & Footer Builder?
Astra is one of the highly customizable WordPress themes in the market. We all can agree on that. While the free version of Astra (Astra Lite) limits some customization options, a premium subscription will unlock the theme’s full potential.
A page builder is used to create complex designs easily. Since the page builder plugin comes with a user-friendly dashboard, using it to make custom designs would be a cakewalk.
Since the Astra premium theme got every customization option under the theme panel, a dedicated page builder would be unnecessary. Once you have activated the Astra premium subscription, just enable/disable features like:
- Header & Footer Editor
- Typography Control
- WooCommerce Optimization
- Color Controls
- Blog Layout Options
- Navigation Menu Controls
And so on.
On top of that, a page builder can slow down your WordPress website/WooCommerce store if it has messy code. So, when you are an Astra theme user, you may say goodbye to bulky page builders!
How to Build Custom Headers and Footers with Astra?
The default WordPress customer offers limited features when modifying the website’s header and footer. That’s where the Astra Theme Builder comes in.
It is more likely to customize the header and footer without adding extra plugins or tweaking a single line of code. This section will show you how to properly build an exclusive header/footer.
The first thing you need to do is, install and activate the Astra premium plugin. Since the header & footer modification is a premium feature, Astra premium is necessary. Skip this step if Astra premium is installed and configured already.
Once you have activated the plugin and verified it with a valid license key, move forward.
On the left-hand side, see the Astra settings. You can also enable extra features like a sticky header and navigation menu to make the header-building process more exciting.
Now, start customizing the header and footer of your website or blog.
How to Create a Header with Astra Theme?
The very first thing you should do is open the WordPress customizer. Click “Appearance” > “Customize.”
Once you have landed on the customizer, open the “Header Builder” option.
On the net page, you will see all the customization opportunities. The left side will show elements you can tweak, while the right will show you a live preview of all the modifications.
Looking deeper into the left-hand panel, you will see two main sections.
- Elements
- Design
You will see all the elements you have added in the header in the Elements section. If you have a menu, logo, social media, etc., added to the header, they would be displayed here.
The second option shows the header width and margin customization options.
Now when you are ready to start customizing your header, move to the right-hand side, and at the bottom, you will see the builder options.
Look at the three major header options:
- Above Header: The elements will be displayed above the header.
- Primary header: Primary header where you add the site logo, navigation menu, and so on.
- Below Header: The elements added will go below the main header.
Adding New Elements to Header
To add new elements to the menu, click on the + button.
For example, we will add a new social media icons widget here.
Once you have added the widget, you can configure it from the left-hand side panel.
To add new social media handles, choose one from the dropdown and click the Add Social Icon button.
You can list social media icons there. Once you finish it, the icons will be placed in the header.
Similarly, add new elements to your header. You may do the same with the above and below header positions.
Tweaking Individual Elements
As we mentioned, you can see all the elements you have added to the menu on the left-hand side. If you need to tweak an item, just click on it.
It will open the individual element editor to tweak everything.
For example, if you want to edit the color settings of the item, go to design options and modify the CSS.
Under menu customization, see the color options, font customization, spacing options, and so on. After tweaking those options, scroll down to the Header Types section.
This option would help set up a transparent and sticky header. Using these customization options, you can make completely customize your WordPress header.
Here is an example of a header that’s customized using the Astra theme editor:
That’s it!
This is how you can create a custom header with Astra. Let me show you another example of a header designed with Astra header builder.
Astra Header Design Example (Video Tutorial)
Look at the default Astra Theme Header!
Site Header Designed using Astra Header Builder
How have I designed this header using the Astra header builder? Look at the video tutorial!
Next, let’s move to the next section, where we explain how to create a custom footer with Astra.
How to Create a Footer with Astra Theme?
You may follow the method mentioned above to build a stunning footer. The only thing that will change is when you are inside the WordPress customizer, choose Footer Builder instead of Header Builder.
There, you will see the footer builder options.
You will have three positions.
- Above Footer: Add elements above the footer.
- Primary Footer: Add elements to the main footer.
- Below Footer: Add elements after the primary footer.
As we did earlier, click the + button to add new elements to the footer.
In your footer, it is possible to add things like:
- Recent Posts
- Popular posts
- About You
- Email Optin
- Social Media Icons
And so on.
Follow the steps you have followed above to modify the footer. You can customize the entire footer, change the colors and make a unique design representing the brand.
An example of a well-designed footer will look like this:
This way, you can build a custom footer for your Astra-powered WordPress website or WooCommerce store.
Now you know the step-by-step process to create custom headers and footers with Astra. By spending enough time designing it, get the best design that will stand out.
Frequently Asked Questions
Now, let’s look at some popular frequently asked questions regarding Astra and its headers and footers feature.
Can We Edit the Header and Footer Using the Astra Lite Theme?
Astra Lite theme comes with limited header and footer customization options. You may make minor modifications here and there, but if you want to unlock the customizer’s full potential, the premium version of Astra is necessary.
How Much Does It Cost to Get Astra Premium?
When you choose annual billing, the Astra premium will cost you $47 a year. On the other hand, if you are into a lifetime membership, the cost would be $227 (one-time fee).
Do We Need to Know Coding to Create Custom Headers and Footers?
Without using a single line of coding, we can modify the headers and footers of the website with Astra Premium. This is one of the notable features since most bloggers prefer an easy-to-use solution to tweak their website.
What Are the Main Customization Options We Can Get with Astra?
With the Astra WordPress theme, it is possible to customize every inch of your website or WooCommerce store. You may modify the typography, spacing, templates, header, footers, colors, etc. Astra is one of the top-rated customizer-friendly WordPress themes in the market.
Do We Need an Extra Page Builder Plugin?
No. If you are using Astra, you do not need a dedicated page builder plugin. Instead, enable all the modules from the theme panel and start tweaking the website through the WordPress customizer.
Will Astra Theme Editor Affect My Website’s Speed?
Absolutely no. The core of the Astra WordPress theme and its premium add-on comes with performance in mind. Since the devs use lightweight code, the theme or the theme editor won’t slow down your WordPress website/WooCommerce store. It helps you eliminate bulky page builders, which can affect the website’s speed and performance.
Wrapping Up
Creating a custom header and footer will help you establish your brand. Few WordPress themes support this feature by default. Or, you need to get help from a WordPress developer or use a dedicated page builder plugin.
Thankfully, the Astra WordPress theme can help you eliminate every hassle. Once you have the premium version of Astra, designing a WordPress website’s personalized header and footer would be a cakewalk.
In this guide, I have explained every possible customization option step by step to make your unique header or footer quickly. Since the process doesn’t need coding, creating a stunning design won’t be challenging.
If you need help setting up the plugin or customizing the header, get direct support from the official support team. I hope you have found this article helpful and learned how to use the Astra header builder to create attractive site headers.
I think this is a great post! Astra is a great theme builder and it’s really helpful to have a guide like this to help you customize your header and footer. I’m looking forward to trying out the extra features like the sticky header and navigation menu. Thanks for sharing!