How to Create and Customize Header Footer (Elementor Page Builder)


Have you ever realized that you don’t have as much control over the Elementor header along with Elementor footer as you’d want when using a WordPress theme or page builder? 

Do you wish to change your current WordPress theme’s main header footer? 

Why not make it on your own with Elementor? 😃

Here we will show you how to make custom Elementor headers and Elementor footers with Elementor step by step. With no coding knowledge required, all along with ElementsKit.

Introducing ElementsKit

With ElementsKit all-in-one add-on for Elementor includes tons of Elementor widgets, modules, and features that are enough to give you the most advanced, yet user-friendly site-making experience that you have ever had.

🤷🏻‍♀️ Why do I need a header footer on my website?
The header and footer are essential components of every website design. It is not an overstatement to claim that they play a significant role in establishing a positive user experience by facilitating website navigation. Not only that, but they’re also useful for promoting the website’s brand and displaying CTAs.

What is an Elementor Header?

Basically, the top portion of your webpage is called a website header. The header is usually the same across your entire website. Some websites use distinct headers for different portions of the site, with proper theme support.

Your Elementor header template design will provide your users with their first impression of your website, whether they’ve arrived at your homepage, about page, or any other individual content. And, if your Elementor header template is well-designed, it’ll grab the user’s attention and entice them to keep scrolling and reading.

The Elementor header also assists in promoting your company’s brand identity. Through, its useful features such as the company’s logo, font, colors, and overall brand language.

Site navigation, site search, a shopping cart (for eCommerce sites), call to action (CTA) buttons, and other features that improve the user experience and raise conversion rates are all found in headers.

🔔 Do you know?
For any type of website, a mega menu is a must-have. It makes navigating easier and helps people to find the information they need in only a few clicks.

Want to know more? Don’t forget to go through our latest blog on How to add Elementor Mega Menu Items in WordPress

What is an Elementor Footer?

An Elementor footer is a section of a webpage that appears at the bottom of the page. They are usually displayed constantly throughout the website, on all pages and posts, similar to headers.

Footers are frequently overlooked, which is a waste of potential given that the footer appears on every page of the site. They’re equally crucial to the headers.

Your footer layout design can display helpful and vital information such as newsletter registration, copyright information, terms of use and privacy, a sitemap, contact information, maps, website navigation, and much more, depending on the settings you pick.

What do you need to create Elementor Header Footer

Now, what exactly do you need to create an Elementor header footer? Well, you just need to do two things

1. Install Elementor:

  • Simply go to your WordPress admin dashboard → Plugins → Add New, and type “Elementor” into the search box.
  • Install and activate.

A quick reminder, the Elementor footer and header builder modules come with Elementor Pro. So, if you wish to edit and customize your Elementor header (along with Elementor footer), you should go for the pro version (which is $49/year for one site) or go for option 2.

2. Install ElementsKit, an Elementor header footer builder: 

To Install the ElementsKit, an all-in-one add-on for Elementor you need to follow the same procedure as we mentioned above. 

  • Simply go to your WordPress admin dashboard → Plugins → Add New, and type “ElementsKit” into the search box.
  • Install and activate.

Why ElementsKit?
ElementsKit header footer builder module comes with a bundle of surprises you can edit and customize your Elementor header (and edit Elementor footer) just the way you prefer. It also comes with multiple Elementor header footer templates, which will help you to create your header and footer in just a few clicks. Additionally, it allows you to create multilingual websites in WordPress. That’s why it’s recognized and actively used by more than 1 million active users.

What makes ElementsKit Header Footer Module Special

ElementsKit All in One Addon for Elementor has grown its popularity ever since it came into this WordPress market. We always have and will look into our users’ demands and constantly work to make things easier, and better!

ElementsKit header footer modules come in both free and paid versions. Along with the Elementor header footer, we have tons of other modules, features, and widgets.

Download Your All-in-One Add-on for Elementor

In other words, ElementsKit has one of the best Mega Menu Builder as well as Elementor Header Footer Builder modules in WordPress.

Another commendable part of ElementsKit is its pre-designed templates. It is one of the most popular and fully customizable add-ons for Elementor.

