Create Header, Footer and Blocks for your WordPress website using Elementor Page Builder for free.
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
Elementor editor gives you the flexibility to design beautiful sections. Using it you can create out of the box header and footer designs.
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.
Apart from header and footer, you can design custom templates with Elementor and set it at any place on the website with a shortcode.
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.
Your custom header/footer layout can be easily displayed on the pages where Elementor Canvas Template is enabled.
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.
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!
Plugins -> Add New
and search for Elementor Header & Footer Builder.Appearance -> Elementor Header & Footer Builder
to build a header or footer layout using Elementor.Select the type of template this is
(screenshot)Go to Appearance -> Elementor Header & Footer Builder to create a new template.
Assign template to be a header/footer and select display rules.
Methods to add Theme Support.
Default widgets available with Elementor Header & Footer Builder.
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.
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.
Before Footer
action for all the themes.\Elementor\Post_CSS_File