{"id":2063,"date":"2022-09-20T09:37:00","date_gmt":"2022-09-20T09:37:00","guid":{"rendered":"https:\/\/elementor.wpxpro.com\/?p=1727"},"modified":"2026-03-13T09:25:48","modified_gmt":"2026-03-13T09:25:48","slug":"create-a-custom-header-in-elementor","status":"publish","type":"post","link":"https:\/\/newelementor.wpxpro.com\/index.php\/2022\/09\/20\/create-a-custom-header-in-elementor\/","title":{"rendered":"2 Quick Ways to Create a Custom Header in Elementor"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"\/#introduction\">Introduction<\/a><\/li><li><a href=\"\/#how-to-create-a-custom-header-using-elementor-theme-builder\">How to Create a Custom Header using Elementor Theme Builder<\/a><ul><li><a href=\"\/#step-1\">Step 1<\/a><\/li><li><a href=\"\/#step-2\">Step 2<\/a><\/li><li><a href=\"\/#step-3\">Step 3<\/a><\/li><li><a href=\"\/#step-4\">Step 4<\/a><\/li><\/ul><\/li><li><a href=\"\/#free-alternative-to-elementor-pro-for-creating-custom-header\">Free Alternative to Elementor Pro for Creating Custom Header<\/a><\/li><li><a href=\"\/#how-to-quickly-create-a-custom-header-in-elementor-using-free-theme-builder\">How to Quickly Create a Custom Header in Elementor Using Free Theme Builder<\/a><ul><li><a href=\"\/#create-or-edit-a-header-template\">Create or Edit a Header Template<\/a><\/li><li><a href=\"\/#set-display-conditions\">Set Display Conditions<\/a><\/li><li><a href=\"\/#choose-a-header-template\">Choose a Header Template<\/a><\/li><li><a href=\"\/#customize-header-template-using-xpro-elementor-theme-builder\">Customize Header Template using Xpro Elementor Theme Builder<\/a><\/li><li><a href=\"\/#bonus-how-to-create-a-sticky-header-in-elementor\">[Bonus] How To Create A Sticky Header In Elementor<\/a><\/li><\/ul><\/li><li><a href=\"\/#xpro-elementor-theme-builder-verdict\">Xpro Elementor Theme Builder &#8211; Verdict<\/a><\/li><li><a href=\"\/#pros-of-using-xpro-elementor-theme-builder\">Pros of Using Xpro Elementor Theme Builder<\/a><\/li><li><a href=\"\/#cons-of-using-xpro-elementor-theme-builder\">Cons of Using Xpro Elementor Theme Builder<\/a><\/li><li><a href=\"\/#conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Have you ever wished for more control over your website without writing a single line of code?<\/p>\n\n\n\n<p>It is possible if you use a page builder like <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a> for developing your WordPress websites. The Elementor page builder is an extremely popular site builder with over 5 million downloads. It offers incredible customization options and flexibility in building your website.<\/p>\n\n\n\n<p>However, this page builder has limitations in the free version and only takes you so far, because it\u2019s your <a href=\"https:\/\/wordpress.org\/themes\/xpro\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress theme<\/a> that controls elements like header &amp; footer, single page\/post, archive layouts, and more.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"introduction\">Introduction<\/h2>\n\n\n\n<p>In this blog, we will focus on altering and customizing the header part of your site. We will discover 2 methods to easily create a custom header in Elementor using Elementor Theme Builder (paid) and another free and easy way to <a href=\"https:\/\/newelementor.wpxpro.com\/docs\/xpro-elementor-theme-builder\/layouts\/header\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a custom Elementor header<\/a> which we\u2019ll explain later in the blog.<\/p>\n\n\n\n<p>Now, customizing your header isn\u2019t a problem if you\u2019re satisfied with the header options that come with your theme, but each WordPress theme is different in terms of flexibility. So, the built-in options may vary from theme to theme. Or maybe you like the default header but wish you could easily swap it for a different one on a landing page.<\/p>\n\n\n\n<p>No matter the customizations you need in your headers, there are a few effective ways to use Elementor and enjoy full drag\u2019n\u2019drop control over your website\u2019s header. Let\u2019s first see how you can easily create a custom header in Elementor using its very own Pro version.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-create-a-custom-header-using-elementor-theme-builder\">How to Create a Custom Header using Elementor Theme Builder<\/h2>\n\n\n\n<p>Before we begin the tutorial, it is important to highlight that we will be using the Pro version of Elementor for customizing our header. Elementor Pro (starting from $49) comes with incredible features and one of them is the Elementor Theme Builder.<\/p>\n\n\n\n<p>The builder gives you complete freedom to customize your site parts the way you want. You can also import pre-built templates to quickly add a custom header or use the dedicated theme builder widgets to build your layout.<\/p>\n\n\n\n<p>Okay, enough with the introduction, let\u2019s see how you can use <a href=\"https:\/\/elementor.com\/features\/theme-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor theme builder<\/a> to make your website headers more interactive. Follow the steps illustrated below:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1\">Step 1<\/h3>\n\n\n\n<p><strong>Find the Elementor Tab in WP Dashboard<\/strong><\/p>\n\n\n\n<p>Login to your WordPress dashboard and install the Elementor plugin from <strong>Plugins &gt; Add New<\/strong>. After the free version is installed and activated. make sure you purchase and <a href=\"https:\/\/elementor.com\/help\/installing-elementor-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">install the pro version<\/a> of the Elementor page builder because otherwise, the Elementor theme builder would not work. This feature is only available with Elementor Pro which also includes dozens of pre-built header templates.<\/p>\n\n\n\n<p>Here we will first create our header template from scratch and later we will import a pre-built header to quickly get started. Once the Pro version is activated, simply:<\/p>\n\n\n\n<p>Navigate to <strong>Templates &gt; Theme Builder<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-01.png\" alt=\"\" class=\"wp-image-41319\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2\">Step 2<\/h3>\n\n\n\n<p><strong>Create a New Header Template in Elementor<\/strong><\/p>\n\n\n\n<p>Click the <strong>Add New<\/strong> button to create a new template in Elementor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-02.png\" alt=\"\" class=\"wp-image-41320\"\/><\/figure>\n\n\n\n<p>From the dropdown, select the <strong>Header<\/strong> option and enter the name of your template. Finally, click on the \u2018create template\u2019 button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3\">Step 3<\/h3>\n\n\n\n<p><strong>Edit your Header Template<\/strong><\/p>\n\n\n\n<p>Once your new header template is created and published, you can now edit it directly from the Elementor editor. Now you will see the Elementor template library. The easiest way to add a new header template is by choosing from the massive sections library of Elementor.<\/p>\n\n\n\n<p>Simply choose and insert a header template by clicking the \u2018Insert\u2019 button. You can see this insert button once you hover over a template.<\/p>\n\n\n\n<p>We will not go into the details of creating a header from scratch in Elementor. It might take a lot of your time, so we have proposed a better solution in form of a <a href=\"https:\/\/newelementor.wpxpro.com\/theme-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free theme builder for Elementor<\/a>. Scroll a bit more to discover the free method to create header and footer templates in Elementor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-03.png\" alt=\"\" class=\"wp-image-41321\"\/><\/figure>\n\n\n\n<p>You can use the default templates if they fit your header design goals. Otherwise, you can also redesign the template as per your requirements using the dedicated theme builder widgets.<\/p>\n\n\n\n<p>You can find these widgets under the \u2018Site\u2019 section in the Elementor Pro sidebar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-04.png\" alt=\"\" class=\"wp-image-41322\"\/><\/figure>\n\n\n\n<p>Designing your header works the same as any section with Elementor. Simply create a new section, add columns as per your needs, and drag\u2019n\u2019drop different site widgets to create a custom header in Elementor.<\/p>\n\n\n\n<p>Speaking of widgets, you\u2019ll see all kinds of important Elementor widgets (as above) that assist you in building a custom header using the Elementor theme builder.<\/p>\n\n\n\n<p>Here\u2019s a list of useful Elementor theme builder widgets:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Site Logo<\/li>\n\n\n\n<li>Page Title<\/li>\n\n\n\n<li>Nav Menu<\/li>\n\n\n\n<li>Site Title<\/li>\n\n\n\n<li>Sitemap<\/li>\n\n\n\n<li>Search Form<\/li>\n<\/ul>\n\n\n\n<p>You can pretty much design any header with all important elements using these widgets. Don\u2019t forget to use the dynamic content feature so that your custom header is pulled on every page of your site.<\/p>\n\n\n\n<p>For example, to keep the same logo, you can upload a site logo to your customizer with the \u2018Site Logo\u2019 widget and use it as a dynamic element in your header template. This way, the logo will be the same on all pages and you\u2019d only need to swap the logo from one place when an update is needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4\">Step 4<\/h3>\n\n\n\n<p><strong>Pick Display Locations<\/strong><\/p>\n\n\n\n<p>The last step in getting your new header template live is to <strong>\u2018Publish\u2019<\/strong> it. Once you hit the publish <strong>button<\/strong>, you will be prompted to select the display condition. A display condition simply means where in your WordPress website you want to show a specific template ( header in this case).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-05.jpg\" alt=\"\" class=\"wp-image-41323\"\/><\/figure>\n\n\n\n<p>You will see three options here:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Entire Site<\/strong>: To display the header of all pages and blog posts of your website.<\/li>\n\n\n\n<li><strong>Archives<\/strong>: To display the template in specific archive pages or posts.<\/li>\n\n\n\n<li><strong>Singular<\/strong>: To showcase the header template in a specific page, post, or category.<\/li>\n<\/ul>\n\n\n\n<p>Setting display conditions for theme parts is one of the most powerful features of Elementor. You can use this feature to create custom pages, posts, and even landing pages within your site.<\/p>\n\n\n\n<p><strong>Elementor Theme Builder (in a nutshell)<\/strong><\/p>\n\n\n\n<p>Okay, so that was a short and crisp guide on how to create a custom header in Elementor. We know it\u2019s now a great solution but the theme builder gives you the flexibility in creating custom headers using templates or from scratch.<\/p>\n\n\n\n<p>Display conditions are another useful feature that allows you to set multiple headers for multiple pages or posts. You can create more than one header and easily assign them to different pages. This feature might not be available with your traditional themes like Hello or Astra.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-06.png\" alt=\"\" class=\"wp-image-41324\"\/><\/figure>\n\n\n\n<p>The only drawback of Elementor Pro is that it is a paid plugin. If you have a budget of $49 then you can simply purchase and use it for 1 website. On the other hand, if you\u2019re looking for a <a href=\"https:\/\/newelementor.wpxpro.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">free alternative to Elementor Pro<\/a> then go for <a href=\"https:\/\/wordpress.org\/plugins\/xpro-elementor-addons\/\" target=\"_blank\" rel=\"noreferrer noopener\">Xpro Elementor Addons<\/a>. It is a complete Elementor suite offering 50+ free widgets, a free theme builder, free templates library, and much more. Anyway, let\u2019s highlight the Pros and Cons of Elementor theme builder.<\/p>\n\n\n\n<p><strong>Elementor Theme Builder Pros<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Complete freedom to customize headers<\/li>\n\n\n\n<li>Fully compatible with the Hello theme<\/li>\n\n\n\n<li>Comes with intuitive &amp; useful site widgets<\/li>\n<\/ul>\n\n\n\n<p><strong>Elementor Theme Builder Cons<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No schema markup<\/li>\n\n\n\n<li>No mega menu<\/li>\n\n\n\n<li>Compatible with Elementor Pro (the paid version of Elementor)<\/li>\n<\/ul>\n\n\n\n<p>Now let\u2019s check out a better and free alternative to Elementor Theme Builder. This is what we have been mentioning earlier.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"free-alternative-to-elementor-pro-for-creating-custom-header\">Free Alternative to Elementor Pro for Creating Custom Header<\/h2>\n\n\n\n<p>Short on a budget or are you simply looking for a free alternative to Elementor theme builder? The good news is if you\u2019re using the free version of Elementor and want to create a custom header in Elementor then you have a free option in the form of <a href=\"https:\/\/wordpress.org\/plugins\/xpro-theme-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">Xpro Elementor Theme Builder<\/a>.<\/p>\n\n\n\n<p><strong>Power Up Your Elementor Websites<\/strong><\/p>\n\n\n\n<p>Xpro Elementor Theme Builder is a free alternative to Elementor Theme builder but offers a lot more than the original plugin. It lets you design &amp; customize each theme part right from <strong>the front-end live dashboard<\/strong>. You don\u2019t have to visit the WP dashboard to create\/assign templates, simply do it from the live dashboard available on the front end.<\/p>\n\n\n\n<p>This free alternative to Elementor Pro works side by side with Xpro Elementor Addons. So, you need to <a href=\"https:\/\/wordpress.org\/plugins\/xpro-elementor-addons\/\" target=\"_blank\" rel=\"noreferrer noopener\">download Xpro Elementor Addons<\/a> in order to use the free theme builder.<\/p>\n\n\n\n<p>The plugin comes with a massive library of <a href=\"https:\/\/newelementor.wpxpro.com\/templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">pre-built Elementor page templates<\/a> and sections which you can easily import and get your Elementor website live in no time. It includes 50+ header and footer templates which you can simply import and customize as you need. This free Elementor theme builder is also fully compatible with popular WordPress themes like Xpro, Hello, Astra, and GeneratePress. Xpro theme is a dedicated theme made especially for Elementor users, you can <a href=\"https:\/\/wordpress.org\/themes\/xpro\/\" target=\"_blank\" rel=\"noreferrer noopener\">download<\/a> it for free.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-07.png\" alt=\"\" class=\"wp-image-41325\"\/><\/figure>\n\n\n\n<p><strong>What Does This Free Alternative to Elementor Theme Builder Offer?<\/strong><\/p>\n\n\n\n<p>Using this free Elementor theme builder, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Build a new or customize pre-built header and footer for mobile, desktop, and tablet view<\/li>\n\n\n\n<li>Edit theme parts like archive pages (blog post, categories, tag archive, author archive)<\/li>\n\n\n\n<li>Customize a theme\u2019s single post or single page templates (single post, single page, single product, cart, checkout, account)<\/li>\n\n\n\n<li>Get complete control over the WooCommerce store layout<\/li>\n\n\n\n<li>Design WooCommerce product pages<\/li>\n\n\n\n<li>Design a theme\u2019s search page format and layout<\/li>\n\n\n\n<li>Customize a theme\u2019s 404-page format and layout<\/li>\n\n\n\n<li>Manage Display Conditions and User Roles<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-08.png\" alt=\"\" class=\"wp-image-41326\"\/><\/figure>\n\n\n\n<p><strong>Free Elementor Theme Builder Widgets<\/strong><\/p>\n\n\n\n<p>Just like the Elementor theme builder, the Xpro one also offers <strong>12+ free theme builder widgets<\/strong> to create custom templates in no time. The only difference is that the Xpro Elementor theme builder offers additional 6+ WooCommerce widgets for your online store. It is important to highlight that these are built-in widgets for free. A list of free Xpro Elementor theme builder widgets is below:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elementor Horizontal Menu<\/li>\n\n\n\n<li>Elementor Site Title<\/li>\n\n\n\n<li>Elementor Site Logo<\/li>\n\n\n\n<li>Elementor Post Title<\/li>\n\n\n\n<li>Elementor Featured Image<\/li>\n\n\n\n<li>Elementor Post Content\/Single Excerpt<\/li>\n\n\n\n<li>Elementor Woo Product Title<\/li>\n\n\n\n<li>Elementor Woo Product Description<\/li>\n\n\n\n<li>Elementor Woo Product Price<\/li>\n\n\n\n<li>Elementor Woo Product Images<\/li>\n\n\n\n<li>Elementor Woo Product Rating<\/li>\n\n\n\n<li>Elementor Woo Product Add To Cart<\/li>\n<\/ul>\n\n\n\n<p>If these widgets aren\u2019t enough for you and you want additional 15+ widgets then you can always <a href=\"https:\/\/newelementor.wpxpro.com\/premium\/\" target=\"_blank\" rel=\"noreferrer noopener\">buy the pro version<\/a> of Xpro Elementor Addons. The pro version doesn\u2019t only offer premium theme builder widgets but also a massive library of pre-built templates, sections, pro widgets, and more.<\/p>\n\n\n\n<p>Yes, almost all of this is also possible by using Elementor Theme Builder but it comes for a price. Our main focus is how to create a custom header in Elementor. Let\u2019s dig in.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-quickly-create-a-custom-header-in-elementor-using-free-theme-builder\">How to Quickly Create a Custom Header in Elementor Using Free Theme Builder<\/h2>\n\n\n\n<p>Creating unique headers with Elementor couldn\u2019t be easier &amp; time-saving. You can display a fully customized header on a unique page or anywhere on the website using the Display Conditions option. You can also import a pre-built header block to design and publish a stunning header quickly. Some salient features of using Xpro Elementor Theme Builder to create a custom header in Elementor are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can design a custom sticky header<\/li>\n\n\n\n<li>You can design unique headers for home and inner pages<\/li>\n\n\n\n<li>You can add a header in a specific category or page using Display Conditions<\/li>\n\n\n\n<li>You can create a header from scratch using any Xpro module in Elementor<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s learn how to create a FREE header for your WordPress website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-or-edit-a-header-template\">Create or Edit a Header Template<\/h3>\n\n\n\n<p>Log in to your WordPress Dashboard and open and edit the page you want to create a header on. Once the editor is open:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on the Theme Builder Icon<\/li>\n\n\n\n<li>Move to the Header Layouts section<\/li>\n\n\n\n<li>Click on the Edit icon to change the existing layout or create a new one<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-09.png\" alt=\"\" class=\"wp-image-41327\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"set-display-conditions\">Set Display Conditions<\/h3>\n\n\n\n<p>Now on the next screen, set the display condition for your new header template. You can choose to show it only on the current page or the whole website. To do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Scroll to the bottom of the <strong>Display On<\/strong> option<\/li>\n\n\n\n<li>Select the \u2018Specific Page \/ Post \/ Taxonomies, etc.\u2019 option<\/li>\n\n\n\n<li>Choose the specific page\/post you want this Header Layout to be visible on<\/li>\n<\/ol>\n\n\n\n<p>Similarly, you can set rules from the Don\u2019t Display On option to hide your Header Layout on a specific page\/post.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-10.png\" alt=\"\" class=\"wp-image-41328\"\/><\/figure>\n\n\n\n<p>Finally, click on the Elementor button to edit your Header layout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-11.png\" alt=\"\" class=\"wp-image-41329\"\/><\/figure>\n\n\n\n<p>Now you can design your custom header layout from scratch or use an existing header template available in the Xpro Addons library. Here we are going to insert a header template and then we will edit it as per our needs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"choose-a-header-template\">Choose a Header Template<\/h3>\n\n\n\n<p>Click on the Xpro Elementor Addons icon available in the Elementor Editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-12.png\" alt=\"\" class=\"wp-image-41330\"\/><\/figure>\n\n\n\n<p>Click on the Blocks Tab and select <strong>Header Templates<\/strong> from the filter option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-13.png\" alt=\"\" class=\"wp-image-41331\"\/><\/figure>\n\n\n\n<p>You can choose any header template from the pre-built assets library and simply click on the Insert button to import it into your website. Remember, you can always customize these header templates as you like.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-14.png\" alt=\"\" class=\"wp-image-41332\"\/><\/figure>\n\n\n\n<p>This will be the updated view in your Elementor Editor once you add a header template of your choice.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-15.png\" alt=\"\" class=\"wp-image-41333\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"customize-header-template-using-xpro-elementor-theme-builder\">Customize Header Template using Xpro Elementor Theme Builder<\/h3>\n\n\n\n<p>Now you can customize each part of this template to create a custom header in Elementor. For a demo, we are going to change the color button now.<\/p>\n\n\n\n<p>To do this, simply hover on the Button and click on the edit widget icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-16-1.png\" alt=\"\" class=\"wp-image-41335\"\/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-17.png\" alt=\"\" class=\"wp-image-41336\"\/><\/figure>\n\n\n\n<p>Once you have made your desired changes, simply click on the Publish button to save them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-18.png\" alt=\"\" class=\"wp-image-41337\"\/><\/figure>\n\n\n\n<p>Now visit the page where you wanted the custom header to be displayed. In this demo, it\u2019s the Homepage. Your header will be fully functional and live on the website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-19.png\" alt=\"\" class=\"wp-image-41338\"\/><\/figure>\n\n\n\n<p>You can visit the official theme builder <a href=\"https:\/\/newelementor.wpxpro.com\/docs\/xpro-elementor-theme-builder\/layouts\/header\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation <\/a>for a comprehensive step-by-step process on how you can create a custom header in Elementor using the Xpro <a href=\"https:\/\/wordpress.org\/plugins\/xpro-theme-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor theme builder<\/a>.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"bonus-how-to-create-a-sticky-header-in-elementor\">[Bonus] How To Create A Sticky Header In Elementor<\/h3>\n\n\n\n<p>Sticky Headers are very important to enhance the overall experience of your site. It also gives your site visitors an easy way to navigate important pages of your website. This ultimately reduces your site\u2019s bounce rate and helps you in generating more leads for your business. Let\u2019s see how you can create a sticky header within a few steps using this amazing theme builder.<\/p>\n\n\n\n<p>You can also view our comprehensive guide on <a href=\"https:\/\/newelementor.wpxpro.com\/docs\/xpro-elementor-theme-builder\/layouts\/sticky-header\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to create a sticky header in Elementor<\/a> using our free Elementor theme builder.<\/p>\n\n\n\n<p>Now we have already learned how to create a custom header in Elementor. We will now explore how to create a sticky header in Elementor.<\/p>\n\n\n\n<p>To do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the Xpro Theme Builder Dashboard from the front-end<\/li>\n\n\n\n<li>Click on the Header layout you want to make sticky<\/li>\n\n\n\n<li>Click on the Edit icon<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-20.png\" alt=\"\" class=\"wp-image-41339\"\/><\/figure>\n\n\n\n<p>Once the layout editor is open, simply click on the Sticky option and Enable it from the dropdown menu. This is it, isn\u2019t it amazing? How easily you can make any header template sticky without visiting the dashboard or writing any shortcode?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-21.png\" alt=\"\" class=\"wp-image-41340\"\/><\/figure>\n\n\n\n<p>In the end, click on the Update button to save your setting.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2022\/09\/custom-header-22.png\" alt=\"\" class=\"wp-image-41341\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"xpro-elementor-theme-builder-verdict\">Xpro Elementor Theme Builder &#8211; Verdict<\/h2>\n\n\n\n<p>The plugin is quite impressive given that it is free, comes with a front-end dashboard, is fully compatible with WooCommerce, has extended Elementor documentation, and offers 12+ free widgets to customize Elementor your website layouts as you want. Let\u2019s see the Pros and Cons of using this free Elementor theme builder for our website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"pros-of-using-xpro-elementor-theme-builder\">Pros of Using Xpro Elementor Theme Builder<\/h2>\n\n\n\n<p>Xpro Elementor theme builder has already impressed us with tons of features including a sticky header option, free theme builder widgets, free templates, and more. Let\u2019s highlight the benefits of using this plugin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Live front-end editing<\/li>\n\n\n\n<li>Create a custom header &amp; footer<\/li>\n\n\n\n<li>Create a sticky header for your Elementor website<\/li>\n\n\n\n<li>Customize templates location<\/li>\n\n\n\n<li>Pick display conditions, user roles, and more<\/li>\n\n\n\n<li>Create 404 page, search result page template<\/li>\n\n\n\n<li>Full compatibility with WooCommerce<\/li>\n\n\n\n<li>Fully integrated with popular WordPress themes<\/li>\n\n\n\n<li>Customize post detail pages<\/li>\n\n\n\n<li>Create custom templates for post &amp; product category<\/li>\n\n\n\n<li>Create custom blocks and use them anywhere on the website<\/li>\n\n\n\n<li>Define global theme templates<\/li>\n\n\n\n<li>Free widgets to easily customize site parts<\/li>\n\n\n\n<li>Priority support &amp; lifetime updates<\/li>\n\n\n\n<li>Fully documented plugin<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cons-of-using-xpro-elementor-theme-builder\">Cons of Using Xpro Elementor Theme Builder<\/h2>\n\n\n\n<p>Xpro Elementor theme builder has a lot of features to offer but it still needs time to stand out from other paid or free theme builders in the market.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>New theme builder plugin in the market<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>No matter which theme builder you choose, you will easily be able to customize websites because of the flexibility of Elementor. Considering the two methods discussed above, <a href=\"https:\/\/wordpress.org\/plugins\/xpro-theme-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">Xpro Elementor Theme Builder<\/a> has a slight edge because it made it quite easy for WordPress website owners to customize the header and footer parts on the go (front-end dashboard), making websites more attractive and subtle.<\/p>\n\n\n\n<p>Also Read: <a href=\"https:\/\/www.wpexplorer.com\/create-sticky-header-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create a Sticky Header in Elementor<\/a><\/p>\n\n\n\n<p>You no longer need to be dependent on the web developer to tweak your header.php file for you. You can do this yourself right from the front-end dashboard. So there\u2019s no more switching to a different theme only to change the position of the header logo, or spending hours customizing the CSS of header and footer site parts.<\/p>\n\n\n\n<p>On the other hand, we have the official theme builder plugin from Elementor. It\u2019s as good as the Xpro\u2019s one but comes with a price tag. Just like Xpro\u2019s theme builder, Elementor theme builder also has full support for popular themes like Hello, Astra, and GeneratePress.<\/p>\n\n\n\n<p>So, the ball is in your court. If you are looking for a free theme builder to create a custom header in Elementor then the <a href=\"https:\/\/wordpress.org\/plugins\/xpro-theme-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">Xpro Elementor theme builder<\/a> is your go-to choice. Otherwise, you can always <a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">purchase Elementor Pro<\/a> for $49 (1 site activation) and create headers as we explained above.<\/p>\n\n\n\n<p>If you find this article useful then you will surely find some more helpful tips and blogs by joining our X<a href=\"https:\/\/www.facebook.com\/groups\/540793210978965\" target=\"_blank\" rel=\"noreferrer noopener\">pro Elementor Community<\/a>. You can also follow us on <a href=\"https:\/\/www.facebook.com\/xproelementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Facebook<\/a> &amp; <a href=\"https:\/\/www.instagram.com\/xproelementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Instagram<\/a> to stay updated with the latest Elementor news. Download 50+ <a href=\"https:\/\/wordpress.org\/plugins\/xpro-elementor-addons\/\" target=\"_blank\" rel=\"noreferrer noopener\">free Elementor widgets<\/a> and a <a href=\"https:\/\/wordpress.org\/plugins\/xpro-theme-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free Elementor theme builder<\/a> to elevate your Elementor experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wished for more control over your website without writing a single line of code? It is possible if you use a page builder like Elementor for developing your WordPress websites. The Elementor page builder is an extremely popular site builder with over 5 million downloads. It offers incredible customization options and flexibility&#8230;<\/p>\n","protected":false},"author":5,"featured_media":91910,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[33,6,34],"class_list":["post-2063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-custom-header","tag-elementor","tag-elementor-header"],"_links":{"self":[{"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/posts\/2063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/comments?post=2063"}],"version-history":[{"count":1,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/posts\/2063\/revisions"}],"predecessor-version":[{"id":91911,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/posts\/2063\/revisions\/91911"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/media\/91910"}],"wp:attachment":[{"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/media?parent=2063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/categories?post=2063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/tags?post=2063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}