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.

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.

Click on the Green Add New Header button.

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

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

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

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

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

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.

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.

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.

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. 

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.