How to Add and Edit Headers and Footers in Elementor

add-header-footer-elementor

Giving the fact that Elementor offers you so many options, setting up and editing your website might become a daunting task.

On one hand, Elementor gives you the freedom to adjust your your site as you wish. On the other hand, it can overwhelm you with all its features and customization options.

In this article, I will explain how to create and edit your site’s header and footer with Elementor, so you can easily add them to your site and manage them.

Things you’ll need

To get started, you’ll need the following:

1. Elementor Pro

Important: header and footer builder is only available in the premium version of Elementor. So, you’ll need to install both Elementor free and pro plugin.

2. Compatible theme

You can edit the header and footer of any WordPress theme which is compatible with Elementor. Here are some versatile and functional themes that you can use:

3. Header/footer design

You will need a header and footer design, which you can build from scratch in Elementor. Or, you can use existing headers and footers, which are available in Elementor blocks library.

How to add and edit headers and footers in Elementor

The process is not as easy and straightforward, but once you learn how to do it, you’ll have endless customization possibilities.

Create a header

To create a header in Elementor, follow the next steps.

1. Go to WP admin – Templates – Theme Builder

2. Click on Add New, select the Header template type and name your header. Click on Create Template

Elementor theme builder
Elementor create new header

3. Select a header from exiting list and click on Insert.

Elementor choose header block
Elementor insert header

If you want to create a header from scratch simply close the Library window and start building your desired elements.

4. Customize the header as you wish and click on Publish.

Elementor publish header

5. Select where you want to display the header on your site. Click on Add condition, choose one (for example: Include – Entire site) and click on Save & Close.

Elementor display conditions header

If you want to change the display conditions at a later time, you can do so by clicking on the arrow located next to Update button and then accessing the Display Conditions option.

Elementor update display conditions

Notes:

  • Your header name will be the permalink of your header template. You can’t change the header permalink once you created it.
  • You can view all your headers under Templates – Theme Builder – Header section in your WordPress admin.
  • Elementor introduced a new Theme Builder in version 3.0. It’s more visualy oriented and does the same things as described above. You can access it while editing a page. Click on the hamburger menu – Theme Builder.
Elementor access new theme builder

Create a footer

1. Go to WP admin – Templates – Theme Builder

2. Click on Add New, select the Footer template type and name your footer. Click on Create Template

Elementor theme builder
Elementor create new footer

3. Select a footer from exiting list and click on Insert.

Elementor choose footer block
Elementor insert footer

If you want to create a footer from scratch simply close the Library window and start building your desired elements.

4. Customize the footer as you wish and click on Publish.

Elementor publish footer

5. Select where you want to display the footer on your site. Click on Add condition, choose one (for example: Include – Entire site) and click on Save & Close.

Elementor display conditions header

If you want to change the display conditions at a later time, you can do so by clicking on the arrow located next to Update button and then accessing the Display Conditions option.

Elementor update display conditions

Notes:

  • Your footer name will be the permalink of your footer template. You can’t change the footer permalink once you created it.
  • You can view all your footers under Templates – Theme Builder – Footer section in your WordPress admin.
  • When you edit the footer, you’ll already see the header which you created earlier. It will also be visible on all pages defined in Display Conditions option.

Elementor offers you some really powerful features when it comes to header and footer editing. You can create multiple headers and footers, display them on specific pages, make them sticky, etc.

All these features can be confusing, so I hope you’ll find this guide useful and will be able to manage your headers and footers with ease.

Leave a Comment

Your email address will not be published. Required fields are marked *