How to create custom header and footer 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.

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 widget 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

Open the page settings panel with the gear icon at the top bar and expand the ‘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.

Editor page settings button
Editor page settings button
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…

Manage user roles

Explore Elementor online help for role management and the implementation made in the plugin to adjust the rights defined for certain components. Follow this link.

8 thoughts on “How to create custom header and footer 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