Elementor 弹窗（Popup）制作（完整图文步骤）

一、弹窗能做什么

Popup Builder 是 Pro 里最出效果的营销部件之一。典型用途 🎯：

• 📩 询盘弹窗：点「Get a Quote」按钮弹出表单（本课主线）
• 📧 订阅弹窗：进入网站几秒后弹出邮箱订阅
• 🏷️ 促销弹窗：限时优惠、优惠券发放
• 🚪 退出意图弹窗：用户鼠标移向关闭按钮时挽留
• 📢 通知条：顶部/底部固定公告栏

弹窗形态也有好几种：模态（居中遮罩）、滑入（角落滑出）、全屏、顶部/底部横条。Elementor 自带 100+ 弹窗模板，可以直接套用改内容。

⚠️ 套餐注意：官方套餐体系里，Popup Builder 需要 Advanced 及以上档位，Essential 档不含。买套餐前在官网套餐页核对功能清单。
⚠️ 兼容性铁律：不要把 WPForms / Contact Form 7 / Ninja Forms 的短代码放进 Elementor 弹窗——表单能显示，但点提交会失效、甚至弹窗直接被关掉。弹窗里的表单请用 Elementor 原生 Form 小部件。

---

二、创建询盘弹窗

🏗️ 2.1 新建 Popup 模板

1. 后台进入 模板 → Popups → Add New Popup。
2. 起名「询盘弹窗」，点「Create Template」。
3. 进入编辑器后弹出弹窗模板库：可以选一个现成模板改，也可以关掉从零做。

⚙️ 2.2 弹窗外观设置

点编辑器的齿轮图标进入 Popup Settings：

Layout（布局）：
– 宽度：600px 左右（表单弹窗别做太宽）
– 位置：居中（Center）
– 进入动画：Fade In / Zoom In，时长 0.5s 内

Style（风格）：
– 遮罩（Overlay）：深色，透明度 0.6–0.8——太浅压不住背景
– 关闭按钮：位置右上角，颜色与品牌协调，大小别太小（手机端要点得到）
– 弹窗圆角：8–12px

💡 弹窗内容区就是一个普通画布，可以拖任何小部件。容器 Padding 建议 40–50px，别让内容贴边。

🧩 2.3 放入询盘表单

如果你已经做好了「询盘表单」Section 模板：

1. 拖一个 Template（模板） 小部件到弹窗画布。
2. 选中「询盘表单」模板，表单自动出现。

没做模板的话，直接拖 Form 小部件进弹窗现做也行（但建议把表单做成可复用的 Section 模板，全站只维护一份）。

弹窗里还可以补一点引导内容，但别堆太多：

• 表单上方一个短标题：Get a Free Quote
• 一行信任文案：Reply within 24 hours

❌ 别放长篇介绍、轮播图——干扰填写

---

三、方式一：按钮点击触发（推荐）

「点按钮弹出」是最克制、体验最好的弹窗用法，也是询盘场景的标准做法 🔘。

🚀 3.1 先发布弹窗（跳过自动弹出设置）

1. 点「发布」，弹出发布设置窗口。
2. Conditions、Triggers、Advanced Rules 三步全部跳过——直接点「Save & Close」。

3. 弹窗已存在，但不会自己弹出来，等着被按钮调用。

💡 这三步跳过不影响按钮触发。按钮触发走的是「动态链接」通道，不需要任何自动弹出条件。

🔗 3.2 把按钮链接到弹窗

1. 用 Elementor 打开目标页面（比如首页或产品页）。
2. 选中要触发的按钮小部件。
3. 点 Link（链接） 输入框右侧的 动态标签图标（圆柱体图标）。
4. 在下拉列表里选 Popup。
5. 再次点击链接框里的 Popup 字样，打开设置：
6. Action：Open Popup
7. Popup：搜索并选中「询盘弹窗」

6. 更新页面。

✅ 前台点这个按钮，弹窗应声而出。产品详情页模板里的询盘按钮也是同样做法——在 Single Product 模板里给按钮设 Popup 动态链接，全站产品页生效。

---

四、方式二：自动弹出（慎用）

想让弹窗主动出现（订阅、促销场景），就要搞懂发布时的三件套 ⚙️。

📍 4.1 Conditions（显示在哪些页面）

