如何通过Divi 5的互动构建弹出窗口（免费下载）

弹出窗口是吸引网站上关注和推动参与度的绝佳工具。无论您是想增加电子邮件列表，推广特殊报价还是指导访问者采取特定操作，精心设计的弹出窗口都可以使一切与众不同。随着Divi 5交互的发布，创建自定义，动态的弹出窗口从未如此简单。

在这篇文章中，我们将使用Divi 5的互动功能引导您创建弹出窗口。让我们潜入！

什么是Divi 5互动？

Divi 5交互是一项集成到视觉构建器中的新功能，旨在使网站更具动态和引人入胜。它允许您根据用户操作或页面事件（例如点击，徘徊或滚动）创建自定义动画和响应。与静态设计不同，交互使您可以通过Divi熟悉的界面来创建弹出窗口，切换，鼠标运动和滚动效果。

订阅我们的YouTube频道

Divi互动的关键组成部分

Divi 5中的每一个互动都由三个核心组成部分组成：

• 触发器：启动交互的事件，例如单击，悬停或输入视口的元素。
• 效果：激活触发器时发生的动作，例如切换可见性，应用预设样式或更改属性。
• 目标：受相互作用影响的特定元素，该元素可以是同一元素，另一部分，行，列或模块在其管理标签标识的页面上。

这些组件可以一起工作，使您可以使用简单的无代码接口创建复杂的交互。

为什么您应该使用互动来创建弹出窗口

Divi 5互动提供了构建弹出窗口的几个优势：

• 您不需要任何插件：与传统的弹出式构建器不同，Divi 5交互直接在视觉构建器中构建，从而消除了对第三方插件的需求。
• 位于Visual Builder中：您可以使用Divi熟悉的界面，模块和样式选项来构建弹出窗口，从而使任何技能水平的用户都很容易。
• 多功能选项和效果：将弹出窗口与其他交互作用（例如基于滚动的动画或鼠标移动效果）相结合，以创造独特的引人入胜的体验。
• 完全控制：自定义触发器，效果和目标，以为您的特定目标创建弹出窗口，而无需编写代码。

在Divi 5中建立弹出式弹出窗口的分步指南

在Divi 5中创建弹出窗口非常简单，使您的网站现有设计变得容易。在本节中，我们将演示创建弹出窗口以匹配我们的预制布局之一，向您展示如何样式的弹出窗口的容易，并将交互设置以以定时的延迟来显示弹出窗口。

1。安装布局包

对于本教程，我们将从我们的布局包设计之一开始，然后构建具有相同样式的弹出窗口来简化事物。为此，请单击视觉构建器左上角的 +图标。

出现对话框时，请从可用选项中选择预制布局。

单击在线学习布局包装缩略图以突出显示可用的页面。

选择着陆页设计，然后单击使用此布局将其加载到视觉构建器中。

导入布局包的最后一步是选择是否导入预设。选择后，单击导入按钮。

2。为弹出窗口创建一个部分

现在，将布局包导入，我们必须在页面底部为弹出窗口创建一个新部分。滚动到页面末尾并添加新部分。

单击图标以插入新行。在偏移列下选择第二个选项。

3。设计弹出窗口

现在，我们可以开始在弹出窗口中添加内容。当出现“插入模块或行”对话框时，单击以添加标题模块。

输入“想要15％的折扣？”在“内容”选项卡下的标题字段中。

为了在整个页面上保持一致的设计，您可以使用Divi 5的属性功能来复制另一个标题模块的设置为我们的弹出窗口。在上面的部分中，将悬停在标题模块上，右键单击，然后单击复制属性。

接下来，将悬停在我们刚刚创建的标题模块上，右键单击，选择粘贴属性，然后单击粘贴文本设计属性。这将粘贴其他标题模块的样式，从而允许设计一致性。

在标题模块下，添加一个新的文本模块。

与标题模块一样，在上面的部分中找到文本模块，右键单击，然后选择“复制属性” 。从那里，单击新的文本模块，点击粘贴属性，然后粘贴文本设计属性。

您可以将文本添加到文本字段中，也可以使用Divi AI为您生成。

接下来，我们将在文本模块下添加电子邮件选择模块。

上面的一节具有电子邮件选择模块，因此您可以复制其属性并将其粘贴到我们添加到弹出窗口的新电子邮件选择中。

