Elementskit lite – Free Elementor Header & Footer Builder plugin

Building a professional-looking header and footer in Elementor does not have to cost you anything. A lot of website owners assume they need Elementor Pro to get a fully custom, dynamic header and footer across their entire site. That is simply not true. There is a free plugin called ElementsKit Lite that gives you a complete drag-and-drop header footer builder inside Elementor without spending a single dollar. Whether you are running a salon, a gym, a coaching business, or a local restaurant, your header and footer are the first and last things visitors see on every single page. Getting them right matters. In this guide, you will learn exactly what ElementsKit Lite is, why it is one of the best free options available today, and how to set it up step by step on your WordPress website. There is also a full video tutorial linked below so you can follow along visually.
💬 Prashant’s NoteIn my experience setting up 1800+ websites for local businesses across the USA, UK, and Australia, the header and footer are the sections clients ask about most. When I set this up for a client who could not afford Elementor Pro, ElementsKit Lite was the exact plugin I reached for. It is lightweight, it does not slow things down, and it lets me design a clean, professional header inside the Elementor interface I already know inside out.

Table of Contents

What Is ElementsKit Lite and Why Should You Use It?

ElementsKit Lite is a free Elementor add-on plugin developed by Wpmet. It gives you a built-in header and footer builder, a library of pre-made templates, and a collection of extra Elementor widgets, all in one package.

The free version of Elementor does not include the ability to dynamically add a custom header and footer across your entire website. You can manually place elements on individual pages, but that is not the same as having a true global header and footer that appears on every page and post automatically. ElementsKit Lite solves this problem completely, and it costs nothing.

The plugin has been downloaded over 46 million times and is trusted by more than 2 million Elementor users worldwide. That kind of track record tells you it is a solid, well-maintained option worth installing.

Key Benefits of Using ElementsKit Lite for Header and Footer

Here is why ElementsKit Lite stands out as a go-to free solution for building headers and footers in Elementor:

  • No coding required. You design everything visually inside the Elementor drag-and-drop interface.
  • It is completely free to use. You do not need Elementor Pro to access the header footer builder.
  • It comes with a library of ready-made header and footer templates you can import in one click and customise to match your brand.
  • It is lightweight and modular. You can enable only the widgets and modules you actually need, which keeps your site fast and lean.
  • You can set different headers and footers for different pages, page types, or your entire site using conditional display rules.
  • It supports sticky headers, off-canvas menus, WooCommerce cart icons, search bars, social media icons, and more.
  • It works seamlessly alongside other Elementor plugins and add-ons.
  • It saves you the cost of hiring a developer or paying for a premium plugin just to get a custom header and footer.

How to Install ElementsKit Lite on Your WordPress Site

Installing ElementsKit Lite takes less than two minutes. Here is exactly how to do it:

  1. Log in to your WordPress Dashboard.
  2. In the left sidebar, click on Plugins, then click Add New.
  3. In the search bar, type ElementsKit Lite.
  4. Find the plugin in the results list and click Install Now.
  5. Once installation is complete, click Activate.

After activating the plugin, you will see a new ElementsKit menu appear in your WordPress Dashboard sidebar. From here you can manage the plugin settings, enable or disable individual widgets and modules, and access the header footer builder.

Before you jump into building your header, make sure the Header Footer Builder module is toggled on inside the ElementsKit settings panel. By default it should be enabled, but it is worth checking.

How to Create a Custom Header Using ElementsKit Lite

Once ElementsKit Lite is installed and activated, follow these steps to build your custom header:

  1. Go to ElementsKit in your WordPress Dashboard and click on Header Footer Builder.
  2. Click Add New to create a new layout.
  3. Give your layout a name. Call it something like Site Header so you can identify it easily later.
  4. Under the Type dropdown, select Header.
  5. Under Display On, choose Entire Website so the header shows up on every page and post automatically.
  6. Click Publish to save the layout.
  7. You will now see an option to Edit with Elementor. Click it.
  8. The Elementor page builder will open with a blank canvas ready for your header design.

Inside the Elementor editor, you can build your header layout using columns and sections. Add the elements your header needs, such as:

  • Your logo image
  • A navigation menu
  • A search bar
  • Social media icons
  • A phone number or call button
  • Business address or opening hours

You can also browse the ElementsKit template library from within Elementor and import a ready-made header design, then simply swap out the logo, colours, and text to match your brand. This is a massive time saver.

Setting Up Conditional Display for Your Header

One of the most powerful features in ElementsKit Lite is conditional display. This lets you assign different headers to different parts of your site. For example, you might want a full navigation header on most pages but a simpler, minimal header on your contact or checkout page.

To use this, when you create a new header layout, look for the Display On settings. You can choose from options like Entire Website, Singular pages, or specific page types. You can create multiple header layouts and assign each one to the right condition. This level of flexibility is something many business owners do not even realise is possible with a free plugin.

How to Create a Custom Footer Using ElementsKit Lite

Creating a footer follows exactly the same process as creating a header. Here is the full walkthrough:

  1. Go to ElementsKit and click on Header Footer Builder.
  2. Click Add New.
  3. Name the layout something like Site Footer.
  4. Under Type, select Footer.
  5. Under Display On, choose Entire Website.
  6. Click Publish.
  7. Click Edit with Elementor to open the builder.

In your footer, you can add elements like:

  • Your business logo or name
  • Navigation links
  • Social media icons
  • A short business description or tagline
  • Copyright text
  • Contact details like phone number, email, or address
  • A newsletter signup form

