Problem

“Creating a custom header and footer for Elementor FREE”

When you start creating website using the best page builder plugin of time, Elementor, the main obstacle in your way is – The default header and footer of the theme you’re using. Whether you’re using Astra or Ocean, it is always annoying because you can not create a custom header and footer from theme customizer.

You can do too much with just Elementor Free version. Explore here

Solution

If you can create a custom header having your logo, menu and anything else on the top of your website and a custom section instead of boring widget section, copyright and footer menu, It would be interesting for you to design custom creative websites on Elementor.

The best part about this method is: You can create the header and footer using Elementor page builder itself. You need not mess up with your theme’s header.php and footer.php. Once you design it, it will be displayed on all of the pages of your website whether created with Elementor or default WP editor.

Pre Flight Checks

Make sure that you have all of the bullets checked in the list below.

Let’s Go ahead.

1 Activate the WP Plugins (Make sure they are)

Activate plugins

This will work only if both the plugins are installed and activated. Once you installed both free plugins, activate them and proceed to step 2.

2 Create an Elementor HF Template and chose the type of the template.

To Create a template for header or footer, Go to Appearance >> Header Footer Builder

Header Footers Template

This is to define the type of your template file. This will easily replace your header.php and footer.php content.

Chose type

Choose header type for the header and footer type for the footer. There will be only one template active as header and one as footer.

3 Go ahead and edit the header using Elementor

I assume that you’re familiar with the free page builder. So, Lets just do the following.

  1. Create a section
  2. Add a column widget
  3. Put image in the left side
  4. Upload the logo Image
  5. Link the logo image to the homepage
  6. Drag and drop the navigation menu widget to the right column
  7. Explore the infinity of elementor customization and craft the menu the way you want
  8. Save the template

In the same way, you can design the footer template also.

4 Make sure your design is Responsive and cool

To test the responsiveness you can use elementor page builder customizations. Once you make your web elements ready for all the devices, verify your design.

Take another look on the header using the preview feature and once you are done.

5 Add the template to the Elementor Canvas page layout

Set as Elementor Canvas

set footer as footer

This is the best part about Elementor Canvas. It disregards your theme header, footer and sidebar. It gives you a blank whiteboard to design your website from scratch.

The concept is – Elementor Canvas page layout helps you display content designed with Elementor builder only. The header and footer from the theme are disappeared. So, when you add the header and footer to the Elementor Canvas page, you’re with a solution to your problem.

6 It works with Any WP Theme

While the plugin author says it is compatible with some of the most popular themes and frameworks such as

  • Astra
  • WP Ocean
  • Genesis
  • GeneratePress.

But I am sure it will be working with any of the theme you install on your website. There is nothing to with your theme’s header.php or footer.php. However, some themes may conflict with it.

7 Create Pages with Elementor Canvas Template

Now any page you crate using Elementor, make sure you chose Elementor Canvas as its page template. This will make sure that your custom header and footer is displayed.

Elementor Canvas

Wrapping up

You’re all set to create a very stylish custom website without using any pro template or plugin. This tutorial makes your Elementor life easier.

Please post your questions in comments. I would love to solve your problems with Elementor and Designing with it.