# Elementor Header & Footer

Take more control over the header and footer on your website with Elementor page builder. Create and customize new block templates.

Plugins required: Elementor page builder, [Ultimate Addons for Elementor](https://wordpress.org/plugins/header-footer-elementor/) (formerly, Elementor Header & Footer), and MasterStudy Elementor Widgets. Before starting work, make sure the plugins are active.

### **Create a new template**

To create a new template for the header/footer go to **WP Dashboard > UAE > Header and Footer builder:**

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FnWtJUYQggF4cqHwu7XwR%2Fimage.png?alt=media&#x26;token=52c77dad-e59e-4913-a404-e22cbde19e4e" alt=""><figcaption></figcaption></figure>

**The Header, Footer & Blocks** screen displays all the templates and allows you to create a new one.

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FtTWSrqb91yt4cyitdj9w%2Fimage.png?alt=media&#x26;token=1e22ad13-7f27-44db-8ac7-d971d1e78642" alt=""><figcaption></figcaption></figure>

Click **Edit with Elementor** to design your template.&#x20;

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2Fo4VC4IP1rdHjpuptxNWK%2Fimage.png?alt=media&#x26;token=7aa13935-3f81-43e1-bda1-783bc1d37adf" alt=""><figcaption></figcaption></figure>

To add a new template open the Elementor Library by clicking on the **Import Template** in the lower right corner.

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FWnZdMOzVBRFQxpjHHTff%2Fimage.png?alt=media&#x26;token=351b352e-385d-4635-95b9-2bda96dd5772" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FMtbHiGuZQ2RjwmvEavxY%2Fimage.png?alt=media&#x26;token=086e226d-659c-47ae-a31c-ec3e4dd97843" alt=""><figcaption></figcaption></figure>

Select one of the templates and click **Insert** to import the layout. You can add different elements as well and customize the header/footer.

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FpyBHfyjBmkQsWIwYjaTW%2Fimage.png?alt=media&#x26;token=752d846e-aa89-4304-a573-0dac541658c0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2F6oBB9mkBDtQ32BaOEafO%2Fimage.png?alt=media&#x26;token=35c71d94-f35f-4634-bf4f-18ae9a74622b" alt=""><figcaption></figcaption></figure>

When editing the template, scroll down the page to **Elementor - Header Footer & Block options**.

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2F8R0nx3EvNmFXTrdu6TWJ%2Fimage.png?alt=media&#x26;token=657a0914-0bd0-4b7f-93ee-543f4ae67c1b" alt=""><figcaption></figcaption></figure>

This section provides a set of options where you can:

* **select the type of template (like header, footer, etc.);**
* **choose where to display the template;**
* **specify the user roles.**

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FZ6EmlWmM5mzW5Sk5zdx9%2Fimage.png?alt=media&#x26;token=42df6abe-3bb3-4a9f-b985-da8deef62656" alt=""><figcaption></figcaption></figure>

**Also, there are STM additional settings where you can make the header sticky.**\
**Simply enable the option Make Header Sticky.**&#x20;

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FxUAdrOboizIEd7r408aq%2Fimage.png?alt=media&#x26;token=e48715c2-8bc5-4503-a791-bc3cbb8ff216" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2F1HKqZf4GN3t2B7aiD7x2%2Fimage.png?alt=media&#x26;token=b976544c-363d-482d-9c2f-58d69d1dec51" alt=""><figcaption></figcaption></figure>

**You can specify the threshold for the header in Sticky threshold apply style. That means,  the sticky header style will be applied once you scroll down the page a certain amount of pixels, then the block is fixed on the page. You can also set the background color.** <br>