我们在使用Elementor编辑器构建网页的时候，Elementor的弹出窗口这个功能也不错；这个功能可以帮助你吸引用户的注意力，提供重要的信息或优惠活动等。我们看看Elementor如何创建一个弹出窗口并配置弹出窗口

创建一个弹出窗口

首先，需要创建一个弹出窗口，可以按照下面的步骤设置你的第一个弹出窗口。按照这个指南，使用的是按钮手动触发弹出窗口。

1. 转到仪表盘> 模板 > 弹出窗口 > 添加新的
2. 为模板命名并单击“创建模板”
3. 从库中选择模板或创建你自己的设计
4. 单击“发布”，然后单击“保存并关闭”
5. 在 Elementor 中打开新页面（CTRL / CMD + E，新页面）
6. 拖入按钮小部件
7. 在“布局”下，选择“链接”>“动态”>“操作”>“弹出窗口”
8. 单击弹出窗口>打开弹出窗口> 选择您创建的弹出窗口
9. 转到实时页面，单击按钮并看到弹出窗口出现

对于单击按钮时出现的这种类型的基本弹出窗口，  不需要条件、 触发器或 高级规则。

这是基本设置。尝试一下以掌握如何使用 Elementor 弹出窗口。

配置弹出窗口

弹出窗口是在特定时刻或特定触发器和条件下弹出并覆盖页面的行动召唤模式窗口。弹出窗口的设计目的是在用户采取行动后集中其注意力。

首先，转到模板 > 弹出窗口。控制弹窗的布局、条件、规则和样式，然后设计弹窗内容。注意：单击面板底部工具栏中的弹出设置齿轮图标可编辑弹出设置。

设计弹出窗口

设置

布局

1. 宽度：设置弹出窗口的确切宽度，使用 px 或 vh
2. Height：使用 px 或 vh 设置弹出窗口的确切高度。使用 100vh 的宽度和高度来创建全屏弹出窗口
3. 水平：选择弹出窗口的水平位置，从左、中或右
4. 垂直：选择弹出窗口的垂直位置，从顶部、中心或底部
5. Overlay：显示或隐藏背景叠加
6. 关闭按钮：选择显示或隐藏关闭按钮
7. 多少 秒后显示按钮（如果选择显示关闭按钮）：选择显示关闭按钮之前等待的秒数
8. 入口动画：从下拉选项中选择弹出窗口的入口动画，例如淡入淡出和缩放。选择任何动画效果来预览效果。
9. 退出动画：从下拉选项中选择弹出窗口的退出动画，例如淡入淡出和缩放。选择任何动画效果来预览效果。
10. 动画持续时间：设置动画的时间长度，以毫秒为单位

常规设置

1. 标题：输入弹出窗口的标题。该标题只会显示在后端，不会显示给用户。
2. 状态：草稿、待审、私有或已发布

预览设置

将动态内容预览为：从任意档案、页面、帖子、媒体或 404 页面中进行选择。

注意：要查看选择的内容，必须在选择动态内容后重新加载页面。

风格

弹出窗口

1. 背景类型：选择背景颜色、图像或渐变
2. 边框类型：选择边框类型，可以选择无、实线、双线、点线、虚线或凹槽
3. 边框半径：设置边框半径以控制弹出窗口每侧的角圆度
4. 框阴影：调整框阴影选项

覆盖

背景类型：选择背景颜色、图像或渐变

关闭按钮

1. 位置：选择在弹出窗口的内部或外部显示关闭按钮
2. 垂直位置：使用滑块选择关闭按钮的垂直位置
3. 水平位置：使用滑块选择关闭按钮的水平位置

正常 |悬停

1. 颜色：选择“正常”和“悬停”状态下“关闭”按钮的颜色
2. 背景颜色：选择“正常”和“悬停”状态下“关闭”按钮的背景颜色
3. Size : 设置关闭按钮的大小

先进的

先进的

1. 显示关闭按钮的时间间隔（秒）：输入秒数。关闭按钮仅在该时间过后才会出现。
2. 自动关闭时间（毫秒）：输入自动关闭弹出窗口之前要等待的毫秒数。留空以禁用自动关闭。
3. 防止关闭叠加层：选择“是”可防止用户通过单击叠加层来关闭弹出窗口。
4. 阻止按 ESC 键关闭：选择“是”可阻止用户通过按 ESC 键关闭弹出窗口。
5. 禁用页面滚动：选择“是”以防止用户滚动弹出窗口后面显示的页面
6. 避免多个弹出窗口：如果用户在他访问的页面上看到另一个弹出窗口，请选择“是”隐藏此弹出窗口
7. 通过选择器打开：输入将手动触发弹出窗口的选择器列表（CSS ID、类或数据元素）。
8. 边距：调整边距
9. Padding：调整弹出窗口周围的填充
10. CSS 类：添加不带点的自定义类（例如 my-class）

