{"id":10236,"date":"2024-04-19T13:51:24","date_gmt":"2024-04-19T10:51:24","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=10236"},"modified":"2026-10-08T10:42:10","modified_gmt":"2026-10-08T07:42:10","slug":"header-content-block","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/header-content-block\/","title":{"rendered":"Header Content Block"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\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-19-at-13.54.32.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">The Content Block header element in action.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Content Block<\/strong> element lets you insert an existing Blocksy Content Block directly into your website&#8217;s header. This is useful when you want to build more complex header content with Gutenberg blocks instead of relying only on the standard Header Builder elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To use it, open the <strong>Customiser \u2192 Header<\/strong>, drag the <strong>Content Block<\/strong> element into the desired header row or Off Canvas Area, and select the Content Block that should be displayed.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"900\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/Screenshot-2026-10-08-at-10.41.04.png\" alt=\"\" class=\"wp-image-15258\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Content Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the existing Content Block that should be rendered inside the header. The design and internal layout are managed from the Content Block itself, allowing you to use regular Gutenberg blocks, Blocksy Theme Blocks and compatible third-party blocks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content Width<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When the Content Block element is placed inside the <strong>Off Canvas Area<\/strong>, the <strong>Content Width<\/strong> control lets you adjust how much horizontal space its content occupies within the panel.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Display Conditions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The selected Content Block should have display conditions that cover the pages where the header element can appear. Blocksy uses those conditions when determining where the Content Block and its required front-end assets should be loaded.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Display conditions are configured from the Content Block itself using Blocksy&#8217;s <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/modules\/conditions-module\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Conditional Module<\/strong><\/a>.<\/p>\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>Keep the conditions in sync<\/strong><br>If the header containing this element is used across several areas of the website, make sure the selected Content Block&#8217;s conditions also include those locations. This ensures its styling and other required assets are available wherever the element is displayed.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Content Block element lets you insert an existing Blocksy Content Block directly into your website&#8217;s header. This is useful when you want to build more complex header content with Gutenberg blocks instead of relying only on the standard Header Builder elements. To use it, open the Customiser \u2192 Header, drag the Content Block element [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-10236","documentation","type-documentation","status-publish","hentry","doc_categories-header-elements"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/10236","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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=10236"}],"version-history":[{"count":6,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/10236\/revisions"}],"predecessor-version":[{"id":15259,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/10236\/revisions\/15259"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=10236"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=10236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}