Elementor Header & Footer Builder

Description

Have you ever imagined you could create your website header and footer with Elementor for FREE?

Elementor Header & Footer Builder is a simple yet powerful WordPress plugin that allows you to create a layout with Elementor and set it as
– Header
– Footer
– Block (anywhere on the website)

Try it out on a free dummy site

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 Builder 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 > Elementor Header & Footer Builder > 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 > Elementor Header & Footer Builder 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.

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 1+ Million 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!

Screenshots

Installation

1. Go to Plugins -> Add New and search for Elementor Header & Footer Builder.
2. Activate the plugin through the ‘Plugins’ screen in WordPress.
3. Go to Appearance -> Elementor Header & Footer Builder to build a header or footer layout using Elementor.
4. After the layout is ready assign it as header or footer using the option Select the type of template this is (screenshot)

FAQ

How Does This Plugin Work?

1. Go to Appearance -> Elementor Header & Footer Builder to build a header or footer layout using Elementor.
2. Click on “Add New” and design a template with Elementor.
3. Once the template is ready, set is as a header/footer/block using options “Type of Template” (screenshot).

4. 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 Builder 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.

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.

Reviews

HeSie

helgeeberhardt October 20, 2024

Helped me a lot.

Very good.

typolix October 20, 2024

Very good plugin.

it damages entire website responsive design

mediaorigins October 19, 2024 1 reply

it damages entire website responsive design & there’s no support, ready to help fix. This is an awful upgrade!

Works well for me

sbarber8129 October 18, 2024

Love this plugin.

Very good plugin!

pasters2001 October 16, 2024

It is a very good plugin. I am glad I found it

Excellent service and game-changing design tool! ??????????

Anthony Graydon October 12, 2024

As a web designer, Elementor has been a complete game-changer for my projects. The drag-and-drop interface is super intuitive, making it easy to create stunning, responsive websites without touching a line of code. The range of customization options is incredible, allowing me to bring my creative ideas to life with minimal effort. ???? What I love most is the flexibility – from beginners to experienced developers, Elementor caters to all. The support team is also top-notch, always there to help if needed. ??? If you’re serious about creating professional websites, Elementor is the way to go! Highly recommended! ??

Contributors & Developers

Changelog

1.6.44

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.25 version.
• Fix: This update addressed a security bug. Props to Wordfence for privately reporting it to our team. Please make sure you are using the latest version on your website.

1.6.43

• Improvement: Icons displaying correctly on frontend.

1.6.42

• Fix: Navigation Menu – Active color now changes correctly when moving between pages.
• Fix: Page Title – The icon was showing too big, now it appears the right size.

1.6.41

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.24 version.
• Improvement: Implemented widget output caching to enhance page performance.
• Improvement: Updated the deprecated code in codebase.

1.6.40

• Improvement: Navigation Menu – The dropdown menu now extends to full width when the navigation menu container is set to full width on smaller screens.
• Fix: Navigation Menu – Console error for undefined property ‘left’.

1.6.39

• Improvement: Updated minimum PHP version requirement to 7.4.

1.6.38

• Improvement: Improved code quality syntax and security checks for better coding standards and practices.

1.6.37

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.23 version.

1.6.36

• Fix: This update addressed a security bug. Props to Wordfence for privately reporting it to our team. Please make sure you are using the latest version on your website.

1.6.35

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.22 version.
• Improvement: Updated sanitize SVG function.
• Fix: Search – Compatibility with Polylang switcher.

1.6.34

• Fix: Navigation Menu – Submenus show up for few seconds during the page load
• Fix: Navigation Menu – Huge icon show up for few seconds during the page load
• Fix: Navigation Menu – Unable to click on submenu when top distance is added for dropdown

1.6.33

• Fix: Unable to edit the Header/Footer with Elementor in few cases.

1.6.32

• Fix: Improved plugin security.

1.6.31

• Fix: Conflict with WP SVG Images plugin.

1.6.30

• Fix: Improved error messages during plugin activation.

1.6.29

• Fix: Navigation Menu – The submenu container opens without hovering over the parent menu item.
• Fix: This update addressed a security bug. Props to Wordfence.

1.6.28

• Fix: Error messages appearing for Display rules.

