Skip to content

How To Create Headers and Footers With Elementor Pro

  • 6 min read
  • by

Introduction

Headers and Footers are important components of a website. The header usually contains navigation links that make it easy to access different parts of a website. The footer on the other hand contains important information that visitors of your website may need like a business address or contact details just to name a few.

On WordPress, headers and footers are provided by a user’s current theme. These are usually well designed and sufficient for most purposes. if you want to customize your themes though, you’d have to modify code. Page Builder plugins can help with this. With them, you can create and customize webpage components, without having to know any code.

In this tutorial, we will be learning how to create a website header and footer. We will be using Elementor Pro (since the basic version of Elementor does not include the features most important for creating these components). So install Elementor Pro and make sure to activate it.

With that let’s begin.

Creating a Header

In this section, we’re going to be creating a customized header. If that sounds daunting don’t worry, we won’t be creating the whole header from scratch. Instead, we will be utilizing the templates provided by Elementór Pro, created by Elementor’s design team.

Creating the Header Template

To create our header, hover over Templates, on the WordPress admin dashboard then click on Add New.

click add a new template

Once redirected, a modal window will appear. Choose Header from the dropdown, give the header a name, and then click Create Template:

create a template

This will open the Elementor interface. You will then be shown a catalog of templates you can select from. So pick one that you like:

pick one from library

Once you’ve chosen a template, it should appear on top of the Elementor editing section:

Elementor editing section

Adding a Logo

The first thing we need to do is add a logo. To add a logo to the header, set the logo in the site’s Live Editor. Click on Site Identity then choose a logo.

choose a logo

Click Publish once you’ve chosen a logo:

click the publish button

Refresh the Elementor interface and your site’s logo should now be in the header:

refresh - logo in the header

Once you do that, you can edit it as you need:

edit the logo

Editing the Header Menu

The next thing we should do next is edit the menu. The template automatically includes a menu if you have one created:

the menu

Here’s the structure of our menu and you can see that is reflected on the header template:

menu structure

You can change the menu contents if you need to if you have more than one menu:

change menu contents

Like all widgets you can edit its properties as well:

edit properties

We can add new sections to our header if we need to add more items:

add new sections

Let’s add a header, and some social icons:

header and social icons

Once you do that, you can edit as you need to. Here’s what our edit looks like:

look at your results

Publishing the Header

When finished editing, you can now publish the header. In our example below, we will be using the header on our entire site, so we will be choosing that option after pressing Add Condition:

publishing header

And this is what a page on our live site looks like:

look at your page

Creating a Footer

Creating the Footer Template

Creating a footer is also very similar to creating a header. To create one just create a new template for the footer:

create a footer template

Then choose a template. There are many types of footers. There are some that contain company information, some contain contact forms. Choose a template that would be suitable for your needs.

choose one from library

Here is the template we chose for our site:

stay in touch

Editing the Footer

Once you start editing, you would see the header as well (if you set the condition that it appears on all pages).

editing the footer

Just edit the footer as you need. This is what our edit looks like:

be updated

Publish the Footer

Once done, publish the footer:

publish the footer

Final Product

Here’s what the final product looks like. Our site now uses both the Header and Footer:

site with header and footer

Conclusion

That’s all you need to know! Now you can create your own site header and footer too!

Kristin Eitel

Kristin Eitel