如何免费在 Elementor 中添加弹出窗口(无需 Elementor Pro)

Free Elementor 不包括弹出构建器。 Popup Builder 是一项 Elementor Pro 功能。要获得弹出窗口而无需支付 Pro 费用,请免费安装 主插件弹出生成器、正常的 Elementor 编辑器内部设计弹出窗口,设置为页面加载打开,发布,那条路径是免费的,在 Elementor 免费版上工作,大约需要五分钟。

本指南贯穿了整个过程,其中包含 Elementor 4.2。4 和 Master Addons 3.2 上拍摄的屏幕截图。它还涵盖了大多数教程跳过的部分:哪些触发器实际上是免费的,当页面定位是 Pro 功能时如何将弹出窗口从每个页面中删除,以及替换的 JavaScript API elementorProFrontend.modules.popup.showPopup 当你没有专业人士时。

Elementor free 有弹出构建器吗?

No。Elementor 自己的弹出窗口构建器仅使用 Elementor Pro 附带。安装免费的 Elementor,菜单中的任何位置都没有弹出窗口项,并且 elementor/popup/show 页面上不存在事件。

你有三种出路:

Master Addons 是这里涵盖的选项,因为弹出窗口内置在您已经使用的相同 Elementor 画布中,因此没有第二个编辑器可以学习,它是 WordPress。org 上运行的免费插件 30,000多个站点弹出窗口生成器附带免费下载。

如果您想首先比较多个工具,我们会单独进行综述 wordpress 的最佳弹出构建器插件.

免费弹出窗口构建器实际上为您提供的内容

下面的分割是通过插件中的控件来检查的,因此您可以在开始构建之前查看免费版的停止位置。

So 免费版给你一个真实的弹出窗口,有真实的设计控制,它不给你的就是触发品种和页面级别的定位,这两个都有变通办法,下面都涵盖了。

Elementor中如何免费添加弹出窗口,一步一步

1步:安装元素器和主插件

从 WordPress 仪表板转到 插件 → 添加插件,搜索 元素、安装并激活。然后搜索 Elementor 的主插件 并且也这样做。任何时候都不需要 Elementor Pro。

Get Elementor Pro 链接在那个屏幕截图中是赠品,这是免费的构建,下面的所有内容都是在那个设置上完成的,完整的安装笔记住在 安装文档.

第 2 步:打开主插件 → 弹出生成器

激活插件会添加 a 主插件 wordpress侧边栏的项目。打开它,然后单击 弹出窗口生成器.

This list 比看起来更有用,每一行都显示弹出的显示条件,无论是 Active 还是 Inactive,以及你用来丢弃在单个页面上的短代码,牢记那个短代码列,它解决了以后免费的页面定位问题。

步骤 3:命名弹出窗口并打开激活开关

单击 添加新弹出窗口。一个小对话框以两个字段打开。

给它一个你六个月后就会认出的名字,然后转动 激活 on。left inactive 的弹出窗口永远不会在前端渲染,即使你发布它,即使你通过短代码放置它,这是完成弹出窗口显示任何内容的最常见原因。

4步:设置弹出窗口出现的位置

切换到 条件 同一对话框中的选项卡。

在免费版本上,您会得到一条规则: 包括 → 整个网站。其他规则(首页、单数、存档、搜索、404)、排除类型和添加条件按钮是 Pro,如果您只想要一个页面上的弹出窗口并且您保持免费,请跳到前面 短码法.

现在点击 使用元素器编辑.

5步:从模板或空白画布开始

Elementor自己的添加按钮旁边有一个紫色主插件按钮小编打开一个空弹窗框,在掉落区域有一个紫色主插件按钮,点击它打开弹窗模板库。

25个弹出设计在那里, 所有这些都可以在免费插件上, 涵盖销售, 产品发布, 季节性优惠, 即将推出和关于页面。悬停一张卡片, 然后单击 插入 要导入。所有内容都导入为普通 Elementor 元素,因此您可以重写文本并立即交换颜色。

同样的库想法贯穿于插件中。如果您也想要现成的页面和部分,那就是 主插件模板库.

6步:设计弹出窗口

