Zephyr Knowledge Base Header Builder

Header Builder

Header (not Heading) is a part of site pages, which is commonly located on the top and includes site navigation.

Edit existing headers and create new ones under the Zephyr > Headers page:

2546.png

Header Drag & Drop Editor #

2547.png

The editor consists of 3 rows: Top, Main, Bottom, each with 3 cells: Left, Center, Right. Every row represents a website header area that 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 over the added element to see the controls.

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

Header Settings #

Header settings affect 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.

Zephyr has 3 default header states:

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

Header states are represented by the relevant tabs:

2548.png

Open Tablets and Mobiles tabs to adjust these responsive breakpoints:

2550.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 the other two states.
    • When you change any header setting for any state, these settings won't be changed on the 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 the 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 #

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

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

2553.png

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

2554.png