彻底掌握Avada Off Canvas面板！打造弹窗、侧边栏菜单和滑动条一步到位

Avada 主题的 Off Canvas Builder 工具，可以帮助你轻松实现弹窗、 滑动侧边栏 、 模态框 、 飞出菜单 等效果，而且 无需第三方插件、零代码操作，完全通过可视化界面完成。这篇教程将手把手教你如何创建一个 邮件订阅滑动条（Sliding Bar），并设置在访客停留4秒后自动出现，非常适合收集潜在客户邮箱、做活动促销、展示重要消息等。

Avada Off Canvas面板

Avada Off Canvas Builder 是 Avada 主题自带的高级功能模块，允许你轻松创建各种“页面之外”的内容区域，如弹出窗口（Popup）、侧边滑动栏（Sliding Bar）、飞出菜单（Flyout Menu）、模态框（Modal）等，不用安装任何额外插件，并与用户行为高度结合，实现精准营销、用户互动、功能增强等目的。

Avada 的 Off Canvas Builder 支持以下几种常见形式：

类型	简介
Popup 弹窗	居中显示的模态窗口，常用于活动提示、公告通知、订阅表单等。
Sliding Bar 滑动条	从页面四周滑入的内容区域，常用于展示优惠、CTA 按钮、聊天窗口等。
Push Menu 推送菜单	类似移动端侧边菜单，推开页面内容并滑出导航。
Flyout Menu 飞出菜单	像菜单一样快速滑出，适用于登录按钮、快速导航等小工具型面板。
通知栏/边角提示	通常结合动画展示，用于通知、提示用户操作。

操作步骤

一、进入 Off Canvas Builder

登录 WordPress 后台。
进入左侧菜单栏 Avada > Off Canvas。
点击页面右上角的 “Add New Off Canvas”（添加新的 Off Canvas）。
命名这个项目，例如：Subscription Sidebar。
点击“Create New Off Canvas”（创建新 Off Canvas）。

二、选择模板或从零开始

从零开始：添加容器并手动布局内容（适合高级用户）。
使用 Avada Studio 模板（推荐初学者）：
- 点击 “Avada Studio” 按钮。
- 在弹出的模板库中，筛选“Subscription”分类。
- 选择一个你喜欢的滑动条模板（如：Subscription Sliding Bar）。
- 点击“Import”，并勾选“使用本地颜色和字体设置”，然后导入模板。

三、自定义 Off Canvas 内容

模板导入后，你会看到预设的结构，一般包括：

图片
标题和说明文字
表单（通常是 Avada Form）

你可以根据品牌风格进行以下修改：

替换图片（点击图片 > 更换媒体）。
修改文字内容（直接点击文字编辑）。
调整按钮文案，如“Subscribe Now”改成“立即订阅”。
若需要编辑表单内容，请单独到 Avada > Forms 页面设置。

四、配置 Off Canvas 外观与行为

在编辑器右侧，你会看到多个选项卡，我们依次说明：

模块名称	作用说明
General 设置	控制面板类型（Popup、Sliding Bar 等）、位置、开闭状态等
Design 样式	背景、边框、宽度、内外边距、阴影等视觉样式
Overlay 背景遮罩	设置是否在开启时遮罩页面内容，并自定义遮罩颜色与透明度
Close 关闭控制	控制关闭按钮、点击遮罩关闭、ESC键关闭、自动关闭时间等
Animation 动画	设置进入和退出动画类型（滑动、淡入等）
Conditions 使用条件	控制在哪些页面显示
Triggers 触发方式	控制 Off Canvas 如何被触发
Rules 显示规则	控制显示频率、是否登录、访问来源、设备类型等
Custom CSS / JS	可加入自定义样式与脚本（高级用户使用）

1. General（常规）

Type：选择“Sliding Bar”（滑动条）。
Initial State：设置为“Closed”（初始关闭）。
Position：设置为“Right”（右侧）。
Transition：选择“Push”（推动页面内容）。

2. Design（设计）

设置背景颜色或图片。
添加边框、阴影，让视觉更立体。
设置宽度、间距和对齐方式。

3. Overlay（遮罩）

启用遮罩背景：勾选后，弹窗出现时页面变暗，更吸引注意力。

4. Close（关闭行为）

可设置点击遮罩区域关闭。
点击 ESC 关闭。
设置是否显示关闭按钮，以及按钮位置。

5. Animation（动画）

可设置进入和退出动画，如滑入、淡入等。

五、设置触发条件

这一步决定 Off Canvas 什么时候、怎么出现。

1. Conditions（显示在哪些页面）

默认是“Entire Site”（全站）。
可设置仅在首页、文章页或特定分类页显示。

2. Triggers（触发方式）

你可以选择多个触发方式，这里我们示范两种：

Exit Intent：检测用户准备离开页面（常用于弹窗提示）。
Time on Page：设置时间延迟出现，例如：
- 启用“Time on Page”
- 设置为 4秒

3. Rules（显示频率与条件）

设置是否只显示一次，或每隔几天显示一次。
根据登录状态或设备（手机/电脑）显示。
例如：只对未登录用户在手机端展示。

六、保存并测试效果

点击右上角的“Save”（保存）按钮。
返回网站首页并刷新页面。
等待 4 秒，滑动条从右侧推入页面，显示你设置好的内容。

进阶提示

你可以创建多个 Off Canvas，例如一个用于公告弹窗、一个用于导航菜单。
使用“Import/Export”功能，可以快速将 Off Canvas 配置复制到其他网站。
结合 Avada 表单 + 邮件服务（如 Mailchimp），可以实现自动化邮件营销。

总结

Avada Off Canvas Builder 让你可以轻松打造美观、高效的弹窗与滑动面板，用来吸引用户注意力、提升转化效果。通过直观的界面、自带模板库和丰富的行为配置，即使没有编程经验，也能完成复杂交互。想了解更多关于Avada主题的相关操作，请看这篇文章《Avada主题保姆级教程》，里面包含Avada主题模板导入、页面设置、页面排版、Woocommerce集成设置等全部Avada主题操作知识。

了解宝藏号的更多信息

订阅后即可通过电子邮件收到最新文章。

文章版权归作者所有，未经允许请勿转载。

彻底掌握Avada Off Canvas面板！打造弹窗、侧边栏菜单和滑动条一步到位

Avada Off Canvas面板