{"id":2367,"date":"2021-05-26T10:30:05","date_gmt":"2021-05-26T07:30:05","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=2367"},"modified":"2026-10-08T10:09:32","modified_gmt":"2026-10-08T07:09:32","slug":"header-builder-elements","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/header-builder-elements\/","title":{"rendered":"Getting Started with the Header elements"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Blocksy&#8217;s <strong>Header Builder<\/strong> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To access them, open the <strong>Customiser \u2192 Header \u2192 Elements<\/strong> tab. From there, drag the elements you need into the desired header location and select an element to configure its individual options.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quick Look<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Deep Dive with the Header Elements | Blocksy Customisation\" width=\"1290\" height=\"968\" src=\"https:\/\/www.youtube.com\/embed\/9msaIaHZHGo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">A closer look at Blocksy&#8217;s Header Elements and their configuration options.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Available Header Elements<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/account\/\" target=\"_blank\" rel=\"noreferrer noopener\">Account<\/a><\/strong> &#8211; provides login, registration and account-related actions for visitors.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/button\/\" target=\"_blank\" rel=\"noreferrer noopener\">Button<\/a><\/strong> &#8211; adds a configurable call-to-action button with a custom link or supported Blocksy Pro action.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/cart\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cart<\/a><\/strong> &#8211; provides access to the WooCommerce shopping cart and its available cart interactions.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/colour-switch\/\" target=\"_blank\" rel=\"noreferrer noopener\">Color Switch<\/a><\/strong> &#8211; lets visitors switch between the website&#8217;s regular and dark Color schemes when the <strong>Color Mode Switch<\/strong> extension is active.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/compare\/\" target=\"_blank\" rel=\"noreferrer noopener\">Compare<\/a><\/strong> &#8211; provides access to the product comparison functionality from Blocksy Pro&#8217;s Shop Extra extension.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/contacts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Contacts<\/a><\/strong> &#8211; displays contact details such as phone numbers, email addresses, opening hours and other supported information.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/header-content-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">Content Block<\/a><\/strong> &#8211; inserts an existing Blocksy Content Block directly into the header.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/divider\/\" target=\"_blank\" rel=\"noreferrer noopener\">Divider<\/a><\/strong> &#8211; visually separates neighbouring header elements.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/html\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a><\/strong> &#8211; adds custom content through Blocksy&#8217;s HTML\/WYSIWYG element.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/languages\/\" target=\"_blank\" rel=\"noreferrer noopener\">Languages<\/a><\/strong> &#8211; displays a language switcher for supported multilingual plugins.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/logo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Logo<\/a><\/strong> &#8211; displays the site&#8217;s logo, title and tagline, with support for responsive and alternate header states.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/menu-desktop\/\" target=\"_blank\" rel=\"noreferrer noopener\">Menu &#8211; Desktop<\/a><\/strong> &#8211; displays a WordPress navigation menu inside the desktop header.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/menu-mobile\/\" target=\"_blank\" rel=\"noreferrer noopener\">Menu &#8211; Mobile<\/a><\/strong> &#8211; provides navigation optimised for the mobile Off Canvas Area, including collapsible submenu behaviour.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/search\/\" target=\"_blank\" rel=\"noreferrer noopener\">Search<\/a><\/strong> &#8211; opens Blocksy&#8217;s search interface and can display live search results.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/search-box\/\" target=\"_blank\" rel=\"noreferrer noopener\">Search Box<\/a><\/strong> &#8211; places a complete search input directly inside the header instead of using a separate search trigger.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/socials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Socials<\/a><\/strong> &#8211; displays links configured under Blocksy&#8217;s global Social Network Accounts settings.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/trigger\/\" target=\"_blank\" rel=\"noreferrer noopener\">Trigger<\/a><\/strong> &#8211; opens the Off Canvas Area. It is commonly used for mobile navigation and can also be used on desktop with Blocksy Pro.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/widget-area\/\" target=\"_blank\" rel=\"noreferrer noopener\">Widget Area<\/a><\/strong> &#8211; inserts a WordPress widget area into a header row or the Off Canvas Area.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/wishlist\/\" target=\"_blank\" rel=\"noreferrer noopener\">Wishlist<\/a><\/strong> &#8211; gives visitors quick access to the wishlist functionality provided by Blocksy Pro&#8217;s Shop Extra extension.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Element availability<\/strong><br>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 <strong>Blocksy \u2192 Extensions<\/strong> and make sure the required Blocksy Companion plugin is active and matches the theme version.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"duplicate-elements\">Duplicating Header Elements<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/Screen-Recording-2024-04-17-at-14.32.37.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Duplicating a Header Element.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Duplicated elements behave like their original counterparts and can be positioned independently throughout the Header Builder.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blocksy&#8217;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 \u2192 Header [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-2367","documentation","type-documentation","status-publish","hentry","doc_categories-header-elements"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=2367"}],"version-history":[{"count":5,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2367\/revisions"}],"predecessor-version":[{"id":15241,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2367\/revisions\/15241"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=2367"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=2367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}