🆕 Bricks 2.4 已发布:查询循环性能提升 40%,迁移教程同步更新 →

首页 / 中文教程 / 教程

Bricks 制作弹出框 Popup 模板

教程:用 Bricks 的 Popup 模板做订阅框、公告浮层,并配置自动/按钮触发与关闭方式。

Ray ChanRay Chan·2026-08-20·约 1 分钟
目录
  1. 1.什么是 Popup 模板
  2. 2.制作步骤
  3. 3.触发与关闭
  4. 4.注意事项
  5. 5.小结

弹窗常用于 Newsletter 订阅、活动提醒、Cookie 提示。Bricks 可以把任意模板设为 Popup 并在条件触发时弹出。本文讲制作与触发。

什么是 Popup 模板

Popup 是一种特殊模板:它不占页面正常流,而是以浮层形式覆盖在内容上。常见用途:订阅框、限时优惠、公告。

制作步骤

  1. 后台 Bricks → Templates → 新建,类型选 Popup
  2. 进编辑器设计弹窗内容(标题、文案、表单或按钮)。
  3. 在弹窗设置里设尺寸、出现动画、遮罩、关闭方式。
  4. 设触发条件(如「进入页面后延时」「滚动到某位置」「点击某按钮」)。

触发与关闭

  • 可设自动触发(延时/滚动),也可由某个按钮通过交互动作打开。
  • 关闭方式一般支持点遮罩、点 X、ESC,记得勾上避免用户被困。

注意事项

弹窗别太频繁太早,会影响体验与跳出。移动端要控制尺寸、确保可关闭。配合条件可只对特定页面/用户显示。

小结

Bricks Popup 模板把「浮层交互」变成可复用组件:建 Popup 模板 → 设计内容 → 设触发与关闭 → 条件控制范围。克制使用,转化才不被反感。


内容说明(整理稿):本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程(源多为截图驱动教程,正文极薄),内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理,非原文逐字翻译,也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准,实操前建议对照官方文档核对。

Ray Chan

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

延伸阅读