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

Description

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

Button Customization
– Alignment
– Typography
– Text & Icon
– Colors
– Margin
– 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.

—