Elementor Header & Footer Builder


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)

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.


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!


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.


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.


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!


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!

Captures d’écran

  • Go to Appearance -> Elementor Header & Footer Builder to create a new template.
  • Assign template to be a header/footer and select display rules.
    1. For blocks, select the type of template as Custom Blocks. You can copy the shortcode and use it anywhere.
  • Methods to add Theme Support.
  • Default widgets available with Elementor Header & Footer Builder.


  1. Go to Plugins -> Add New and search for Elementor Header & Footer Builder.
  2. Activez l’extension via l’écran « Extensions » dans 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)


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?

Oui, vous pouvez créer une mise en page responsive pour mobile de votre en-tête en utilisant l’extension.

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.

Voici une documentation fournie par le constructeur de page Elementor qui explique comment créer des mises en page responsive pour mobiles en utilisant Elementor – https://elementor.com/introducing-mobile-editing/
Cela s’applique également lorsque vous créez votre en-tête/pied de page en utilisant cette extension.


26 septembre 2021
I use this plugin on most of my websites and always find it useful. Never had an issue. I recommend it.
Lire les 1 456 avis

Contributeurs & développeurs

« Elementor Header & Footer Builder » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.


“Elementor Header & Footer Builder” a été traduit dans 11 locales. Remerciez l’équipe de traduction pour ses contributions.

Traduisez « Elementor Header & Footer Builder » dans votre langue.

Le développement vous intéresse ?

Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.



  • Improvement: Elementor 3.4 compatibility.


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


  • 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.


  • Fix: Footer misplaced in the header or content area due to a bug introduced in v1.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.


  • 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.


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


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


  • Fix: Buttons showing cart subtotal.


  • 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.


  • 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’.


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


  • 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.


  • 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.


  • 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.


  • 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.


  • 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.


  • 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.


  • 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.


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


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


  • 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.


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


  • 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)


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


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


  • 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.


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


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


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


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


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


  • 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.


  • 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.


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


  • Autoriser les filtres à remplacer les paramètres WP_Query lors de la récupération de l’ID du modèle d’en-tête/pied de page.


  • Correctif : Option d’élimination de notice ne l’éliminant pas réellement.


  • Ajout : Option pour afficher l’en-tête/pied de page sur les pages utilisant le modèle Elementor Canvas.


  • Correctif  : Vérifier correctement si Elementor est réellement actif avant d’utiliser ses méthodes. Cela corrige les erreurs pour les sites utilisant des versions plus anciennes de PHP où Elementor n’est pas réellement activé.


  • Amélioration : Utilisez l’instance créée par Elementor lors du rendu du balisage pour l’en-tête/pied de page – Crédits itay9001


  • Correctif : l’ajout de la prise en charge du thème pour l’extension ne retire pas le message « non pris en charge ».


  • Ajout : support du thème OceanWP.
  • 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.
  • Fonctions d’assistance introduites pour le rendu et la vérification des en-têtes pour simplifier l’intégration de HFE avec d’autres thèmes.


  • Ajout : support pour le thème Astra, le thème WordPress – le plus rapide, le plus léger et personnalisable des thèmes WordPress..
  • Menu déplacé sous Apparence -> Header Footer Builder.
  • Correctif : le contenu de l’en-tête est masqué derrière le contenu de la page.
  • Utilisez le modèle de canevas d’Elementor quand vous créez des mises en page d’en-tête et de pied de page pour avoir une expérience de pleine largeur.


  • Première version.