喜欢构建自己的?像在任何页面上一样将小部件拖到画布上。标题、文本编辑器和按钮涵盖了典型的选择加入。

这里有一些值得做的事情:

• Keep the copy to one promise。a headline, one line of support text, one button。
• Top端的设备图标查看平板电脑和手机视图,640px弹出在笔记本电脑上没问题,在手机上局促。
• Email 捕获,请从您已经运行的表单插件中掉入表单小部件。联系表单 7 和 MC4WP 均可在弹出窗口内工作。
• 80岁以上都 主插件小部件 弹出窗口内也可用,因此倒计时器和定价表的工作原理与页面上的相同。

7步:选择触发器

单击 MA 弹出设置 top工具栏里。是左边的第四个图标,那个看起来像一个带齿轮的文档。较旧的教程指向左下角的一个齿轮,这是它之前元素4的居住地。

列出了七个触发因素。 在页面加载 是自由的,并且 页面加载后延迟(秒) 0.1步接受0到60的任何东西,两到三秒是一个明智的起点,在缓慢的连接上立即解雇会惹恼人,超过十秒的任何东西通常都会完全错过访客。

在它下面, 再次显示延迟 control 等待多久, 才能再次向关闭它的人显示弹出窗口, 免费为您提供无延迟,1,3和5分钟, Pro将其扩展到数小时, 数天,一个月, 和不要再显示。

禁用页面滚动 是免费的,默认是,它将页面锁定在弹出窗口后面。

8步:设置布局、位置和动画

打开 布局 section 在同一个面板中。它全部是免费的。

显示为 在三个形状之间切换弹出窗口:

• 弹出模式:大多数人所说的弹出窗口的中心框。
• 通知栏:固定在页面顶部的条带,适合公告和发货优惠。
• 全屏:接管视口,最好是单一强势报价。

Modal布局然后得到九个位置,从中心中心到右下角,以及大约70个入口动画。在400ms处淡入是安全默认值。The 弹出设置参考 如果您想要完整的地图,请列出每个控件。

9步:在前端发布并测试

击 发表然后在私人窗口中打开您的站点。这是页面加载后两秒弹出的弹出窗口,在仅使用活动状态的免费 Master Addons 插件的免费 Elementor 上。

Test 在私有窗口而不是编辑器预览中,编辑器故意抑制弹出窗口,而一个普通的浏览器选项卡可能正在为您提供一个缓存的页面。

仅在一页上免费显示弹出窗口

Page级显示条件是Pro,短码是免费的,从另一个方向达到相同的结果。

Popup Builder 列表中的每个弹出窗口都带有类似的短代码 Elementor 中粘贴到一个页面、一个帖子、一个小部件区域或一个短代码小部件中,并且那个弹出窗口单独加载到该页面上,这样放置完全跳过显示条件。

要知道两个规则:

• 弹出窗口必须发布及其 激活 toggle必须打开。一个不活动的弹出窗口呈现任何东西,短代码与否。
• Shortcode 在你粘贴的地方没有输出可见的标记,弹出窗口打印在页脚中,根据它的触发器打开。

因此,一个免费的、特定于页面的弹出窗口如下所示:将条件保留在整个站点上,并将短代码删除到应该具有该条件的一页上。

七个弹出触发器,以及哪些是免费的

Exit Intent 本质上只属于桌面,手机没有光标可以离开窗口,因此触发器没有什么可以检测的,在提交错误之前先在桌面浏览器上测试一下。

免费的页面加载触发器有自己的 设置文档 如果您想要简短的版本。

如何在单击按钮时触发 Elementor 弹出窗口

这是页面加载后请求最多的触发器,也是人们最常尝试使用 JavaScript 伪造的触发器。使用 Master Addons Pro,它是一个文本字段。

1. 照常设计和保存弹出窗口。
2. 在 MA 弹出设置,设置 打开弹出窗口 到 在点击.
3. 在 按选择器打开例如,键入包含点的选择器 .open-newsletter-popup.
4. 编辑应该打开它的按钮。转到 高级 → CSS 课程 和类型 open-newsletter-popup的,这次 没有 的点。
5. 更新两者,然后在前端进行测试。

