Elementor编辑器如何添加使用popup弹窗？

popup弹窗是很多电商网站常见的弹出页面功能，可用于促销、优惠、打折、通知、突发、登录表单、结账表单、购物车、订阅表单、Cookie、相关文章等超多使用场景。很多 WordPress不带这个功能，只能依靠第三方插件完成，或者由 Elementor编辑器辅助实现。

popup弹窗通过预先设定好的特定时刻或在特定触发条件下弹出并覆盖页面的号召性窗口，让用户的目光焦点集中到弹窗中。

popup弹窗有两种制作方式，一种是直接使用官方模板库中提供的popup，看好哪个点击 insert插入，修改一下图片、文字替换成我们自己的，直接使用即可。

第二种方式是我们自己制作一个popup，听上去不太容易，其实操作起来不难。

1、安装 Elementor和 Elementor Pro插件

Elementor Pro 设计使用popup弹窗功能，就必须要先安装 Elementor 和 Elementor Pro插件。前者是免费版本，后者是付费版本。

两者都要安装，缺一不可。

2、popup弹窗模板

在 WordPress后台 > 模板 > popups，右侧点击添加新模板。

模板类型默认就是popup，给起个名字用来区分不同的多个弹窗，点击“创建模板”。

在popups的模板库中有很多标注 PRO的模板可以使用。

看好哪个点击“insert插入”即可。

此时来到编辑区域，可以按照网站、产品需要设计修改，替换成自己的图片和文字，保存发布。

2.1、popup设置参数

点击左侧面板底部工具栏中的弹出设置（齿轮图标）来编辑popup弹窗参数。

settings设置选项卡的参数解释如下：

• 布局
• Width : 设置弹出窗口的确切宽度，使用 px 或 vw
• Height：使用 px 或 vw 设置弹出窗口的确切高度。使用 100vw 的宽度和高度来创建全屏弹出窗口
• Horizo​​ntal : 从左、中或右中选择弹出窗口的水平位置
• Vertical：选择弹出窗口的垂直位置，从顶部、中心或底部
• Overlay : 显示或隐藏背景叠加
• 关闭按钮：选择显示或隐藏关闭按钮
• 在 x 秒后显示按钮（如果选择了显示关闭按钮）：选择在显示关闭按钮之前等待的秒数
• 入口动画：从下拉选项选择弹出窗口的入口动画，例如淡入淡出和缩放。
• 退出动画：退出动画，同上。
• Animation Duration : 设置动画的时间长度，以毫秒为单位
• 常规设置
• 标题：输入弹出窗口的标题。此标题只会显示在后端，不会显示给用户。
• 状态：草稿、待审核、私有或已发布
• 预览设置
• 将动态内容预览为：从任何档案、页面、帖子、媒体或 404 页面中进行选择。
• 注意：要查看您选择的内容，必须在选择动态内容后重新加载页面。

style风格选项卡的参数解释如下：

• 弹出
• 背景类型：选择背景颜色、图像或渐变
• 边框类型：选择边框类型，从无、实心、双、点、虚线或凹槽中选择
• Border Radius : 设置边框半径以控制弹出窗口每一侧的圆角
• 框阴影：调整框阴影选项
• 覆盖
• 背景类型：选择背景颜色、图像或渐变
• 关闭按钮
• 位置：选择在弹出窗口的内部或外部显示关闭按钮
• 垂直位置：使用滑块选择关闭按钮的垂直位置
• 水平位置：使用滑块选择关闭按钮的水平位置
• 正常 | 徘徊
• 颜色：为正常和悬停状态选择关闭按钮的颜色
• 背景颜色：为正常和悬停状态选择关闭按钮的背景颜色
• Size : 设置关闭按钮的大小

advanced高级选项卡的参数解释如下：

• Show Close Button After (sec)：输入秒数。关闭按钮仅在该时间过后才会出现。
• Automatically Close After (ms)：输入在自动关闭弹出窗口之前要等待的毫秒数。留空以禁用自动关闭。
• 防止在叠加层上关闭：选择是可防止用户通过单击叠加层来关闭弹出窗口。
• 防止按 ESC 键关闭：选择是可防止用户按 ESC 键关闭弹出窗口。
• 禁用页面滚动：选择是以防止用户滚动弹出窗口后面显示的页面
• 避免多个弹出窗口：如果用户在他访问的页面上看到另一个弹出窗口，请选择是隐藏此弹出窗口
• Open By Selector：输入将手动触发弹出窗口的选择器列表（CSS ID、类或数据元素）。查看说明
• 边距：调整边距
• Padding：调整弹出窗口周围的填充
• CSS 类：添加不带点的自定义类（例如 my-class）
• 自定义 CSS
• 自定义 CSS : 输入您自己的 CSS