1.6.27

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.21 version.
• Improvement: Compatibility with PHP 8.3 version.
• Fix: This update addressed a security bug. Props to Wordfence.

1.6.26

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.20 version.
• Improvement: Compatibility with PHP 8.2 version.

1.6.25

• Security Fix: Hardened the security of the plugin. Props: Wordfence.
• Fix: Automatic translation support for templates on Specific Pages / Posts / Taxonomies, etc.
• Fix: Navigation Menu – Multistep submenu fails to display when a border radius is applied to dropdown.

1.6.24

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.19 version.
• Fix: White Label – Astra’s theme name does not change when Astra is white-labeled.
• Fix: Navigation Menu – Language switcher flags not displaying when using Polylang plugin.

1.6.23

• Fix: This update addressed a security bug. Props to WordPress Plugin Review Team and Plugin Vulnerabilities Team for reporting it to our team. Please make sure you are using the latest version on your website.

1.6.22

• Fix: Retina Image – Navigating to custom URL by clicking on images.

1.6.21

• Fix: Site Logo – Width and height settings not applying to the logo.

1.6.20

• Fix: Flyout menu not appearing correctly.

1.6.19

• Fix: Header and Footer layout broken after last update.

1.6.18

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.18 version.
• Improvement: Compatibility with WordPress VIP Go rules.

1.6.17

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.17 version.
• Fix: Site Logo – Added an alt text for the default logo.

1.6.16

• Compatibility with latest Elementor and Elementor Pro 3.16 version.
• Compatibility with PHP 8.1 version.

1.6.15

• Improvement: Compatibility with latest Elementor and Elementor Pro 3.15 version.
• Improvement: Added WPML support.
• Fix: Navigation Menu – HTML validation error on mobile layout related to tabindex inside elements with attribute [role=”button”].
• Fix: Polylang plugin language causes conflicts when set up with a custom Header Footer.
• Fix: Site Logo – Align icons not rendering in Elementor editor settings.

1.6.14

• Improvement: Compatibility with Elementor version 3.13 and Elementor Pro version 3.13
• Fix: Navigation Menu – Accessibility error corrected for [aria-hidden=”true”] attribute.

1.6.13

• Compatibility with Elementor version 3.7.2 and Elementor Pro version 3.7.3.

1.6.12

• Compatibility with Elementor and Elementor Pro.

1.6.11

• Improvement: Compatibility with Elementor Pro version 3.7
• Fix: Removed meta tag attribute [maximum-scale=1] for a better accessibility.

1.6.10

• Improvement: Compatibility with Elementor version 3.6.
  Removed elementor deprecated functions and replaced with latest functions.
  Now to work with Elementor Header & Footer Builder, Elementor minimum version 3.5.0 or higher will be required.

1.6.9

• Improvement: Compatibility with Elementor Pro version 3.6
• Fix: Navigation Menu – If Polylang language switcher is present in the menu, it closes the menu with a click.

1.6.8

• Improvement: WordPress 5.9 compatibility.

1.6.7

• Improvement: Added GDPR support to Subscription form.

1.6.6

• Improvement: Added compatibility to Elementor core version 3.5.0. Now to work with EHF, Elementor minimum version 3.1.0 or higher will be required.
• Fix: PHP warning of undefined array key on responsive controls in all widgets.

1.6.5

• Fix: Hide empty cart count badge hiding even when cart is not empty.

1.6.4

• Improvement: Elementor 3.4 compatibility.

1.6.3

• Improvement: WordPress 5.8 compatibility.
• Improvement: Elementor 3.3 compatibility.

1.6.2

• Improvement: Copyright – Added custom link attributes support.
• Improvement: Page Title – Added custom link attributes support.
• Improvement: Retina Image – Added custom link attributes support.
• Improvement: Search – Added gradient color support to the search button.
• Improvement: Site Logo – Added custom link attributes support.
• Improvement: Site Title – Added custom link attributes support.
• Fix: Templates views section not displaying correctly and related code conflicting with Yoast SEO plugin.
• Fix: Widgets icon color issue with Elementor’s dark mode.

1.6.1

• Fix: Footer misplaced in the header or content area due to a bug introduced in v1.6.0.

1.6.0

