Getting Started with the Header elements

Blocksy’s Header Builder uses individual elements that can be dragged into the available header rows and the Off Canvas Area. Each element provides its own functionality and configuration options, making it possible to build different navigation, branding, search, account and WooCommerce layouts from the same visual interface.

To access them, open the Customiser → Header → Elements tab. From there, drag the elements you need into the desired header location and select an element to configure its individual options.

Quick Look

A closer look at Blocksy’s Header Elements and their configuration options.

Available Header Elements

The exact elements available in the Header Builder depend on your Blocksy package, active plugins and enabled extensions. The following elements cover the main options available in the current Header Builder:

  • Account – provides login, registration and account-related actions for visitors.
  • Button – adds a configurable call-to-action button with a custom link or supported Blocksy Pro action.
  • Cart – provides access to the WooCommerce shopping cart and its available cart interactions.
  • Color Switch – lets visitors switch between the website’s regular and dark Color schemes when the Color Mode Switch extension is active.
  • Compare – provides access to the product comparison functionality from Blocksy Pro’s Shop Extra extension.
  • Contacts – displays contact details such as phone numbers, email addresses, opening hours and other supported information.
  • Content Block – inserts an existing Blocksy Content Block directly into the header.
  • Divider – visually separates neighbouring header elements.
  • HTML – adds custom content through Blocksy’s HTML/WYSIWYG element.
  • Languages – displays a language switcher for supported multilingual plugins.
  • Logo – displays the site’s logo, title and tagline, with support for responsive and alternate header states.
  • Menu – Desktop – displays a WordPress navigation menu inside the desktop header.
  • Menu – Mobile – provides navigation optimised for the mobile Off Canvas Area, including collapsible submenu behaviour.
  • Search – opens Blocksy’s search interface and can display live search results.
  • Search Box – places a complete search input directly inside the header instead of using a separate search trigger.
  • Socials – displays links configured under Blocksy’s global Social Network Accounts settings.
  • Trigger – opens the Off Canvas Area. It is commonly used for mobile navigation and can also be used on desktop with Blocksy Pro.
  • Widget Area – inserts a WordPress widget area into a header row or the Off Canvas Area.
  • Wishlist – gives visitors quick access to the wishlist functionality provided by Blocksy Pro’s Shop Extra extension.

Element availability
Some Header Elements require Blocksy Companion Pro or a specific extension to be active. WooCommerce-specific elements also depend on their corresponding shop functionality. If an element becomes unavailable, check Blocksy → Extensions and make sure the required Blocksy Companion plugin is active and matches the theme version.

Duplicating Header Elements

Duplicating a Header Element.

Blocksy Pro lets you create additional instances of supported Header Elements. Each duplicated element receives its own independent configuration, so the same element type can be used for different purposes within the header.

For example, you can use multiple menu elements with different WordPress menus assigned to them, or duplicate another supported element and configure each instance with different content, visibility or design settings.

Duplicated elements behave like their original counterparts and can be positioned independently throughout the Header Builder.

Not the solution you are looking for?

Please check other articles or open a support ticket.