Elementor Header Builder

The Elementor Header & Footer Builder plugin that stays under the Elementor Header Builder option allows constructing headers and footers using Elementor Website Builder.

Install and Activate Plugin

First of all, make sure that you have installed and activated the Elementor plugin. It can be done from the default repository of WordPress. Go to the Dashboard > Plugins > Add New (1), search Elementor (2), install and activate it (3).‌

Afterward, the Elementor Header & Footer Builder should be installed and activated in the same way.

The Elementor Header & Footer Builder section comes up on the Dashboard > Appearance path after successfully installing the plugins. Click the Add New button to add a new template.

Create Custom Header

In this step, a post with basic settings of header, footer, and custom block is created. Enter the name of the template and choose the Header on the Type of Template.

The created header will be displayed instead of the default theme header only in case if in the Type of Template setting selected Header.

More options appear after choosing the template's type.

  • Display On option specifies to which pages apply the changes

  • User Roles option specifies to which user roles apply the change

  • Position is the header position on the website. Three options Relative, Absolute, and Sticky are available to choose from. The Relative option is the default header option, the Absolut option locates the content under the header block, in the Sticky option, the header will be stuck on the top even by scrolling the site

Click the Publish button to save the template.

By clicking the Edit with Elementor button, you will launch the Elementor builder.

On the opening page, you can build your custom header by dragging elements from the Elementor tab to the building page.

It is important to note that to the existing Elementor Header Builder elements we added our own elements which are available in the Consulting section with the HFB label.

After adding the necessary elements, click the Update button to see the applied header on the website.

Import Demo Header

On the launched Elementor builder, click on the Folder icon to open the Theme Template Library.

All demo theme pages, as well as demo headers, are added to the STM Template Library plugin. You can learn how the plugin works on the Template Library page of this manual.

Four build-in headers are available under the Pages tab.

You can apply one of these headers templates to your website by clicking the Insert button to the selected header.

Last updated