[WordPress] 外掛分享: OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System

首頁外掛目錄 › OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System
WordPress 外掛 OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System 的封面圖片
800+
安裝啟用
★★★★★
5/5 分(1 則評價)
8 天前
最後更新
100%
問題解決
WordPress 6.5+ PHP 7.1+ v2.0.4 上架:2022-08-02

內容簡介

OffCanvas / Drawer 是一款靈活且輕量的 Gutenberg 區塊,讓使用者能夠創建滑入式抽屜、側邊菜單和彈出面板,適用於各種場景,如行動裝置菜單和 WooCommerce 購物車抽屜,無需編寫任何程式碼。

【主要功能】
• 支援左、右、上、下四種抽屜位置
• 內建觸發按鈕與短碼生成器
• 完整的樣式控制與自訂選項
• 支援多種彈出動畫效果
• 先進的觸發器與使用者行為設定

外掛標籤

開發者團隊

⬇ 下載最新版 (v2.0.4) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

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

Install and activate the OffCanvas Block plugin.
Open the Gutenberg editor in your WordPress dashboard.
Add the OffCanvas Block from the Widgets category.
Customize the trigger button, popup panel, background, typography, and interactions from the settings panel.
Add your desired content inside the block using InnerBlocks.
Save and publish your page.

Need help installing? Check the Installation tab for step-by-step guidance.

延伸相關外掛

文章
Filter
Mastodon