Get Started

Offcanvas

2 min read

0:00 3:46

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 the Offcanvas Block

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

Step 2: Configure the Offcanvas Block

Select the Offcanvas Block and open the block settings in the sidebar. The available tabs are:

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

Settings Tab

1. Offcanvas Settings

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

Layout Tab

1. Canvas

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

Style Tab

1. Opener Icon

  • Text Color: Set the color of the opener button text. This option appears when Canvas Menu Text is not empty.
  • Typography: 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.
  • Hamburger Color: Set the color of the opener icon. The available icon styling depends on the selected layout.
  • Hamburger Size (px): Set the size of the opener icon in pixels.

2. Closing Icon

  • Icon Color: Set the color of the closing icon.
  • Icon Size (px): Set the closing icon size in pixels. This option is available when the Classic layout is selected.

3. Offcanvas Item

  • Background: Set the background color or gradient of the offcanvas panel.
  • Padding: Adjust the inner spacing of the panel. Padding can be configured separately for desktop, tablet, and mobile devices.
  • Enable Blur: Enable the blur effect behind the offcanvas panel.

Advanced Tab

The Advanced tab controls spacing and background settings for the entire Offcanvas Block, not the content inside the selected template.

1. Spacing

  • Padding: Set the outer padding around the Offcanvas Block. Values can be configured separately for desktop, tablet, and mobile devices.
  • Margin: Set the outer margin around the Offcanvas Block. Values can be configured separately for desktop, tablet, and mobile devices.

2. Background

  • Background Color: Set the background color of the entire Offcanvas Block.
Updated on October 17, 2026

What are your feelings

  • Happy
  • Normal
  • Sad
Table Of Contents

Download Now & Design Without Limits!

Bring your Gutenberg designs to life with ShapeBlock create stunning, animated websites effortlessly. No code. No limits. Just motion made easy.

Get Started Free
Buy Now
FAQ

Frequently
Asked Questions

Common questions answered, if you still have any
questions
feel free to ask.

What is ShapeBlock?
ShapeBlock is a block library for the WordPress block editor. It adds 33 native blocks sliders, carousels, grids, tabs, counters, filters and more each with Settings, Layout and Style tabs (plus a shared Advanced tab) and a live preview on the canvas.
No. The blocks are native to the block editor, so there is no page-builder layer and no shortcode is needed for normal use. ShapeBlock does not depend on any other plugin.
Upload the plugin via WordPress Dashboard or FTP and activate it.
WordPress 6.6 or newer and PHP 7.4 or newer.
ShapeBlock is built to stay light. A block’s styles are added only to pages that contain that block, small stylesheets are printed inline instead of as extra requests, and nothing relies on jQuery. Blocks you switch off are never registered at all.
Yes. The ShapeBlock dashboard lists every block with a switch. A disabled block is not registered, so it adds nothing to the editor or to your pages.
Yes. Most spacing, size, alignment and typography controls take a separate value for Desktop, Tablet (up to 1024px) and Mobile (up to 767px). Leave a device empty and it follows the larger screen.
Yes. Blocks render the same in both, and their styles are printed in the page head rather than whenever the theme happens to run.
Not by default. Google Fonts is optional and stays off until you enable it in ShapeBlock → Settings. Video blocks only load YouTube or Vimeo when you add a video link, and share buttons are plain links that do nothing until a visitor clicks them.
Yes. The Theme Builder lets you build headers and footers with blocks and choose where each one appears with display conditions. Reusable templates can be placed anywhere with the shortcode.
Yes. ShapeBlock → Settings can export and import your block settings, colours, layout, templates and Theme Builder templates as a file, so a second site can start from the same setup.

Our core value is regularity, responsiveness, and innovation. This is why people love us With the qualified dedicated support.

Follow our Socials

Useful Link

Supports

News Letter

Subscribe to our newsletter

© All Rights Reserved – shapeblock by ShapeKode.