---
title: "Customize Your Website With the Elementor Header and Footer Builder"
description: "Your website’s header can be the most important feature. It’s the first thing your visitors see, provides the primary source of navigation, and presents the most crucial calls-to-action for your..."
url: https://www.inmotionhosting.com/support/edu/wordpress/plugins/elementor-header-footer/
date: 2024-05-30
modified: 2024-06-05
author: "Jesse Owens"
image: https://www.inmotionhosting.com/support/wp-content/uploads/2024/05/elementor-header-footer.png
categories: ["WordPress Plugins"]
type: post
lang: en
---

# Customize Your Website With the Elementor Header and Footer Builder

![](https://www.inmotionhosting.com/support/wp-content/uploads/2024/05/elementor-header-footer-1024x538.png)

Your website’s header can be the most important feature. It’s the first thing your visitors see, provides the primary source of navigation, and presents the most crucial calls-to-action for your success. 

However, in WordPress, the header is typically controlled by the theme, and often doesn’t have many ways to customize it to your specific needs. Web designers are stuck between the options of using the theme’s built-in customization options, or creating a child theme and coding your own header using PHP. 

Modern “Block” themes let you use the WordPress Editor to customize your header and footer, but for classic WordPress themes, there’s still a need for more control. That’s where the Elementor Header & Footer Builder comes in.

Elementor is a resource-intensive, but powerful WordPress tool. We recommend [using a WordPress VPS](https://www.inmotionhosting.com/wordpress-vps) to take full advantage of its features.

## Elementor Users Have a Better Choice

If you already use Elementor as a page builder, this free add-on plugin will allow you to use the page builder you’re familiar with to build your header. Even if you don’t already use Elementor, you can still take advantage of this because Elementor lets you choose which editor to use on your pages and posts.

Not only can you fully customize your header and footer, but you can also use its tools to choose when to display your custom header. For example, you can show a different header to logged-in users, choose a specific header for any page, or choose to display a different header on your home page than internal pages.

### Installing Elementor Header & Footer Builder

1. If you don’t already have it, make sure that the [Elementor ](https://wordpress.org/plugins/elementor)[plugin](https://wordpress.org/plugins/elementor) is installed on your site.
2. Navigate to **Plugins -> Add New** and search for “Elementor Header and Footer Builder”![screenshot featuring the install plugin screen searching for elementor header footer](https://www.inmotionhosting.com/support/wp-content/uploads/2024/05/install-elementor-header-footer.png)
3. Click **Install**, then **Activate**

### Building Your First Header

1. Navigate to **Appearance -> Elementor Header & Footer Builder**
2. Click **Add New**
3. Here you’ll find the options for your new header. Choose the **Type of Template** and **Display On **options![screenshot featuring the template options of a new header](https://www.inmotionhosting.com/support/wp-content/uploads/2024/05/template-options.png)
4. Click **Edit with Elementor** to begin designing.

You’ll find that there are several new widgets to use to build your header, including Site Logo, Navigation, Page Title, and more.

![screenshot featuring the new header and footer widgets](https://www.inmotionhosting.com/support/wp-content/uploads/2024/05/header-widgets.png)

### Use Responsive Mode to Adjust for Mobile Devices

Enable the **Reponsive Mode** so that you can ensure your header works properly on mobile devices.

![screenshot highlighting the responsive mode tool](https://www.inmotionhosting.com/support/wp-content/uploads/2024/05/responsive-mode.png)

### Learn More

To learn more about using the Elementor Header & Footer Builder plugin, check out their [documentation](https://ultimateelementor.com/header-footer-with-elementor/) and [Support Forum](https://wordpress.org/support/plugin/header-footer-elementor/).