最后一步是在弹出窗口的右列中添加图像。找到图像模块，然后将其添加到我们布局的第二列中。

上传图像并将其添加到图像模块中。至此，您的部分看起来应该与此相似：

4。创建一个关闭按钮

现在，我们的弹出窗口的设计已经到位，我们需要在其上方添加新的一行，以添加一个关闭的按钮图标。这将使您的访问者在方便的情况下关闭弹出窗口。单击绿色 +图标以添加新行。

当出现“插入行”对话框时，单击“等价”列下的单列布局以将其添加到该部分。

单击以将图标模块添加到行中。

从可用选项中选择关闭图标。可以通过将“关闭”输入图标列表上方的搜索框来轻松找到。

切换到“设计”选项卡并输入以下设计设置：

• 图标颜色： ＃5344B9
• 图标大小： 36px
• 对准：对

最后一步是将包含我们弹出窗口内容的两列行上方移动。使用图层视图将行重新排列到正确的顺序中。在那里，将部分重命名为“弹出”部分。

5。调整该部分的设置

在创建我们的交互之前，我们必须确保弹出窗口的尺寸适当尺寸，以适应浏览器的宽度。我们不希望它是一个全宽的弹出窗口，因此请导航到设计以进行一些调整。展开尺寸下拉菜单以显示设置。

在宽度范围内，输入80％的宽度。接下来，将部分对齐选项设置为中心。

在边界下，设置一个10px边框半径。

我们还将添加一个盒子阴影，以便我们的弹出窗口在其余内容上脱颖而出。找到盒子阴影下拉菜单并将其展开。在盒子阴影下，选择预设1 。

最后，前往“内容”选项卡，为我们的弹出部分的背景添加颜色。

6。创建互动以显示弹出窗口

有了设计，我们可以设置互动。我们将弹出部分设置为显示在页面上的用户降落后5秒钟。导航到本节的高级选项卡，并找到“交互”下拉菜单。单击 +添加互动以开始。

从可用选项中选择加载。此设置将允许弹出窗口出现在页面加载中。

出现“编辑交互对话框”时，输入以下设置，然后单击“保存：

• 管理标签：弹出互动
• 触发事件：加载
• 效果行动：显示元素
• 目标模块：部分（弹出）
• 时间延迟： 5秒

接下来，我们需要为关闭按钮添加一个交互。在弹出部分的第一行中选择图标模块。导航到高级选项卡，单击+添加交互，然后输入以下设置并保存：

• 管理标签：关闭弹出窗口
• 触发事件：单击
• 效果动作：切换可见性
• 目标模块：部分（弹出）
• 时间延迟： 0

7.通过Divi 5的可自定义响应式断点测试和完善您的弹出窗口

在进行最后一步之前，最好使用Divi 5的可自定义响应性断点来确保您的弹出窗口在所有屏幕尺寸上看起来都不错。在Divi 5中，现在有7个断点可供选择。

默认情况下，仅启用了三个。拥有7可以使您可以在更多断点上测试弹出窗口，从而确保具有任何屏幕尺寸的无缝用户体验。要允许所有7个，请单击Admin Bar顶部中间的Ellipsis菜单。从那里，通过将其切换为所有断点来启用所有断点。

Divi 5的新Flexbox布局系统使您可以轻松进行更改，以确保在任何设备上弹出窗口看起来都很好。例如，您可以使用Divi 5的更改列结构字段来更改较小设备上显示的列数。此选项将一键单击将内容堆叠在移动设备上。

8。设置显示选项

为了使您的弹出窗口正确显示，我们需要调整弹出部分的可见性，定位和Z索引。这将使您的弹出窗口可以显示您想要的位置，将其隐藏到该显示的时间，并确保它显示在页面其余部分内容之上。

导航到弹出部分的高级选项卡。找到可见性下拉菜单。单击以禁用所有视图（电话，平板电脑和桌面）的部分。

接下来，单击位置下拉菜单。设置固定的位置并选择偏移原点。最后，添加一个99999的Z索引，以确保弹出窗口显示在页面其余部分内容上方。

所有设置到位后，保存页面并在另一个选项卡中预览。页面加载后应在5秒内显示弹出窗口。您还应该能够使用我们创建的密切相互作用来关闭弹出窗口。

高级弹出自定义选项