• New: Added Email Subscription and About Us section on the settings page.
• New: Renamed the plugin to Elementor Header & Footer Builder.
• Improvement: Added an option to hide + & – sign added by Twenty Twenty-One Theme.
• Fix: Navigation Menu – Border for dropdown is also applying to the menu trigger icon.
• Fix: Navigation Menu – Fix top distance option for dropdown adding a top-margin to sub-menu.
• Fix: Navigation Menu – Fixed active color issues in case of full-page anchor links used in nav links.
• Fix: Navigation Menu – Navigation schema not working.

1.5.9

• Improvement: Added notice to update Elementor to v3.0.0 or higher
  Elementor has deprecated few functions and namespaces with its v3.0.0. Following Elementor, our plugin too deprecates similar functions and namespaces. You will now require the Elementor v3.0.0 or higher.
• Improvement: Elementor 3.2 Compatibility – Added Elementor Global Color and Typography scheme support.
• Fix: Navigation Menu – Last menu item button disappearing while switching from mobile to desktop.
• Fix: Navigation Menu – Last menu item button alignment not working in RTL view.

1.5.8

• Fix: Hardened allowed options in the editor to enforce better security policies.

1.5.7

• Improvement: Compatibility with Elementor v3.1.
• Fix: Navigation Menu – Undefined index notice when menu is not set.

1.5.6

• Fix: Buttons showing cart subtotal.

1.5.5

• Improvement: Compatibility with Elementor v3.1.
• Improvement: Cart – Added Items Count hover color options.
• Fix: jQuery shorthand deprecation warning for click() and focus() functions.
• Fix: Cart – Fixed fatal error due to cart initialization.

1.5.4

• Improvement: Compatibility to PHP v8.0.
• Improvement: Improved compatibility with Astra theme.
• Improvement: Navigation Menu – Added option to toggle menu item.
• Fix: Added ‘alt’ attribute to the widgets containing images.
• Fix: Closed the missing HTML tag in footer in the global theme compatibility.
• Fix: Navigation Menu – Alignment option not working for the last menu item set as ‘Button’.

1.5.3

• Fix: Polylang plugin conflicting issue with target rules.
• Fix: Navigation Menu – Double link attributes issue with translation plugins.

1.5.2

• Improvement: Compatibility with Polylang.
• Improvement: Navigation Menu – Added ‘SiteNavigationElement’ schema support.
• Improvement: Navigation Menu – Added support to SVG for toggle and close icon.
• Improvement: Navigation Menu – Added active color support to the link hover effects.
• Improvement: Page Title – Added option to disable the link.
• Fix: Exclude EHF templates from query for target rules – Specific Pages / Posts / taxonomies etc.
• Fix: Cart – Missing wrapper class in the control selector.
• Fix: Navigation Menu – Added responsive support to flyout box width.

1.5.1

• Fix: Retained GeneratePress theme’s after header while using EHF header.
• Fix: Target rule ‘Specific Pages/Posts/Taxonomies etc’ not working.
• Fix: Cart – Error in some cases.

1.5.0

• New: Search widget.
• New: Users can now share non-personal usage data to help us test and develop better products. ( Know More )
• Improvement: UI improvements.
• Improvement: Navigation Menu – Added active color for dropdown and current menu parent.
• Improvement: Navigation Menu – Changed the tablet breakpoint to 1024 in order to support iPad Pro.
• Fix: Compatibility to PHP v7.4.
• Fix: GeneratePress theme header now overriden by EHF.
• Fix: Cart – Count not increasing with AJAX call.
• Fix: Page Title – Added support for archive title.
• Fix: Site Title – Custom URL not working.

1.4.1

• Fix: EHF header overlapping Astra WooCommerce Off-Canvas.
• Fix: WooCommerce Menu Cart – ‘div’ tag of custom cart layout was not closed.
• Fix: WooCommerce Menu Cart – Fatal error with count when cart is empty.

1.4.0

• New: WooCommerce Menu Cart widget.
• Improvement: Compatibility to Elementor Pro v2.9 full site editing.
• Improvement: In-built support to Hello Elementor theme.
• Improvement: WPML support to before footer template.
• Improvement: Navigation Menu – Added option to convert last item into CTA.

1.3.1

• Fix: Copyright – Link with open in new tab not working.
• Fix: Navigation Menu – Hamburger menu click not working on responsive devices.
• Deprecated: Removed the theme dependency for the plugin, so removed the associated notice.

