How to Edit Headers and Footers with Elementor in WordPress

Elementor is a powerful and versatile WordPress page builder that many users rely on. However, there’s always an opportunity to enhance its functionality. For instance, if you want to edit headers and footers, you’ll need to use an additional plugin.

Editing headers or footers with Elementor can seem challenging if you’re unsure where to start. In this article, I’ll introduce you to an excellent plugin that lets you design layouts in Elementor and easily set them as your site’s header or footer.

Let’s explore this plugin and learn how to use it step by step!

Elementor – Header, Footer, and Blocks

The Elementor – Header, Footer, and Blocks plugin enables you to design custom headers and footers for your website using Elementor. By leveraging the page builder, you can create a unique layout and assign it as your site’s header or footer element.

Additionally, the plugin allows you to use custom blocks, offering even greater flexibility. It’s lightweight, simple to install, activate, and configure, while seamlessly extending Elementor’s already powerful functionality and design options.

In this guide, we’ll walk you through the steps to install, activate, and set up the Elementor – Header, Footer, and Blocks plugin.

Note: This tutorial assumes that the Elementor plugin is already installed and active on your WordPress-hosted website.

Install and Activate Plugin

To edit headers and footers in Elementor, you’ll first need to install and activate the plugin. You can easily do this by searching for it on the Plugins page within your WordPress admin dashboard.

After installing and activating the plugin, navigate to Appearance > Header Footer Builder in the left-hand menu of your WordPress admin dashboard.

Before proceeding, there are a couple of important points to address. This plugin is only compatible with specific WordPress themes. However, you can resolve this in two ways:

1. Install a theme that supports the plugin (see the list below).
2. Go to the plugin’s settings, navigate to the “Theme Support” tab, and follow the provided instructions.

Install Compatible Theme

The Elementor – Header, Footer, and Blocks plugin is natively compatible with the following themes:

Astra
Neve
Hestia
GeneratePress
OceanWP
Genesis
Phlox Theme
Attesa Theme

These themes are ideal for use with Elementor.

Note: Many of these themes also provide a variety of child themes, which are fully supported as well. Therefore, your easiest option is to select any theme from the above list.

Use the Theme Support Tab

When you access the plugin settings, you’ll notice two tabs:

1. All Templates
2. Theme Support

Click on the “Theme Support” tab.

Here, you’ll find multiple options for adding theme support to the plugin. Simply choose the solution that best suits your needs.

The recommended method should work for most themes. If it doesn’t, try the alternative method. If neither option works, you have two alternatives:

Reach out to your theme developer and request support for this plugin.
Switch to one of the compatible themes listed earlier.

Once that’s sorted, let’s explore how to use this plugin to customize headers and footers.

Note: You’ll know the plugin is functioning correctly when the “Theme Support” tab disappears, and you can proceed to create a new template.

Add Header or Footer For Elementor

Now that you’re in the template section, click the “Add New” button to create and customize headers or footers in Elementor.

You’ll be directed to the plugin’s editing page, where you’ll follow a simple two-step process. First, choose the desired settings for your Elementor header, footer, or block, and save your changes. After saving, a shortcode will be generated, which you can use to place the block wherever you need.

Once the settings are configured, you can start designing the header, footer, or custom block using Elementor. Let’s walk through each step in detail.

Elementor Header and Footer Settings

The first step is to configure the header and footer options for the new template you’re creating. Start by naming your template, and then you’ll have several options to choose from, including:

Template Type: Choose from Header, Before Footer, Footer, or Custom Block.
Display On: Select where you want the header or footer to appear on your site. You can also set display rules and exclusion rules.
User Roles: Define which user roles are allowed to make edits.
Enable Layout for Elementor Canvas: This option allows you to edit using Elementor’s “canvas” layout.

After configuring your settings, click the “Publish” button to publish the template styles.

Edit Headers and Footers with Elementor

Now you can begin building and editing your header or footer layout using Elementor. Simply click the “Edit with Elementor” button to get started.

This will open the Elementor editor, allowing you to build, design, and customize your headers and footers using the Elementor page builder.

When you’re done, click the green “Publish” button at the bottom of the editor, and you’re all set.

That’s it! Your header or footer will now appear in the locations you selected during the template configuration. It will display according to the rules you’ve set. Additionally, you can use the shortcode to insert it into blocks or other areas of your website.

Final Thoughts

The Elementor page builder for WordPress is widely considered one of the best page builders available today. However, there are many powerful add-on plugins that enhance its capabilities even further.

With this plugin, you can now edit headers and footers and display custom ones in different sections of your website based on the rules you set. The best part is that you get to design and build these headers and footers directly within Elementor, making it even easier to create custom blocks and layouts.

When you pair a versatile page builder like Elementor with a platform like WordPress, the possibilities for design and functionality are endless. This plugin simply adds even more options to your toolkit.

I hope this tutorial has helped you learn how to create and display headers and footers effectively using Elementor. Keep in mind that this plugin may require some extra setup. You might need to reach out to a theme developer or use a compatible theme for it to work properly. But the effort is definitely worth it, as it allows for complete customization of your site.

What other plugins are you using to create custom headers and footers in WordPress? Have you found any that are compatible with Elementor and as easy to build and display as this one?