自定义CSS

自定义 CSS：输入你自己的 CSS

通过发布设置控制弹出窗口

设置条件

条件允许你设置弹出窗口将显示在网站的哪些页面上。

设置确定弹出窗口使用位置的条件（不包括手动触发）。例如，添加“包含”条件并选择“Singular”>“首页”以仅在站点主页上显示弹出窗口。

设置触发器

触发器是导致你的广告活动弹出的用户操作。对于将导致出现弹出窗口的每个选项，选择“是”或“否”。

1. 页面加载时：如果设置为“是”，则设置页面加载时触发弹出窗口之前等待的秒数。
2. 滚动时：如果设置为“是”，请在触发弹出窗口之前选择方向（向上或向下）和滚动量。向下滚动是根据页面向下滚动的百分比；向上滚动基于向上滚动的像素数。
3. On Scroll To Element：如果设置为 Yes，请输入选择器名称 (CSS ID)，当用户滚动到它时将触发弹出窗口。还必须将 CSS ID 添加到元素的“高级”选项卡中。
4. 单击时：如果设置为“是”，请输入将触发弹出窗口的单击次数
5. 不活动后：如果设置为“是”，请输入将触发弹出窗口的用户不活动秒数。
6. On Page Exit Intent：设置为“是”，以在用户的​​鼠标活动指示退出页面的意图时触发弹出窗口

高级规则

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

1. 在多少次页面浏览后显示：如果设置为是，则设置触发弹出窗口之前的页面浏览数。
2. 在多少个会话后显示：如果设置为“是”，则设置触发弹出窗口之前的用户会话数（会话在用户访问网站时开始，在用户关闭浏览器时结束）。
3. 显示最多多少次：弹出窗口显示的最大次数。如果“计数”设置为“打开时”，则仅允许弹出窗口打开所设置的次数。如果将“计数”设置为“关闭时”，则弹出窗口只会打开，直到用户第 X 次关闭它，之后将不会再次打开。此设置在本地存储中设置，并将保留在那里直至删除。
4. 从特定 URL 到达时：如果设置为“是”，则在用户从特定 URL 到达时显示或隐藏弹出窗口（输入特定 URL）。 Regex 是高级用户设置匹配 URL 模式的高级规则的选项。
5. 到达时显示：如果设置为是，则显示用户是否从搜索引擎、外部链接（输入特定链接的 URL）和/或内部链接（输入特定链接的 URL）到达。
6. 对登录用户隐藏：设置为“是”可为所有登录用户或选定的自定义角色隐藏弹出窗口。对于有缓存的网站，此功能可能无法正常工作
7. 在设备上显示：设置为“是”以选择在台式机、平板电脑和/或移动设备上显示

注意：如果页面未重新加载或重新进入，则弹出窗口无法显示多次。

通过手动触发控制弹出窗口

可以手动触发弹出窗口。动态链接可以使用 Popup Action 来打开或关闭 Popup。表单可以使用“提交后操作”选项来打开或关闭弹出窗口。任何元素都可以使用唯一的选择器（类、ID 或数据元素）在单击该元素时手动触发弹出窗口。

• 从任何链接元素中，选择Dynamic > Actions > Popup。单击“弹出窗口”以选择“打开弹出窗口”或“关闭弹出窗口”。如果选择关闭弹出窗口，“不再显示”选项将成为可用选项。
• 从 Elementor 表单中，选择提交后操作 > 添加操作 > 打开弹出窗口或关闭弹出窗口
• 从自定义选择器：任何元素都可以有一个选择器集，可用作手动弹出触发器。编辑元素并转到高级 > CSS 类（或CSS ID），然后为元素指定类名称（不带前面的点）或 ID 名称（不带前面的 #）。在弹出窗口的Conditions中，使用唯一选择器选择包含该元素的页面（例如Conditions > Include > Singular > Pages > Your Page Title）。当用户访问该页面并单击该元素时，将触发弹出窗口。这对于从主题的导航菜单项、文本编辑器小部件中的内容、从非 Elementor 元素或脚本等打开弹出窗口非常有用。

从自定义选择器触发弹出窗口时，请注意元素不一定是 “链接”。通常不可点击的元素（如纯文本）也可以通过点击来生成弹出窗口。还请注意，使用此选项时，触发器和高级规则将被忽略。