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.

Tout ce que vous avez à faire est –

  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.

Fonctionnalités de 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 – Le plus rapide, le plus léger et personnalisable thème WordPress.
  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!


Vous avez besoin d’aide pour quelque chose ? Un problème à signaler ? Prenez contact avec nous avec nous sur GitHub.

Développée avec amour par Brainstorm Force !

Captures d’écran

  • Go to Appearance -> Header Footer Builder to create a new template.
  • Une fois le modèle prêt, assignez-le comme remplacement de l’en-tête ou du pied de page.


  1. Allez à Extensions -> Ajouter des extensions et rechercher Header Footer Elementor.
  2. Activez l’extension via l’écran « Extensions » dans WordPress.
  3. Allez à Apparence -> Header Footer Builder pour construire une mise en page d’en-tête ou de pied de page en utilisant Elementor.
  4. Une fois la mise en page prête assignez la mise en page comme en-tête ou pied de page en utilisant l’option Sélectionnez quel type de modèle est-ce (capture d’écran)


Si vous êtes un développeur de thèmes, ici il y a un tutoriel rapide expliquant comment vous pouvez ajouter le support de Header Footer Elementor à partir de votre thème.

Comment fonctionne cette extension ?
  1. Allez à Apparence -> Header Footer Builder pour construire une mise en page d’en-tête ou de pied de page en utilisant Elementor.
  2. Une fois la mise en page prête assignez la mise en page comme en-tête ou pied de page en utilisant l’option Sélectionnez quel type de modèle est-ce (capture d’écran)
Pouvez-vous créer des en-tête/pied de page responsive pour mobile en utilisant cette extension ?

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

L’extension Header Footer Elementor vous fournit juste un conteneur dans lequel vous pouvez complètement concevoir l’en-tête en utilisant le constructeur de page Elementor. Ainsi le processus de création d’une mise en page d’en-tête responsive pour mobile est exactement le même que pour créer une mise en page responsive pour votre 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.

Comment puis-je ajouter le support de l’extension Header Footer Elementor à partir de mon thème ?

Si vous êtes un développeur de thèmes, ici il y a un tutoriel rapide expliquant comment vous pouvez ajouter le support de Header Footer Elementor à partir de votre thème.

Si vous utilisez un thème pré-conçu, la meilleure approche serait de contacter le développeur du thème et de lui fournir le lien vers l’article Wiki sur la façon d’ajouter le support de cette extension.
Si ce qui précède n’est pas possible, vous pouvez aussi ajouter le support de cette extension à votre thème enfant. Pour cela suivez cet article.


22 octobre 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 août 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 août 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.
Lire les 36 avis

Contributeurs & développeurs

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


“Elementor – Header, Footer & Blocks” a été traduit dans 5 locales. Remerciez l’équipe de traduction pour ses contributions.

Traduisez « Elementor – Header, Footer & Blocks » 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.



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


  • 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.
  • Correctif : Charge les assets de l’en-tête d’Elementor correctement dans l’en-tête. Cela corrige la vue différente de l’entête au cas où Elementor chargerait sa CSS dans le pied de page.
  • 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.