How to Create a Custom Header and Footer With Elementor 2020

Your website’s design will determine how long visitors will stay on your site. It also determines the impression they will have about the website before even reading its content.

A well-done header and footer, in particular, can give a favorable impression and increase user retention.

For instance, a search bar or navigation menu will enable them to find what they need from your site fast while adding social media buttons will encourage them to share your content.

In this article, we will guide you through using Elementor to create a powerful header and footer for your site. Elementor is a free WordPress page builder that comes with excellent design features.

Once you install the Elementor plugin to your WordPress site, you can use this tutorial to build a header and footer from scratch.

But you can also make your work easier by working with a template from Elementor’s library of pre-designed header & footer templates.

Here’s a quick index to help you navigate this article:

Create a Menu From WordPress Dashboard
Decide the Basic Layout
Create a Blank Header or Footer
Create Your Custom Header/Footer
Publish Your Custom Header/Footer
Conclusion

Let’s dive in.

Head over to WordPress dashboard > Appearance > Menus > Edit Menus.

Write your menu name in this box. As we will create a primary menu for our website, write “Primary Menu”. On the other hand, if you want to create a footer menu, type here “Footer Menu”.
Now click on the “Create Menu” button.
Select the pages that you want to show in your primary menu. Check “Select All” if you want to see all the pages.
Next, click “Add Menu”
After that, the pages will appear on the right side. If you want to create a sub-menu under any page, then simply select the page that you want to add as a sub-menu and drag the page a little bit to the right side and drop it.
Select “Primary Menu” from here.
Last, save the changes.

Decide the Basic Layout

In this part, you have to decide the basic layout of your header and footer. An ideal header may contain a site logo, a site title, a menu that contains page links, a search bar, social icons, and more.

On the other hand, an ideal footer menu may contain web page links, a site logo, title, social icons, the official address, a google map, and more.

After deciding the site’s elements, create a UI design of your header and footer where you will place the elements. If you need to, you can use Adobe XD to create the UI/UX of your site.

Create a Blank Header or Footer (or Use an Elementor Template)

Go to WordPress dashboard > Templates > Saved Templates > Add New.

create a blank header or footer in elementor

Now choose ‘Header’ to create a header template. If you want to create a footer template, choose ‘Footer’ instead of using ‘Header’.

Now if you want, you can choose a name for your template or leave this box blank.

This will open the Elementor template library. You can choose a template for your website.

Simply insert a template by clicking the ‘Insert’ button. You can see this insert button when you move your mouse cursor over to a template.

If you like, you can use the default template. Otherwise, you can also redesign the template per your requirements. That will save you a lot of time.

choose a header block from elementor library

On the other hand, you can also design it from scratch. To do this, simply click on the ‘X’ icon to remove the template library.

Now let’s dive into the next step.

Create Your Custom Header/Footer

In this guide, we will create a header that contains a logo and site title, navigation menu, and search bar.

1. Add a Section

Now create a section with three columns that defines the header structure. Our site logo will be on the left side, menu in the middle, and the search bar on the left.

If you don’t know how to work with the sections, columns, and widgets, you can read how to get started with Elementor tutorial on our website. To learn how to edit Elementor widgets and design a page, you can also read how to use the Elementor free page builder tutorial.

From the layout tab, you can select different kinds of values of properties.
You can fit the content width to boxed or full width, or set a custom size.
You can also decide the proportion of columns under the section.
The layout or content tab is used to upload contents or elements and to customize some options as well.
From the style tab, you can set the color of every element and design it in your own way.

It is mainly used to design the elements of a website.

From an advanced tab, you can set the advanced options of a website, like a margin, padding, motion effects, etc.

You will find content/layout, style, and advanced options for every section, column, and widget. Using these options, you can design your header and footer however you want.

2. Add a Logo

The first thing you need to do is add your logo from the WordPress dashboard. To maintain proper guidelines, your current WordPress theme will handle the site identity-related elements like site logo, site title, etc.

You have to set the logo correctly. For doing that, go to WordPress dashboard > Theme customizer > Header > Site identity > Upload your logo.

After that, when you use the ‘Site Logo’ Elementor widget anywhere on your navigation menu, it will pick the logo automatically.

Select the ‘Site Logo’ widget and drop it into the first column.

From the editing options, you will be able to edit the logo according to your requirements. You can change its size, alignment, and more.

If you have previously added your site title from the WordPress dashboard, the logo will automatically pick the site homepage link. Otherwise, you can also add your custom link to the logo.

3. Add a Navigation Menu

Now drag the ‘Nav Menu’ widget from the left side and drop it into the middle column.

add a navigation menu using elementor elements

As we have created the menu earlier from the WordPress dashboard, the menu will appear when you drop the nav menu widget.

There are some main options on the settings panel that you need to configure.

‘Menu’ automatically picks what type of menu you want to create. You have set it from the WordPress dashboard.

‘Layout’ decides if your menu will be horizontal, vertical, or drop-down.

‘Pointer’ gives you the option to set how you want to highlight the page link.

You can also add different types of animation to your menu.

If you select ‘hamburger’ from the toggle button, then your menu will appear when you click on a button.

4. Add a Search Bar

Now let’s add a search bar on the right side of our menu by dropping the ‘Search Form’ widget here.

add a search bar using elementor elements

There are a couple of important options:

Skin: Skin lets you decide what the search bar looks like if it will be classic, minimal, or full screen.

Placeholder: You can leave the search box empty or add some text like ‘Search here’ into the box.

Alignment and size: Alignment decides its position, and you can increase or decrease its size by using the search option.

5. Add More Header/Footer Elements

There are plenty of Elements and widgets that you can use to create a custom header and footer with Elementor. Look up the Elementor library to discover some amazing widgets. These widgets can add more value to your header and footer.

add more header footer elements from elementor

These extra widgets include site title, site map, images, texts, animated headlines, social icon, etc.

Design your header or footer further by using the style and advanced tab options.

Publish Your Custom Header/Footer

After finishing the design, it’s time to publish the header and footer. Click on the ‘Publish’ button on the bottom of the Elementor dashboard.

This is the most basic condition set up to show the header all over the website.

Here is another type of condition to show the popup only on the ‘Contact Us’ page:

After that, this set up shows you how to show a popup across the site except for only one page. According to this third type of condition, this menu will show the entire site without the blog page only.

At last, click on the ‘Save and Close button’

After finishing the configuration process, let’s see how the header is looking.

Using the same process, you can create a custom footer.

Conclusion: How to Create a Custom Header and Footer With Elementor

You do not need to be a coding expert or hire a web developer to take advantage of the benefits a customized header and footer can bring to your site. Follow this easy step by step guide.

Elementor allows you to create a captivating header and footer, and you can have it appear on one page of your website, selected pages, or every page.

You can redesign one of the templates provided by Elementor to meet your needs. You can add a logo, navigation menu, search bar, social media icons, or any other element or widget that will improve your site’s design and capture your visitors’ attention.

If you have any questions, feel free to talk to us.

Others Elementor Tutorials:

How to Create a Custom Header and Footer With Elementor 2020 (Step by Step)

Create a Menu From WordPress Dashboard (for Header Only)

Decide the Basic Layout

Create a Blank Header or Footer (or Use an Elementor Template)