How to create custom headers and footers with elementor

Header and footer for Elementor is a new feature that allows you to create your own template and display them with any post type, categories and tags you want.
You also have basic widgets so you don’t have to load other plugins to build a layout with sections/containers.
This feature supports shop page, single page and cart page for WooCommerce.

Manage user roles

Elementor strengthens the management of user roles by adding a ‘Role manager’ module in which you can restrict the rights of your users.
Explore Elementor online help for role management.
The Elementor team says ‘It’s recommended that you set No access to editor for any roles below Editor, so contributors and authors the client brings on won’t be able to edit site content’.

For that reason the Clone, Create, Trash, Edit with Elementor actions of header/footer templates are relative to the rights defined in the ‘Role Manager’ module of Elementor.

Elementor manage user roles
Manage user roles

Enable Header & Footer feature and related widgets

In the admin panel select EAC components settings page and Header & Footer tab.
From there activate the feature and widgets you want to use.

Enable Header Footer options
Enable Header Footer widgets

Create update your Headers and Footers

Creating a header or footer template is as easy as creating a new page/section or container template and fits perfectly into the Elementor design.

Create Header or Footer

Under dashboard  Templates you will find two new tabs ‘Header and Footer’ under which you will find the templates you are going to create.

HFE create tabs
Elementor templates page

Select the template type and give it a name

After clicking on the ADD NEW button.
In the dialog box choose template type and give it a name then click CREATE TEMPLATE button.

HFE add new header footer
Elementor add header template

Create header and footer content using related widgets

This feature comes with the necessary widgets to build your templates without other plugins.
It includes a simple menu, title of the site as well as the slogan, the current logo and page title and finaly the widgets to fill in the footer.
Tips: if you have filled in the excerpt of your posts you can add it dynamically in a text field with the dynamic tags ‘Post/Excerpt’.
You can also use other plugins/widgets.

Header Footer widgets
Header Footer widgets list

Define display conditions

From the bottom left corner, click on the gear icon and expand the ‘EAC display condition’ section.
In the list select the target with which the header/footer will be associated and displayed.
The list includes Woocommerce pages/single page/categories.

HFE settings panel
HFE display condition
Header Footer display condition

List of headers and footers

You will find in this screen the list of templates that you have created as well as their display conditions (Show on).

Header Footer template screen

Export import Header and Footer templates

As with other Elementor template types, you can export/import your own header/footer templates to reuse them in another site.
Header Footer export import template

Duplicate Header and Footer templates

The plugin provides a link (EAC clone) that allows you to duplicate a template for reuse. After clicking on the link the duplicate template opens with the status ‘Draft’. You can then change the name, save and edit it with Elementor and apply new display conditions.

HFE duplicate template
Header Footer duplicate template

Themes compatibility

There are thousands of themes available on the WordPress Repository. It is quite difficult for us to test each and every themes.
This feature partially supports blocks based theme.
Then this feature has been tested only with the free versions of the popular themes in 2023 such as Hello theme, Astra, Ocean WP, Neve, Generate Press, Sydney, Blocksy, Zakra, Storefront, Go, Customify…

8 thoughts on “How to create custom headers and footers with elementor”

        • hello Kred,
          As for the horizontal menu, this is normal operation since the top menu item as well as the submenu item have an active link (href=’something’).
          Put an inactive link (‘#’) on your Custom links.
          For the second issue we found the bug which will be fixed in the next version (v1.1.3).
          You will have an menu option to enable/disable overflow.
          Rgds

          Reply
          • “As for the horizontal menu, this is normal operation since the top menu item as well as the submenu item have an active link (href=’something’).
            Put an inactive link (‘#’) on your Custom links.”
            No, it’s not normal. I checked how it works in the menu widget of the Elementor itself, as well as in the Elements Header & Footer Builder plugin – there, when you click on the submenu icon, the submenu opens, and does not follow the link.

          • Hello Kred,
            You are right, it seems that this is not the normal operation but that is how we have designed it.
            You can therefore without regrets use another plugin which will give you satisfaction.
            Despite everything, thank you for the feedback which will allow us to improve.
            Rgds

  1. Hi am trying to place the menu on specific pages if i search a page it says no results found, what could be the issue

    Reply

Leave a Comment