Big Summer Sale! Buy Impreza for $29 or extend support for it with lower price.

Impreza Knowledge Base Header Builder

Header Builder

Header Builder addon allows to change website header using visual drag & drop editor. Install it on Impreza > Addons page, when you have activated your theme.

Manage all your headers on the Impreza > Headers page:

2090.jpeg

Header Drag & Drop Editor #

2085.jpeg

The editor consists of 3 rows: Top, Main, Bottom, each with 3 cells: Left, Center, Right. Every row represents website header area, which has its own settings and colors. Top and Bottom areas are optional and can be switched off on the side settings. Every cell represents a container for header elements with the corresponding position, e.g. right cell will display its elements at the right side of your website header.

You can move, edit, duplicate or delete every element, hover on added element to see the controls.

"Hidden Elements" area is used when you need to hide some element, but keep its settings and content. E.g. when you want to change header appearance on different header states.

Header Settings #

Header settings affect on the whole header appearance. They are separated on Global Header Settings, Top Area, Main Area and Bottom Area.

Header States #

Header state is a responsive state of a website header, related to the screen width, with adjustable breakpoints. Using header states allows improving header appearance on small screens.

Impreza has 3 default header states:

  • Default — state is shown when screen width is 901px or bigger
  • Tablets — state is shown when screen width is from 900px to 601px inclusively
  • Mobiles — state is shown when screen width is 600px or less

Header states are represented by the relevant tabs:

2086.jpeg

Open Tablets and Mobiles tabs to adjust these responsive breakpoints:

2123.jpeg

2124.jpeg

Two important points you need to know when using header states:

  1. The position of Header Elements and Header Settings MAY DIFFER on different header states.
    • When you move any header element on any state, this element won't be moved on other two states.
    • When you change any header setting for any state, these settings won't be changed on other two states.
  2. Content and Settings of Header Elements NEVER DIFFER on different header states.
    • When you add a new header element on any state, this element will be added automatically on other two states into the same cell.
    • When you edit any header element on any state, those settings will be changed for other two states too.
    • When you delete any header element on any state, this element will be deleted on other two states.

Header Name #

Click on the title with the "Pencil" icon and enter the desired name, then click on Save Changes button:

2093.jpeg

Header Templates #

Header template is a predefined layout of a header. Using a header template is a good start to create your own website header.

2087.jpeg

Every header template includes:

  1. Header settings including Tablets and Mobiles states
  2. Header elements position including Tablets and Mobiles states
  3. Header elements content
  4. Header elements settings

When you apply a header template, your previous header elements and settings will be deleted.

Header Export / Import #

You can Export / Import any header with all its elements and settings. This option can be useful to transfer headers between the sites.

2088.jpeg

Just copy/paste the code into the textarea and click on Import Header button. When you import another header, your previous header elements and settings will be deleted.

2089.jpeg

1

Settings for Impreza below 4.6 version

What is a Header Builder?

Header Builder is a unique Impreza addon allowing you to modify website header using visual drag & drop builder. You can install Header Builder at Addons page. You'll be able both to install and to use Header Builder only if your theme is activated.

When activated, Header Builder is located on one of the Impreza > Theme Options tabs:

6aIi9J5.png

Header Drag & Drop Editor

The main part of Header Builder is a visual drag & drop editor:

48sED05.png

The editor consists of 3 rows (Top, Main, Bottom) with 3 cells (Left, Center, Right) in each. Every row represents website header area, which has its own settings and colors. Top and Bottom areas are optional. Every cell represents a container for header elements with the corresponding position (e.g. right cell will display its elements at the right side of your website header).

You can add a new element into any cell via related "plus" button. In the popup window you can see all available elements:

qksktNx.png

You can move, edit or delete every element (hover mouse cursor on it to see the options):

b6UW32I.png

"HIDDEN ELEMENTS" area is used when you need to hide some element, but keep its settings and content (e.g. when you want to change header appearance on different header states).

Header Elements

Header elements are flexible pre-built elements which can be placed into the header. Every header element has its own settings.

Text

Text element shows any custom text. You can change its font size (3 cases), apply link, set a custom color and add a custom icon. Also, you can set font source and enable line wrapping.

You are able to use <strong>, <br>, <a> tags in the "Text" field.