决定弹窗出现在哪里：

• Entire Site：全站
• 仅首页 / 仅某分类文章 / 仅产品页……

例：促销弹窗设「Entire Site」；某产品线专属弹窗设对应产品分类。

⚡ 4.2 Triggers（什么动作触发弹出）

决定弹窗什么时候弹，6 种触发器（可叠加）：

• Page Load：页面加载后 N 秒弹出（常用 3–5 秒）
• On Scroll：滚动到页面 N% 时弹出（常用 50%）
• On Scroll To Element：滚动到指定元素时（用于内容营销页）
• On Click：点击 N 次后（少用）
• After Inactivity：用户静止 N 秒后（少用）
• Exit Intent：鼠标移向浏览器关闭区时（挽留场景首选）

🎛️ 4.3 Advanced Rules（高级规则）

和触发时机无关的限制条件，常用的有：

• Show after X page views：浏览 N 个页面后才弹（别对刚进门的人弹）
• Show after X sessions：第 N 次访问才弹
• Hide for logged in users：登录用户不弹（团队自己测试时必勾）
• Show on devices：限定设备，比如只在桌面端弹（手机弹窗体验差且 Google 不喜欢移动端侵入式弹窗）
• Show up to X times：最多弹 N 次——防骚扰的核心设置，务必设

⚠️ 自动弹出的三条军规：
1. 进入页面别立刻弹，至少等 3 秒或滚动 50%。
2. 一定设次数上限（如最多 3 次），已提交过表单的人更不该再看到。
3. 手机端慎用全屏弹窗，影响 SEO（Google 对移动侵入式插页有惩罚机制）。

💡 4.4 一个合理的订阅弹窗配置示例

• Conditions：Entire Site
• Triggers：Page Load 5 秒 + Exit Intent（满足任一即弹）
• Advanced Rules：浏览 ≥2 个页面后才弹；最多弹 3 次；手机端不弹

---

五、多弹窗管理与测试

📋 5.1 管理入口

后台 模板 → Popups 列出所有弹窗，可看到每个的条件摘要，随时编辑、停用（设为草稿）、导出。

🧪 5.2 测试要点

1. 用无痕窗口测——次数限制规则对你自己也会生效，正常窗口测几次后就「失灵」了，其实是规则在起作用。
2. 逐项验证：显示页面对不对、触发时机对不对、次数上限对不对。
3. 手机端单独测一遍：关闭按钮点不点得到、表单在小屏上是否完整显示。
4. 提交表单全流程走一遍：弹窗内提交 → 收邮件 → Submissions 有记录。

🔍 5.3 多个弹窗共存

多个自动弹窗条件重叠时可能同时触发，用户体验灾难。原则：同一页面同一时刻只让一个自动弹窗生效，用条件互相排除（弹窗 A 设全站，弹窗 B 排除 A 的页面，反之亦然）。

---

六、常见问题排查

⛔ 6.1 按钮点了弹窗不出现

• 检查按钮链接是动态标签 Popup，不是填了 # 或 URL。
• 弹窗模板被改成草稿了：回 Popups 列表确认是「发布」状态。
• 缓存/JS 优化插件延迟了 Elementor 前端脚本：把 Elementor 的 JS 加入排除列表。

⛔ 6.2 自动弹窗不弹

• 三件套任一不满足都不会弹：逐条核对 Conditions、Triggers、Advanced Rules。
• 次数上限：你已经看过 N 次了——换无痕窗口测。
• 「登录用户隐藏」勾着，而你正登录着。

⛔ 6.3 弹窗里的表单提交失败

• 先检查是不是嵌了第三方表单短代码——换成 Elementor 原生 Form。
• 原生 Form 也失败：通常是 JS 冲突，开启 Elementor 安全模式（Elementor → 工具）测试，定位冲突插件。

⛔ 6.4 弹窗背景遮罩盖不住页面某部分

某些元素（吸顶页眉、fixed 定位部件）z-index 比遮罩高。在 Popup Settings 里调高弹窗的 z-index，或降低冲突元素的 z-index。

⛔ 6.5 手机上弹窗关不掉

• 关闭按钮太小或被内容挡住：Popup Settings → 关闭按钮调大、换位置。
• 弹窗高度超过手机屏幕：给弹窗内容区设最大高度并允许内部滚动。