How to Use the Header Builder

Inspiro Premium includes a powerful Header Builder that allows you to visually create and customize your website header. You can control the placement, alignment, and visibility of header elements such as the logo, menu, social icons, buttons, and more.

Enabling the Header Builder

1. Go to Appearance → Customize → Header → Header Options.

2. Enable the Enable Header Builder option.

Once enabled, the Header Builder interface will appear at the bottom of the Customizer screen.

Understanding the Header Builder Interface

The Header Builder includes four main sections:

• Left area
• Center area
• Right area
• Available Elements

You can drag elements from Available Elements into any of the three header areas: Left, Center, or Right. You can also move elements between these areas at any time.

Available Elements

The available elements include:

• Site Logo
• Primary Menu
• Social Icons
• Search
• HTML/Shortcode
• Menu Toggle
• Button
• Login/Logout

To add an element, drag it into one of the header areas.

To remove an element, click the X icon. It will return to the Available Elements panel.

Area Controls (Left / Center / Right)

Each header area includes several controls:

• Eye Icon – Show or hide the entire area on the frontend.
• Up/Down Arrow Icon – Switch between vertical and horizontal layout for elements inside that area.
• Alignment Icons – Align elements within the area (left, center, or right alignment).

These controls allow you to adjust how content is displayed within each section of the header.

Element Controls

Each element placed inside the header areas includes control icons:

• Pencil Icon – Opens the element’s customization settings in the Customizer panel.
• Gear Icon – Opens additional settings related to that specific element.
• X Icon – Removes the element and returns it to Available Elements.

Global Header Builder Controls

Above the Available Elements section, you’ll find additional controls:

• Palette Icon – Opens global header customization options in the Customizer (colors, spacing, styling).
• Desktop / Tablet / Mobile Icons – Allows you to create different header layouts for each device type.
• Down Arrow Icon – Minimizes the Header Builder panel so you can preview your header changes more clearly.

Saving Your Changes

After arranging and customizing your header click Publish in the Customizer. Your new header layout will be applied to your website.