Divi 插件亮点 - Divi Overlays

Divi Overlays 是 Divi 的插件，DiviLife 是社区成员 Tim Strifler 的第三方 Divi 开发公司。 它允许您使用 Divi Builder 轻松创建弹出窗口。 它不仅仅是一个模态。 您可以创建全屏叠加，并使用 Divi Builder 在叠加中添加您想要的任何类型的内容，然后用页面上的任何内容触发它，包括按钮、链接、图像等。您可以调整背景颜色、字体颜色，然后选择开场动画。

叠加层可以包括表格、定价表、购物车、视频、图像、下载链接、地图等等。 您甚至可以将其设置为在页面加载时打开叠加层。 它们使您无需等待页面加载即可显示其他内容。

使用 Divi Builder 的能力当然意味着您可以访问每个模块和设置来创建您的叠加层。 这意味着您可以访问近 40 个模块，并且可以使用来自其他插件的短代码。 通过访问此数量模块，您只会受到您的想象力的限制。

下载： Divi Overlays 下载

在本概述中，我将介绍 1.1 版，其中包括客户要求的一些新功能。 最后，我将介绍一些您可以在 2.0 版中看到的功能。 对于示例，我使用的是多用途线框套件 vol。 1. 让我们深入了解……

安装

像任何高级插件一样上传、安装和激活插件。 激活后，您需要输入许可证密钥。 转到设置并在仪表板中选择Divi Overlays Activation 。

输入 API 密钥和电子邮件（来自您在 DiviLife 的帐户），然后选择Save Changes 。 现在您已准备好开始创建叠加层。

添加新的 Divi 叠加层

叠加层是与您的内容分开创建的，然后使用简单的代码从您的内容中打开。

要创建叠加层，请转到Divi Overlays并在仪表板中选择Add New 。 从这里您可以选择使用 Divi Builder。 这与使用 Divi Builder 的任何普通页面或帖子的工作原理相同，包括特殊的 Divi 插件和模块，您甚至可以使用 Divi Leads 运行 A/B 测试。 他们甚至在一个全局模块中工作。 您还可以导入和导出您的叠加层。

从右上角的下拉框中选择叠加动画和设置。 在 Divi Builder 下是背景和字体颜色的选择。

右侧添加了一些设置。 一个名为 Divi Overlay Animation 的框包括一个下拉框，您可以在其中从 11 个动画中进行选择。 这决定了叠加在屏幕上的显示方式。

添加了一个复选框以防止主页面在屏幕上显示覆盖层时滚动。 这使用户保持在屏幕上的相同位置，因此当他们关闭覆盖时，他们知道他们在哪里。 如果他们单击多个按钮之一打开叠加层，这将特别有用。 这样他们就知道他们点击了哪个按钮并且不会失去他们在屏幕上的位置。

我添加了一个视频模块并为叠加动画选择了精灵，并选择了防止主页滚动。

现在我已经创建了覆盖层，我可以在页面上使用它。 要做到这一点，到航空维修叠加在仪表盘和选择航空维修重叠，以查看可用的叠加列表。 要使用覆盖复制您要使用的代码并将其粘贴到适当的位置。 让我们来看看如何详细地做到这一点。

链接是使用 CSS ID 创建的。 复制 CSS ID 并添加一个开始 <a id= 和结束 </a> 标签，如示例中所示。

在这个例子中，我使用了一个登陆页面。 我想向文本、应用商店徽标、手机图像添加触发器，创建一个按钮，并在菜单中放置一个链接。

文字链接

复制内容简码并将其粘贴到页面上的代码或文本模块（任何接受简码的模块）中。 我将其粘贴到代码模块中。 您可以在此模块中放置任意数量的 Divi Overlay 短代码。 将模块放在哪里并不重要。 我建议您进行测试以确保该模块不会影响您的布局。

我想使用文本 WATCH A DEMO 作为打开视频的链接。 为此，请从仪表板屏幕的叠加列表中复制 CSS ID。

将代码粘贴到您的文本模块中，并像这样设置文本格式：

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

在这种情况下，文本已经嵌入到一些 HTML 中，但没关系。 只需将代码放置在 HTML 中的正确位置即可。

文本现在是蓝色的，表示它是一个链接。

当我单击文本时，我会看到我在叠加层中放置了链接的视频。 叠加层以我选择的动画打开。

图片链接

有两种方法可以将 CSS ID 添加到图像。 您应该使用的方法取决于图像在您的内容中的放置方式。 这里有两个例子：

文本模块

我想让应用商店图片可以点击，但我希望它提供一些选项和信息，而不是带你去应用商店。 这需要一个新的覆盖层，这也需要代码模块中的新短代码。