Apart from the templates, it also has an enormous amount of free and premium features:

  • 8+ Unique Modules 
  • 70+ Free & Premium Elements 
  • 30+ Ready Pages
  • 500+ Ready Sections

ElementsKit is a place where you would get multiple website building tools in one place. It also provides you the room to customize all the features with ease.

One of the main reasons for ElementsKit being so successful is its features are updated regularly over time. With ElementsKit, you will get a full package of website-building resources. 

It also includes Parallax Filter Effects which will give you a professional experience for your web visitors. 

The ElementsKit represents the highest number of modules and features that anyone could apply to make a better website in no time.

How to Make Elementor Header (or Elementor Footer) with ElementsKit

Creating and edit the header and footer on WordPress with ElementsKit can be done in just a few simple steps. But before building headers, you need to create a Mega Menu first. Then through our navigation menu widget, you can insert your menu details on your Elementor header. 

Create WordPress Header (or Footer):

To start up building first you need to go to your WordPress Dashboard and click on > ElementsKit. After that click on > Header Footer.

How to add header and footer in Elementor with ElementsKit - Elementor Header Template
Header Footer, ElementsKit

It will take you to the header footer builder page. Then click Add New to set up your Elementor header template name and other details. 

Click on Add New Template, ElementsKit - Elementor Header Template
Click on Add New Template, ElementsKit

To create and edit a header or footer you have to follow the same instruction. After clicking on the Add New button a Template Settings tab will be open.

Template Settings, ElementsKit - Elementor Header Template
Template Settings, ElementsKit

In which you have to input: Title, Type (Header or Footer), and Conditions. You can select either header or footer that you want to be placed in the entire site, singular page, or archive it. After that, you need to click on the Activation button. 

You’ve successfully created your header (or footer), now it’s time to customize it!

Customize WordPress Header (or Footer):

Now to edit your Elementor header (or footer) template, you need to click on the Edit with Elementor button. After you can finally integrate your header (or footer) into your website. 

Elementor Editing Button, ElementsKit - Elementor Header Template
Elementor Editing Button, ElementsKit

After clicking on Edit with the Elementor button, it will take you to the Elementor Dashboard. Then you’ll see three icons like this: 

ElementsKit Widget Button - - Elementor Header Template
ElementsKit Widget Button

Just click on the ElementsKit icon and an Elementor template library by ElementsKit will pop up in which you will have three options: Template, Pages, and Sections

For Header:

Then click on Sections to get the perfect Elementor header template. For better understanding, click on “Category” in the left-hand corner to find your desired section. In the Select Header section, you will see all types of default header templates. Now select any template design you like and experience the magic.

Do keep in mind that you can customize any Elementor Header Footer layouts by ElementsKit as you prefer.

Activating Nav Menu, ElementsKit header footer builder
Activating Nav Menu, ElementsKit

Now that you have chosen your desired template, you’ll see a Nav Menu icon on your header template will appear.

After that, you will see your Elementor Header title which you added from your WordPress dashboard will appear on the select menu section. And just by clicking on the header title, you will see that all your mega menu items are visible.

By clicking on the eye icon on Elementor you can preview your header. 

Elementor Header, ElementsKit
Elementor Header, ElementsKit

For Footer:

Both the header and footer integration are the same, apart from one. To create a footer you need to select the footer template from the search category of ElementsKits, input your details and you’re all good to go, easy peasy! 

Elementor Footer, ElementsKit
Elementor Footer, ElementsKit

Congratulations you have finally pulled off adding a header and footer on your website. 👏

Want to explore the other alternatives of footer customization? Check out 👉👉: How to edit footer in WordPress.

Additional Resources

3 Website Header Template Examples

ElementsKit gives you the floor to access its multiple header layouts, here are the best 3 headers that can create a great deal on your website. 

1. The Most Desirable Header for Navigation:

Header Example 1, ElementsKit - Elementor Header Template
Header Example 1, ElementsKit

This page header is best suited for sites that have more complicated navigation. There is a search bar as well as a central navigation menu. There are also search items for easier navigation. 

On the left, you can see the company’s logo as well as the company’s colors as a bonus. This professional-looking header has a classic, business-like feel to it.

