Creating a Custom Header in Jupiter X using Elementor

Updated on September 7, 2022

Jupiter X theme lets you use a default customizer header or create a new custom header from scratch using Elementor. Creating a header using Elementor includes adding a header template and assigning it to a page. Creating the header using Elementor allows you to use all of the Elementor elements, allowing you to have a highly customized header.

Caution: You need Jupiter X Core plugin to be installed and activated among the bundled plugins to be able to use the Custom Header and Footer feature with Elementor free edition. 

Difference Between Default Customizer Header and Custom Elementor Header

Simply put, the default customizer header has limited options and styles, while the custom Elementor header has pretty much unlimited customization because of its widgets. You can add any Elementor element to the header: buttons, images, headings, icons, etc.

The customizer header feature is a great way to quickly create a simple header for your website. However, if you are looking for some specific header design, Elementor will allow you to do that.

Using a custom header on your website

To use a custom header on your website, you must:

  • Create your custom header in Elementor
  • Assign it to all pages, globally on your website or a specific page.

We will describe them step by step.

Creating a new Custom Header in Elementor

 Adding a new custom header in Jupiter X, can only be done with the Elementor plugin. To learn how to install it, check out this article.

There is two ways to add a custom header to your website:

1. Click on Templates, and the Saved Templates menu from the WordPress left menu.

2. Next to Templates title, click on the Add New button.

For the template type select Header and give your header a name and click on the Create Template button.

You will now be redirected to the Elementor page editor, where you can choose a header template from the library or create your new header from scratch using Elementor. Some of the pre-made headers are part of Elementor Pro, and to use them, you need to purchase Elementor Pro first. You can also use the Jupiter X pre-made templates. Those templates are free. 
To see the Jupiter X templates, simply click on Jupiter X.  You can use your preferable template by clicking on the Insert button.

If you don’t want to use pre-made templates and plan to create your custom header from scratch, simply click on x icon. That will redirect you to the Elementor page editor.

5. Using a pre-made template, you can customize it or add new widgets.  To customize a brand new header (without a pre-made template), determine how many columns you need for your header template. Then add your desired Elementor’s widgets, such as Site Logo and Navigation Menu.

6. Publish the template after your customization.


In case you are using Elementor Pro for the header template with Display Conditions, some of the Jupiter X header customizations may not work correctly to fix that :

1. Make sure the Display Conditions are not provided for your header templates.

Just save a template without conditions. 

2. You can create a custom header directly from the Layout Builder:

Click on Add new button here and name a new header

Once you click on Create button new header will appear in the layout builder, and you will be redirected to the newly created Elementor header template. Other steps are the same.

Assigning the Custom Header to your Website

After creating the custom header, you must assign it to your website. To do that, please follow the steps below:

1. Go to Jupiter X -> Layout builder -> Header from the WordPress left menu. Here you will see all your header templates.

2. Under each header, you will see the option to conditionally set your header. Click on the Edit Condition to open the conditions window

Conditions window is an advanced tool that allows you to set your header to various parts of your website. Many options and combinations can be used to show your header to different parts of the website for different users.

You can also use Exclude option to hide the header from certain pages.

After you have done with the conditions, click the Save and Close button, and you are ready.

Editing Custom Header via Layout builder

There are options in Layout builder that allow you to edit custom header templates or create a new one without leaving the Layout builder, you can Edit, Rename, Export or delete the templates:

If you want to create a header toolbar, this article describes the process.
To create a transparent header, which overlaps the content, read the article Creating a transparent header.

In case you’re not creating a custom header but editing a built-in header, refer to this article to find out how to set the background for this header.

To be able to add a logo to your custom header, read the article Adding multiple versions of the logo.

Did this answer your question?