How to Create Headers or Footers with Elementor?

Have you ever felt limited by your theme when trying to customize the header footer of your website? Most WordPress themes and page builders offer only basic options, such as alignment tweaks or a search toggle. But what if you want full control over your WordPress header and footer layout, design, and functionality? That’s where tools like Ultimate Addons for Elementor come in, making it easy to design custom Elementor headers and footers without any coding.

If you’re building your WordPress website using Elementor, one of the most powerful features you can use is the ability to create a custom header and footer with Elementor. This allows you to design a consistent look across your site without relying on your theme’s limitations.

But to do that means altering the code in the header.php and footer.php files… and is that something you really want to mess around with? Wouldn’t it just be much easier if you could use the tools already at your disposal to give your WordPress site unique headers and footers?

Thanks to Elementor and another handy plugin – Ultimate Addons for Elementor, you can!

How to Use the Ultimate Addons for Elementor

Here’s a step-by-step guide to achieve a professional-looking header and footer using Ultimate Addons for Elementor:

1. Install and Activate Plugins

To start with, make sure that you have the two plugins installed and activated, Elementor and the free version of Ultimate Addons for Elementor.

Ultimate Addons for Elementor works smoothly with all major WordPress themes. If your theme needs special handling, simple compatibility settings are available to make integration effortless.

In case, after activating the plugins, you see a notice:

Navigate to UAE > Settings > Theme Support. Select a method to add theme support. In case these methods do not work, contact your theme author and request them to add support for the plugin.

2. Set Up the Header or Footer Template.

Under the UAE menu in WordPress, click on the Header & Footer Builder.

• Select Add New.
• Name the template.
• Choose the “Type of Template” whether you want to create a header, footer, custom block or before footer template.
• Select target locations with the “Display Rule” where the template should appear.
• Set “User Roles” for whom the template will be displayed.

Hit the Publish button when you’re done.

3. Create the Header or Footer Template in Elementor

Next, go to Edit with Elementor. From here, you can build your header or footer template from scratch.

First, drag-and-drop the columns element into the interface on the right. Then set the number of columns you want to work with.

Once you have the framework established, fill in the remaining elements. Again, simply find them on the left and drag-and-drop them into place.

4. Add the Navigation Element to Your Template

Create a new menu if you haven’t so you have a navigation bar to include in your template:

Something to note here is that the Elementor’s free plugin does not come with a menu widget. But Ultimate Addons for Elementor plugin does 🙂

Ultimate Addons for Elementor adds the following widgets and features in the Elementor editor.

• Site Logo
• Retina Logo
• Site Title
• Site Tagline
• Navigation Menu
• Search
• Cart
• Page Title
• Breadcrumbs
• Post Info
• Copyright
• Scroll to Top

As with other elements in Elementor, all you need to do is drag and drop the widgets. In our case, we are using the Navigation Menu widget. Make sure that you have a menu created under the Appearance > Menus tab in WordPress; your new menu will now populate within the template.

With your navigation set, your template finalized, and all the elements customized to your liking, click the Update button.

5. Pay Attention to Responsiveness

One more thing you will want to do here before returning to the WordPress dashboard is checking on the responsiveness of your new header element. As you know, mobile menus can’t really accommodate the horizontal, full width-spanning elements we use on a desktop. So, be sure to customize that before you move on.

You can design the mobile versions of your header and footer templates using the responsive switches at the bottom of the widgets menu:

This will give you a look at how your new header or footer element will appear on tablets as well as smartphones. If you want to edit any of the elements for specific device screen sizes, look for the icons next to the elements:

Toggle to the device you want to customize the setting for, apply the change, and then repeat for all other screen sizes. Click the Update button to save all your changes.

6. Verify the Design

This is the basic header design we have created.

Return to WordPress, publish the changes to your site, and then hit the Preview button to ensure everything looks good on the front end of the site:

To apply this new header and/or footer you’ve created for the rest of your site, complete the final step.

7. Apply the Template Site-Wide (Optional)

If you use one of the supported WordPress themes, then there’s less work for you to do here as your new custom header and footer elements automatically populate throughout the website upon publication. There actually isn’t a fourth step for you in that case (which is an even greater argument for using these themes).

However, if your client’s website happens to be stuck with a different theme and you still want to add a custom header or footer to it, here is what you need to know:

When you build a new page in WordPress, select the Elementor Canvas template if you’re using a non-supported theme.

When that box is checked, it gives you the ability to quickly add your template to the Elementor Canvas page attribute. By simply selecting that page attribute, your web page will now auto-populate with the header or footer template you’ve generated:

8. Alternative Method: Using a Child Theme (Advanced Users Only)

WordPress themes simplify website design but often limit header and footer customization. Most themes allow layout selection for headers and footer widgets, but for a unique experience, you can:

1. Create a child theme. Then edit the code in the header.php or footer.php files to build out your custom designs and layouts.

2. Use the Elementor Page Builder along with the Ultimate Addons for Elementor plugin to simplify the whole thing.

Wrapping Up

WordPress is a great tool, but it has limitations, especially in designing header and footer elements. Fortunately, with the Ultimate Addons for Elementor plugin, you can gain more control over these sections and create a unique look for your site.