有时你不想让弹出窗口自行加载,你希望只有当有人点击按钮或链接时它才会打开。的 主插件弹出生成器 用这个来做 在点击 trigger 和一个 CSS ID 选择器,你在弹出窗口上设置 ID,然后将相同的 ID 添加到任何 Elementor 元素中,然后单击该元素打开弹出窗口。
Elementor 中的单击弹出窗口是什么? #
Elementor 中的单击弹出窗口是一个弹出窗口,它会一直隐藏,直到访问者单击特定元素—按钮、链接、图像或图标—,而不是在页面加载时自行出现。 主插件弹出生成器 用构建一个 在点击 触发:您向弹出窗口提供 CSS ID 选择器 如 #sale-popup然后添加相同的 ID(不带 #)到任何 Elementor 元素的 CSS ID 字段。由于匹配是在 ID 上单独进行的,因此可以从任意数量的元素触发一个弹出窗口—并且它与免费插件一起工作,没有 Elementor Pro 许可证,也没有自定义 JavaScript。单击弹出窗口适合意图驱动的内容,例如定价详细信息、视频演示、登录表单和优惠券代码,其中自动弹出窗口会中断而不是帮助。浏览其余部分 主插件小部件和扩展 看看你还能在里面放什么。
在开始之前 #
3个东西需要到位,你才能设置一个点击弹出窗口:一个弹出窗口已经在主插件弹出窗口构建器,Elementor已安装和活动,以及Master Addons for Elementor已安装和活动,然后整个设置需要两个字段和大约一分钟。
步骤 1:设置弹出窗口以单击打开 #
在 Elementor 中打开弹出窗口并转到 MA 弹出设置 面板。下 设置,改变 打开弹出窗口 到 在点击。出现了一个新字段: 按选择器打开.
在该字段中,键入 CSS ID 着#号例如 #sale-popup.就是触发弹出的选择器,保持名称简单独特,这样就很容易重用。
步骤 2:将 CSS ID 添加到 Elementor 元素 #
现在转到您想要触发器的页面并在 Elementor 中编辑它。选择任何元素,一个按钮可以正常工作,然后打开它 高级 选项卡。找到 CSS ID 字段并输入相同的名称,但是 没有#标志 这次,所以 sale-popup.
这种差异会让人们兴奋不已:弹出的 Open By Selector 使用 #sale-popup的,而元素的CSS ID则使用 sale-popup. X = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 # 是选择器语法的一部分,而不是 ID 的一部分。
3步:预览并点击 #
Update页面,然后在前端预览,你会看到你的按钮(这里标注为“点击打开弹出”)坐在布局中,还没有弹出窗口在望。
单击按钮,弹出窗口立即打开。相同的触发器可以根据需要对任意数量的元素起作用,只需为每个元素提供相同的 CSS ID 即可。
故障排除 #
- 点击时什么也没发生? ID 相符, 确保:
#sale-popup在弹出的"选择器打开"中,以及sale-popup(没有#)在元素的CSS ID。 - 弹出窗口不活动? 检查弹出窗口是否 激活 is on,其显示条件包括带有按钮的页面。
- CSS ID 字段中使用过#? 删除它。 Elementor CSS ID 仅采用纯名称。
常见问题 #
如何在单击时打开主插件弹出窗口?
MA 弹出设置面板中,将打开弹出设置为 On Click,并在打开按选择器字段中输入像#sale-弹出窗口这样的 CSS ID。然后将相同的 ID,没有#,添加到元素的 CSS ID 字段中元素的高级选项卡。
为什么我将#添加到一个地方而不是另一个地方?
Open By Selector 字段期望 CSS 选择器,# 标记 ID 选择器,元素器 CSS ID 字段期望的只是 ID 名称,所以你在元素的弹出窗口中使用 #sale-popup,在元素上使用 sale-popup。
我可以从多个按钮触发弹出窗口吗?
Yes。css ID 给每个按钮或元素相同的,然后每个在点击时打开相同的弹出窗口,可以混合按钮、链接和其他元素。
我可以从文本链接而不是按钮打开弹出窗口吗?
是。任何具有匹配的CSS ID的元素都可以工作,包括链接、图像或图标。在该元素的高级选项卡中添加该ID,它就成为触发器。
我需要 Elementor Pro 来进行单击弹出窗口吗?
No。Master Addons Popup Builder 可与 Elementor 免费版本配合使用,因此 On Click 触发器和 CSS ID 方法无需 Elementor Pro 即可工作。