现在，当我单击应用程序徽标时，我会看到一个覆盖图，其中包含指向两个不同应用程序商店的链接。 为了更好的 UX/UI，我会更改按钮的图形，但这显示了在保持内容干净的同时提供多个选项的潜力。 在这个例子中，我将覆盖背景设置为白色，不透明度为 90，字体颜色为深灰色。

图像模块

在上面的示例中，我将代码添加到 HTML 中，因为图像放置在文本模块中。 另一种选择是将图像放置在图像模块中并使用自定义 CSS选项卡中的 CSS ID。

在此布局中，移动电话位于图像模块中。 我将添加 CSS ID，以便打开视频叠加层。

在链接 URL 中使用 #open-overlay（或带有 # 符号的类似文本）。 现在我可以单击图像并打开叠加层。

按钮链接

将覆盖链接添加到按钮与将其添加到图像相同。 请记住将短代码添加到代码模块中。

将 # 文本添加到按钮的 URL。 我像以前一样使用 #open-overlay 因为它是描述性的（我从 Tim Strifler 那里偷来的，但不要告诉他）。

将 CSS ID 代码添加到自定义 CSS选项卡。

就是这样！ 新按钮现在可以打开联系表单。

菜单链接

要创建菜单链接，请复制菜单 ID并转到外观、菜单，然后选择要添加链接的菜单并加载它。 （有关更多信息，请参阅本文如何在 WordPress 中创建自定义菜单结构）。

选择右上角的屏幕选项，然后选中标有链接关系 (XFN)的框。

选择自定义链接。 添加 # 符号作为链接，添加您希望它显示的文本，然后选择添加到菜单。 将菜单 ID 粘贴到链接关系字段并保存菜单。 如果您尚未将菜单分配到“菜单设置”下的显示位置，请务必将其分配给某个显示位置。 在本例中，我将其设置为Primary Menu 。

菜单项现在出现在菜单结构中。 单击它将打开叠加层。 这具有在导航结构和站点范围内提供 CTA（号召性用语）的优点。

小工具

该插件还包括一个新的小部件区域。 使用小部件和任何其他方法的区别在于您放置短代码的位置。 而不是一遍又一遍地将短代码放置在模块中，您可以将其放置一次，使其成为全球性的。 然后，您可以从任何页面上的任何项目、侧边栏、主菜单或页脚菜单触发它。

这是我正在使用的多用途线框套件 vol 中的页面。 1. 我想让按钮可点击，以便它会在叠加层中打开视频。 我将我的短代码添加到小部件区域（通过将它们放置在文本小部件中）并将 CSS ID 添加到页面上的图像。

小部件中的短代码甚至在小部件不可见的情况下也能工作。 我不必在页面上放置侧边栏或在页脚中放置任何小部件。 它之所以有效，是因为这个新的小部件区域在幕后加载。 如果您在此小部件区域中放置其他小部件，它们将显示在页面的左上角。 默认情况下，短代码不显示为文本，因此小部件可以保持不可见。

关闭覆盖

可以使用角落中的 X、单击覆盖层的背景或按 Esc 键关闭覆盖层。

另一种选择是将关闭类添加到覆盖中的链接。 使用此方法，您可以创建关闭按钮或文本。 这允许您向 CTA 添加取消按钮或使关闭按钮更加明显。

close 类如下所示：

class =“close-divi-overlay”>不，谢谢

进入 2.0

以下是一些值得期待的功能：

延时功能将允许在页面加载后的设定时间打开叠加层，让读者在自动打开叠加层之前看到您的内容一段特定的时间。

像素功能将根据他们滚动的像素数或他们滚动的页面百分比打开叠加层。

当读者选择后退按钮或将光标放在地址栏上时，另一个选项将打开覆盖。

文档

DiviLife 网站上提供了文档。 它包括您可以使用插件的各种方式的概述和示例。 文档包括文本、视频和示例代码。

价钱

Divi Overlays 是一个高级插件。 在单个站点上使用 15 美元，三个站点 29 美元，无限站点 59 美元，终身无限许可证 129 美元。 每个许可证都包含所有核心功能和文档。 前三个包括一年的更新和支持，而最后一个包括终身更新和支持。

最后的想法

Divi Overlays 是使用 Divi Builder 创建叠加层的好方法。 Divi Builder 允许您使用 Divi 模块或来自其他插件的短代码将几乎任何类型的内容添加到叠加层。 很难想象 Divi Overlays 无法创建的叠加层。 在需要的地方添加代码确实需要几个步骤，但这很容易，文档会引导您完成它。 回报远远超过学习使用它所需的几分钟。

我们希望听到您的意见！ 您是否尝试过 Divi Overlays？ 请在评论中告诉我们您的体验。

精选图片来自brickclay/shutterstock.com