How to Edit Headers and Footers with Elementor in WordPress

If you have been using Elementor for a while you know that it is a very solid WordPress page builder with a lot of capability. However, there is always room to add more functionality, and if you want to edit headers and footers, you will need an add-on plugin.

Editing a header or footer in Elementor can be a difficult process if you are not sure where to look for the solution. In this article, I am going to show you how to make use of a great plugin that will allow you to create a layout with Elementor and then assign that layout as a header or a footer on your website.

Let’s take a look at the plugin in question and then learn how to use it together.

Elementor – Header, Footer, and Blocks

The Elementor – Header, Footer, and Blocks plugin allows you to create website headers and footers with Elementor. You create a custom layout using the page builder and then set it as an Elementor header or footer element on your website.

You will also have the ability to use a custom block as well with the plugin. Basically, the tool is easy to install, activate, and set up. It is lightweight and gives even more flexibility and building options to Elementor. As you know, this page builder is already packed with functionality.

Let’s take a look at how to install, activate, and set up the Elementor – Header, Footer, and Blocks plugin.

Note: This tutorial assumes that you already have the Elementor plugin running on your WordPress Hosted website.

Install and Activate Plugin

In order to edit headers and footers in Elementor, you first need to install and activate the plugin. You can do this by searching for it on the plugins page of your WordPress admin dashboard.

Once the plugin has been installed and activated, click on Appearance > Header Footer Builder. You will see this located in the left menu of your WordPress admin dashboard.

Now, there are a couple of issues we need to talk about quickly before moving on. This plugin is actually only compatible with certain WordPress themes. There are two ways to get around this issue:

1. Install a theme that is compatible with the plugin (list below)
2. Click on the “Theme Support” tab in the settings section for the plugin and follow those directions.

Install Compatible Theme

The Elementor – Header, Footer, and Blocks plugin is only compatible out of the box with the following themes:

• Astra
• Neve
• Hestia
• GeneratePress
• OceanWP
• Genesis
• Phlox Theme
• Attesa Theme

These are the best themes to use with Elementor.

Note: Some of these themes also offer a variety of child themes. All of those will work as well. So your first option is to use one of the themes from the above list.

Use the Theme Support Tab

Once you are in the settings section for this plugin you will see two tabs.

• All Templates
• Theme Support

Click on the “Theme Support tab.

You will see a couple of different solutions here for adding theme support to the plugin. Go ahead and choose the one you prefer.

The recommended method should work for most themes. If it doesn’t, try the second method. Now, if neither of those two methods work, then you have two choices. You can contact your theme developer and ask them to add support for this plugin, or you can install a compatible theme from above.

Now that is done let’s go ahead and look at how to use this plugin to edit headers and footers.

Note: You will know you can use the plugin properly because the “Theme Support” tab will disappear and you can now add a new template.

Add Header or Footer For Elementor

Now that you are in the template section, go ahead and click on the “Add New” button to add and edit headers or footers for Elementor.

You will be taken to an editing page for the plugin. Here, you will need to complete a two-step process. You need to select all the options you want for the Elementor header or footer and save them. Once saved, you will be presented with a shortcode as well that you can use to put the block in where you want.

Once you make those selections, you can now actually build the header, footer, or custom block using Elementor. Let’s look at what both steps take to accomplish.

Elementor Header and Footer Options

The first thing to do is to set the header and footer options for the new template you are about to build. You are going to name the template. From there, you have several options. They include:

Type of Template: Header, before footer, footer, or custom block.

Display On: Here you will select where to display the header footer on your site. You will also be able to add display rules and exclusion rules.

User Roles: Select your user roles of who can make edits.

Enable Layout for Elementor Canvas: This will allow you to edit using the “canvas” layout that Elementor offers.

Once you have these configurations how you want, click the “Publish” button and the template styles will be published.

Edit Headers and Footers Using Elementor

Now you can go ahead and actually build and edit your header footer layout using Elementor. To do this, click on the “Edit with Elementor” button.

This will open the Elementor editor where you can then build, design, and edit headers and footers using the Elementor page builder.

When you are finished, click on the green “Publish” button at the bottom of the editor and you are all set.

That’s it! You can now display this header or footer in the places you chose while configuring the template. The header footer will display based on the rules you have in place. You can also use the shortcode to display it in blocks or other parts of your website.

Final Thoughts

The Elementor page builder for WordPress is arguably the very best page builder out there right now. That being said, there are a lot of great ad-on plugins available that make this page builder even more powerful.

With this plugin, you can now edit headers and footers and display custom ones in different parts of your website based on the various rules you set. The kicker, you get to build and design these headers and footers using Elementor, which makes creating custom blocks and designing custom headers and footers even easier.

When you combine a page builder like Elementor with a platform like WordPress, the possibilities are endless when it comes to concept and design. This plugin only gives you even more options.

I hope this tutorial showed you how to effectively create headers and footers to display using Elementor. Remember, this specific plugin may take a little extra work to get going. You might have to contact a theme author or use a compatible theme for the plugin to work. However, the process is totally worth it as your site will be as customized as you want.

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