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

Description

OffCanvas / Drawer is a flexible and lightweight WordPress Gutenberg block that lets you create slide-in drawers, off-canvas menus, and popup panels that open from the left, right, top, or bottom of the screen.

Perfect for mobile menus, WooCommerce cart drawers, newsletter popups, announcements, and custom sidebar content — all without writing a single line of code.

The block supports InnerBlocks, shortcode generation, complete styling controls, and advanced trigger options. It works with any WordPress theme, is fully responsive, and optimized for performance.

Use OffCanvas for:

• Mobile off-canvas menus
• WooCommerce cart & checkout drawers
• Promotional and announcement popups
• Contact forms & lead-generation panels
• Help, support, and documentation sidebars
• Newsletter signup panels
• App-style bottom sheets
• Slide-in alerts and notifications

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

Free Features:

OffCanvas Drawer Settings

• Drawer positions: Left, Right, Top, Bottom
• Built-in trigger button
• Shortcode generator with clipboard copy
• Prevent body scroll when drawer is open
• Backdrop overlay support

Trigger Button Customization:

• Button alignment (Block-level control)
• Typography controls
• Text & icon support
• Color settings
• Margin & spacing
• Shadow controls
• Ripple effect animation on click

Close Button Customization:

• Colors controls
• Size settings
• Shadow support
• Custom close icon support
• Close button position control

Popup & Panel Design:

• Background: Solid, Gradient, Image
• Header styling (title typography & colors)
• Close icon styling
• Popup header background control
• Toggle popup header visibility
• Popup header title position control

Content Support:

• Full InnerBlocks support (add any Gutenberg block inside)
• Use anywhere via shortcode

Advanced Design Controls

• Backdrop color & opacity control
• Popup animation & transition types:
  • Default
  • Slide
  • Fade
  • Push
  • Reveal
  • Zoom ✅ (New)
  • Flip ✅ (New)
  • Bounce ✅ (New)
• Configurable animation duration (ms) ✅ (New)
• Animation easing presets including: ✅ (New)
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear
• Backdrop blur control support ✅ (New)
• Direction control: Left, Right, Top, Bottom
• Custom width & height
• Button border, radius, padding & hover styles
• Icon size, color, hover color & position

Pro Features

Smart Triggers & User Behavior:

• Custom trigger selector (open with any external element)
• Show or hide built-in trigger button
• Toggle mode (same trigger 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
• Inactivity trigger
• Exit intent detection (desktop)

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.