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

Impreza Knowledge Base Header Builder

Header Builder

Header Builder addon allows modifying website header using visual drag & drop editor. You can install it at Addons page, as soon as your have activated your theme.

Once the addon is activated, you can find all your headers under Impreza > Headers, then click on the desired header title to open it in Header Builder editor:

2090.jpeg

Header Drag & Drop Editor #

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

2082.jpeg

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).

Header Elements #

Click on related "plus" button to add a new element into any cell. In opened window you can see all available elements:

2083.jpeg

You can move, edit, duplicate or delete every element (hover over an added element to see the options):

2085.jpeg

"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).

Element settings #

Every header element has its own settings:

  • Text shows any custom text. You can change its font size (3 cases for 3 states), apply a link, set a custom color and add a custom icon. Also, you can set font source and enable line wrapping. You're able to use <strong>, <br>, <a> HTML tags in the "Text" field.
  • Image shows any custom image from Media Library. You can change its height (6 cases), apply link, set different image for the transparent header.
  • Menu is a fully-featured element, it supports dropdowns and can be transformed to 'Hamburger', usually it's used as a main menu of the site. You can add several Menu elements into the header.
  • Link Menu shows any menu created on Menus page. Note that Links Menu doesn't show sub items, doesn't highlight active menu items, and can't be transformed to 'Hamburger'.
  • Search shows a search field (surprisingly!). You can change its text placeholder and choose one of 4 predefined field layouts. When WooCommerce plugin is activated, you can also turn on "Search in Shop Products only" option. You can place only one Search Field element into your header.
  • Dropdown shows text link, which displays a dropdown box with links by a mouse click on it (or tap on a touch screen). You can change dropdown size (3 cases for 3 states). Also, you can set Dropdown as languages switcher, it supports WPML, Polylang, qTranslate X plugins.
  • Social Links shows a list of icons of popular social sites. You can change its size (3 cases for 3 states), set basic and hover styles.
  • Button shows a button (surprisingly!). You can select button style, change button size (3 cases for 3 states), set custom colors, add a custom icon. Default color values are taken from Impreza > Theme Options > Colors > "Primary Color" and "Secondary Color".
  • Cart 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 allows to place any custom code in the header. Note that added code will be located inside <div class="w-html"></div> element.
  • 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 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 header appearance on all website pages by default. They are separated on Global Settings, Top Area, Main Area and Bottom Area.

Header name #

Click on Header title (with the 'Pencil' icon) and fill in the desired name, then click on Save Changes button:

2093.jpeg

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 corresponding 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 Templates #

Header template is a predefined layout of header elements. 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 (dummy)
  4. Header elements settings

Please note: when you apply any header template all your current header elements and settings will be wiped!

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. Please note that all existing elements will be wiped!

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.

Please note: 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. Note that 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. Note that 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

Please note: when you apply any header template all your current header elements and settings will be wiped.