How to Create Header and Footer in WordPress Using Elementor

Hey developers! In this article, we are going to see how to create header and footer in WordPress using Elementor plugin. We will not be using anything paid. Everything will be freely available on WordPress. We will design a custom header and footer using a free plugin for Elementor and replace it with the default one. So, let’s begin. 

Prerequisite

  • Should be familiar with WordPress architecture 

Table of Content

  1. What is Elementor? 
  2. Installing Elementor plugin in WordPress 
  3. Creating WordPress Template using Elementor 
  4. Custom design header and footer using Elementor 
  5. Conclusion 
  6. FAQ 

What is Elementor?

Elementor is a free page builder plug-in on WordPress, that is used for designing your website frontend pages. It has a wide range of widgets and services. It provides the convenient feature of a drag-and-drop option for various functionality and widgets on your web pages. Making it very efficient and blazing fast to design your pages. And of course, it also supports responsiveness for Mobile, Tablet, and Desktop mode. It also has a paid version, which provides a plethora of more features. But for this article, we won’t be needing it. 

Step 1: Installing Elementor plugins in WordPress

First thing first, we need to install Elementor Free version plugin, along with that, for the header and footer, we would need another Elementor plugin. Let’s see how to do that. 

Simply go to Plugins > Add New > Search plugins   

Search for Elementor. This will show a few relevant plugins, install and activate 2 of these.   

  1. Elementor Website Builder 
  2. Elementor Header & Footer Builder 

Take reference from the image below: 

Installing Elementor Plugin on WordPress
Installing Elementor Plugin on WordPress

Step 2: Creating WordPress Template using Elementor

Afterward, we will create an Elementor template on WordPress where we would be designing our Header and Footer. Later, which will be used as the official templates for header and footer on the website.  

To create a template, go to Appearance > Elementor Header & Footer Builder > Add new. 

Creating Elementor Template on WordPress
Creating Elementor Template on WordPress

Next, we will be configuring our template before we start designing. Make sure that the following settings are enabled and set. 

  1. Add a title to the template at the top 
  2. Set “Type of Template” > “Header” 
  3. Set “Display On” > “Entire Website” 
  4. Set “User Roles” > “All” 

Then finally click on Edit with Elementor button to start with designing. Take reference from the image below: 

Creating Elementor Template on WordPress
Creating Elementor Template on WordPress

*Note: You would repeat exactly the same steps for Footer Template, only change “Type of Template” > “Footer. 

Step 3: Custom Designing Header and Footer Using Elementor

Finally, we are on the good stuff. The actual designing part of the Header and Footer. Note that, I will just be showing you my version of the header and footer designs. Which is just for learning purposes. You can change the layout and features as per your liking of course. So, let’s get to it! 

But first, you need to know about the structure and layout of how Elementor works.  

Header Footer WordPress
Header Footer WordPress

So, as you can see from above, we will have 1 section and 3 columns inside of it. Since we have to add 3 different widgets, we have 3 columns to put them inside of. The 3 widgets would be the logo, the nav menu, and the search bar. 

Designing Header 

We are going to add 3 simple components to our Header.  

  1. Website Logo 
  2. Navbar Menu 
  3. Search Tab 

So first off, we need to add a section with 3 columns, according to the structure diagram shown above. See the image for reference: 

Selecting the Structure for Header Navbar in Elementor
Selecting the Structure for Header Navbar in Elementor

Now to add the widgets. For the logo widget, search for Image in the Elementor sidebar as shown in the image below. After finding it, just drag and drop it in the 1st column area.

Add logo in header navbar using elementor
Add logo in header navbar using elementor

After dropping it, you need to configure it a little. Firstly, choose an image for the logo as shown below. After clicking it, you would even have the option to upload an image right on the spot.

Adding Logo For Header Menu
Adding Logo For Header Menu

Afterward, go to the Style tab at the top. Then resize the image width, accordingly, using the slider option. Also at the bottom, set the border-radius to 15 for rounded edges. 

Now for the Navbar Menu. Seach for Nav and drag and drop it to the second column. Then simply select the Menu you want to display through this widget.  

Note: Nav widget here will only display the Menu that you would have already created in the Appearance > Menu page on WordPress.  

Adding Header Navbar Menu in Elementor
Adding Header Navbar Menu in Elementor

To set the vertical alignment for any widget, right-click and edit the Column for that widget. Then find the drop-down for the Vertical Align and select Middle. 

Lastly, in the Elementor sidebar type in Search and drag and drop that widget in the last Column. You can also go to the Styles tab and change the color scheme of your choice. Below is the final version of the Header Navbar in Elementor. 

Header Navbar in Elementor
Header Navbar in Elementor

Designing Footer 

For the footer, I’ll be moving a bit fast since you are now familiar with the structure of Elementor. So, for the footer, we will be showing 2 widgets. 

  1. Copyright disclaimer 
  2. Social links 

For the header, we had chosen 3 columns, so this time, choose the layout with 2 columns since we have only 2 widgets.  

Selecting the Structure for Header Navbar in Elementor
Selecting the Structure for Header Navbar in Elementor

For the copyright disclaimer, we will be using a basic Text Widget. Hence, search for Text and drag it to the 1st Column area.

Adding Copyrights Disclaimer in Footer Using Elementor on WordPress
Adding Copyrights Disclaimer in Footer Using Elementor on WordPress

Afterward, type in the disclaimer for your Copyrights. For instance, © 2022. All rights reserved by Programatically. Check the image for reference. 

Adding Copyrights Disclaimer Text in Footer Using Elementor on WordPress
Adding Copyrights Disclaimer Text in Footer Using Elementor on WordPress

Lastly, for the next widget, search for Social and drag the widget to the 2nd Column. Now, in this widget, there will be options to add any social media platform. And each would allow you to add your profile link for that social media platform. Let’s see how to do that.  

Adding Social Links to Footer Using Elementor in WordPress
Adding Social Links to Footer Using Elementor in WordPress

And you can also change the styling for the social links as shown in the below image. Just click on the Style tab at the top and there you will find a bunch of options. You can resize the social icons. You can change the Color field to be custom and color the icons as you would like. You could change the Border Radius to give it some roundness at the edges. Other than that, just play around as much as you like. 

Configuring the Social Links in Footer Using Elementor on WordPress
Configuring the Social Links in Footer Using Elementor on WordPress

Hit the update button and you are all done! 

Conclusion

In this article, on how to create header and footer in WordPress using Elementor, we went through the following stages: 

  1. The first step was to install the relevant plugins. The Elementor plugin and the Elementor Header and Footer plugin. 
  2. Next, we created Header and Footer templates in Elementor. Which would replace the theme’s default Header and Footer on the website. 
  3. Then we set the configurations to override our custom Header and Footer template with the theme’s default one. 
  4. Lastly, we saw how the Elementor drag and drop widgets are used for designing both Header and Footer. 

FAQ

Yes, Elementor is free, but it has a paid version as well. Although the free version has a lot of features on its own. The paid version of Elementor, has a lot of advanced, up to date features that you see in modern websites. Eg: Dark Mode 

Elementor widgets are basically features or functionalities that we can implement in our website by simply dragging and dropping the widget on to our page. The paid version provides a lot more of advance widgets.