{"id":6094,"date":"2022-10-05T16:27:34","date_gmt":"2022-10-05T13:27:34","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=6094"},"modified":"2026-10-08T10:44:02","modified_gmt":"2026-10-08T07:44:02","slug":"html","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/html\/","title":{"rendered":"HTML"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acbffd6cc8b1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acbffd6cc8b1\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/10\/Screenshot-2022-10-05-at-17.21.08.png\" alt=\"HTML element displayed inside a Blocksy header\" class=\"wp-image-6098\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The HTML element in action.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>HTML<\/strong> element lets you add custom content directly to your website&#8217;s header. It can be used for simple text and links as well as more advanced markup, shortcodes and other custom content that does not have a dedicated Header Builder element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To use it, open the <strong>Customiser \u2192 Header<\/strong>, drag the <strong>HTML<\/strong> element into the desired header row or supported area, and select it to configure its content and layout.<\/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 data-wp-context=\"{&quot;imageId&quot;:&quot;6acbffd6ce41a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acbffd6ce41a\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/10\/Screenshot-2022-10-05-at-17.25.19.png\" alt=\"Configuration options for the Blocksy HTML header element\" class=\"wp-image-6100\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">HTML element configuration options.<\/figcaption><\/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<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The content editor lets you enter the information that should be rendered by the element. You can use regular text and links, HTML markup and WordPress shortcodes, making the element useful for both simple header content and more advanced integrations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Custom code such as CSS or JavaScript can also be used where appropriate, subject to WordPress&#8217; normal user permissions and content-sanitisation rules.<\/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>HTML permissions<\/strong><br>WordPress restricts potentially unsafe HTML for users who do not have the <code>unfiltered_html<\/code> capability. Depending on the current user&#8217;s permissions, unsupported or unsafe markup can therefore be sanitised when the element is saved.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Stretch Container<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Enable <strong>Stretch Container<\/strong> to let the HTML element expand into the available horizontal space inside its header row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is useful when the element contains wider content or when you want it to occupy the remaining space between neighbouring Header Elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content Alignment<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control the horizontal alignment of the content within the space occupied by the HTML element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This becomes particularly useful when <strong>Stretch Container<\/strong> is enabled and the element has additional horizontal space available.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">User Visibility<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose whether the HTML element is displayed according to the visitor&#8217;s authentication state. This lets you show custom header content only to <strong>logged-in<\/strong> users, only to <strong>logged-out<\/strong> visitors, or to both.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The HTML element lets you add custom content directly to your website&#8217;s header. It can be used for simple text and links as well as more advanced markup, shortcodes and other custom content that does not have a dedicated Header Builder element. To use it, open the Customiser \u2192 Header, drag the HTML element into [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6095,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-6094","documentation","type-documentation","status-publish","has-post-thumbnail","hentry","doc_categories-header-elements"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6094","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=6094"}],"version-history":[{"count":2,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6094\/revisions"}],"predecessor-version":[{"id":15260,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6094\/revisions\/15260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/6095"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6094"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}