Introduction

Xpro Elementor Theme Builder Free gives you the ultimate freedom to design customized headers for WordPress websites. The plugin works seamlessly with the free version of Elementor Theme and Xpro Elementor Addons. You don’t need to install any additional plugins to customize the Header theme part.

Creating unique headers with Elementor couldn’t be easier & fun with our live front-end editor. You can display a fully customized header on a unique page or anywhere on the website using our Display Conditions option. Import a pre-built header block to quickly design and publish a stunning header. Some salient features of using Free Elementor Theme Builder for creating amazing WordPress headers are:

• You can design a custom sticky header
• You can design unique headers for home and inner pages
• You can add header in a specific category or page using Display Conditions
• You can create header from scratch using any Xpro module in Elemetor

Let’s learn how to create a FREE header for your WordPress website using elementor theme builder.

How to Use Xpro Elementor Theme Builder For Free to Design Custom Headers

Log in to your WordPress Admin Dashboard and Edit the page you want to create a Header for. On the front-end, you will see the Xpro Elemetor Theme Builder icon on the bottom left side of your page.

Click on the button and a Dashboard will appear on your screen just like this.

Now simply click on the Header Layout to create a new Header or edit an existing one.

Type the name of your new Header Layout and press Enter. Your new layout will be available to Edit.

Simply Hover over the new Header Layout you just created and click the Edit Icon to customize the settings of your Header Layout.

Here you can change the Title of your Header, make it Sticky, and set Display Conditions for the site part. Tweak the setting as per your liking. Whenever you make a change, don’t forget to ‘Update’ your settings otherwise it won’t work for you. Remember, you need to change the Status of your singular layout to ‘Published’ from the Status option.

You can now easily customize or create a Header from scratch using Elementor Page Builder. Simply click on the Elementor button to get started.

How to Create a Custom Header using Free Elementor Theme Builder

A clean, pleasant header enhances user navigation & gives them a clear path to explore your website. Until now, creating a custom header was only possible with the paid version of Elementor but Xpro Elementor Theme Builder has totally changed the status quo. Now you can easily create a custom Header for your WordPress website in minutes. It’s FREE, fun, and only requires a few simple steps.

Our Theme Builder For Elementor gives you two options to create FREE Headers for your WordPress website.

1. You can design a new Header from the scratch using Xpro Elementor Addons.
2. You can simply import our premium pre-built Header Templates to quickly add a professionally designed Header to your website.

Remember, Xpro Elementor Theme Builder is fully compatible with popular Elementor themes like Xpro, Hello, GeneratePress, and Astra. Moving forward, simply click on the Theme Builder Icon, move to the Header Layouts section, and edit an existing layout or create a new one.

Set the Display Conditions, choose if the header needs to be Sticky or not, set user roles, and much more. Here I am going to set the Display On option for this specific page. To do this, simply scroll to the bottom of the Display On option and select the ‘Specific Page / Post / Taxonomies, etc.’ option.

Now simply choose the specific page/post you want this Header Layout to be visible on. Similarly, you can set rules from the Don’t Display On option to hide your Header Layout on a specific page/post.

Finally, click on the Elementor button to edit your Header layout.

As I mentioned earlier, you can create a header from scratch or simply insert one of the pre-built Xpro Header Templates to quickly add a professional Header on your website. Here I am going to insert a Header Template and then we will edit it as per our needs.

Click on the Xpro Elementor Addons icon available in the Elementor Editor.

Click on the Blocks Tab and open Header Templates from the filter option.

You can choose any Header Template from our Templates library For Elementor and simply click o  the Insert button to import it into your website. Remember, you can always customize these Header Templates as you like.

This will be the update view in your Elementor Editor.

Now you can customize each widget of this Header Template. Let’s change the color of the Button widget to match it with our site’s color aesthetics.

To do this, simply hover on the Button and click on the edit widget icon.

Now click on the Style tab and change the button color for active and hover mode as per your liking. You can also add borders change the typography and much more.

Head over to the detailed documentation for Xpro Button Widget for Elementor and learn how you can fully utilize this powerful widget.

Once you have made your desired changes, simply click on the Publish button to save them.

Now visit the page where you wanted the Custom Header to be displayed. In this demo, it’s the Homepage. Your Header will be fully functional and live on the website.

How to Create Sticky Headers Using  Xpro Elementor Theme Builder

Sticky Headers are very important to stick users to your web content and make them navigate to other important pages of your website. This reduces your site’s bounce rate and helps you in generating more prospects/leads from your website.

Visit our detailed tutorial on how to create a sticky header in Elementor. You will learn how to add separate logo for default and sticky header view, style background color for sticky header, and much more.

Once the FREE custom Header for our WordPress website is live and running, we can make a Sticky Header in Elementor with two simple clicks. Yes, it’s pure simple and doesn’t require you to deal with any shortcode. This is the power of Xpro Elementor Theme Builder, it lets you create FREE custom Headers for your Elementor websites on the fly right using a live front-end dashboard.

Now we have already learned how to create a free custom Header for the WordPress website in the above section. We will now explore how to make our Header sticky on the website. To do this, simply open the Xpro Theme Builder Dashboard, click on the Header layout you want to make sticky, and edit it.

Now simply click on the Sticky option available in the Layout options and Enable it.

Don’t forget to Update the setting by clicking the Update button available at the bottom of the dashboard.

Your Sticky Header will look something like this on the live website.

How to Set Header Display Condition for Global Templates in Elementor

Sometimes you want to display your WordPress site’s Header on the entire website excluding specific pages. These pages may include a checkout page, product landing page, etc. Our robust Xpro Elementor Theme Builder gives you the freedom to easily customize these Display Conditions right from the front-end dashboard.

To do this, simply edit the Header Layout you want to specify these conditions for. Here, I’ll demonstrate Display Conditions for Header Layout titled ‘ Demo 1’.

From the Display On option, you can make your Header Layout visible on the entire website, any specific page/post, archive pages, and more. You can also add multiple display rules by clicking the Add Display Rule button.

Similarly, if you want to hide your Header from cart, checkout pages, etc. then simply open the dropdown menu of the Don’t Display On option and apply your exclusion rule. To do this, simply scroll to the bottom and select the ‘Specific Page / Post / Taxonomies, etc.’ option.

Now type or click the dropdown to select the names of the specific pages you want the Header to hide on. You can always add multiple exclusion rules by clicking on the Add Exclusion Rule button.

Finally, Update your settings and your display rules will be applied.

This is pretty much it from our Custom Headers for WordPress guide. I hope you have a better understanding of using Xpro Elementor Theme Builder to create FREE custom headers. In the same way, you can create amazing Custom Footers for your WordPress website using our powerful theme builder. Check our detailed guide on creating custom footers using Xpro Elementor Theme Builder and instantly drive clicks on your website.