{"id":833,"date":"2019-10-21T13:21:52","date_gmt":"2019-10-21T13:21:52","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=833"},"modified":"2026-09-02T10:34:29","modified_gmt":"2026-09-02T07:34:29","slug":"sidebar","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/general-options\/sidebar\/","title":{"rendered":"Sidebar"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Blocksy&#8217;s Sidebar options let you control the appearance, spacing, behaviour and responsive visibility of sidebars across your website. These settings define how the sidebar itself is presented, while individual post types and archives determine where a sidebar is enabled and whether it appears on the left or right.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To access these options, navigate to <strong>Customiser \u2192 General Options \u2192 Sidebar<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quick Look<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screen-Recording-2021-08-26-at-21.29.42.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">An overview of the Sidebar options in the Customiser.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9fa56e5dae9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9fa56e5dae9\" class=\"wp-block-image size-full is-resized 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\/2019\/10\/blocksy-sidebar-design.png\" alt=\"Sidebar design type options in Blocksy\" class=\"wp-image-5220\" \/><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\">Choosing the visual style used by the sidebar.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Design Type<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Design Type<\/strong> setting determines the overall visual treatment of the sidebar. Four styles are available, each providing a different relationship between the sidebar, its widgets and the surrounding page content.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Type 1<\/strong> &#8211; a clean, traditional sidebar presentation.<\/li>\n\n\n\n<li><strong>Type 2<\/strong> &#8211; places the sidebar content inside a distinct background container.<\/li>\n\n\n\n<li><strong>Type 3<\/strong> &#8211; visually separates the sidebar from the main content area.<\/li>\n\n\n\n<li><strong>Type 4<\/strong> &#8211; applies the sidebar background treatment across the full sidebar area.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Additional colours, borders and other visual properties for the selected style can be adjusted from the <strong>Design<\/strong> tab.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9fa56e5eb1f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9fa56e5eb1f\" class=\"wp-block-image size-full is-resized 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\/2019\/10\/blocksy-sidebar-controls.png\" alt=\"Sidebar width and spacing controls in Blocksy\" class=\"wp-image-5223\" \/><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\">Sidebar width and spacing controls.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Sidebar Width &amp; Spacing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The spacing controls let you fine-tune how much room the sidebar occupies and how it relates to both the main content and the widgets placed inside it.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sidebar Width<\/strong> &#8211; controls the overall width allocated to the sidebar.<\/li>\n\n\n\n<li><strong>Sidebar Gap<\/strong> &#8211; adjusts the distance between the sidebar and the main content area.<\/li>\n\n\n\n<li><strong>Widgets Vertical Spacing<\/strong> &#8211; controls the amount of vertical space between individual widgets.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Classic Widget Title Tags<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Blocksy also provides a compatibility control for changing the HTML heading tag used by titles from WordPress&#8217; legacy Classic Widgets.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting applies only to classic widget markup. Widgets created with the block-based Widgets editor control their own heading structure and do not inherit this option.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9fa56e5f538&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9fa56e5f538\" class=\"wp-block-image size-full is-resized 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\/2019\/10\/blocksy-sidebar-sticky.png\" alt=\"Sticky Sidebar options in Blocksy\" class=\"wp-image-5226\" \/><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\">Configuring sticky behaviour for sidebar content.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Sticky Sidebar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sticky sidebar controls let you keep selected sidebar content visible while the visitor scrolls through a longer page. This can be useful for elements such as navigation, calls to action or other information that should remain readily accessible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When sticky behaviour is enabled, Blocksy keeps the configured sidebar content within the viewport as the main page continues to scroll.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9fa56e5fe79&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9fa56e5fe79\" class=\"wp-block-image size-full is-resized 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\/2019\/10\/blocksy-sidebar-visibility.png\" alt=\"Sidebar responsive visibility settings in Blocksy\" class=\"wp-image-5230\" \/><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\">Controlling sidebar visibility across different devices.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Responsive Visibility<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The responsive controls determine whether the sidebar is displayed on desktop, tablet and mobile devices. This makes it possible to keep the sidebar on larger screens while removing it from layouts where horizontal space is more limited.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On smaller screens, you can also control the sidebar&#8217;s position relative to the main content, allowing it to appear either <strong>before<\/strong> or <strong>after<\/strong> the content when enabled.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Blocksy&#8217;s Sidebar options let you control the appearance, spacing, behaviour and responsive visibility of sidebars across your website. These settings define how the sidebar itself is presented, while individual post types and archives determine where a sidebar is enabled and whether it appears on the left or right. To access these options, navigate to Customiser [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[113],"class_list":["post-833","documentation","type-documentation","status-publish","hentry","doc_categories-general-options"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/833","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=833"}],"version-history":[{"count":6,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/833\/revisions"}],"predecessor-version":[{"id":15125,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/833\/revisions\/15125"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=833"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}