彻底掌握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 支持以下几种常见形式：

操作步骤

一、进入 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 外观与行为

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

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（显示频率与条件）

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

六、保存并测试效果

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

进阶提示

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

总结

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