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
3. Select a header from exiting list and click on Insert.
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.
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.
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.
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.
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
3. Select a footer from exiting list and click on Insert.
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.
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.
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.
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.
Update: Website kits are now available in Elementor Pro version 3.3. This means that you can import a full website kit, including header/footer and launch your website faster.
Elementor Pro offers 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 create and manage your headers and footers with ease.
P.S. while many themes have their own header and footer builders, it makes sense to use Elementor’s builder if don’t want to be locked to a specific theme or wish to switch themes and keep your design.