Divi 5互动使您可以将弹出窗口提升到一个新的水平，具有高级功能，例如显示条件，效果结合，甚至使用Divi AI来生成弹出窗口。让我们看一些可以使弹出窗口更先进的方式而无需自定义CSS或JavaScript片段。

显示条件

您可以使用Divi的条件选项根据用户行为（例如用户角色）来显示弹出窗口。例如，您只能显示弹出窗口以登录用户以鼓励注册。

您还可以根据页面访问启用条件显示弹出窗口。例如，如果特定用户已经访问了页面，则应禁用弹出窗口。您还可以将其设置为仅当用户未访问页面时显示。这对于通过其他页面找到您的网站并单击“主页”的访问者很有用。

结合效果

您可以通过基于滚动的动画或鼠标移动效果来增强弹出窗口。可以通过选择其他触发器和效果来添加这些作为其他交互。交互可以组合，并且您可以创建的数字没有限制。例如，您可以使用鼠标移动效果轻松地在弹出窗口中的图像上应用交互。

Divi AI集成

通过使用Divi AI生成布局来加快设计过程。您可以指示Divi AI创建特定的部分，包括您可以转换为弹出窗口的部分。在下面的示例中，我们要求Divi AI为商业教练创建一个布局，并配有CTA部分，我们可以变成弹出窗口。

有效弹出窗口的最佳实践

为了确保您的弹出窗口改善用户体验并取得成果，请考虑以下最佳实践：

1。保持用户友好

避免使用定时延迟（5到10秒）而不是立即触发器的侵入性弹出窗口。这使用户有时间在提示之前与您的内容互动。太早启动弹出窗口可能会分散注意力，导致用户关闭弹出窗口，并可能错过促销，新闻通讯注册或您希望他们采取的其他重要动作。

在弹出窗口上设置定时延迟，以避免失去用户参与度。

此外，始终包含一个清晰，易于识别的关闭按钮，以便用户可以忽略弹出窗口并保持积极的浏览体验。

2。优化性能

性能优化对于有效的弹出窗口至关重要。为了快速保持加载时间，请最大程度地减少重型动画或大型，不优化的图像。选择压缩的图像并限制复杂的效果，以确保敏捷，无缝的体验，尤其是对于较慢的连接或移动设备的用户而言。这种方法提高了用户满意度，并支持更好的参与度和转化率。

3.设计弹出式弹出式标准的弹出窗口

可访问性是使所有用户包含您的弹出窗口的另一个关键考虑。始终将描述性的Alt文本添加到图像中，以帮助屏幕读取器，确保文本和背景之间的高对比度可读性，并使用16px或更大的字体尺寸可容纳视觉障碍的用户。

这些实践有助于确保多样化受众可以访问您的弹出窗口，并与Web可访问性标准保持一致。

4。在所有屏幕尺寸上进行测试

最后，在所有屏幕尺寸上彻底测试您的弹出窗口，以确保在所有设备上都有一致的体验。利用Divi 5的可自定义响应断点，以确保您的弹出窗口看起来很棒，并且可以按照台式机，平板电脑和智能手机的方式发挥作用。

密切注意关闭按钮，以确保其工作原理，并且该文本在较小的屏幕上可以清晰。此外，根据需要检查间距，尺寸和布局，以提供抛光，专业的外观。

下载文件

免费下载

加入Divi新闻通讯，我们将向您发送终极Divi着陆页布局包的副本，以及大量其他惊人和免费的Divi资源，提示和技巧。跟进，您将立即成为Divi大师。如果您已经订阅，则只需在下面的电子邮件地址中输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获取免费的每周Divi布局包！

与Divi 5互动创建弹出窗口

Divi 5的互动功能使您可以通过直接在Visual Builder中构建自定义，引人入胜的设计来轻松创建弹出窗口。结合触发器，效果和目标，您可以构建弹出窗口，以吸引注意力并驱动转换，同时无缝匹配网站的设计。探索其他功能，例如模块组和嵌套行，以创建更具动态的弹出布局。

您准备好尝试Divi 5吗？下载最新的Divi 5 Public Alpha，实验互动，并在下面的评论部分中分享您的想法。请在我们的社交媒体渠道上与我们分享您的创作，并访问我们的博客，以获取使用Divi 5的创新功能的更多教程。我们期待看到您创造的东西！