# Footer

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

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FPikg4mvhKlkrG3Z1RLed%2FCompanion%20-%20Footer%20add.png?alt=media\&token=a62d5530-9eb1-491d-9d06-1ba9dbd2df85)

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%2F9Vw4PFhT0q1bxG185dEQ%2FCompanion%20-%20Footer%20publsih.png?alt=media\&token=b58f686c-4f0e-47b0-a037-b327c83b0daf)

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%2FOxjMJTJ1JGFZ27RAMDcU%2FCompanion%20-%20Footer%20start%20edit.png?alt=media\&token=3485a203-e49a-461e-afdb-c2c6e06dba5f)

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

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F72tGg9zWYSXWFADGhlPE%2FCompanion%20-%20Footer%20ready.png?alt=media\&token=ccda78f8-13e9-4212-82cd-eac796e809de)