Elementor – Header, Footer & Blocks


Have you ever imagined you could create your website’s header and footer with Elementor?

The Header Footer Elementor plugin allows you to create a layout with Elementor and set it as a header or footer easily on your website.

All you need to do is –

  1. Design a layout using Elementor.
  2. Select whether it should be applied as the header or footer.
  3. The template will be automatically applied as the header/footer. Easy peasy!

You can refer to our step-by-step article that will help you set Elementor headers and footers quickly.

Features of Header Footer Elementor

  • Create attractive pages and templates to be used as header or footer.
  • Usefully customized header and footer across the website.

Themes you can use Header Footer Elementor with

The Header Footer Elementor isn’t universally compatible with all WordPress themes. Here is a list of themes you can use it with

  1. Astra – The Fastest, Most Lightweight & Customizable WordPress Theme.
  2. Neve.
  3. Hestia.
  4. GeneratePress.
  5. OceanWP.
  6. Genesis.
  7. Phlox Theme.
  8. Attesa Theme.

Do not see your theme listed here? Theme authors can add support for Header Footer Elementor through their theme easily.


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 400,000+ WordPress websites, Astra is loved for the performance and ease-of-use it offers.


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.

Easy Customization – Astra takes away the pain and time spent in coding. With all the settings available in the customizer itself, Astra lets you manage all the theme options with just a few clicks.

Deeper Integrations – Astra works seamlessly with all WooCommerce plugins, LifterLMS, LearnDash, etc. Therefore, you can now build online stores or websites offering online courses with Astra and Elementor!

Ready-to-use complete website demos – 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? Get in touch. with us on GitHub.

Made with love at Brainstorm Force!

Imagens de tela

  • Go to Appearance -> Header Footer Builder to create a new template.
  • After the template is ready, assign it to be a header or footer replacement.


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


If you are a theme developer here is a quick tutorial on how you can add support for the Header Footer Elementor from your theme.

How does this plugin work
  1. Go to Appearance -> Header Footer Builder to build a header or footer layout using elementor.
  2. After the layout is ready assign the layout as header or footer using the option Select the type of template this is (screenshot)
Can you create Mobile Responsive Header/Footer using this plugin?

Yes, You can create the mobile responsive layout of your header using the plugin.

The Header-Footer Elementor 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 same as you would create a responsive layout of your 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.

How Can I add support for Heade/Footer Plugin from my theme?

If you are a theme developer here is a quick tutorial on how you can add support for the Header Footer Elementor from your theme.

If you are using a pre-made theme, The best approach would be to contact yoru theme developer and provide them link to the Wiki article on how they can add support for the plugin.
If the above is nnot possible, You can also add support for the plugin from your child theme. Just follow this article


22 de outubro de 2019
I just started a new site using the GeneratePress Pro Theme and wanted to install my own header. I had spent good money on getting it designed. But the GP-Theme's core structure...aks., 'the software' would not position the image correctly. After, struggling with the problem for two fricken days. A google search led me to a site called ultimate addons which pointed me to this plugin. Once I installed/activated the plugin...it took less than an hour to resolve my website header problem(s). And it put the header image right where I wanted it to be placed. Thanks a bunch, development team...GREAT JOB ON A GREAT PRODUCT.
28 de agosto de 2019
Out of the millions of WP themes, this only supports 7 of them! Plus, I'm on WP version 5.2 and this thing is only updated to version 5.0... even though their latest update was just 13 hours ago.
27 de agosto de 2019
There is a bug in this revision that prevents the opening of Headers or Footers in Elementor Pro! View version 1.1.3. Please update as soon as possible. Had to revert to older version.
14 de agosto de 2019
Why type "Before Footer" only avaible with Astra theme?
Leia todas as 36 avaliações

Contribuidores e desenvolvedores

“Elementor – Header, Footer & Blocks” é um software com código aberto. As seguintes pessoas contribuíram para este plugin.


“Elementor – Header, Footer & Blocks” foi traduzido para 5 localidades. Obrigado aos tradutores por suas contribuições.

Traduzir “Elementor – Header, Footer & Blocks” para o seu idioma.

Interessado no desenvolvimento?

Navegue pelo código, dê uma olhada no repositório SVN ou assine o registro de desenvolvimento via RSS.

Registro de alterações


  • 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 thee blocks templates can be used as shortcodes.
  • New: Add templates before the footer for Astra Theme. Options for other themes will be cominng 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.


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


  • Fix: Dismissable notice not actually dismissing.


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


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


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


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


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


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


  • Initial Release.