Title: OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System Author: bPlugins Published: 3 Tháng 8, 2022 Last modified: 11 Tháng 5, 2026 --- Tìm kiếm plugin ![](https://ps.w.org/offcanvas-block/assets/banner-772x250.png?rev=3403746) ![](https://ps.w.org/offcanvas-block/assets/icon-128x128.png?rev=2767686) # OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System Bởi [bPlugins](https://profiles.wordpress.org/bplugins/) [Tải về](https://downloads.wordpress.org/plugin/offcanvas-block.2.0.4.zip) [Xem trước trực tiếp](https://vi.wordpress.org/plugins/offcanvas-block/?preview=1) * [Chi tiết](https://vi.wordpress.org/plugins/offcanvas-block/#description) * [Đánh giá](https://vi.wordpress.org/plugins/offcanvas-block/#reviews) * [Cài đặt](https://vi.wordpress.org/plugins/offcanvas-block/#installation) * [Nhà phát triển](https://vi.wordpress.org/plugins/offcanvas-block/#developers) [Hỗ trợ](https://wordpress.org/support/plugin/offcanvas-block/) ## Mô tả 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. [**OffCanvas**](https://bplugins.com/products/offcanvas-block/) | [**Pricing**](https://bplugins.com/products/offcanvas-block/pricing) | [**Support**](https://bplugins.com/support/) | [**Demo**](https://bplugins.com/products/offcanvas-block/#demos) ### 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 in your WordPress dashboard. 3. Add the **OffCanvas Block** from the Widgets category. 4. Customize the trigger button, popup panel, background, typography, and interactions from the settings panel. 5. Add your desired content inside the block using InnerBlocks. 6. Save and publish your page. **_Need help installing? Check the Installation tab for step-by-step guidance._** ## Ảnh màn hình * [[ * Default OffCanvas drawer * [[ * Position options (Left, Right, Top, Bottom) * [[ * Custom Trigger Selector * [[ * Scroll Into View Trigger * [[ * Scroll Depth Trigger * [[ * Exit Intent Trigger * [[ * Delay Trigger * [[ * Inactivity Trigger ## Khối Plugin này cung cấp 1 khối. * OffCanvas Display content box from the left, right, or bottom edge of the viewport ## Cài đặt #### 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 ## Hỏi đáp ### Is OffCanvas Block free? Yes, the core version is 100% free. ### Does it work with any theme? Yes, it works with all standard WordPress themes and builders. ### Can I customize the design? Absolutely — background, button, typography, overlay, animations, and more. ### Can I use it multiple times? Yes, you can create unlimited OffCanvas drawers. ### Where do I get support? You can post your questions on the plugin’s support forum. ## Đánh giá ![](https://secure.gravatar.com/avatar/0e84c8b4db84189bc72c59e206f100b748ec4cb325c494546f3188ff4a901008? s=60&d=retro&r=g) ### 󠀁[Great as expected!](https://wordpress.org/support/topic/simplify-your-site/)󠁿 [devmonowar](https://profiles.wordpress.org/kstmonowar/) 4 Tháng 6, 2024 This plugin works great, exactly as expected! It’s easy to use, optimized, and lightweight. [ Đọc tất cả 1 đánh giá ](https://wordpress.org/support/plugin/offcanvas-block/reviews/) ## Người đóng góp & Lập trình viên “OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System” là mã nguồn mở. Những người sau đã đóng góp vào plugin này. Những người đóng góp * [ bPlugins ](https://profiles.wordpress.org/bplugins/) * [ Abu Hayat ](https://profiles.wordpress.org/abuhayat/) * [ Charles Cormier ](https://profiles.wordpress.org/charlescormier/) * [ asadsuzan ](https://profiles.wordpress.org/asadsuzan/) * [ Freemius ](https://profiles.wordpress.org/freemius/) [Dịch “OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System” sang ngôn ngữ của bạn.](https://translate.wordpress.org/projects/wp-plugins/offcanvas-block) ### Muốn tham gia phát triển? [Duyệt code](https://plugins.trac.wordpress.org/browser/offcanvas-block/), check out [SVN repository](https://plugins.svn.wordpress.org/offcanvas-block/), hoặc theo dõi [nhật ký phát triển](https://plugins.trac.wordpress.org/log/offcanvas-block/) qua [RSS](https://plugins.trac.wordpress.org/log/offcanvas-block/?limit=100&mode=stop_on_copy&format=rss). ## Nhật ký thay đổi #### 2.0.4 (07 Apr, 2026) * **Fix**: Resolved license activation check issue by improving class existence validation. * **Fix**: Fixed broken link in the upgrade modal. * **Update**: Improved Inspector Controls for a more intuitive and user-friendly experience. #### 2.0.3 (22 Feb, 2026) * **Update**: Redesigned and modernized admin dashboard interface. #### 2.0.2 (17 Feb, 2026) * **New**: Added contextual info notes to explain advanced settings and features. * **New**: Introduced new popup animation types: Zoom, Flip, and Bounce. * **New**: Added Backdrop blur control support * **New**: Added Configurable animation duration(ms) * **New**: Added Animation easing presets * **Update**: Improved validation for custom trigger and smart trigger selectors( class/ID input). * **Update**: Enhanced user guidance for Custom Trigger and Smart Auto Trigger options. * **Fix**: Prevented invalid selector errors from breaking the editor. * **Refactor**: Removed unnecessary and duplicate logic to improve performance and maintainability. #### 2.0.1 (02 Jan, 2026) * **New:** Added ripple effect support to the trigger button. * **New:** Added support for custom close button icons and position controls. * **New:** Extended popup header options with background control, visibility toggle, and title position settings. * **Update:** Renamed Trigger Button PanelBody Title for better clarity. * **Update:** Moved trigger button alignment control to block settings. #### 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. ## Meta * Phiên bản **2.0.4** * Cập nhật lần cuối **2 tuần trước** * Số lượt cài đặt **800+** * Phiên bản WordPress ** 6.5 hoặc cao hơn ** * Đã kiểm tra lên đến **7.0** * Phiên bản PHP ** 7.1 hoặc cao hơn ** * Ngôn ngữ * [English (US)](https://wordpress.org/plugins/offcanvas-block/) * Thẻ * [block](https://vi.wordpress.org/plugins/tags/block/)[offcanvas](https://vi.wordpress.org/plugins/tags/offcanvas/) [popup](https://vi.wordpress.org/plugins/tags/popup/)[side menu](https://vi.wordpress.org/plugins/tags/side-menu/) * [Nâng cao](https://vi.wordpress.org/plugins/offcanvas-block/advanced/) ## Đánh giá 5 trên 5 sao. * [ 1 5-star review ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/offcanvas-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/offcanvas-block/reviews/#new-post) [Xem tất cả đánh giá](https://wordpress.org/support/plugin/offcanvas-block/reviews/) ## Những người đóng góp * [ bPlugins ](https://profiles.wordpress.org/bplugins/) * [ Abu Hayat ](https://profiles.wordpress.org/abuhayat/) * [ Charles Cormier ](https://profiles.wordpress.org/charlescormier/) * [ asadsuzan ](https://profiles.wordpress.org/asadsuzan/) * [ Freemius ](https://profiles.wordpress.org/freemius/) ## Hỗ trợ Có điều gì muốn nói? cần giúp đỡ? [Xem diễn đàn hỗ trợ](https://wordpress.org/support/plugin/offcanvas-block/) ## Ủng hộ Bạn có muốn hỗ trợ vào sự phát triển của plugin này? [ Ủng hộ plugin này ](https://www.buymeacoffee.com/abuhayat)