# Before Footer

The Before footer part of the demos is created using The **Elementor Header & Footer Builder** plugin. 

First of all, make sure that you have installed and activated the **Elementor Header & Footer Builder** plugin. 

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FZkNaQL4fjtZBQNKOMYXu%2FCompanion%20-%20Plugins.png?alt=media\&token=9e4d1cde-f58e-4694-8bab-142028560dc2)

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://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FTg09rH2qkUTfAeer2zxY%2FCompanion%20-%20EL%20H%20%26%20F%20add%20new.png?alt=media\&token=6d7ac9b6-1bde-42eb-b85e-c4d37e684e62)

## Create Custom Before Footer

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 **Before Footer** on the **Type of Template**.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FvRt1eZpbjDDAENcrUv42%2FCompanion%20-%20Before%20Footer%20add.png?alt=media\&token=2748b6bb-f830-4aa3-bca1-1df924ca2038)

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

Click the **Publish** button to save the template.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FiqJ2pw67DxRRAHst9sBH%2FCompanion%20-%20Before%20Footer%20publish.png?alt=media\&token=f1bfffba-369b-48ba-b408-350e5846baa8)

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

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FlRo1Bq2jqcjmArPlM4Vi%2FCompanion%20-%20Before%20Footer%20edit.png?alt=media\&token=0653a6ab-2b6a-4906-b198-2f03e9a3ff07)

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 before footer on the website.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FaDsN58ikAtTC1vRQZ0H7%2FCompanion%20-%20Before%20Footer%20ready.png?alt=media\&token=2b24db2e-e136-445d-b6d8-a36361b7237c)