How to Create a Custom Header with Elementor?

Elementor 2.0 is here and it is better than ever!

Now you can take control of your whole website and design it as you want. This update for Elementor allows you to create custom Theme Parts that you can design yourself such as Header, Footer, Archive Pages, Single post layout and a lot more.

Creating a Custom Header with Elementor

Having a good header serves both functionality and design. I say it is integral because it acts as the prime navigation of your website. In this article, we will learn how you can design a custom Headers with the Elementor page builder.

Also Read: Creating a Custom Footer with Elementor.

Step 1: We will start by going to WP Admin > Elementor > My Templates.

Elementor Page Builder

Step 2: Now click on the Add New Button at the top. Select the type of template as Header and give your header a proper name.

Elementor Page Builder

Step 3: After entering a proper name, click on the Create Template button.

Step 4: Once the page loads, you get to choose from multiple pre-designed layouts. Select the one you want and click on the Insert button.

Elementor Page Builder

Step 5: Now you can see that the layout is loaded on the page. We will now begin editing the header but don’t worry; there is nothing new you need to learn here. You can start designing the header the way you want by selecting the widgets.

Elementor Page Builder

Step 6: The Header would automatically fetch the dynamic image that is the site logo from the website but if that’s not the case, you can add the site logo by dragging and dropping the site logo module, and it will directly fetch the site logo.

If you are still not able to see the site logo, then go ahead and check with your theme if the image is updated there or not.

Elementor Page Builder

Step 7: Change the menu of the website with the one you want there, and you can go ahead and change the way it looks by making changes in the style tab if required.

Elementor Page BuilderStep 8: You can make many other alterations as well such as adding a new widget or even a row just like you do in the default builder. After making all the changes, click on the Publish button on the bottom left corner of the page.

Elementor Page Builder

Step 9: Now you need to set some conditions here. Since I want my header to show up on the Entire Site, I will select the same from the list. This feature lets you assign custom header to different parts of the website according to different needs such as logged in and logged out users, etc.

Elementor Page Builder

Step 10: After making all the changes, click on the Publish button. This is the result, a functional and straightforward header-

Elementor Page Builder


Over To You!

This was just a simple example of how you can create a Custom Header using Elementor Page Builder. You can try and use other templates as well, or if you want to go for something unique, you can create your design as well by starting from the scratch!

If you liked this post, do share it and if you have any queries, do leave a comment down below!

Yashwardhan Rana

Yashwardhan Rana

I am Yash, Content Marketing Head at IdeaBox Creations, we are the makers of PowerPack :) I love good food, gaming and memes. When I am not in front of my laptop, I am either cooking, traveling or attending WordPress meetups.


  • Hello,
    I’ve installed Element and cannot see the Header Template option. Only Page and Section.
    Have I forgot something?

    P.S. – Great plugin guys! Amazing work.



Leave a Comment

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

By continuing to use the site, you agree to the use of cookies. More Info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.