Header Builder

Updated on December 20, 2018

Header builder is a new feature introduced to Jupiter which lets you create and modify your website header using a visual drag & drop editor


Activating the Header Builder

To activate the header builder:

1From the WordPress left menu, go to Jupiter > Theme Options > Header

2Click on Header Builder.

3A warning message pop-up will appear. Click on Agree.

4Click on the Save Settings button.

5Access the header builder from the WordPress left menu, Jupiter > Header Builder.


Header Elements

Click on the related “+” button to open the list of elements.

Drag & Drop Editor

Header builder provides a visual drag & drop editor which lets you simply drag header elements and drop them into a desired place on your header.

Element Settings

Adding an element to the header lets you access its settings.

1Click on an element inside the header area.

2A new panel will open on the right side of the page with the element specific settings.

 

3Configure the settings.

Header Settings

Click on the related “cog” icon to open the header settings.

A new panel will open with the list of settings:

SettingDescription

Fixed Header (Desktop & Laptop) Creates a fixed header only for desktop and laptop devices.
Fixed Header (Tablet & Phone) Creates a fixed header only for tabled and phone devices.
Sticky Header Enables sticky header.
Sticky Header Offset Decides when the header goes into the sticky header state.
Sticky Header Behaviour Sets how a sticky header is going to behave. Available options are slide down and lazy.

Sticky Header

Header builder lets you create a separate sticky header which can be different from your default header. Sticky header will “stick” to the top of your website upon scrolling down.

To create a sticky header:

1From the Header Settings, enable Sticky Header.

2Click on the Sticky Header and add your elements.

Header Responsive States

Header builder provides three different responsive states related to the screen width. Use the header responsive states to create and improve the header appearance on different devices such as desktop, tablet, and mobile.

By clicking on one of the devices, you will be able to create a header that will be displayed only on that specific device.


Previewing the Changes

It is possible to preview the elements and the changes you’ve made to you the header before actually applying them to the front end of your website.

Previewing the Elements

To preview how a specific element is going to look in the header:

1Click on an element inside the header area.

2A new panel will open on the right side of the page with the elements settings. Click on Preview.

3A new window will pop up with the preview of the element.

Previewing the Header

To preview the whole header:

1Click on the Preview button in the top right corner of the page.

2A new tab will open in your browser where you can check the header changes.

Increasing Header Height

When adding some elements to the header via Header Builder, you may want to increase the header height.

By default there is no such option in the Header Builder, but you can do this with margin options in the row settings.

To increase the header height:

1In Header Builder click on the row to open the row settings.
2In the row settings, set margin-top and margin-bottom values so the header has equal space on top and bottom.

3Save the settings.

Check the changes on frontend.

Did this answer your question?