![Image [1] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713192598.png)
Elementor Header and Footer Generator (EHF) is a powerful and easy WordPress plugin that lets you create layouts with Elementor and set them to header, footer or anywhere on the page.
If you only want to display the custom header template on your homepage, blog archive page or your entire website, this plugin lets you choose specific locations to display the header and footer.
Activation Plugin
- In the navigation panel "Add New Plugin", enterElementor Header & Footer Builder, in the displayed results click onInstallationThe
- Run the installed plug-in as a part of theactivateThe
![Image [2] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713271725.png)
Configure header or footer settings
- Appearance in WordPressmenu, clickElementor Header and Footer GeneratorThe
![Image [3] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713330781.png)
- click (using a mouse or other pointing device)Add NewTemplate and name
![Image [4] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713341445.png)
- Select whether you want to create a header or footer template. In this example, we choose "Header".
![Image [5] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713361524.png)
- Use "Add Display Rule"Select the target location to determine where the template should be displayed
![Image [6] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713391715.png)
- You can also set the user role for which the template will be displayed. Examples of user roles include editor, administrator, login, logout, etc.
![Image [7] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713402354.png)
- click (using a mouse or other pointing device)"Release."button to apply the changes.
![Image [8] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713414781.png)
Design your template.
- click (using a mouse or other pointing device)"Edit with Elementor"buttons to edit the template layout using the Elementor page builder.
![Image [9] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713443725.png)
Scroll down in the sidebar and find the EHF plugin to add the following widget to the Elementor editor.
- retinal image
- copyright
- navigation menu
- page title
- Site Title
- Website tagline
- look for sth.
- Website Logo
![Image [10] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051713483725.png)
Attention to responsiveness
- Another thing you need to do before returning to the WordPress dashboard is to check the responsiveness of the new header elements. The mobile menu can't really accommodate the horizontal, full-width spanning elements we use on desktop. So, customize before proceeding.
![Image [11] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051714053932.png)
You can design mobile versions of the header and footer templates using the responsive switches at the bottom of the widget menu:
This will give you an idea of how the new header or footer element will appear on tablets and smartphones. If you want to edit any element for a specific device screen size, look for the icon next to the element:
![Image [12] - How to create custom header and footer using Elementor Header and Footer Builder - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024051714065268.png)
Conclusion:
With the Elementor Header and Footer Builder plugin, you can choose specific locations to display these layouts, including the homepage, blog archive pages, or the entire site. Activating and configuring the plugin is easy, just install and activate the plugin in your WordPress dashboard, then create and set the template's location and user roles as needed!
Link to this article:https://www.361sale.com/en/9923
The article is copyrighted and must be reproduced with attribution.
No comments