# Header

The header part of the Elementor demo is created using The **Ultimate Addons for Elementor Lite**\
(formerly known as **Elementor Header & Footer Builder)** plugin.&#x20;

First, ensure you have installed and activated the [**Ultimate Addons for Elementor Lite**](https://wordpress.org/plugins/header-footer-elementor/) plugin.&#x20;

<figure><img src="https://687718835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBP5ah3ZU6B3thBHJbnWV%2Fuploads%2FMA1rKgFVXgSYbwbBTtvE%2Fimage.png?alt=media&#x26;token=cdee79b8-5307-4ebf-aa5c-2face5bd9ff3" alt=""><figcaption></figcaption></figure>

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.

![](https://687718835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBP5ah3ZU6B3thBHJbnWV%2Fuploads%2FSoQ3dUVrWuqfLinHTcE6%2FLMS%20Starter%20-%20H%20%26%20F%20add%20new.png?alt=media\&token=09dc859e-6bb8-429a-9858-04be21bb495e)

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

![](https://687718835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBP5ah3ZU6B3thBHJbnWV%2Fuploads%2FLWV8CuULijjHLcBBjXAE%2FLMS%20Starter%20-%20H%20%26%20F%20add%20header.png?alt=media\&token=01a87665-b63c-421b-b2c1-d8c45b1f1e5c)

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
* **The 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, and 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.

![](https://687718835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBP5ah3ZU6B3thBHJbnWV%2Fuploads%2FMNv7RAkXThZWz50RcAhn%2FLMS%20Starter%20-%20H%20%26%20F%20add%20new%20header.png?alt=media\&token=25a5376c-744b-4f52-bec4-47bf2bf5f60c)

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

![](https://687718835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBP5ah3ZU6B3thBHJbnWV%2Fuploads%2FmQK1offYwWYpqrmvkHWG%2FLMS%20Starter%20-%20H%20%26%20F%20edit%20header.png?alt=media\&token=26821c44-5f38-41b7-9c22-5052c9abf925)

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

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

<figure><img src="https://687718835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBP5ah3ZU6B3thBHJbnWV%2Fuploads%2FuXOE70Nc5xHFw9ATOGo8%2FLMS%20Starter%20-%20H%20%26%20F%20edit%20header%20fin.png?alt=media&#x26;token=6ea0278e-31e9-47f6-9282-1d63d5a50f5c" alt=""><figcaption></figcaption></figure>
