In this post, you will learn how to create a custom header in WordPress using Elementor, Gutenberg, or Beaver Builder. I will share the free and paid options to create custom header templates in WordPress. The best part about this tutorial is that you will not need Elementor Pro or Beaver Builder Paid version to create the custom template.
Yes, you read that right. You can create a custom header without using Elementor Pro or paid version of any other page builder. We will discuss that in this tutorial. Before that, let’s discuss some advantages of using a custom header on your website.
Why add a custom header to your website?
A custom header is the type of header that you control completely and it replaces the default theme header on your website. Some theme allows you to add multiple elements in the header such as logo, title, button, search, and the navigation menu (one or multiple).
On the other hand, some theme does not provide many customization options; hence, you’re left with the default theme header.
In such a case, creating a custom header for your website will be a good idea to overcome the limits set by a theme. Here are some advantages you get when you create a custom header in WordPress:
- Complete control of what should be displayed in the header
- Add multiple menus, buttons, custom text, icons, and more elements
- Control the styling and design the header from scratch
- Use different headers on different pages
Create a custom header template for free in WordPress
So let’s now discuss how to create a custom header template for free in WordPress. The best part about this free option is that you can do it with the Elementor.
And, that too without using the Elementor Pro. How? Follow the below steps to do the same:
Step 1: First of all, download and install the Elementor Header Footer builder plugin from Brainstorm Force by clicking here. You can also install it directly from the WordPress dashboard by visiting Plugins > Add New > Search for Elementor Header Footer Builder > Install and Activate.
Step 2: Now, in the WordPress admin dashboard, hover over Appearance and click on Elementor Header & Footer Builder as shown in the screenshot below:
Step 3: Now click on Add New and start editing the template with Elementor. You will have the option to choose any widget from custom EHF widgets added specially for the header and footer.
Here are the following widgets that you will find with Elementor Header & Footer Builder plugin:
- Navigation Menu (with Toggle Menu support)
- Retina Image
- Page Title (Dynamic)
- Site Title
- Site Tagline
- Site Logo
Apart from the above widgets, you can also use other free Elementor widgets or any other custom Elementor widgets.
Step 4: After finishing the design publish the template and return back to the dashboard. In the Header template editing page, you can now assign the template as a custom header in WordPress or a footer.
Select the following options to apply the custom header on your website:
- Type of template: Choose from header, footer, before header, before footer, or custom block (display with shortcode)
- Display on: Select the page where you wish to use the custom header template on the WordPress website. You will have the option to add the custom header to the entire website, any specific post, category, archive, page, etc.
- Select the user roles to control the custom header access.
That was the first and free option to create a custom header template in WordPress without spending any amount. Now, let’s check other ways to create a custom header without using Elementor Pro.
Create a custom header without using Elementor Pro
This is the paid option but still, you will not have to purchase the Elementor Pro or Beaver Builder premium version. This option require being an Astra Pro user.
Here is how you can use Astra Pro to add custom header templates without using Elementor Pro:
Step 1: Subscribe to Astra Pro on their official website. You may find the latest offers to get under $50 on the pricing page, and the license will be valid for an unlimited number of websites. You may also subscribe to the lifetime plan to save extra.
Step 2: Download and Install Astra Pro on your website. You will require the Astra theme before you can use Astra Pro. Astra WordPress theme is one of the fastest and most lightweight WordPress themes with exciting features.
Step 3: After installing and activating the Astra Pro plugin on your website, visit Appearance > Astra Options > Activate Custom Layouts Module.
The custom layouts module of Astra is a really powerful module and allows you to add custom sections, header, footer, and code, on your website without editing the theme files. You can add a custom announcement section, disclosure message, or any other type of layout on any page with the help of hooks.
We will use the Custom Layouts module of Astra Pro to create a custom header in WordPress. All of that without needing any additional premium version of a page builder plugin.
Step 4: After activating the Custom Layouts module of Astra Pro, visit the Custom Layout section and click on Add New to create a custom layout. On the next screen, select Header and proceed to create a custom header.
Here, you can use Gutenberg (default Block Editor) or any other page builder such as Elementor, Beaver Builder, etc.
Step 5: Once the design is complete, you will need to set the display rules and responsive settings before publishing the new custom header for your website.
Astra Custom Layouts allows you to display the custom header on any page of your website. You can also exclude a specific page from this new custom header. Choose to make the header sticky, set responsive settings, and click on publish.
You will find these options in the Astra Meta settings by clicking on the Astra icon in the top-right corner.
Here are some important points of creating a custom header with Astra Custom Layouts:
- No separate plugin is required, it is part of Astra Pro which has more features and a powerful theme
- Display the custom header on the entire website or specific page
- Create custom headers for different user roles and display different headers and menus for logged-in and logged-out users
- Specify time duration to highlight promotions in the header
- Create separate custom headers for mobile, tablet, and desktop devices.
- Control the design as per your requirements with complete control from the page editors.
Create a custom header template with Elementor Pro
Those were some options to design a header for your website and bypass the limited design options from a theme. But how can we forget about Elementor while creating custom designs?
If you’re already using Elementor on your website and find it easier than the default Gutenberg editor, you may either go with the free Elementor Header & Footer Builder plugin from the Brainstorm Force team or subscribe to Elementor Pro for advance customization options.
Why choose Elementor Pro?
Before moving further with the steps to create a custom header and footer templates with Elementor Pro, let’s discuss the importance of Elementor Pro for Elementor-based websites.
- Elementor Pro allows you to take complete control of the design of your website. You can customize the menu, header, page layout, typography, dynamic content, and more with Elementor Pro Theme Builder.
- Elementor Pro eliminates the dependency on a WordPress theme as it has its own customization options to change the layout, dynamic content, header, and footer templates. That’s the reason it is called Elementor Theme Builder.
- Control the styling of the entire website from one place (Elementor Site Settings)
- Access to 60+ Pro widgets and pre-built templates for a single post, product, header, and footer
Isn’t that cool? Learn more about Elementor Pro features here and create websites professionally. Now let’s move back to the steps to create a custom header or footer with Elementor Pro.
Step 1: First, if you haven’t already, install and activate the Elementor Pro. Now, on the left sidebar, visit Templates > Theme Builder > Header > Add New > Create Template.
Step 2: Once the Elementor editor is open, choose from pre-built templates or start designing from scratch by adding a menu, button, search, and other widgets of your choice.
Step 3: When you are done creating the header template, click on publish button and choose the display conditions to enable this custom header on your website.
That’s how you can create a custom header template with Elementor Pro. You can create different headers for different pages and choose the display conditions accordingly.
We hope you found this tutorial helpful. Try using any of the above options for your website to create a custom header with or without Elementor Pro. If you’re not a fan of Elementor, you can use the Custom Layouts module of Astra Pro.
If you’re a Beaver Builder user, you can also create the custom header with the Beaver Themer. We will soon update this post with easy step-by-step instructions to create a custom header.
Till then, try the above options and let us know if you have some queries/feedback in the comment section.
Frequently Asked Questions about the custom header and footer
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?