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.
Once redirected, a modal window will appear. Choose Header from the dropdown, give the header a name, and then click Create 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:
Once you’ve chosen a template, it should appear on top of the 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.
Click Publish once you’ve chosen a logo:
Refresh the Elementor interface and your site’s logo should now be in the header:
Once you do that, you can edit it as you need:
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:
Here’s the structure of our menu and you can see that is reflected on the header template:
You can change the menu contents if you need to if you have more than one menu:
Like all widgets you can edit its properties as well:
We can add new sections to our header if we need to add more items:
Let’s add a header, and some social icons:
Once you do that, you can edit as you need to. Here’s what our edit looks like:
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:
And this is what a page on our live site looks like:
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:
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.
Here is the template we chose for our site:
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).
Just edit the footer as you need. This is what our edit looks like:
Publish the Footer
Once done, publish the footer:
Final Product
Here’s what the final product looks like. Our site now uses both the Header and Footer:
Conclusion
That’s all you need to know! Now you can create your own site header and footer too!