弹出窗口是调用操作模式窗口,在指定时刻或在特定触发器和条件下弹出并覆盖页面。弹出窗口旨在在用户采取操作后集中用户的注意力。
首先,转到模板 > 弹出窗口。控制弹窗的布局、条件、规则和样式,然后设计弹窗内容。
注意:单击面板底部工具栏中的弹出设置齿轮图标可编辑弹出设置。
![图片[1]-配置弹出窗口popup配置弹出窗口-建站经验论坛-WordPress建站-本牛千智](https://elementor.com/help/wp-content/uploads/2022/02/image-9-1024x474.png)
设计弹出窗口
设置
布局
- 宽度:设置弹出窗口的确切宽度,使用 px 或 vh
- Height:使用 px 或 vh 设置弹出窗口的确切高度。使用 100vh 的宽度和高度来创建全屏弹出窗口
- 水平:选择弹出窗口的水平位置,从左、中或右
- 垂直:选择弹出窗口的垂直位置,从顶部、中心或底部
- Overlay:显示或隐藏背景叠加
- 关闭按钮:选择显示或隐藏关闭按钮
- x 秒后显示按钮(如果选择显示关闭按钮):选择显示关闭按钮之前等待的秒数
- 入口动画:从下拉选项中选择弹出窗口的入口动画,例如淡入淡出和缩放。选择任何动画效果来预览效果。
- 退出动画:从下拉选项中选择弹出窗口的退出动画,例如淡入淡出和缩放。选择任何动画效果来预览效果。
- 动画持续时间:设置动画的时间长度,以毫秒为单位
常规设置
- 标题:输入弹出窗口的标题。该标题只会显示在后端,不会显示给用户。
- 状态:草稿、待审、私有或已发布
预览设置
- 将动态内容预览为:从任意档案、页面、帖子、媒体或 404 页面中进行选择。
注意:要查看您选择的内容,您必须在选择动态内容后重新加载页面。
风格
![图片[2]-配置弹出窗口popup配置弹出窗口-建站经验论坛-WordPress建站-本牛千智](https://elementor.com/help/wp-content/uploads/2022/02/image-10.png)
弹出窗口
- 背景类型:选择背景颜色、图像或渐变
- 边框类型:选择边框类型,可以选择无、实线、双线、点线、虚线或凹槽
- 边框半径:设置边框半径以控制弹出窗口每侧的角圆度
- 框阴影:调整框阴影选项
覆盖
- 背景类型:选择背景颜色、图像或渐变
关闭按钮
- 位置:选择在弹出窗口的内部或外部显示关闭按钮
- 垂直位置:使用滑块选择关闭按钮的垂直位置
- 水平位置:使用滑块选择关闭按钮的水平位置
正常 | 徘徊
- 颜色:选择“正常”和“悬停”状态下“关闭”按钮的颜色
- 背景颜色:选择“正常”和“悬停”状态下“关闭”按钮的背景颜色
- Size : 设置关闭按钮的大小
先进的
![图片[3]-配置弹出窗口popup配置弹出窗口-建站经验论坛-WordPress建站-本牛千智](https://elementor.com/help/wp-content/uploads/2022/02/image-11.png)
先进的
- 显示关闭按钮的时间间隔(秒):输入秒数。关闭按钮仅在该时间过后才会出现。
- 自动关闭时间(毫秒):输入自动关闭弹出窗口之前要等待的毫秒数。留空以禁用自动关闭。
- 防止关闭叠加层:选择“是”可防止用户通过单击叠加层来关闭弹出窗口。
- 阻止按 ESC 键关闭:选择“是”可阻止用户通过按 ESC 键关闭弹出窗口。
- 禁用页面滚动:选择“是”以防止用户滚动弹出窗口后面显示的页面
- 避免多个弹出窗口:如果用户在他访问的页面上看到另一个弹出窗口,请选择“是”隐藏此弹出窗口
- 通过选择器打开:输入将手动触发弹出窗口的选择器列表(CSS ID、类或数据元素)。查看说明
- 边距:调整边距
- Padding:调整弹出窗口周围的填充
- CSS 类:添加不带点的自定义类(例如 my-class)
自定义CSS
自定义 CSS:输入您自己的 CSS
通过发布设置控制弹出窗口
设置条件
条件允许您设置弹出窗口将显示在网站的哪些页面上。

设置确定弹出窗口使用位置的条件(不包括手动触发)。例如,添加“包含”条件并选择“Singular”>“首页”以仅在站点主页上显示弹出窗口。了解有关条件的更多信息。
设置触发器
触发器是导致您的广告活动弹出的用户操作。对于将导致出现弹出窗口的每个选项,选择“是”或“否”。

- 页面加载时:如果设置为“是”,则设置页面加载时触发弹出窗口之前等待的秒数。
- 滚动时:如果设置为“是”,请在触发弹出窗口之前选择方向(向上或向下)和滚动量。向下滚动是根据页面向下滚动的百分比;向上滚动基于向上滚动的像素数。
- On Scroll To Element:如果设置为 Yes,请输入选择器名称 (CSS ID),当用户滚动到它时将触发弹出窗口。您还必须将 CSS ID 添加到元素的“高级”选项卡中。
- 单击时:如果设置为“是”,请输入将触发弹出窗口的单击次数
- 不活动后:如果设置为“是”,请输入将触发弹出窗口的用户不活动秒数。
- On Page Exit Intent:设置为“是”,以在用户的鼠标活动指示退出页面的意图时触发弹出窗口
高级规则
高级规则指定生成弹出窗口必须满足的其他要求。

- 在 X 次页面浏览后显示:如果设置为是,则设置触发弹出窗口之前的页面浏览数。
- 在 X 个会话后显示:如果设置为“是”,则设置触发弹出窗口之前的用户会话数(会话在用户访问网站时开始,在用户关闭浏览器时结束)。
- 显示最多 X 次:弹出窗口显示的最大次数。如果“计数”设置为“打开时”,则仅允许弹出窗口打开所设置的次数。如果将“计数”设置为“关闭时”,则弹出窗口只会打开,直到用户第 X 次关闭它,之后将不会再次打开。此设置在本地存储中设置,并将保留在那里直至删除。
- 从特定 URL 到达时:如果设置为“是”,则在用户从特定 URL 到达时显示或隐藏弹出窗口(输入特定 URL)。Regex 是高级用户设置匹配 URL 模式的高级规则的选项。
- 到达时显示:如果设置为是,则显示用户是否从搜索引擎、外部链接(输入特定链接的 URL)和/或内部链接(输入特定链接的 URL)到达。
- 对登录用户隐藏:设置为“是”可为所有登录用户或选定的自定义角色隐藏弹出窗口。对于有缓存的网站,此功能可能无法正常工作
- 在设备上显示:设置为“是”以选择在台式机、平板电脑和/或移动设备上显示
注意:如果页面未重新加载或重新进入,则弹出窗口无法显示多次。
通过手动触发控制弹出窗口
可以手动触发弹出窗口。动态链接可以使用 Popup Action 来打开或关闭 Popup。表单可以使用“提交后操作”选项来打开或关闭弹出窗口。任何元素都可以使用唯一的选择器(类、ID 或数据元素)在单击该元素时手动触发弹出窗口。
- 从任何链接元素中,选择Dynamic > Actions > Popup。单击“弹出窗口”以选择“打开弹出窗口”或“关闭弹出窗口”。如果选择关闭弹出窗口,“不再显示”选项将成为可用选项。
- 从 Elementor 表单中,选择提交后操作 > 添加操作 > 打开弹出窗口或关闭弹出窗口
- 从自定义选择器:任何元素都可以有一个选择器集,可用作手动弹出触发器。编辑元素并转到高级 > CSS 类(或CSS ID),然后为元素指定类名称(不带前面的点)或 ID 名称(不带前面的 #)。在弹出窗口的Conditions中,使用唯一选择器选择包含该元素的页面(例如Conditions > Include > Singular > Pages > Your Page Title)。当用户访问该页面并单击该元素时,将触发弹出窗口。这对于从主题的导航菜单项、文本编辑器小部件中的内容、从非 Elementor 元素或脚本等打开弹出窗口非常有用。
从自定义选择器触发弹出窗口时,请注意该元素不必是“链接”。通常不可点击的元素(例如纯文本)也可以通过点击来生成弹出窗口。另请注意,使用此选项时将忽略触发器和高级规则。
© 版权声明
1.文章版权归作者所有,可以不经允许任意转载。
2.如有侵权请告知,我会第一时间删除。
THE END
请登录后查看评论内容