Design customized header & footer using free elementor plugin

Design customized header & footer using free elementor plugin

Spread the love

Are you also one of them who don’t want to use WordPress theme’s header & footer?

Do you also feel that you need your own styled header & footer in your wordpress website?


Ok, let us talk about it.


Whenever you decide to have a wordpress site, you have to install website builder plugins until, and unless you have coding skills, I don’t have initially hence I also started using elementor as a website builder.

I installed and changed few themes as I was not finding the header as I wanted, however, used few templates also and then I came to know that the website is yours but you don’t have the rights to design the header & footer of your own desire although you can change base, alignment, add or remove widgets.

This was for me but When you are in the business and works on websites building and designing for clients and you don’t know coding then you are dependent on the wordpress website builders which helps you to drag and drop widgets and features . with the help of these plugins and professional-looking themes you can return your work as a clear, crystal and beautiful looking website.

Clients start checking your wordpress templates from the top i.e header which helps to get the first impression and ends with the bottom i.e footer which helps to get the impression closed.




What to do? and 


How you can handover beautiful wordpress design that is responsive for mobile and tablet too?


Thanks for the elementor , drag and drop wordpress website builder and some of its addon wordpress plugins like Elementor: header footer and blocks, elements kit, and a few more 

(some plugins works with elementor pro only)

Here we are going to use the elements kit plugin which helps us to create header & footer for any wordpress website free of cost, oh yeah by using elementor off course.


Step-by-step illustration to achieve professional header & footer using all free resources  :


Search for Elements kit plugin and activate 


search plugin
search and activate elements kit


Make sure you have elementor (website builder) installed and updated one, elements kit supports elementor or you can say that it gives more customization options to you by using elementor.

  1. Go to down side on left hand of your dashboard and hover on plugins 
  2. Click on add new and search for elementskit lite by wpmet
  3. Install and activate it 

(make sure you theme is compatible and plugin is up to date otherwise it cause severe concern and can broke your theme however this implies on all plugins.)


Start Designing 


Now start designing the wordpress block template which you can use to share with the client as a part of your wordpress website template 

  1. From the left-hand side of your dashboard click on elements kit lite 
  2. Click on add new or choose header/footer 
  3. Fill the required details and must click activision on  – conditions entire site to make it work 
  4. Now click on edit content.


click on add new


Create the header & footer using elementor 


  1. Next, go to edit with Elementor. From here, you can build your header & footer template from-scratch.
  2. First, drag-and-drop the columns element into the interface on the right. Then set the number of columns you want to work with.
  3. Now the awesome part of this is you get the plain elementor canvas means you can design your logo part, social media part, and any other tab using elementor widgets
  4. The saving part has been covered your all pages and coming one too 

Tip: Elementskit lite comes with addon widgets for elementor you can use it to make your theme professional and share the theme template with the client.


Must work on Responsiveness of header & footer 


One more thing you will want to do here before returning to the WordPress dashboard is checking on the responsiveness of your new header element. As you know, mobile menus can’t really accommodate the horizontal, full width-spanning elements we use on a desktop. So, be sure to customize that before you move on.

Must check the settings of your padding and margins on all platforms i.e desktop, mobile, and tablets this is called responsiveness verification. as you know that google’s most of the audience is now on mobile hence google loves mobile responsive websites.

Hence if you want to give the client an awesome wordpress website designed template comprises of the customized header, footer, and responsive settings it will add on your work worth.

Now we have discussed how we can customize the header using elementor free version.


Customized header



The same way you can customize the footer and also can share wordpress blog templates with the clients,

Don’t like how your current WordPress theme handles its main header or footer?

In this guide, we tell you how to create custom headers & footers with Elementor – step by step, and with no coding skills required. 


Please comment back and share your feedback, do follow me on the Instagram

Also, share which topic you would love to read in my next article 

Spread the love

Leave a Reply