3、4步的点不匹配导致大部分“my点击触发器不做任何”报告我们看到,触发器字段采用CSS选择器,Elementor字段采用类名。

选择器不限于按钮,任何元素都可以给作品一个类:一个容器、一个标题、一个图标、一个图像,也可以针对一个具有属性选择器的现有链接,例如 a[href="#pricing-popup"].有相关 弹出窗口触发小部件 用于在弹出窗口本身内放置关闭和重定向操作。

Pro 的情况下,四行 JavaScript 执行相同的工作,那段代码在下一节。

元素或弹出窗口/显示事件,以及什么取代了没有 Pro 的事件

elementorProFrontend.modules.popup.showPopup 和 elementor/popup/show event 都属于 Elementor Pro。弹出模块在。 elementorProFrontend object,所以在免费安装上,该对象未定义,事件永远不会启动。没有片段将其带回,因为会发出它的代码在 Pro 插件中。

免费的 Master Addons 插件提供了自己的 API,涵盖相同的领域。

主插件暴露了一个名为"全局"的 JltmaPopups 在任何存在弹出的页面上。这里是映射:

每个弹出窗口都打印有 DOM id jltma-popup-id-<post ID>。post ID 是弹出生成器列表屏幕上的短代码中的数字, 要从自己的代码打开弹出 441:

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

将其连接到点击,这是点击触发器的免费替身:

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

并再次关闭它:

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

三件事值得关注:

• getLocalStorage() 返回 false 直到弹出窗口在页面上初始化,这发生在 DOM 准备就绪。在里面运行您的代码 jQuery(function ($) { ... }) 而且你很好。
• Popup 必须位于页面上才能使任何一个工作,要么它的条件包含该页面,要么你将其与短代码一起放置。
• Elementor编辑器内故意跳过脚本,所以在前端进行测试。

为什么元素/弹出窗口/显示两次火灾

Elementor Pro 上,运行两次的处理程序几乎总是意味着它被绑定两次:一次打开 elementor/frontend/init and 再次在一个片段或主题文件中,或者在出现多个时每个弹出实例一次。用标志保护它,或者绑定 .off('elementor/popup/show').on(...) rebinding 之前。元素人自己的 弹出事件文档 列出完整的活动签名。

Master Addons 等效项没有文档事件可以进行双重绑定,因此问题不会继续。您调用 openPopup() 直接在您想要打开弹出窗口的那一刻。

为什么您的 Elementor 弹出窗口未显示

粗略地排列了每个原因的频率:

1. 激活已关闭。 打开主插件 → 弹出生成器并检查状态列。不活动意味着任何地方都不会渲染,包括短代码。
2. 弹出窗口仍然是一个草稿。 Elementor 中保存设计与发布弹出窗口不同。
3. 您正在编辑器预览中进行测试。 Popups 在那里被设计压制。使用私有窗口。
4. 缓存。 Purge缓存插件和CDN,然后在私有窗口中重新加载,缓存的HTML页面将不包含新发布的弹出窗口。
5. 再次显示延迟已经被解雇。 关闭弹出窗口后,插件会在浏览器存储中存储时间戳。重复测试时清除站点数据或切换浏览器。
6. 点击选择器上的点不匹配。 触发字段想要 .my-class中,元素 CSS 类字段想要 my-class.
7. 通过电话退出意图。 没有光标,所以没有什么可以点燃。仅限桌面。

主插件与 Elementor Pro 弹出窗口

如果弹出窗口是您想要的唯一 Pro 功能,则免费的 Master Addons 构建器加上一个短代码可以覆盖它。如果您想要退出意图或单击触发器而不写入 JavaScript,请比较 主插件定价 反对 Elementor Pro 更新,因为 Master Addons 许可证也带来了 主题构建器 並 小部件生成器 与它。

常见问题

相关阅读

• 主插件弹出生成器中, 列出每个设置的功能页面
• WordPress 的最佳弹出构建器插件的,如果你想比较工具
• 弹出设置和选项的, 完全控制参考
• WordPress.org 上的主插件的, 下载和支持论坛