Keep your footer clean and focused. In my experience with local business sites, the best-performing footers include a clear contact detail, social links, and a simple copyright line. Do not try to cram everything in. Let your main pages do the heavy lifting.

ElementsKit Lite vs Elementor Pro: Which Should You Use?

This is one of the most common questions I get, so let me give you a straight answer.

If you are on a tight budget and just need a clean custom header and footer, ElementsKit Lite does the job brilliantly. You do not need to spend a cent.

However, Elementor Pro includes the full Theme Builder which lets you design not just headers and footers, but also single post templates, blog archive pages, WooCommerce product pages, and much more. If you are building a professional website for a business and want total control over every part of the design, Elementor Pro is absolutely worth the investment.

Here is a quick comparison to help you decide:

  • ElementsKit Lite: Free, great for custom headers and footers, includes 50+ extra widgets, modular and lightweight
  • Elementor Pro: Paid, full theme builder, popup builder, dynamic content, WooCommerce support, and many more advanced features

For most small local business websites, ElementsKit Lite combined with the free Elementor plugin will get you a very professional result. Once your client is ready to scale up, that is when Elementor Pro becomes the better long-term investment.

Bonus: Extra Widgets and Features Inside ElementsKit Lite

ElementsKit Lite is not just a header footer builder. It also comes loaded with extra Elementor widgets that extend what you can do with your pages. Here are some of the free widgets included:

  • Heading widget for custom styled headings
  • Button widget with icon and colour options
  • Team member widget for showcasing staff profiles
  • Accordion widget for FAQ sections
  • Tab widget for organised content display
  • Social icons widget
  • Client logo widget for showing partner or client logos
  • Comparison table widget
  • Countdown timer widget
  • FAQ widget

All of these widgets are available for free and integrate directly into the Elementor editor. You can enable or disable any widget you do not need from the ElementsKit settings panel. This modular approach means you only load the code for what you are actually using, which is great for page speed.

ElementsKit also includes a layout template library with over 1,250 pre-made section blocks. If you ever hit a creative wall while building a page, just open the template library and import a section that fits your needs.

Frequently Asked Questions

Is ElementsKit Lite completely free to use?

Yes, ElementsKit Lite is 100% free to download and use. You can install it directly from the WordPress plugin repository at no cost. There is a paid Pro version that unlocks additional widgets and features, but the free version is more than enough to build a fully custom header and footer.

Do I need Elementor Pro to use ElementsKit Lite?

No, you do not need Elementor Pro. ElementsKit Lite works with the free version of Elementor. This is exactly what makes it such a popular choice for local business website owners who want a professional result without the cost of a Pro plugin.

Can I use different headers on different pages with ElementsKit Lite?

Yes. ElementsKit Lite includes conditional display settings that let you assign specific header or footer layouts to individual pages, page types, or your entire website. You can have a full header on most pages and a minimal header on specific pages like a landing page or checkout.

Will ElementsKit Lite slow down my website?

ElementsKit Lite is built with a modular architecture, which means you can enable only the widgets and modules you actually use. Unused features do not load any extra CSS or JavaScript, so the impact on your site speed is minimal. Independent tests confirm it has a very low impact on page speed and memory usage.

How do I add a logo and menu to my header in ElementsKit Lite?

After creating your header layout and opening it in the Elementor editor, you can drag in the Site Logo widget and the Nav Menu widget from the ElementsKit widget panel. Position them in your header columns, style the colours and sizing, then publish the header and it will appear across your entire site.

What is the difference between ElementsKit Lite and ElementsKit Pro?

The Lite version is free and includes the header footer builder, 50+ widgets, and a template library. The Pro version adds more advanced widgets, WooCommerce-specific features, mega menu builder, and additional template designs. For most small business websites, the Lite version is plenty to get started.

Final Thoughts

Thanks so much for reading this guide on setting up ElementsKit Lite as your free Elementor header and footer builder. If you have been putting off creating a custom header because you thought you needed Elementor Pro, I hope this has shown you that there is a completely free path to a professional result. I have used this plugin on dozens of local business websites and it never lets me down. Make sure you watch the video tutorial embedded above for a full visual walkthrough of every step covered in this article. If you have any questions, or if something does not look right on your site, drop a comment below and I will do my best to help you out. And if you would like me to set up your header and footer for you, feel free to get in touch through the contact page.

Elementskit lite - Free Elementor Header & Footer Builder plugin

I hope that this article on Elementskit lite – Free Elementor Header & Footer Builder plugin will help you. Read more articles on  Elementor Tutorials.

Do not forget to subscribe to our Quick Tips Youtube Channel for upcoming videos on Website Design, WordPress Tutorials, Elementor, and WooCommerce tutorials.

The AI-powered business operating system

Take Your Business To The Next Level

Get 30 Days Free Trial + Free Live Bootcamp
to Launch HighLevel Together

Share this article:

Facebook
Twitter
LinkedIn
Reddit
WhatsApp
Picture of Prashant P Mittal

Prashant P Mittal

Prashant Mittal is a freelance web designer with 15+ years and 1,800+ sites built. He publishes free WordPress, Elementor, WooCommerce & GoHighLevel tutorials at paramfreelance.com

Read more about author

You may also like to read.

Learning Center

Watch hundreds of video tutorials about WordPress website design, Elementor plugin, Filmora Video editing tool, WooCommerce plugin to create e-commerce website.Â