Joomla Elementor

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.

Elementor has crossed all boundaries and borders, reaching WordPress users around the globe. It’s available in over 50 languages, offers complete RTL support, compatible with translation plugins like WPML and Polylang. Get Started With Elementor Today. Elementor’s page builder has quickly become the most popular solutions to build beautiful and easy to manage websites in WordPress quickly and efficiently. Companies stuck with an outdated page builder, are left with a website that can’t manage or update easily— which is frustrating! Collection of 200+ Free Joomla templates, support Joomla 3.9.x and Joomla 4 Listing of 300+ Best Free WordPress themes, WooCommerce compatible, Elementor supports! Elementor Post Grid Plugin is a powerful tool to create grid and display your content in the grid form. Are you seeking a plugin that can assist you to generate grids for your site?

Sections with downloadable files are the best way to share documents and sell digital products in WordPress but we could also need a powerful page builder like Elementor and WP File Downloads will allow you to manage your files and add them directly in the page builder with a dedicated block. Instead, Elementor leaves behind clean code (though you will, of course, lose all the styling). Elementor Pro lets you build your theme with drag and drop + more. The core Elementor page builder plugin is 100% free and open source. But the Elementor team also sells an add-on called Elementor Pro.

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.

Elementor for joomla

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 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:

Elementor For Joomla

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.

3g speed vs 4g speed. 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?

Author: Jeremy Holcombe

Growing up in Hawaii, Jeremy started his freelance writing career doing resumes, business plans, article writing, and everything in between. He now specializes in online marketing and content writing and is part of the Content Marketing Team at GreenGeeks.

Was this article helpful?

Related Articles

The basic website will be installed in 10 minutes and then you can proceed to next video if you want to see how to edit the pages, menus, images, logo, text etc. All lessons are available on this homepage.

Please watch the video and scroll down to step # 2

Its a complete tutorial on how to build website with elementor.

Joomla Elementor Tutorial

Who is it for?

Joomla Elementor Free

The course is aimed at anyone who wants to create websites on their own, and possibly work as a freelancer or employee in the field of web design and development. We cover everything, so even if you've never seen HTML code in your life, you'll be able to quickly jump in.

A strict teacher that has been teaching since the age of 20. Suhail won’t give you any slack, so you will have to do the very best work you’ve done in your life.

Tauseef has a Experience in both Computer Science and Data Science. His beginner course is a must see for any aspiring web professional who want to learn from the best.

If there’s someone who can explain anything, Rahman Zeb is the one. He teaches you not just how to do something, but why to do it this way and not the other.

We know about your hectic schedule. We also know the only way you truly understand a subject is by practicing it in a real environment. This is why we’ve set a playground area that’s full of hours of exercises, questions and challenges. It even has a gaming section.

In addition to our online classroom, we also offer an option to take part in a live classroom. It takes place in our vast campus located in Westfield, London. Here you’ll be able to use the most up-to-date facilities and computer equipment.

Join our course and start building the most wanted career available today. We make sure every class is easily understood, and that all students reach the same level of expertise needed for today’s hi-tech industry.

Working hours

Monday- Thursday:8:00-18:30 Hrs
(Phone until 17:30 Hrs)
Friday - 8:00-14:00

We are here

Zama Website
Phone:+92 345 930 2920
Email: [email protected]