{"id":2074,"date":"2026-10-14T04:38:21","date_gmt":"2026-10-14T04:38:21","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2074"},"modified":"2026-10-17T10:50:51","modified_gmt":"2026-10-17T10:50:51","password":"","slug":"offcanvas","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/offcanvas\/","title":{"rendered":"Offcanvas"},"content":{"rendered":"\n

The Offcanvas Block lets you display a toggle button that opens a hidden panel containing a selected ShapeBlock Template. Choose between a classic side panel and a modern fullscreen-style panel, customize the opening position and width, and style the menu button, closing icon, and panel appearance.<\/p>\n\n\n\n

How to Add an Offcanvas Block<\/h2>\n\n\n\n

Step 1: Add the Offcanvas Block<\/h3>\n\n\n\n
    \n
  1. Open the page or post where you want to add the Offcanvas Block.<\/li>\n\n\n\n
  2. Click the + (Add Block)<\/strong> button in the Gutenberg editor.<\/li>\n\n\n\n
  3. Search for Offcanvas<\/strong>.<\/li>\n\n\n\n
  4. Select the Offcanvas Block<\/strong> to insert it into your page.<\/li>\n\n\n\n
  5. Select or create a ShapeBlock Template to display inside the offcanvas panel.<\/li>\n\n\n\n
  6. Use the block settings in the sidebar to configure its layout, position, width, and appearance.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 2: Configure the Offcanvas Block<\/h3>\n\n\n\n

    Select the Offcanvas Block and open the block settings in the sidebar. The available tabs are:<\/p>\n\n\n\n

      \n
    • Settings:<\/strong> Choose the offcanvas layout, configure the opening position, select a template, and customize the opener and closing icons.<\/li>\n\n\n\n
    • Layout:<\/strong> Set the canvas width for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
    • Style:<\/strong> Customize the opener icon, closing icon, panel background, padding, and blur effect.<\/li>\n\n\n\n
    • Advanced:<\/strong> Configure spacing and background settings for the entire Offcanvas Block.<\/li>\n<\/ul>\n\n\n\n

      Settings Tab<\/h2>\n\n\n\n

      1. Offcanvas Settings<\/h3>\n\n\n\n
        \n
      • Offcanvas Layout:<\/strong> Choose the layout of the offcanvas panel.\n
          \n
        • Classic:<\/strong> Displays a side panel that opens from the left or right.<\/li>\n\n\n\n
        • Modern:<\/strong> Displays a modern panel with fullscreen-style behavior and configurable opening animation.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Canvas Menu Text:<\/strong> Enter the text displayed on the opener button. Leave it empty if you want to use the icon without text.<\/li>\n\n\n\n
        • Menu Icon:<\/strong> Choose the opener icon. This option is available when the Classic<\/strong> layout is selected.<\/li>\n\n\n\n
        • Open Position:<\/strong> Choose how the panel opens.\n
            \n
          • For Classic:<\/strong> Select Left<\/strong> or Right<\/strong>.<\/li>\n\n\n\n
          • For Modern:<\/strong> Select Fade in place<\/strong>, From left<\/strong>, From right<\/strong>, From top<\/strong>, or From bottom<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Select Template:<\/strong> Select a published ShapeBlock Template to display inside the offcanvas panel.<\/li>\n\n\n\n
          • Edit Template:<\/strong> Open the selected template for editing. This option appears when a template is selected.<\/li>\n\n\n\n
          • Create New Template:<\/strong> Open the template editor to create a new ShapeBlock Template. If no templates are available, create one before selecting it.<\/li>\n\n\n\n
          • Close Icon:<\/strong> Choose the icon used to close the panel. This option is available when the Classic<\/strong> layout is selected.<\/li>\n<\/ul>\n\n\n\n
            \"\"<\/figure>\n\n\n\n

            Layout Tab<\/h2>\n\n\n\n

            1. Canvas<\/h3>\n\n\n\n
              \n
            • Canvas Width (px):<\/strong> Set the width of the classic offcanvas panel in pixels. The width can be configured separately for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
            • Canvas Width:<\/strong> Set the width of the modern offcanvas panel for desktop, tablet, and mobile devices.\n
                \n
              • Leave the value empty to use the full screen width (100%<\/strong>).<\/li>\n\n\n\n
              • Enter a number to set the width in pixels.<\/li>\n\n\n\n
              • You can also use CSS width values such as 80%<\/code> or 60vw<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                Style Tab<\/h2>\n\n\n\n

                1. Opener Icon<\/h3>\n\n\n\n
                  \n
                • Text Color:<\/strong> Set the color of the opener button text. This option appears when Canvas Menu Text is not empty.<\/li>\n\n\n\n
                • Typography:<\/strong> Customize the opener button text typography. The settings can be configured separately for desktop, tablet, and mobile devices. This option appears when Canvas Menu Text is not empty.<\/li>\n\n\n\n
                • Hamburger Color:<\/strong> Set the color of the opener icon. The available icon styling depends on the selected layout.<\/li>\n\n\n\n
                • Hamburger Size (px):<\/strong> Set the size of the opener icon in pixels.<\/li>\n<\/ul>\n\n\n\n

                  2. Closing Icon<\/h3>\n\n\n\n
                    \n
                  • Icon Color:<\/strong> Set the color of the closing icon.<\/li>\n\n\n\n
                  • Icon Size (px):<\/strong> Set the closing icon size in pixels. This option is available when the Classic<\/strong> layout is selected.<\/li>\n<\/ul>\n\n\n\n

                    3. Offcanvas Item<\/h3>\n\n\n\n
                      \n
                    • Background:<\/strong> Set the background color or gradient of the offcanvas panel.<\/li>\n\n\n\n
                    • Padding:<\/strong> Adjust the inner spacing of the panel. Padding can be configured separately for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
                    • Enable Blur:<\/strong> Enable the blur effect behind the offcanvas panel.<\/li>\n<\/ul>\n\n\n\n
                      \"\"<\/figure>\n\n\n\n

                      Advanced Tab<\/h2>\n\n\n\n

                      The Advanced tab controls spacing and background settings for the entire Offcanvas Block, not the content inside the selected template.<\/p>\n\n\n\n

                      1. Spacing<\/h3>\n\n\n\n
                        \n
                      • Padding:<\/strong> Set the outer padding around the Offcanvas Block. Values can be configured separately for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
                      • Margin:<\/strong> Set the outer margin around the Offcanvas Block. Values can be configured separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n

                        2. Background<\/h3>\n\n\n\n
                          \n
                        • Background Color:<\/strong> Set the background color of the entire Offcanvas Block.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                          The Offcanvas Block lets you display a toggle button that opens a hidden panel containing a selected ShapeBlock Template. Choose between a classic side panel and a modern fullscreen-style panel, customize the opening position and width, and style the menu button, closing icon, and panel appearance. How to Add an Offcanvas Block Step 1: Add […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[18],"doc_tag":[],"class_list":["post-2074","docs","type-docs","status-publish","hentry","doc_category-header-footer-block"],"year_month":"2026-10","word_count":675,"total_views":"3","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Header & Footer Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/header-footer-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2074"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2074\/revisions"}],"predecessor-version":[{"id":2411,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2074\/revisions\/2411"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2074"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2074"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}