2.2、条件选项

发布设置有三个选项：条件、触发器和高级规则。

条件：在哪里展示popup。Entire website全站，Archives档案，Singular单独一页。

• 比如添加一个包含条件并选择Singular > Front Page，让popup弹窗只在首页显示。
• 选好之后点击右下角的“NEXT”按钮。

触发器是触发的活动popup弹出的用户操作。

比如当页面加载时弹出、向下滚动 50%页面时弹出等等，大家可以自行设置。

• On Page Load：在页面加载时，在触发弹出窗口之前等待的秒数。
• On Scroll：选择方向（向上或向下）和触发弹出窗口之前滚动的量。向下滚动是基于页面向下滚动的百分比；向上滚动基于向上滚动的像素数。
• On Scroll To Element：输入选择器名称（CSS ID），当用户滚动到它时将触发弹出窗口。还要把将 CSS ID 添加到元素的“高级”选项卡。
• On Click : 输入将触发弹出窗口的点击次数
• After Inactivity : 输入将触发弹出窗口的用户不活动秒数。
• On Page Exit Intent : 以在用户的​​鼠标活动指示退出页面的意图时触发弹出

高级规则：指定生成 popup弹窗必须满足的其他要求。

• Show after X page views : 设置触发弹出之前的页面浏览次数。
• Show after X sessions : 设置触发弹出之前的用户会话数（会话在用户访问网站时开始，并在用户关闭浏览器时结束）。
• 最多显示 X 次：弹出窗口将显示的最大次数。On Open只允许弹出窗口打开与设置的数字一样多的次数。On Close则弹出窗口只会在用户第 X 次关闭之前打开，之后不会再次打开。此设置在本地存储中设置，并将保留直到被删除。
• 当从特定 URL 到达时：在用户从特定 URL 到达时显示或隐藏弹出窗口（输入特定 URL）。正则表达式是高级用户为匹配 URL 模式设置高级规则的一个选项。
• 到达时显示：显示用户是否来自搜索引擎、外部链接（输入特定链接的 URL）和/或内部链接（输入特定链接的 URL）。
• 为登录用户隐藏：隐藏所有登录用户或选择自定义角色的弹出窗口。网站缓存后该功能可能无法正常工作
• 在设备上显示：选择在台式机、平板电脑和/或移动设备上显示。

还可以通过手动触发控制弹出窗口，使用 Dynamic > Actions > Popup来添加。

以后再修改条件、触发器、高级规则，在绿色的发布按钮旁边点击向下的小箭头就能看到了。

3、自定义popup弹窗

如果对官方提供的popup都不满意，那么就在看到官方模板库时直接点击右上角的X，开始自定义设计。

点击页面左下角的小齿轮，看到 popup设置项。

在 width 点击 vw，输入 80或者别的长度，代表弹窗占据页面 80%宽度。

position 的 horizontal 和 vertical 设置弹窗的位置。

其他参数比如样式和高级设置请参考上面popup参数设置的内容。

3.1、设计popup

点击编辑器区域的红色+号，选择合适的结构。

老魏随便设计了下图中的popup弹窗，带有弹窗标题、标题、文字、图片、按钮的形式。

4、页面按钮调出popup弹窗

popup一般不要出现太多次，会影响用户体验。

所以我们可以在页面的按钮上设置点击后弹窗，这样由用户启动的弹窗起码不会令人反感。

5、退出popup时提示弹窗

有时候你设置用户进入页面时弹窗提示折扣、优惠、促销，但用户需要多看看页面内容再决定是否参与。

此时你可以再添加一个popup弹窗，在触发器开启“页面退出意图”，其他选项都不要碰，保存发布。

这时用户先关闭了首次打开页面的弹窗，等2秒钟后会再弹窗提示有多大的折扣，这样可以提高用户购买率。

当然了一再弹窗的行为可能会遭到用户厌烦，请谨慎设置。

6、popup弹窗注意事项

• 信息设计的少一点，堆砌太多信息容易混淆访问者的焦点
• 要考虑到移动端、平板端等
• 数量越少越好，别太频繁

7、总结

Elementor编辑器中添加使用popup弹窗是比较容易的，是自带功能无需插件即可实现。可以插入官方popup模板改一改，或者自己设计一个popup弹窗。