fbpx

How To Create A Header Template Using Elementor Page Builder

How great would it be if you could build Header/Footer Templates for your Website using Elementor! If you are wondering the same, you are in the right place. Building WordPress header templates have never been easier.


How To Create A Header Template Using Elementor Page Builder 1

With the previous version of Elementor, you could build elegant web content using its drag and drop feature. But there were some inherent limitations. Like, some parts of the Website could not be edited using Elementor. Like the Header and Footer panel of your website. These parts were left at the Theme level. You needed to write codes to edit those parts.

WordPress Header Templates

With the previous version of Elementor Pro, you could save your work like templates. You can still do it. But now, before opening the Elementor Interface, you can select the type of template you wish to create- Header, Footer, Single Page or Archive Page.

First, open your WordPress Dashboard and navigate to Elementor>Templates.

How To Create A Header Template Using Elementor Page Builder 2

Click on the Green Add New Header button.

How To Create A Header Template Using Elementor Page Builder 3

From the new pop-up select Header as the type of Template and Give it a name.

How To Create A Header Template Using Elementor Page Builder 4

As soon as you hit the Create Template button it will open up the Template Library Pop-Up.

How To Create A Header Template Using Elementor Page Builder 5

Let’s take a look at our page with the Header Template. So the entire portion at the top part is your Header.

How To Create A Header Template Using Elementor Page Builder 6

Let’s start by changing the Logo of the Header.

How To Create A Header Template Using Elementor Page Builder 7

You cannot actually change the Site Logo from inside the Elementor Interface. Open your Theme Customizer and Navigate to General Settings>Site Name and Description to do so

How To Create A Header Template Using Elementor Page Builder 8

Click on the Change Logo button to upload a new logo or pick one existing image from the Media Library. Once you are done hit the Publish Button.

Edit the Nav Menu

You can select any Menu that you are using on your Website. Use the Drop-Down Menu to do so.How To Create A Header Template Using Elementor Page Builder 9

Add Condition

The last part of this tutorial will show you how you can specify on which pages of your Website you want to display the Header Template.

How To Create A Header Template Using Elementor Page Builder 10

As soon as you click on the option, it will open the Display Condition Pop-Up. From there use the Include and Exclude field or a combination of both to specify if you want to use the Header Template across your entire Website or on a Single Page.

How To Create A Header Template Using Elementor Page Builder 11

Once you are done with setting the Conditions, Hit the Publish button.

Wrapping Up!

Cool isn’t it? Elementor is a great plugin. Get the PRO Version of Elementor for more elements and exciting features.

Was this blog helpful? Were the instructions difficult to follow? If so drop a comment below and we will come back to you. In the meantime here is a quick blog on How to Create a Coming Soon Page in WordPress. 

Picture of Afshana Diya

Afshana Diya

Afshana Diya is CMO at WPDeveloper. She is helping the company to create a dynamic team and sustainable business from the scratch. When she is offline from the digital world, she must be traveling to find natural beauty in remote places.

Share This Story

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • 00Days
  • 00Hours
  • 00Mins
  • 00Secs

Wait... before you go!

Checkout now to Save