Elementor – Header, Footer & Blocks

Descripcion

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

Elementor – Header, Footer & Blocks is a simple yet powerful 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 layout and set it as header or footer.

Pick Display Locations

Want to display custom header 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 Custom Blocks Anywhere

Apart from header and footer, you can design a section 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 designed template. This gives great flexibility in footer designing.

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.
  • Copyright – It offers constants to display copyright notice – [hfe_current_year] and [hfe_site_title].

WORKS WITH ALL THEMES

Elementor – Header, Footer & Blocks plugin works with all themes. Few of the themes have direct support while for few you can enable theme support with few clicks.

In case you see a notice to enable theme support manually, go to Appearance > Header Footer Builder > Theme Support. Select a method to add compatibility to your current theme and you are good to go!

STEPS TO USE THE PLUGIN

Step 1 – Visit Appearance > 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 600,000+ 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

  • Go to Appearance -> Header Footer Builder to create a new template.
  • Assign template to be a header/footer and select display rules.
  • Copy shortcode for Custom Blocks.
  • Methods to add Theme Support.
  • Inbuilt Elementor widgets

Installacion

  1. Go to Plugins -> Add New and search for Elementor – Header, Footer & Blocks.
  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 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 -> 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 & Blocks 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

24 febrièr 2020
this plugin has helped me build my site fast and easy
Read all 111 reviews

Contributors & Developers

“Elementor – Header, Footer & Blocks” is open source software. The following people have contributed to this plugin.

Contributors

“Elementor – Header, Footer & Blocks” has been translated into 5 locales. Thank you to the translators for their contributions.

Translate “Elementor – Header, Footer & Blocks” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

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