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.
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
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.
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:
To Install the ElementsKit 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.
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, 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.
In other words, ElementsKit has one of the best Mega Menu Builder as well as Header Footer Builder modules in WordPress.
Another commendable part about 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 updating 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.
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.
To start up building first you need to go to your WordPress Dashboard and click on > ElementsKit. After that click on > Header Footer.
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.
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.
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!
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.
After clicking on Edit with the Elementor button, it will take you to the Elementor Dashboard. Then you’ll see three icons like this:
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.
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.
For Footer:
Both the header and footer integration is 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!
Congratulations you have finally pulled off adding a header and footer on your website. 👏
Additional Resources
- How to Build Elementor Mega Menu in WordPress
- How to Create Elementor Menu Anchor in WordPress
- How to Create Instagram Feed on WordPress Website
- How to Create FAQ Section in Elementor WordPress
- Best WordPress Theme for Elementor (Free & Pro)
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:
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:
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:
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.
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:
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:
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:
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.
Conclusion
ElementsKit 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.
3 Comments
Hello,
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,
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:
https://elementor.com/help/using-elementors-canvas-page-template/
Also, make sure to set the Header into ‘Conditional Entire Set‘
Many thanks,
Sanjida
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,