弹出窗口

弹出窗口是在特定时刻或在特定触发器和条件下弹出并覆盖页面的号召性用语模式窗口。弹出窗口旨在在用户采取行动后集中注意力。https://www.youtube.com/embed/2lPoObvlB8I?feature=oembed

首先,转到Templates > Popups。控制弹窗的布局、条件、规则和样式,然后设计弹窗内容。

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

设计弹出窗口 #

设置 #

布局 #

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

通用设置 #

  1. 标题:输入弹出的标题。此标题只会显示在后端,不会显示给用户。
  2. 状态:草稿、待审核、私有或已发布

预览设置 #

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

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

风格 #

弹出窗口 #

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

覆盖 #

  1. 背景类型:选择背景颜色、图像或渐变

关闭按钮 #

  1. 位置:选择在弹出窗口的内部或外部显示关闭按钮
  2. 垂直位置:使用滑块选择关闭按钮的垂直位置
  3. 水平位置:使用滑块选择关闭按钮的水平位置
正常 | 徘徊 #
  1. 颜色:为正常和悬停状态选择关闭按钮的颜色
  2. 背景颜色:为正常和悬停状态选择关闭按钮的背景颜色
  3. Size : 设置关闭按钮的大小

先进的 #

先进的 #

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

自定义 CSS #

自定义 CSS:输入您自己的 CSS


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

设置条件 #

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

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

设置确定在何处使用弹出窗口的条件(不包括手动触发)。例如,添加一个包含条件并选择单数 > 头版以仅在站点主页上显示弹出窗口。了解有关条件的更多信息。

设置触发器 #

触发器是导致您的广告系列弹出的用户操作。为将导致弹出窗口发生的每个选项选择是或否。

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

高级规则 #

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

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

注意:如果页面未重新加载或重新进入,则弹出窗口不能显示多次。


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

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

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

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

Powered by BetterDocs

发表评论

您的电子邮箱地址不会被公开。

Scroll to Top