如何免费在 Elementor 中添加弹出窗口(无需 Elementor Pro)

Elementor中添加弹出窗口,而无需支付Elementor Pro的费用,免费Elementor不会随弹出窗口构建器一起发货,但Pro并不是获得一个免费 Elementor 的主插件 插件包含完整的内容 弹出窗口生成器、100多个现成的模板,以及五种触发类型,它全部都位于免费插件中,没有试用计时器,也没有水印。

您需要两件事:free Elementor 和 WordPress 目录中的免费 Master Addons 插件。设置第一个弹出窗口大约需要十分钟。本指南涵盖构建一个、在它启动时进行选择、选择显示它的页面以及最常出现的问题:Elementor free 有弹出窗口构建器吗? elementor/popup/show event 实际上是这样做的,以及如何在不编写 JavaScript 的情况下从按钮单击中打开弹出窗口。

您需要 Elementor Pro 来创建弹出窗口吗?

简短答案:没有。 Elementor Pro 的弹出窗口生成器是一项付费功能,但这并不是在 Elementor 内添加弹出窗口的唯一方法。

以下是每个选项实际为您提供的内容:

因此,如果弹出窗口是您查看 Elementor Pro 的唯一原因,您可以保留免费的 Elementor、安装主插件并使用相同的拖放编辑器构建它们。如果您已经拥有 Pro,则两者并行运行而不冲突。

“free”这个词值得具体说明, Popup Builder 不是一个试用版,也不是付费模块的精简版,Master Addons 确实出售 Pro 版本,但 Pro 涵盖了其他内容:额外的小部件和完整的 Widget Builder 弹出窗口位于其外。

什么是主插件弹出生成器?

Master Addons 是一个一体化的 Elementor 插件,由 30,000 多个活跃站点使用。它附带 80 多个小部件,a 主题构建器、模板库、a 小部件生成器并且是免费的 弹出窗口生成器、弹出生成器不是单独购买,安装插件,它就在那里。

Elementor 编辑器内部可视化设计弹出窗口, 然后控制它们何时出现(触发器)和它们出现在何处(显示条件)。没有代码, 没有额外的插件, 没有Pro许可证。

为什么人们选择免费的主插件弹出生成器

• 插件中捆绑了免费的弹出生成器。无需升级。
• Elementor 中已经知道的相同的拖放设计经验。
• 100多个预构建的弹出模板,准备一键导入。
• 五种触发类型:单击、页面加载、退出意图、滚动、不活动后。
• 任何帖子、页面、类别或自定义帖子类型的显示条件。
• 适用于免费 Elementor、免费 WordPress 托管和最新 Elementor 版本。

您可以构建哪些类型的弹出窗口?

• 潜在客户生成和电子邮件选择加入弹出窗口
• WooCommerce 促销、销售横幅和购物车放弃优惠
• 视频灯箱弹出窗口(YouTube、Vimeo、自托管)
• 图像库灯箱
• 公告栏和顶部横幅
• 登录和注册表单弹出窗口
• Cookie 同意和 GDPR 通知
• 反馈、NPS 和调查弹出窗口
• 有关条款、定价详细信息或产品信息的模态弹出窗口

主插件中的 5 个弹出窗口触发器

1。在滚动触发器上

弹出窗口在访客后开火 滚动页面的一定百分比。当您希望在读者实际阅读内容后出现内容升级或电子邮件选择加入时,请注意,当他们尚未决定是否留下来时,请勿在页面加载中。

2、页面加载触发器

的弹出窗口 在您设置的延迟后出现,以秒为单位2秒以内都容易惹恼人 慢连接 适合欢迎留言 限时优惠 随便大家看。

3、退出意图触发

Popup检测光标何时向浏览器选项卡或关闭按钮移动并发出最后一条消息,这就是人们正在搜索的“元素或退出意图弹出“而且是在免费的 Master Addons 插件中。在您围绕它构建活动之前,请注意一个:退出意图是桌面行为。手机没有光标可以跟踪,因此请向移动访问者提供滚动或不活动触发器。

4。在点击触发器

