- Elementor Page Templates
- Elementor Header Footer
- Header Template Elementor Free Templates
- Elementor Templates Free Download
- Free Elementor Pro Templates
Do you want to display the different headers on each different page of your website? Do you want to add WordPress custom header per page on your site? If yes, you will get the answer of How – here!
One of my clients asked for a different header on each page of their website. Actually, the site exhibits the different content on each page so he wants a WordPress custom header per page. Then, I thought many of WordPress users might want to implement the same thing. So, here at Templatetoaster WordPress theme builder, I am writing this article to make you aware of possible ways to implement different header for different pages in WordPress.
Elementor Page Builder comes with dozens of free & Pro templates for WordPress. Landing pages, homepages & other templates available for free download.
Methods to Implement Different Header for Different Pages in WordPress
- But how to call different header in WordPress? For that, create a new header-your page.php file i.e create a header file for the page you want a different header. Suppose you want a different header on about page. Create a header-about.php file and keep it in the Theme folder. Then, go in page template file say page.php and replace the header.
- Urna is All-in-one WooCommerce WordPress Theme that is flexible and customizable for setting and changing any elements wihtin a minutes via Powerful Theme Options.
- Make a website using the Elementor page builder is very easy because we offer free Elementor templates with header and footer sections. Want a Unique & Professional websites. Call and Email Us to fast reach.
It seems quite a daunting task to have a different WordPress custom header per page of a site. But it’s not. Basically, there are 3 easy methods to have a WordPress custom header per page as follows
1. Manual Method to design different Headers for each page in WordPress Website
By default, there is the same header for every WordPress page of the site. But how to call different header in WordPress? For that, create a new header-your page.php file i.e create a header file for the page you want a different header. Suppose you want a different header on about page. Create a header-about.php file and keep it in the Theme folder.
Then, go in page template file say page.php and replace the header code with
You can see, is_page is used to check the page id for “about” page. The function get_header is used for calling a new header file. Simply, the above code is informing WordPress that if someone opens the page, which is ‘about’ then WordPress will display a file called header-about.php if it is existing. If not, then WordPress will render the default header file.
This way, you can call different WordPress headers on different pages.
2. How to Implement different Headers for each page using TemplateToaster WordPress website builder
To apply different headers on different pages of WordPress website, simply you have to design different page templates using the TemplateToaster software. For example, you will have this header at default home page. Only an image is being displayed in the header.
In the left panel of interface you will find, page template option.
Just click it.
You can design header here. Not only images but you can also add text or videos here in the header. And with headers, you can also add slideshows.
Similarly, you can add more page templates too.
Then you export your theme and once applied the theme just go in settings and add a page template to the specific page where you want to apply it.
And the front end will look somewhat like this
You can also select a Default template for any page as follows
The output will be this
That is it !!
3. WordPress Different Header for each Page Plugin
You can also add WordPress custom header per page through plugins. As plugins are known to add specific functionality, WordPress Offers many such plugins. But here the best two are considered: Unique Headers and WP Display Header. These plugins will make your task of adding different headers a bit easier. It’s easy to install and activate them. It will hardly take two minutes !!
- Unique Headers Plugin
The Unique Headers Plugin applies a custom header image box to the post or page edit screen. It facilitates you to upload an image all new on different pages. Just go to edit the page on which you want a new header.
Just click the Set Custom Header Image in the bottom right corner of the screen.
Now, you can upload a custom image and you are done !!
Finally, the header will like this on front-end.
- WP Display Header Plugin
WP Display Header is used to set a header image for each post, a page from your default headers and custom headers. It facilitates a meta box in the post or page edit screens with the header selection. If you made no selection for a header for a post it will fall back to the default selection.
Once you installed and activated the plugin, it will display the option to upload a header image as follows
By clicking this option, you can add images to the header. You can upload more than one to make a random selection.
Now after loading images, you have 3 options. You can select Random to show different randomly auto-selected images on each page.
And other than that either you will select no header or a fixed default image for a header on each page.
If you go for the third option, a fixed header same for each page the output will be like
You can also select any other image like this
The output will be
You can also select “No header image” as follows
In that case, the output will be like this
If you select Random, you will get a screen as shown below to upload a different image
And this is all about how this plugin is going to work for you.
Elementor Page Templates
You come to know about all the possible ways to add WordPress custom header per page. Now, it’s up to you which one to opt. As if you don’t want to mess with coding you can go for other too, but surely, our web design software will give you more functionality and flexibility. Where you can add only images through plugins, with TemplateToaster website builder software you can add text, images or header video backgrounds too. It’s so easy to use and guarantees to provide awesome results. Get Free WordPress themes.
Have you ever imagined you could create your website header and footer with Elementor for FREE?
Elementor – Header, Footer & Blocks Template is a simple yet powerful WordPress plugin that allows you to create a layout with Elementor and set it as
– Block (anywhere on the website)
Create Attractive Designs
Elementor editor gives you the flexibility to design beautiful sections. Using it you can create out of the box header and footer designs.
Pick Display Locations
Want to display a custom header template only on the homepage or on the blog archive page or on the entire website? Well, this plugin allows choosing a specific target location to display header and footer on.
Add Elementor Blocks Anywhere
Apart from header and footer, you can design custom templates with Elementor and set it at any place on the website with a shortcode.
‘Before Footer’ Template
Along with the main footer, the plugin gives the additional area – above the footer – where you can append your custom template. This gives great flexibility in footer design.
Available With Elementor Canvas Template
Your custom header/footer layout can be easily displayed on the pages where Elementor Canvas Template is enabled.
Comes With Inbuilt Widgets
The plugin offers inbuilt widgets that help to create header/footer layouts. These widgets offer basic required features so you don’t have to look for extra plugins.
- Site Logo – Automatically inherits a logo from the customizer. You can even set a custom image as a logo with a custom link and caption.
- Site Title – Site name will be automatically inherited from the customizer. You can add prefix, suffix, icon, and link with it.
- Site Tagline – It will display a tagline from the customizer. You get an option for prefix, suffix, icon, and link with it.
- Navigation Menu – Offers you list of already created menus on your website. You just need to choose the required one. If offers 4 layouts for the menu – horizontal, vertical, expanded and flyout. With many other options, you can even set custom icons to open and close the menu.
- Page Title – Displays your current post/page title and offers additional options for prefix, suffix, icon, link, and alignment.
- Retina Image – You can upload the retina image for high definition screens.
- WooCommerce Menu Cart – You can display current number of products in the cart along with the total price.
- Copyright – It offers constants to display copyright notice – [hfe_current_year] and [hfe_site_title].
- Search – Add a search form to your with different layout and styling options.
WORKS WITH ALL THEMES
Elementor – Header, Footer & Blocks plugin works with all WordPress themes. Few of the themes have direct support while for few you can choose a method to add theme support.
In case you face any difficulty displaying header/footer, manually choose the theme support method. Visit Appearance > Header Footer & Blocks > Theme Support. Select a method to suit your current theme and you are good to go!
STEPS TO USE THE PLUGIN
Step 1 – Visit Appearance > Header Footer & Blocks and click on the ‘Add New’.
Step 2 – Select ‘Type of Template’ (header/footer/block). Set its display location and user roles.
Step 3 – Publish it.
Elementor Header Footer
Step 4 – Edit it with Elementor and design a section.
Step 5 – Save it and you are done!
You can refer to our step-by-step article that will help you set Elementor headers and footers quickly.
LOOKING FOR PREMIUM ELEMENTOR ADDONS AND WIDGETS?
Check Ultimate Addons for Elementor. It is a library of creative and unique Elementor widgets that add more functionality and flexibility to your favorite page builder.
HAVE YOU TRIED ASTRA WITH ELEMENTOR?
Powering over 1M+ WordPress websites, Astra is loved for the performance and ease-of-use it offers.
People love Astra for –
Better Performance – Optimized code and modular architecture make Astra the most lightweight theme for a faster loading website!
Page Builder’s Best Friend – Astra works great with all page builders. Its support for custom layouts, Elementor templates, and ready-made starter sites makes it the best theme for Elementor.
Ready-to-use complete website templates – Astra offers free ready-made website demos built with Elementor. You can choose any of the Elementor Templates, tweak them as you want and go live in minutes!
SUPPORTED & ACTIVELY DEVELOPED
Need help with something? Have an issue to report? Visit Plugin’s Forum.
Get in touch with us on GitHub.
Made with love at Brainstorm Force!
Header Template Elementor Free Templates
- Go to
Plugins -> Add Newand search for Elementor – Header, Footer & Blocks Template.
- Activate the plugin through the ‘Plugins’ screen in WordPress.
- Go to
Appearance -> Header Footer & Blocksto build a header or footer layout using Elementor.
- After the layout is ready assign it as header or footer using the option
Select the type of template this is(screenshot)
Elementor Templates Free Download
How Does This Plugin Work?
- Go to Appearance -> Header Footer & Blocks to build a header or footer layout using Elementor.
- Click on “Add New” and design a template with Elementor.
- Once the template is ready, set is as a header/footer/block using options “Type of Template” (screenshot).
a) For Header/Footer – Select the target location with the option “Display On”. With this Header/Footer will be visible only on selected locations for selected “User Roles”.
b) For Custom Block – Just copy the shortcode and add it anywhere on the website. Your designed template will display automatically. Display conditions or user roles will not be effective with shortcodes.
Can You Create a Mobile Responsive Header/Footer Using This Plugin?
Yes, You can create the mobile responsive layout of your header using the plugin.
The Elementor – Header, Footer & Blocks Template plugin just gives you a container where you can completely design the header using Elementor Page Builder, So the process of creating the mobile responsive layout is exactly the same as you would create a responsive layout of your other Elementor page.
Free Elementor Pro Templates
Here is a documentation by Elementor Page builder which explains how you can create mobile responsive layouts using Elementor – https://elementor.com/introducing-mobile-editing/
This same applies when you are creating your Header/Footer using this plugin.