在WordPress网站中如何用Elementor配置弹出窗口

弹出窗口是行动号召模式窗口，在特定时刻或特定触发条件和条件下弹出并覆盖页面。弹出窗口主要在用户采取行动后吸引他们的注意力。

首先，转到模板 > 弹出窗口。控制弹出窗口的布局、条件、规则和样式，然后设计弹出窗口的内容。

注意：单击面板底部工具栏中的弹出设置齿轮图标来编辑弹出设置。

设计弹出窗口

设置

布局

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

常规设置

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

预览设置

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

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

风格

弹出窗口

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

覆盖

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

关闭按钮

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

正常 | 悬停

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

Advanced

Advanced

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

自定义 CSS

自定义 CSS：输入自己的 CSS

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

设置条件

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

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

设置触发器

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

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

高级规则

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

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

注意：如果没有重新加载或重新进入页面，则弹出窗口不能显示多次。

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

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

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