# Elementor Header Builder

The **Ultimate Addons for Elementor** (formerly **Elementor Header & Footer Builder)** plugin that stays under the **Elementor Header Builder** option allows the construction of headers and footers using Elementor Website Builder.

<figure><img src="/files/HPnjA6fMPRzqSbf3FfLb" alt=""><figcaption></figcaption></figure>

## 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), and install and activate it (3).‌

<figure><img src="/files/nNcDztzDE4gInOPRgYHS" alt=""><figcaption></figcaption></figure>

Afterward, the **Ultimate Addons for Elementor** should be installed and activated in the same way.

<figure><img src="/files/BV6t0ojWLq8tndvcLnPG" alt=""><figcaption></figcaption></figure>

After successfully installing the plugins, the **Header & Footer Builder** section comes up on the **WP Dashboard > UAE > Header & Footer Builder** path. Click the **Add New** button to add a new template.

<figure><img src="/files/wBGvNn9fYkUhzkGWK1Pi" alt=""><figcaption></figcaption></figure>

## 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**.

{% hint style="warning" %}
The created header will be displayed instead of the default theme header only in case if in the **Type of Template** setting selected **Header**.
{% endhint %}

<figure><img src="/files/r7csDzfuzkSL4IDVxwf4" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/Jy6bB9fsWoJGns6wimo7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/WAi39pDP6ewQwqKZpYxm" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}
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.&#x20;
{% endhint %}

<figure><img src="/files/2wiCoMToCFFsN41byc0c" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/dRH6W72AwxcqozfI8Tmp" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/eIwAWSmqN9wBig2h60Us" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/jAKPey2se1cN45PP2fnC" alt=""><figcaption></figcaption></figure>

## Import Demo Header

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

{% hint style="info" %}
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](/consulting-theme-documentation/content/template-library.md) page of this manual.
{% endhint %}

<figure><img src="/files/HKrh9RKSJp71MM8ffqG7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/bXurVctlKV945TuqJR9A" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ZPYCpU1fYr8uvgle4Obe" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/3TY2NIIqjMjvIge9kYnX" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylemixthemes.com/consulting-theme-documentation/blocks-and-sidebars/header-builder/elementor-header-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
