Header Builder

Updated 7 months ago

Header Builder is used to set a custom header for the website pages, posts, and custom elements, header (not heading) is located on the top and allows to set custom headers for different terms and pages with different terms as well. Headers contain elements such as search block, menu, cart button, etc.

Create a new header and set a custom name:

General header settings #

• Orientation — choose "Horizontal" or "Vertical"
• Sticky Header — ON/OFF slider allows setting "Sticky Header". Fix the header at the top of a page during scroll. If a sticky header is ON, ON/OFF extra slider appears to set "Auto-hide on scroll down", "Header Scroll Breakpoint" (this option sets scroll distance from the top of a page after which the sticky header will be shrunk, 1px by default)
• Transparent Header — ON/OFF slider allows make the header transparent at its initial position
• Header Shadow — choose "Thin", "Wide" or "None" by default

Areas settings #

• Top Area — ON/OFF slider allows to show or hide the top area. If "Show Area" is ON next parameters allow to be set:
  • Area Height — set a custom area height, 40px by default
  • Sticky Area Height — ON/OFF slider allows to set sticky area height, 40px by default
  • Full Width Content — ON/OFF slider allows setting full width for content
  • Center the middle cell — ON/OFF slider allows to center the middle cell
  • Background — set a custom background color as "_header_top_bg" by default
  • Text / Link — set a custom text/link color as "_header_top_text" by default
  • Link on hover — set a custom link on hover color as "_header_top_text_hover" by default
  • Transparent Header: Background — set a custom transparent header background color as "_header_top_transparent_bg" by default
  • Transparent Header: Text / Link — set a custom transparent header text/link color as "_header_top_transparent_text" by default
  • Transparent Header: Link on hover — set a custom transparent header link on hover as "_header_top_transparent_text_hover" by default
• Main Area — ON/OFF slider allows to show or hide the main area. If the "Show Area" option is ON next parameters allow to be set:
  • Area Height — set a custom area height, 80px by default
  • Sticky Area Height — ON/OFF slider allows to set sticky area height, 60px by default
  • Full Width Content — ON/OFF slider allows setting full width for content
  • Center the middle cell — ON/OFF slider allows to center the middle cell
  • Background Image — set a custom background image with "Background Size" ("Fill Area", "Fit to Area", "Initial"), "Background Repeat" ("Repeat", "Horizontally", "Horizontally", "None" by default)
  • Background Position — set a custom background position
  • Scroll with Page — ON/OFF slider allows background scroll with the page
  • Background — set a custom background color as "_header_middle_bg" by default
  • Text / Link — set a custom text/link color as "_header_middle_text" by default
  • Link on hover — set a custom link on hover color as "_header_middle_text_hover" by default
  • Transparent Header: Background — set a custom transparent header background color as "_header_transparent_bg" by default
  • Transparent Header: Text / Link — set a custom transparent header text/link color as "_header_transparent_text" by default
  • Transparent Header: Link on hover — set a custom transparent header link on hover as "_header_transparent_text_hover" by default

• Bottom Area — ON/OFF slider allows to show or hide the bottom area. If the "Show Area" option is ON next parameters allow to be set:
  • Area Height — set a custom area height, 50px by default
  • Sticky Area Height — ON/OFF slider allows to set sticky area height, 50px by default
  • Full Width Content — ON/OFF slider allows setting full width for content
  • Center the middle cell — ON/OFF slider allows to center the middle cell
  • Background — set a custom background color as "_header_middle_bg" by default
  • Text / Link — set a custom text/link color as "_header_middle_text" by default
  • Link on hover — set a custom link on hover color as "_header_middle_text_hover" by default
  • Transparent Header: Background — set a custom transparent header background color as "_header_transparent_bg" by default
  • Transparent Header: Text / Link — set a custom transparent header text/link color as "_header_transparent_text" by default
  • Transparent Header: Link on hover — set a custom transparent header link on hover as "_header_transparent_text_hover" by default

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 website state related to the screen width with adjustable breakpoints

Zephyr has 4 default header states:

• Desktops — set the screen width by default
• Laptops —set the screen width 1280px
• Tablets —set the screen width 1024px
• Mobiles —set the screen width 600px

Choose "Laptops", "Tablets", and "Mobiles" tabs to adjust responsive breakpoints. By default, header states are changed via the global breakpoints:

Header drag & drop editor #

The editor consists of 3 rows: "Top", "Main", and "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.

Move, edit, duplicate or delete every element with controls.

"Hidden Elements" area is used to hide elements, but keep its settings and content. Option "Hidden Elements" allows changing header appearance on different header states.

*Important:

• The position of header elements and Header Settings MAY DIFFER in 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
• Content and Settings of Header Elements NEVER DIFFER on different header states
  • When you add a new header element to any state, this element will be added automatically to the other two states in the same cell
  • When you edit any header element on any state, those settings will be changed for the other two states too
  • When you delete any header element on any state, this element will be deleted on the other two states

Header elements #

Click on a "Plus" icon to add elements:

• Text — read more about Text Element
• Image — read more about Image Element
• Menu — read more about Menu Element
• Simple Menu — read more about Simple Menu Element
• Search — read more about Search Element
• Dropdown — read more about Dropdown Element
• Social Links — read more about Social Links Element
• Button — read more about Button Element
• Custom HTML — read more about Custom HTML Element
• Popup — read more about Popup Element
• Horizontal Wrapper — read more about Horizontal Wrapper Element
• Vertical Wrapper — read more about Vertical Wrapper Element
• Cart — read more about Cart Element

Header templates #

The header template is a prebuilt layout. Using a header template is a good start to creating your own website header

Every header template includes:

• Header settings for "Laptops", "Tablets, and "Mobiles" states
• Header elements position for "Tablets" and "Mobiles" states
• Header elements content
• 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

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