2. Mobile-Friendly Restaurant Header:

Header Example 2, ElementsKit - Elementor Header Template
Header Example 2, ElementsKit

The restaurant featured a header navigation area, and the buy now option and cart view are highlighted with huge icons on the other side. You can also add a top bar with social media buttons.

3. The Unpretentious Header: 

Header Example 3, ElementsKit - - Elementor Header Template
Header Example 3, ElementsKit

Bright lavender is used in the design, which is set against a clear white background. It conveys a sense of cleanliness and order. If you want to change the colors or use gradients instead, it would just take a few seconds to accomplish your goal.

3 Website Footer Template Examples

With ElementsKit you will get several footers, here are the best 3 footers that can create a great impression on your website. 

1. The Elegant Agency Footer:

Elementor Footer Example 1, ElementsKit
Footer Example 1, ElementsKit

This footer design has its own personality. A clear view of contents, with an abstract background, this footer is solely made for agencies. With easy navigation, this footer layout emphasizes design.

2. Mobile-Friendly Restaurant Footer:

Footer Example 2, ElementsKit
Footer Example 2, ElementsKit

The footer’s wide section is packed with a dark theme, which is making it eye-catching. Because of its subtle dark background food can be portrayed in a better manner. The contact details and location are shown in a prominent spot once again.

3. The Extra Long – SaaS Footer:

Footer Example 3, ElementsKit
Footer Example 3, ElementsKit

This footer has a beautifully detailed look, with a royal blue background. It has a logo and detail columns in the center, and a navigator, contact, newsletter, and social links on the right. A perfect option for SaaS or Software companies. 

📃 Quick Note
Don’t forget to consider mobile devices when developing a header or footer with a default fallback theme support, and understand how the design may differ for them.


Check out some frequently asked questions:

How to Change Header Size in WordPress?

You can change the header size from the “Styles” tab of the Block. For that, select the header first. Then, go to the “Styles” tab and there you will find an option named “Typography”. From Typography, you can select the size of the header.

How to Style a Header in WordPress?

To style your header, you have to select it first. Then, from the right side go to “Block” and click the “Styles” tab. Here you will find color customization, typography, and other styling options for your header.


ElementsKit, an Elementor header footer builder has made it easy for every WordPress website owner, as adding a header and footer makes a website more organized and subtle. It also not only increases users’ experience but improves web traffic too. 

Never again will you have to wait for a developer to alter your header.php file, switch to a different theme only to move a header logo, or spend hours customizing your site’s CSS header and footer elements. ElementsKit makes creating headers and footers a breeze. 

Get ElementsKit Pro today and make the most of your website in various possibilities.

Please leave a comment below if you have any queries regarding the ElementsKit header footer or its functionalities.

If you liked this article, you will surely find some more helpful tips and blogs by joining our WPmet community follow us on Facebook/Twitter. Lastly, please don’t forget to subscribe to our channel on YouTube for useful tutorials.


  1. Alp Avatar


    I used elementskits to create a header for my site.

    Unfortunately, the header appears all pages, except the most important one: the homepage!

    I have no idea why it could be, could you perhaps help me with it?
    Thank you,

    1. Sanjida Avatar

      Hi Alp,
      First of all, apologies for replying late 😔

      Is the homepage you’ve chosen, by any chance, built on an Elementor canvas? If yes… Then you need to change it to ‘default‘ or ‘Elementor Full-Width

      Please follow the URL below 👇 for better instructions:

      Also, make sure to set the Header into ‘Conditional Entire Set

      Many thanks,

  2. Clayton Avatar

    Please help. I just purchased this pro plugin and I cant set specific headers for certain pages. I go to set for singular pages and it just shows the default one. The custom headers dont show up for the singular pages I set them to,

  3. Stefan Avatar

    I have a problem with viewing header and footer in wp-admin. They are hidden somehow. I see they exist in database somehow, because on top of ElementsKit Header Footer pageI I see “All(2)”

  4. Stefan Avatar

    It was WPML. Disabling translation on elementorskit_template do the fix

Leave a Reply

Your email address will not be published. Required fields are marked *