Popup只有当访问者点击特定按钮、图像或链接时才会打开,这是构建一个最简单的方法 单击打开模式 不用触摸代码,它是免费的替换 elementor/popup/show 下一节将介绍 JavaScript 事件。

5。不活动触发后

的弹出窗口 重新接合在设定的持续时间内停止滚动或移动光标的访问者。有利于恢复注意力而不在第一次查看时开火,这是失去读者的最快方法。

如何使用元素器/弹出窗口/显示事件(和免费替代方案)

Elementor Pro 公开了一个名为 JavaScript 的事件 elementor/popup/show。开发人员使用它触发代码弹出窗口:在自定义表单提交、AJAX 响应或驻留在 Elementor 编辑器外部的按钮后启动弹出窗口。

Elementor Pro 中的基本模式如下所示:

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
    // your code runs when popup with this ID is shown
    console.log( 'Popup opened:', id );
} );

// To open a popup programmatically in Elementor Pro:
elementorProFrontend.modules.popup.showPopup( { id: 1234 } );

如果您使用免费 Elementor,则无法访问 elementorProFrontend.modules.popup.showPopup.大多数用例你也不需要它。主插件 在点击 trigger 本机处理常见的:

• 单击页面上任意位置的按钮,弹出窗口打开。将触发器选择器设置为 CSS 类或 ID,任何匹配元素都会打开弹出窗口。
• 单击图像、图标或文本链接,弹出窗口打开。相同的选择器逻辑适用于任何元素。
• Form提交后打开一个弹出窗口,将表单的重定向或感谢操作与带有弹出选择器的隐藏按钮结合起来。

当决策发生在运行时,选择器方法就会耗尽,例如仅在 AJAX 调用返回具有特定值时才打开弹出窗口。为此,让您的脚本单击携带触发类的隐藏元素,然后让选择器执行其余操作。

如果您想从自己的代码(分析、自定义逻辑)监听弹出显示事件,请将弹出打开时触发的全局事件绑定到该事件。确切的事件名称位于 主插件文档 为你正在运行的版本。

如何在按钮单击上触发元素弹出窗口(免费)

1个最常见的请求, 所以这里是确切的设置:

1. 在主插件、弹出生成器中创建弹出窗口并进行设计。
2. 在弹出的设置中,将触发器切换到 在点击.
3. 例如,在触发字段中输入 CSS 选择器 .open-signup-popup.
4. 用按钮转到页面或模板。编辑按钮小部件 高级 CSS 课程 字段和添加 open-signup-popup (没有点, 只是类名)。
5. 保存两者。现在,该类的每个按钮都会打开弹出窗口,位于网站的任何位置。

相同的选择器适用于行、列、标题、图标或您可以给类的任何元素。这就是您获得与之相同的行为的方式 elementor/popup/show 不写一行 JavaScript。需要注意的一件事:如果您使用 ID 选择器,请喜欢 #open-popup、确保页面上没有其他元素共享 ID,否则从错误元素中单击 fire。

免费元素弹出模板:100 多种设计可供导入

该插件附带一个弹出模板库,涵盖时事通讯选择加入、销售横幅、WooCommerce 促销、退出意向优惠、视频灯箱、cookie 通知和登录表单。每个模板一键导入,并且可在 Elementor 内部完全编辑。如果您宁愿从接近最终目标的设计开始,这比从头开始构建更快。

完整的库位于编辑器内部,是更广泛的一部分 主插件模板库 旁边是页面和部分模板。

逐步:如何使用主插件在 Elementor 中添加弹出窗口

1步:安装和激活主插件

1. 打开 WordPress 仪表板、插件、添加新内容。
2. 搜索 Elementor” 的 “Master 插件。
3. 单击 立即安装那么 激活.
4. 一个新的 主插件 项目出现在 WordPress 侧边栏中。

如果侧边栏项目没有立即出现,请硬刷新管理员(Ctrl+Shift+R/Cmd+Shift+R)。一些缓存插件会挂在旧管理员菜单上一分钟。

2步:打开弹出窗口生成器

1. 去 主插件、弹出窗口生成器.
2. 单击 添加新弹出窗口.
3. 给弹出窗口一个描述性名称(例如, 时事通讯、博客文章).
4. 单击 使用元素器编辑.

