OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System

OffCanvas is a flexible and intuitive WordPress Gutenberg block that lets you create slide-in drawers and popup-style panels that open from the left, right, top, or bottom of the screen. Perfect for building mobile menus, WooCommerce cart drawers, promotional popups, newsletter panels, announcements, and custom sidebar content — all without writing any code.

This plugin includes complete styling controls, smart trigger options, InnerBlocks support, shortcode generation, and smooth animations. It works with any WordPress theme and is fully responsive.

Perfect for:

– Mobile off-canvas menus
– Sliding promotional bars
– Cart and checkout drawers
– Contact forms and lead-gen panels
– Help & support sidebars
– Newsletter signup panels
– App-style bottom sheets
– Custom reusable popup content
– Slide-in announcements and alerts

Lightweight, SEO-friendly, and designed for both beginners and professionals.

—

Free Features

OffCanvas Drawer Settings
– Offcanvas Position: Left, Right, Top, Bottom
– Built-in Trigger Button
– Clipboard Copy for Shortcode
– Prevent body scroll when opened
– Backdrop overlay support

Trigger Button Customization
– Alignment
– Typography
– Text & Icon
– Colors
– Margin
– Shadows

Close Button Customization
– Colors
– Size
– Shadows

Popup Customization
– Background: Solid, Gradient, Image
– Header: Title typography, colors, close icon styling

Content Support
– Full InnerBlocks — add any Gutenberg block inside
– Works anywhere via shortcode

—

Pro Features

Smart Triggers & User Behavior
– Custom Trigger Selector (open using any external element)
– Show/Hide built-in trigger button
– Toggle Mode (same button opens & closes)
– Close on outside click
– Trigger frequency control
– Delay Trigger — open after X seconds
– Scroll Depth Trigger — open at X% scroll
– Scroll Into View Trigger — open when an element enters viewport
– Inactivity Trigger — open after no user activity
– Exit Intent for desktop

Advanced Design Controls
– Backdrop color & opacity
– Animation Types: Slide, Push, Reveal, Fade
– Slide Direction: Left, Right, Top, Bottom
– Custom width & height
– Button border, radius, padding, hover colors
– Icon size, color, hover color, and position

—

How to Use

1. Install and activate the OffCanvas Block plugin.
2. Open the Gutenberg editor.
3. Add the OffCanvas Block from the “Widgets” category.
4. Customize the trigger button, popup area, background, typography, and interactions.
5. Add any content using InnerBlocks.
6. Save and publish!

You can also use the generated shortcode to display the OffCanvas anywhere on your site.

—

From WordPress Admin:

1. Go to Plugins → Add New
2. Search for OffCanvas Block
3. Install and activate

Manual Upload:

1. Download the plugin ZIP
2. Upload to /wp-content/plugins/
3. Activate from Plugins menu

From Gutenberg Editor:

1. Open any page/post
2. Search “OffCanvas Block”
3. Insert and customize

—

1. 

   Default OffCanvas drawer

2. 

   Position options (Left, Right, Top, Bottom)

3. 

   Custom Trigger Selector

4. 

   Scroll Into View Trigger

5. 

   Scroll Depth Trigger

6. 

   Exit Intent Trigger

7. 

   Delay Trigger

8. 

   Inactivity Trigger

2.0.0 – 26 Nov 2025

• Major Upgrade: New interaction system, smart triggers, design controls, and improved UI/UX.

1.0.1 – 30 Sep 2024

• Fix: Close button icon visibility.

1.0.0

• Initial Release.