Do you want to create a professional header and footer for your website using the free version of Elementor?
In this tutorial, I will show you How To Create Header And Footer Using Elementor For FREE in just a few clicks.
Elementor is a visual page builder that offers a “Drag and Drop” feature that allows you to easily create custom layouts for WordPress without any coding knowledge.
Learn More About Elementor Free vs Pro
First of all, let’s have a brief introduction about what is header and footer?
What is Header on a website?
Basically, the top of your web page is called the website header. The title is usually the same throughout your website. Your header design will provide your users with their first impression of your website.
The website header also helps promote your company’s brand identity. site navigation, site search, shopping cart (for eCommerce sites), call-to-action (CTA) buttons, and other features that improve user experience and increase conversion rates are all found in headers.
What is Footer on a website?
1. Install and activate elementor plugin
First of all, you need to install and activate the Elementor page builder plugin (if you haven’t already installed it) that allows you to edit your web pages easily.
Navigate to your WordPress dashboard hover on plugins -> add new plugin in search type Elementor
A quick reminder, the Elementor header footer builder module comes with Elementor Pro, but in this tutorial, we are using ElementsKit which is an Elementor addon plugin that easily allows us to create a beautiful header and footer in just a minute.
2. Install and Activate ElementsKit addons for Elementor
ElementsKit is an ultimate addon for Elementor Page Builder. It includes the most comprehensive modules, such as Header Footer Builder, Mega Menu Builder, Layout Library,
Elements kit Elementor Addon has Exclusive features Like Mega Menu Builder, Header and Footer Builder layout library, One Page Scroll, Sticky Content, Parallax Effects.
Go to plugins -> add new plugin and in search type ElementsKit Lite
You can see this plugin has more than 500,000 active installations with more than 800 5 star reviews, so we can trust that it is a save plugin that won’t hurt our website. now we are ready to create our header and footer using Elementor
3. Go to ElementsKit and activate the Header Footer widget
After installing ElementsKit Lite hover over it and click on ElementsKit and then click on WIDGETS to activate Header and Footer Wedgits
After clicking on Wedgits you will see lots of cool widgets that this plugin offers for Elementor you can enable or disable any of these according to your need, scroll down until you see header and footer then enable these features shown in the image below
Now you are ready to create your amazing header and footer using Elementor
Go to ElementsKit and click on Header and Footer, click on add new
You will see the template settings, go as follows;
- Title: give a name for your template
- Type: select the template type wither it is header or footer
- Conditions: Select Eniter site
- Activate/Deactivate: you can turn off or on you header and footer template
- Next click on Edit Content to start editing
Now you are in the Elementor editor dashboard you can import a free Header/Footer template offered by ElementsKit or you can create your own template
To import a free ready-made header template follow the steps below
- Click on ElementsKit icon
- On top click on sections
- Select you template and click insert
ElementsKit has made the job of every WordPress website owner easier, as adding headers and footers makes a website more organized and refined. It also not only enhances users’ experience but also improves web traffic.
If you have any questions regarding the ElementsKit header footer, please leave a comment below.
If you liked this article, you will definitely find more helpful tips and blogs by joining, please don’t forget to share this article with friends
Read our article What is Metaverse