1.3.0

• New: Added ‘Site Logo’ widget.
• New: Added ‘Site Title’ widget.
• New: Added ‘Site Tagline’ widget.
• New: Added ‘Navigation Menu’ widget.
• New: Added ‘Page Title’ widget.
• Improvement: Elementor v2.9 compatibility.

1.2.2

• Fix: Add default fallback theme support after checking if current theme does not add it.

1.2.1

• Categorize the Elementor widgets in a separate category in the Elementor window.
• Hide target rules options when a custom block template is selected.

1.2.0

• New: Support all the themes, Includes two separate fallback methods so that you can create custom headers and footers for any theme.
• New: Added target rule engine, which allows you to have different headers/footers for different pages.
• New: Added Retina Image Elementor widget, which can be used as a Site Logo.
• New: Added Copyright widget and Shortcode for current year & site title.
• Improvement: Allow before footer to work on Elementor Canvas Template when not using Astra Theme.
• Improvement: Added support of Before Footer action for all the themes.

1.1.4

• Fix: Flush permalinks on plugin update to Elementor error when trying to edit the Header/Footer.

1.1.3

• Improvement: Allow changing the permalinks for the hfe templates (#162)
• Fix: WPML Translations do not work when using the Elementor Template as a shortcode. (#159)
• Fix: Page content appears over the header. (#150)
• Fix: Remove the deprecated function warning for shortcode functions. (Props @hogash #145)

1.1.2

• Fix: Depracated function warning from Elementor’s method \Elementor\Post_CSS_File

1.1.1

• Fix: Blank header being displayed when only footer is translated using WPML.

1.1.0

• New: Rename plugin to be Header Footer & Blocks builder as now the blocks templates can be used as shortcodes.
• New: Add templates before the footer for Astra Theme. Options for other themes will be coming soon.
• New: Use templates (Blocks) anywhere in your content with the help of shortcodes.
• Improvement: Improved the UI of the metabox for Header Footer post type.

1.0.16

• Fix: Make the theme not supported notice dismissable.
• Fix: Use specific selector when adding z-index for the header.

1.0.15

• Fix: Default Header being displayed for Generatepress and Gensis theme after v1.0.14.

1.0.14

• Fix: Fixes possible PHP notices/Errors due to WP_Query being called early for all the supported themes.

1.0.13

• Fix: PHP Notices and errors due to WP_Query being called early when some plugins use filters inside WP_Query.

1.0.12

• Fix: Compatibility with Elementor 2.0 changed canvas template path.

1.0.11

• Load the CSS footer early in the page to avoid slow rendering of CSS.
• Change the schema.org links to be https.
• Fix: Added correct schema markup for the footer.

1.0.10

• Load the header layout correctly in the in Elementor canvas template.
• Load the Elementor Pro CSS/JS files in .
• Provide more filters for the helper functions.

1.0.9

• Add Support for WPML.
• Updated the missing strings from the translations template.

1.0.8

• Allow filters to override the WP_Query parameters when retreiving the Header / Footer template id.

1.0.7

• Fix: Dismissable notice not actually dismissing.

1.0.6

• New: Option to display the header/footer on the pages using Elementor Canvas Template.

1.0.5

• Fix: Correctly check if Elementor actually is active before using its methods. This fixes errors for sites using older versions of PHP where Elementor does not actually get activated.

1.0.4

• Improvement: Use Elementor’s created instance when rendering the markup for header/footer – Credits itay9001

1.0.3

• Fix: Adding theme support for the plugin does not remove the “no supported” notice.

1.0.2

• New: Added support for the OceanWP Theme.
• Fix: Load the Elementor header assets correctly in the header. This fixes header looking different just when loading the page as previously Elementor would load its CSS in the footer.
• Introduced helper functions for rendering and checking the headers to make it simpler to integrate HFE with more themes.

1.0.1

• New: Added support for the Astra WordPress theme – The Fastest, Most Lightweight & Customizable WordPress Theme.
• Moved the menu under Appearance -> Header Footer Builder.
• Fix: Header content getting hidden behind tha page content.
• Use Elemenntor’s canvas template when designing header and footer layout to have full width experience.

1.0.0

• Initial Release.