Image

Image element shows any custom image from Media Library. You can change its height (6 cases), apply link, set different image for the transparent header.

Main Menu

Main Menu element shows main theme menu, which is set on Menus page.

You can place only one Main Menu element into your header.

Additional Menu

Additional Menu element shows any menu created on Menus page. Additional Menu doesn't show menu sub items, and doesn't highlight active menu items.

Search Field

Search Field element shows search field (surprisingly!). You can change its text placeholder and choose one of 4 field layouts. When WooCommerce plugin is enabled you can also activate "Search in Shop Products only" option.

You can place only one Search Field element into your header.

Dropdown

Dropdown element shows text link, which displays a dropdown box with links by mouse click on it (or tap on a touch screen). You can change dropdown size (3 cases). Also, you can set Dropdown as languages switcher, it supports WPML plugin.

Social Links

Social Links element shows a list of icons of popular social sites. You can change its size (3 cases), choose basic and hover styles.

Button

Button element shows button (surprisingly!). You can choose button style, change button size (3 cases), set custom colors, add a custom icon. Default colors of the button are taken from "Menu Button" color values of Styling options.

Cart

Cart element is available only if WooCommerce plugin is activated. You can set cart icon and its size.

You can place only one Cart element into your header.

Custom HTML

Custom HTML allows to place any custom code in the header. Added code will be located inside <div class="w-html"></div> element.

Vertical Wrapper

Vertical Wrapper allows locating header elements one above the other in one column, regardless the header orientation.

  • You cannot add a Vertical Wrapper directly into your header if it has vertical orientation
  • You can add a Vertical Wrapper into a Horizontal Wrapper
  • You can choose horizontal alignment of Vertical Wrapper inner elements

Horizontal Wrapper

Horizontal Wrapper allows locating header elements in sequence in one row, regardless the header orientation.

  • You cannot add a Horizontal Wrapper directly into your header if it has horizontal orientation
  • You can add a Horizontal Wrapper into a Vertical Wrapper
  • You can choose horizontal alignment of a Horizontal Wrapper itself
  • All elements inside a Horizontal Wrapper are always centered by vertical
  • All elements inside a Horizontal Wrapper are always placed in a single line, even if the header hasn't enough free space

Header Settings

Header settings affect on header appearance on all website pages by default. There are the following options:

  • Global Header Settings
    • Orientation
    • Sticky Header
    • Scroll Breakpoint
    • Transparent Header
    • Header Width
    • Elements Alignment
    • Header Shadow
  • Top Area Settings
    • Show Area
    • Area Height
    • Sticky Area Height
    • Full Width Content
  • Main Area Settings
    • Area Height
    • Sticky Area Height
    • Full Width Content
    • Background Image
    • Background Image Size
    • Background Image Repeat
    • Background Image Attachment
    • Background Image Position
  • Bottom Area Settings
    • Show Area
    • Area Height
    • Sticky Area Height
    • Full Width Content

Header States

Header state is a responsive state of website header related to the screen width. Using header states allows improving header appearance on small screens.

Impreza has 3 header states:

  • Default — state is shown when screen width is 901px or bigger
  • Tablets — state is shown when screen width is from 900px to 601px inclusively
  • Mobiles — state is shown when screen width is 600px or less

Header states are represented by the corresponding tabs in the interface:

SfOz83H.png

Two important points you need to know when using header states:

  1. The position of Header Elements and Header Settings MAY DIFFER on different header states.
    • When you move any header element on any state, this element won't be moved on other two states.
    • When you change any header setting for any state, these settings won't be changed on other two states.
  2. Content and Settings of Header Elements NEVER DIFFER on different header states.
    • When you add a new header element on any state, this element will be added automatically on other two states (into the same cell).
    • When you edit any header element on any state, those settings will be changed for other two states too.
    • When you delete any header element on any state, this element will be deleted on other two states.

Header Templates

Header template is a predefined layout of header elements. Using a header template is a good start to create your own website header.

CWhicTP.png

Every header template includes:

  1. Header settings (including Tablets and Mobiles states)
  2. Header elements' position (including Tablets and Mobiles states)
  3. Header elements' content (dummy)
  4. Header elements' settings

When you apply any header template all your current header elements and settings will be wiped.