第一个弹出窗口是根据 Ethan Zukerman 为住宿 90世纪XNUMX年代初他在Tripod上的网页。他的用户抱怨他在网站上放置的广告数量，因此他决定将横幅放在一个单独的页面上，当用户访问该页面时打开该页面。
就像您现在在每个网站上看到的那样，这小段代码仍然不是真正的弹出窗口，但这就是一切的开始。 在现代网页上，弹出窗口用于不同目的，而不仅仅是广告。 联系表格，隐私政策警告和订阅建议也经常以弹出窗口的形式显示。
在弹出窗口时，有两点使用户感到烦恼：当您不希望它们弹出时跳上您； 并且其外观与网站样式完全不同。 当您使用质量似乎不高的插件时，会出现这两个问题。
新手开发人员用于的大多数插件的最大问题 创建弹出窗口 是缺乏对结果消息的控制。 但是，如果您使用 Elementor 可以避免所有这些问题 创建一个网站.
两个很棒的插件，专为 Elementor 创建 页面生成器，帮助您创建所需的任何类型、形状和样式的弹出窗口 - Elementor Popup Builder et JetPopup。 由于它们都是用与Elementor相同的材质制成的，因此唯一要问的问题是选择这些插件中的哪个。 为了帮助您做出此决定，我将对两者进行彻底的检查，您可以比较它们的优缺点。 所以走吧！
下载并安装
在选择使用哪个插件时，这不是最重要的标准，但是要尝试使用它，您需要先获得它。 这就是为什么我要从头开始并概述获得它的过程-价格，涉及的工作以及设置过程的简单性。
弹出式生成器
该插件是由Elementor团队创建的。 因此，我们可以称他为他真正的“孩子”。 这是Elementor的最新更新，于2019年XNUMX月发布，可以满足客户需求。 但是，它不适用于免费版本的Elementor用户。
Popup Builder包含在专业订阅计划中。 因此，要具有创建弹出窗口的功能，您必须首先具有Elementor Pro。 最简单的定价计划允许您在一个网站上使用Elementor的所有功能，每年收费49美元。 因此，从第一步（购买Elementor Pro）开始，这是获取Popup Builder的算法：
- 购买 Pro Elementor 页面生成器.
- 转到您的个人帐户并下载插件。
- 转到您的网站信息中心，插件>添加新内容，单击“上传插件”按钮，然后选择适当的.zip文件。
- 安装完成后，使用许可证密钥激活插件。
- 这是位于“模板”>“弹出窗口”选项卡中的“弹出窗口生成器”。
这还有很长的路要走，但是使用Popup Builder，您还可以从Elementor中获得大量不同元素的集合，例如小部件，模板和其他附加工具。
弹出式生成器
JetPopup
Jet插件的“家族”已经有不止10文章了，JetPopup就是其中之一。 它是专门为Elementor精心创建的，并增加了可用工具的数量。 这个插件是
与免费和付费版本完全兼容。 因此，您无需进行任何其他购买。 JetPopup售价15美元，一旦获得，您就可以仅在一个网站上使用它。 如果您需要一个以上的项目，则可以在开发人员的许可下购买该插件（价格为45美元），并将其用于五个网站。 获取插件的算法比较简单：
- 在TemplateMonster市场上购买插件。 它将下载到您的计算机。
- 转到您的网站信息中心，插件>添加新内容，单击“上传插件”按钮，然后选择适当的.zip文件。
- 安装完成后，激活插件。
- 瞧！ 当您打开Elementor定制菜单时（通过单击“使用Elementor编辑”按钮），您将在小部件的左侧菜单中找到JetPopup部分。
弹出式视窗
现在，当工具准备就绪时，我可以尝试使用两个插件创建一个弹出窗口，并查看该功能的简单性和可理解性。 接下来，我将创建一个基本的弹出窗口，并查看Popup Builder和JetPopup的自定义选项。
弹出式生成器
在Pro Elementor中，弹出式窗口与网站页面分开进行。 要更改网站的外观，请打开要自定义的页面，单击“使用Elementor编辑”按钮并进行更改。 但是要创建（然后编辑）弹出窗口，您必须转到“模板”>“弹出窗口”，然后单击“添加新的弹出窗口”按钮。
在打开的窗口中，您需要选择要创建的模板（是的，您不仅可以为弹出窗口创建模板，还可以为页面和其他项目创建模板）并为其命名。
按下“创建模板”按钮后，您将被重定向到Elementor个性化菜单。 通过从头开始构建，可以更轻松地自定义现有项目。 因此，首先将要求您选择合适的模型。
我选择了显示在库列表顶部的模型之一。 选择之后，立即进入您可能习惯的Elementor工作区。 个性化选项位于屏幕左侧的侧栏中。 您在这里有三个标签。
“设置”选项卡允许您更改弹出窗口的布局，更改模型名称和预览。 在“样式”选项卡上，您可以自定义设计-更改颜色，字体，图像和边框。 “高级”选项卡还具有一组其他滑块。 例如，它们防止使用ESC键关闭弹出窗口。
如您所见-如果您在使用Elementor之前不会遇到任何问题，那么这不会出乎意料。 这是一个详细的视频，解释了如何使用Popup Builder创建弹出窗口：
JetPopup
此插件还向您的仪表板添加了一个新标签 WordPress主题 在它的帮助下，弹出窗口也可以与页面分开创建。 开箱即用的弹出窗口也存储在名为“弹出库”的选项卡中。 要创建新的弹出窗口，您可以按预制模板上的“添加”按钮或转到 JetPopup > 添加新弹出窗口，为模板命名，然后按“使用 Elementor 编辑”。
工作领域与常规有所不同，因为您现在正在创建一个较小的窗口。 在左侧菜单中，您可以将任何类型的项目添加到弹出窗口。
JetPopup插件将单个项目添加到小部件菜单-上下文操作按钮。 这允许定义用户按下按钮时将发生的操作类型。
从弹出窗口打开设置并不是很明显。 您需要单击菜单底部的维护按钮。 设置菜单与Popup Builder中的菜单非常相似，但是只有两个自定义选项卡。 “常规设置”允许您定义动画效果，重命名模型或定义条件。 在“样式”选项卡上，您可以更改布局，颜色，图像，字体和边框。
JetPopup具有一些不太明显的功能，但通过详细而有用的视频教程进行了补充。
触发器
为了有用且不会惹恼访客，弹出窗口必须在正确的时间出现。 显示弹出窗口的条件称为“触发”。 可用条件越详细，弹出插件越灵活。 如果您不希望用户在订阅表单弹出窗口出现后离开站点，则精度非常重要。
弹出式生成器
自定义弹出窗口后，此插件可帮助您定义必要的条件。 当您按下“发布”按钮时，您会看到一个窗口，您可以在其中定义条件（此弹出窗口将显示在哪些页面上），触发器（何时显示弹出窗口）和高级规则。
Popup Builder具有六个触发器，例如在一个滚动和单击上显示，以及七个高级规则，例如在一定数量的会话后显示或在某些设备上显示。 触发器和高级规则具有简单的滑块开关，可以快速设置所需的任何参数。
JetPopup
所有触发器，条件和打开事件都在参数中分组在一起。 单击维护按钮后，您可以打开设置选项卡，并可以立即设置触发器。 您可以设置滚动后页面的百分比，要显示的上下文菜单或用户看到消息的秒数。
该窗口只能显示一次，或每次用户执行某些操作时才显示（我不强烈建议这样做-不会使用户满意）。 您还可以非常精确地选择将显示此具体弹出窗口的帖子或页面。 通常，此插件非常灵活，可让您以很高的精度显示弹出窗口。
定位
用户当然不能避免窗口跳出屏幕中心，但是他们分散了访问者对网站的注意力，这确实很烦人。 并非所有的弹出窗口都应放置在中心，顶部的窄带将不那么明显，但可以更加有效。 这意味着您需要控制窗口的位置并能够在屏幕上移动。
弹出式生成器 et JetPopup 将屏幕分为九个扇区，并允许您将弹出窗口放置在其中的任何一个中。 沿左右和上下比例定义位置。 它不是很灵活，但是足以弹出一个窗口。
动画效果
窗口在页面上滑动（或滚动或跳跃）的方式非常重要。 如果窗口移动得太快或太慢，它将无效。 还应非常精确地使用弹跳，挠痒和震颤。 动画效果使网站更具动感，但它们也可能破坏整个印象。
弹出式生成器 具有36种输入动画，包括不同类型的滑动，展开，缩放，弹跳和沿不同方向旋转。 所有这些以及动画的持续时间都可以在“设置”选项卡的“布局”部分中找到。
插件中有13种动画类型 JetPopup，包括淡入淡出，垂直翻转，不同的幻灯片，弹跳和缩放。 您可以在“设置”标签的“设置”部分中找到它们。
车型
在某些情况下，您想创建一个具有特定结构的弹出窗口并确切地知道它的外观。 但这是一个相当罕见的场合。 更多时候你不知道你的弹出窗口应该包含哪些元素。 这是模板派上用场的地方。 即使您不使用任何预配置的示例，处理它们也可以为您提供一个很好的概览。 而且，当然，定制一个开箱即用的项目比从头开始构建它更快、更容易。
弹出式生成器 在Elementor的模板库中添加了一个类别。 正如我之前告诉您的那样，您可以在创建弹出窗口的新过程开始时立即看到它。 弹出模板的种类足够大。 有100多个项目。 在左上角，按下拉类别排序工具可加快搜索速度。 类别是可以理解的，不需要很长时间就能找到所需的弹出窗口。
JetPopup 也有一个庞大的模板库。 它们全部存储在“上下文库”选项卡中，并具有诸如预览按钮和使用计数器之类的便捷功能。 排序选项更多，可以将列表配置为显示特定类型的模型，然后以任何顺序放置。 例如，取决于创建日期。 我无法告诉您可用的确切型号，但肯定有100多种。
比较表
| Elementor Popup Builder | JetPopup | |
| 价格 | 45 $ | 15 $ |
| 车型 | 100+ | 100+ |
| 触发器 | 6触发器，7高级规则 | 5打开事件以及其他参数 |
| Animatio | 36类型 | 13类型 |
| 教程 | 文件 | 文档，9视频教程 |
结论
我不能说这两个插件哪个更好。 判断它们太复杂了。 每个案例和每个人对于插件的选择都有自己的要求。 我想您应该自己定义-这两个最适合您？ 希望您能在网站上添加一个很棒的弹出窗口，祝您好运！
