Impreza Knowledge Base Header Builder Header Builder Elements

Header Builder Elements

Click on a "Plus" icon to add a new element to any cell. In the opened window you can see all the available elements:

2560.png

  • Text shows any custom text. You can change its font size for 3 states, apply a link, set a custom color, and add a custom icon. Also, you can set the font sources and enable line-wrapping. You're able to use <strong>, <br>, <a> HTML tags in the "Text" field.
  • Image shows any custom image from the Media Library. You can change its height for 6 cases, apply links, set a different image for the transparent header.
  • Menu shows a WordPress menu created on the Appearance > Menus page. You can add several Menu elements to the same header
    • General tab represents not a "Hamburger" menu
      • Menu applies one of the menus created at Appearance > Menus
      • Font applies a font family and attributes such as Bold, Uppercase or Italic
      • Main Items Font Size sets a font to top-level menu items
      • Distance Between Main Items sets a distance between top-level menu items by adding CSS paddings
      • Main Items Height if enabled, menu items take all available menu height and push drop-down menu under main menu items
      • Main Items Hover Effect applies either Simple or Underline effect
    • Dropdowns tab represents dropdowns in not a "Hamburger" menu
      • Dropdown Indication adds an arrow to the main menu item which has a drop-down
      • Dropdown Effect sets one of the predefined appearance effects
      • Dropdown Font Size sets the desired font size to child menu items
      • Dropdown Width limits full-width dropdowns by a menu width
    • Mobile Menu tab represents a "Hamburger" menu
      • Show mobile menu when screen width is less than sets a breakpoint when a menu transforms into a "Hamburger"
      • Mobile Menu Layout applies one of the predefined mobile menu layouts
      • Main Items Font Size sets a font size for top-level menu items
      • Dropdown Font Size sets a font size for child menu items
      • Menu Items Alignment
      • Dropdown Behavior when enabled, clicking on the menu title will open subitemsWhen disabled: clicking on menu title will open the corresponding page (if it's set), clicking on the arrow will open subitems
      • Icon Size sets "Hamburger" and "Cross" icon sizes for 3 header states
  • Simple Menu is the same as the previous Menu element but has limitations. Links Menu doesn't show sub-items, doesn't highlight active menu items, and can't be transformed into a "hamburger" menu.
  • Search shows a search field. You can choose one of 4 predefined layouts. When the WooCommerce plugin is activated, you can also turn on the "Search Shop Products only" option.
  • Dropdown displays a box which can be opened by a click (tap) or on hover, you can change its sizes for 3 states. The element can be used as a language switcher, for WPML or Polylang plugins, widget area, or for displaying custom links.
  • Social Links shows a list of icons of social sites. You can change its size for 3 states, set basic and hover styles.
  • Button shows a button. You can select button style, change button size 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 the WooCommerce plugin is activated. You can set a cart icon and its size.
  • 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 allows locating header elements one above the other in one column, regardless of the header orientation.
    • You cannot add a Vertical Wrapper directly into your header if it has a vertical orientation
    • You can add a Vertical Wrapper into a Horizontal Wrapper
    • You can choose the horizontal alignment of Vertical Wrapper inner elements
  • Horizontal Wrapper allows locating header elements in a sequence in one row, regardless of the header orientation.
    • You cannot add a Horizontal Wrapper directly into your header if it has a horizontal orientation
    • You can add a Horizontal Wrapper into a Vertical Wrapper
    • You can choose the 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