按页面百分比对弹出窗口进行计时,直到您需要它降落在某个确切位置为止,也许您希望某人到达您的定价块、推荐行或号召性用语带的那一刻,而不是页面下方的 40% 模糊 主插件弹出生成器 用来处理它 上滚动到元素 触发器。您向弹出窗口提供一个带有 a 的 CSS ID #然后放入相同的 ID,没有 #、在你想充当触发器的元素上。
这是 Master Addons Popup Builder 中的完整设置,它免费提供 Elementor 的 Master Addons。如果您只需要基于百分比的触发器,则 弹出触发选项指南 涵盖那个。
在开始之前 #
步骤 1:设置弹出窗口以打开滚动到元素 #
在 Elementor 中打开弹出窗口并转到 MA 弹出设置 面板。下 设置,开关 打开弹出窗口 到 上滚动到元素。出现了一个新字段: 元素选择器.
字段下的提示拼写出它想要的内容,即触发滚动弹出的元素的 CSS 选择器,例如 #my-id 或 .my-class.
2步:输入CSS ID选择器(带有#号) #
在 元素选择器 字段,键入以 开头的 CSS ID #.这里是 #show-popup。保持名称短小且唯一,这样您就可以在页面上重复使用它,而不会与其他任何内容发生冲突。
的 # 是做真正的工作:它告诉弹出窗口观看ID为的元素 show-popup.发布(或更新)弹出窗口以保存它。
3步:将相同的ID添加到您的目标元素(没有#符号) #
Elementor中现在打开弹出应该启动的页面并进行编辑,点击你想要的元素作为触发器,这里是页面上的部分块,打开它的 高级 选项卡。
找到 CSS ID "高级"选项卡中的字段, 并键入您在弹出窗口中使用的相同名称, 但是 没有 #所以就这样吧 show-popup.那一个小小的差别就是整个诀窍:
- 弹出元素选择器:
#show-popup(与哈希) - Element 的 CSS ID:
show-popup(没有哈希)
的 # CSS选择器的一部分,而不是ID的一部分,这就是为什么它属于弹出字段但从不在元素的CSS ID字段中更新页面保存的一件事要注意:不要在其他地方重用已经连接到锚链路或自定义CSS的ID,否则你会得到惊喜。
4步:预览并滚动到元素 #
打开前端的页面并开始滚动。顶部什么都没有。第二个元素携带 show-popup ID滚动到视图中,弹出窗口在页面上打开。
要几个滚动点触发同一个弹出?给每个元素相同的CSS ID, show-popup的,而且他们中的任何一个都会引爆它。
故障排除 #
- Popup 从未打开? 检查哈希值。弹出的元素选择器需要
#show-popup的,以及元素的CSS ID需求show-popup没有哈希。 - CSS ID 字段中使用过#? Take out。Elementor CSS ID 字段只想要纯名称。
- ID相同的两个元素起作用? 触发就可以了,但不要重复使用已经在处理 CSS 或页面上锚定链接的 ID。
- 弹出窗口根本不显示? 确保弹出的激活已打开,其显示条件包括带有触发元素的页面。
常见问题 #
Elementor 中滚动到某个特定元素时,我该如何打开一个弹出窗口?
将弹出的打开弹出选项设置为"在滚动到元素上,并在元素选择器字段中输入像#show-popup这样的CSS ID。然后将相同的ID(没有#)添加到元素器高级选项卡中的目标元素的CSS ID字段中。
为什么我在弹出窗口中添加#,但在元素上添加不添加#?
Element 选择器字段期望 CSS 选择器,# 标记 ID 选择器,Elementor CSS ID 字段期望的只是 ID 名称,所以你在弹出窗口中使用 #show-popup,在元素上使用 show-popup。
我可以从多个元素触发弹出窗口吗?
Yes。Give每个元素相同的CSS ID,当访问者滚动到其中任何一个时弹出窗口就会启动,当你有几个部分应该都触发相同的优惠时,这很方便。
On 卷轴和 On 卷轴到元素有什么区别?
On Scroll 在访问者滚动页面的一定百分比后启动,在 Scroll to Element 上当一个特定元素进入视图时启动,当您想要将弹出窗口绑定到精确部分时,该操作会更加精确。
为此我需要 Elementor Pro 吗?
No。Master Addons Popup Builder 可与 Elementor 免费版本配合使用,因此 On Scroll to Element 触发器和 CSS ID 方法无需 Elementor Pro 即可工作。