3步:选择模板或从头开始

1. 击元素编辑器编辑器中的主插件模板库图标。
2. 浏览弹出类别并预览设计。
3. 单击 插入 在任何模板上将其导入画布。
4. 或者跳过库并将小部件拖到空白画布上。

4步:设计弹出内容

1. 拖动元素小部件:标题、文本编辑器、按钮、图像、表单。
2. 如需电子邮件捕获,请使用表单小部件并将其连接到您的电子邮件服务。
3. 使用核心 Elementor 或主插件小部件添加倒计时器、图标或视频。
4. "样式"和"高级"选项卡中调整字体、颜色、填充和间距。
5. 在移动设备和平板电脑视图上预览以确认布局仍然有效。

5步:配置弹出触发器

1. 单击编辑器左下角的齿轮图标可打开 设置.
2. 打开 触发 选项卡。
3. 选择五个触发器之一:单击、页面加载、退出意图、滚动、不活动后。
4. 填写特定于触发器的设置:滚动百分比、延迟秒数、单击选择器或不活动持续时间。

6步:设置显示条件(弹出窗口显示的位置)

Display条件决定哪些页面实际显示弹出窗口,大多数弹出窗口问题从这里开始,一个没有显示规则的弹出窗口根本不会出现,所以这是编辑器中看起来很好但前端没有显示时首先要检查的内容。

1. 打开 显示条件 "弹出设置"中的选项卡。
2. 选择一个 包括 规则:整个网站、特定页面、特定帖子、类别、标签或自定义帖子类型。
3. 添加一个 排除 规则适用于您想要跳过的任何内容(例如,从全站弹出窗口中排除结账页面,否则会困扰已经转换的人)。
4. 发布前请保存条件。

稍后编辑显示条件,重新打开弹出窗口,单击齿轮图标,转到显示条件,更改规则,更新,设计和触发保持不变,只有目标更改。

7步:发布和测试

1. 单击 发表 或 更新 在编辑器的左下角。
2. 打开应在普通浏览器窗口中显示弹出的页面(而不是编辑器预览)。
3. 按配置方式触发弹出窗口:单击按钮、滚动、等待或向关闭选项卡移动。
4. 检查真实手机上的响应行为。编辑器预览接近但不准确。
5. 监控第一周的表格提交和转化率。

为什么弹出窗口没有显示

如果弹出窗口在编辑器中工作但从未出现在网站上,则它几乎总是这五个之一,大致顺序是原因的频率:

1. No 显示条件设置,没有包含规则的弹出窗口匹配no 页面,所以从不渲染任何地方,打开显示条件,添加一个。
2. Popup还是草稿,保存设计跟发布不一样,查看编辑器左下方的状态。
3. A缓存正在服务旧页面,清除缓存插件和CDN,然后在私有窗口中再次测试。
4. 单击选择器不匹配。对于 On Click,触发字段采用 .my-class 用点,而按钮的 CSS 类字段则采用 my-class 没有它。将这两个混在一起占了我们看到的大部分报告。
5. 您正在手机上测试退出意图,没有光标可以离开视口,所以没有什么可以启动。在桌面浏览器上测试那个。

Master Addons 与 Elementor Pro Popup Builder

Master Addons并不是唯一免费的方式来做到这一点,像Popup Maker这样的独立弹出插件也有免费层级,如果弹出窗口是你唯一需要的东西,那么它们值得一看,它们比任何Elementor插件更详细地报告转换交易,你在他们的界面而不是Elementor的界面中进行设计,并且你运行的是一个完成一项工作的插件,当你想要使用与站点其他部分相同的编辑器,小部件和样式构建弹出窗口时,Master Addons更有意义。

也权衡其他选项?在我们的综述中并排比较顶级工具 wordpress 的最佳弹出构建器插件.

这个设置最适合谁

• Pro 不想只为弹出窗口而购买的自由职业者和 Web 开发人员。
• WooCommerce 商店老板经营销售横幅和购物车回收优惠。
• 博主和内容创建者捕获电子邮件订阅者。
• 管理许多客户网站的机构预算紧张。
• 初创公司和小型企业在支付高级工具之前验证报价。

常见问题