內容簡介
OffCanvas / Drawer 是一款靈活且輕量的 Gutenberg 區塊，讓使用者能夠創建滑入式抽屜、側邊菜單和彈出面板，適用於各種場景，如行動裝置菜單和 WooCommerce 購物車抽屜，無需編寫任何程式碼。
【主要功能】
• 支援左、右、上、下四種抽屜位置
• 內建觸發按鈕與短碼生成器
• 完整的樣式控制與自訂選項
• 支援多種彈出動畫效果
• 先進的觸發器與使用者行為設定
外掛標籤
開發者團隊
② 後台搜尋「OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System」→ 直接安裝（推薦）
原文外掛簡介
OffCanvas / Drawer is a flexible, highly customizable, and lightweight WordPress Gutenberg block that lets you design slide-in drawers, off-canvas navigation menus, and popup panels that slide in from any direction: left, right, top, or bottom.
Perfect for mobile navigation menus, WooCommerce shopping cart sidebars, newsletters, exit-intent popups, slide-out contact forms, site announcements, and help desks — all without writing a single line of code.
Built natively for the WordPress Block Editor, it supports InnerBlocks, meaning you can place any other Gutenberg blocks (paragraphs, images, forms, custom widgets) directly inside the OffCanvas drawer. It also features a custom shortcode generator allowing you to save layouts and embed them anywhere on your site using the [offcanvas-block id="POST_ID"] shortcode.
The plugin is fully responsive, SEO-friendly, performance-optimized, and built to integrate seamlessly with any WordPress theme.
Key Features
Native Gutenberg Block: Full visual integration inside the WordPress Block Editor.
InnerBlocks Supported: Drop any block inside the drawer, including forms, menus, widgets, and shortcodes.
Shortcode Generator: Save and reuse your OffCanvas templates anywhere via copy-to-clipboard shortcodes.
4-Direction Slide-Ins: Position drawers on the Left, Right, Top, or Bottom of the viewport.
Smart Auto Triggers: Trigger popups based on user behavior (time delay, scroll depth, exit-intent, inactivity, and selector in-view).
Responsive Layouts: Set device-specific positions, slide directions, and dimensions for desktop, tablet, and mobile devices.
Touch & Swipe Gestures: Smooth, native-feeling mobile interactions with swipe-to-open and swipe-to-close capabilities.
Custom Positioned FAB: Floating Action Button triggers with precise offset controls and drag-and-drop editor positionin
Free Features
Core Layout & Spacing
Four Direction Placements: Position the offcanvas panel at the Left, Right, Top, or Bottom edge of the screen.
Default Trigger Button: Use the built-in trigger button to toggle the panel open and closed.
Body Scroll Lock: Prevent background body scrolling when the OffCanvas panel is active.
Standard Backdrop Toggle: Enable a dark overlay backdrop behind the active panel.
Trigger Button Customization
Block Alignment: Left, Center, or Right alignments for block-level buttons.
Typography Controls: Adjust font size, font family, and font weight.
Colors & Typography: Full customization of button text color and background color.
Ripple Click Effect: Optional ripple animation effect on clicking the trigger.
Margin Controls: Fine-tune trigger button outer margins.
Close Button Customization
Flexible Color Picker: Pick color and background values for the close icon.
Size & Shadow: Adjust the scale (px) and shadow styling of the close button.
Predefined Placements: Place the close button in the Top-Right, Top-Left, Bottom-Right, or Bottom-Left corners.
Header & Typography
Editable Drawer Header: Customize the text of the header title.
Title Styling: Control title typography (font size, weight) and colors.
Header Spacing: Customize the header background color and visibility options.
Templates & Shortcodes
Shortcode Builder: A dedicated custom post type offcanvas-block lets you create drawers, save them, and copy the shortcode [offcanvas-block id="..."] directly from the admin dashboard list.
InnerBlocks Compatibility: Full freedom to place text, images, sliders, newsletters, and third-party plugin blocks inside the drawer.
Pro Features
Upgrade to OffCanvas Pro to unlock advanced targeting, styling, and behavior controls:
Floating Action Button (FAB) Trigger
Corner Anchor Placements: Place the trigger as a Floating Action Button in the Bottom-Right, Bottom-Left, Top-Right, or Top-Left corners.
Custom Absolute Positioning: Position the FAB anywhere on the screen. Features drag-and-drop editor control with a smart 8px Euclidean threshold to prevent accidental shifts on clicking.
Offsets & Layouts: Adjust X and Y offset values to ensure perfect alignments.
Visual Effects: Set button size, icon size, borders, border radius, pulse animations, custom shadows, and hover transitions.
Rotation Angle: Rotate the FAB to match vertical triggers or layout designs.
Smart Auto Triggers & Behavior
Exit Intent Detection: Trigger the OffCanvas panel automatically when the user’s cursor leaves the viewport on desktop.
After Time Delay: Open the drawer automatically after a configurable delay (in seconds/minutes).
Scroll Depth Trigger: Open the panel when a visitor scrolls down a specific percentage (e.g. 50%) of your page.
While Target Section in View: Detect when a specific HTML selector (Class or ID) scrolls into the viewport to trigger the drawer.
On Inactivity: Display the popup after a period of user inactivity.
Trigger Frequency Controls: Limit triggers to show Always, Once per session (sessionStorage), or Once per day (localStorage) to avoid visitor frustration.
External Custom Trigger
Custom Selectors: Bind the OffCanvas drawer to any custom link, menu item, or button on your page by inputting its Class or ID (e.g. .my-custom-button or #open-drawer-link).
Hide Default Trigger: Keep the built-in trigger button hidden when using custom CSS selectors.
Advanced Animations & Transitions
Premium Transition Types: Slide, Fade, Push, Reveal, Zoom, Flip, and Bounce effects.
Configurable Duration: Set exact transition entry and exit duration times in milliseconds (100ms – 5000ms).
Easing Presets: Smooth easing animations (ease, ease-in, ease-out, ease-in-out, linear).
Responsive Mobile Optimizations
Mobile-Specific Placement: Set a different position for mobile screens (e.g., Slide-in Right on desktop, Bottom Sheet on mobile).
Mobile Slide Direction: Override the slide-in animation direction specifically for mobile layout visitors.
Touch & Swipe Gestures: Smooth swipe-to-open and swipe-to-close touch controls for mobile screens.
Premium Design Customization
Responsive Dimensions: Customize the panel width and height independently for Desktop, Tablet, and Mobile screens.
Advanced Backdrop Blur: Customize backdrop overlay color, transparency opacity, and apply modern CSS backdrop-filter blur effects (0px – 30px).
Custom Close Button Icon: Upload or input any custom SVG string to replace the default close button icon.
Borders & Hover Spacing: Custom borders, border radius, and hover state box-shadows on trigger buttons.
