关于Divi 5互动所需的一切

如果您想在没有插件或自定义CSS的情况下以动态的弹出式，切换和滚动效果吸引访客，您会喜欢最新的Divi 5 Public Alpha功能版本之一。 Divi 5中的交互使Divi用户可以在视觉构建器内部创建引人入胜的交互式元素。在这篇文章中，我们将深入了解您需要了解的有关Divi 5交互，探索其功能，一些技巧和现实世界应用程序的所有信息，以帮助您熟悉该功能。

重要说明：Divi 5目前在公共alpha中，并针对新网站进行了优化。由于持续的开发以及与旧模块的潜在兼容性问题，我们不建议迁移现有的4个站点。请继续关注更新，因为Divi 5临近完整发布！

让我们开始。

什么是Divi 5互动？

Divi 5交互是一种构建器，可让您直接在视觉构建器中为网站创建交互式元素。此功能不仅仅是弹出式构建器，还可以创建一系列自定义交互，从弹出窗口到滚动触发的动画，而无需触摸一系列代码。

订阅我们的YouTube频道

无缝集成到任何模块，列，行或部分的高级选项卡中，相互作用提供了无限的灵活性来构建引人入胜的，以用户为中心的体验。

Divi 5相互作用的核心组成部分

Divi 5互动的核心是三个关键组成部分，可以将您的设计融为一体：

触发事件

触发器是启动交互的事件。示例包括用户操作，例如单击按钮或悬停在图像上，基于滚动的事件，例如到达页面上的特定点或基于时间的触发器，例如页面加载后的延迟。

可用触发器包括：

• 单击：用户单击按钮，图像或其他元素以启动交互。
• 鼠标输入/出口：用户徘徊或留下元素。
• 视口输入/退出：当用户滚动时，元素进入或退出屏幕的可见区域。
• 负载：当页面加载时，交互开始，并以可选的时间延迟。

例如，您可以在加载页面后5秒触发弹出窗口，或在用户滚动时对元素进行动画触发。

效果行动

激活扳机后，效果确定发生了什么。选项包括显示或隐藏元素，以淡出淡出，秤，旋转或应用预设过渡以进行一致样式进行动画动画。

• 切换可见性：在可见和隐藏之间切换一个元素。
• 显示/隐藏元素：使元素可见或隐藏。
• 切换预设：打开或关闭预设的设计元素，具有更换现有预设的能力。
• 添加预设：用于将预设样式类添加到元素中。您也可以替换现有的预设。
• 删除预设：用于从元素中删除预设样式。
• 切换属性：添加或删除元素的HTML属性，例如CSS类或CSS ID。
• 添加属性：这添加了当前不存在的特定HTML属性值。
• 删除属性：删除应用于元素的任何属性。
• 切换cookie：添加或删除cookie值。例如，当出现弹出窗口时，您可以设置cookie，并将其设置为仅使用Divi 5的条件设置出现。
• 添加cookie：添加一个可以在用户浏览器中定义的cookie值。
• 删除cookie：删除先前指定的cookie。
• 滚动到元素：允许该页面平滑滚动，将目标元素视为视图。
• 镜像鼠标运动：允许您设置遵循用户鼠标运动的移动。选项包括翻译，比例，不透明度，倾斜或旋转。您还可以调整运动的灵敏度。

针对一个模块

目标是交互影响的元素，例如模块，行，列或整个部分。您可以针对页面上的元素本身或其他元素，从而提供灵活性来创建复杂的交互。

Divi 5互动的关键特征

Divi 5交互在其用户友好和多功能功能集中脱颖而出：

• 无代码接口：通过任何元素的高级选项卡中的直观接口配置触发器，效果和目标，而无需使用任何CSS或JavaScript。
• 各种交互类型：创建弹出窗口以进行铅捕获，为常见问题解答，为英雄部分的卷轴触发淡出的淡出或类似于投资组合的视差鼠标效果。
• 轻巧的性能：直接建立在Divi 5中，相互作用消除了对第三方插件的需求，减少站点膨胀并改善了负载时间。
• 动态触发组合：将多个触发器（例如滚动事件与时间延迟）组合在一起，用于复杂的交互作用，例如用户向下滚动后出现的弹出窗口。
• 响应式设计：使用Divi 5的可自定义响应性断点自定义桌面，平板电脑和移动交互。

如何访问和使用Divi 5互动

由于其在视觉构建器中的集成，在Divi 5中创建互动非常简单。请按照以下简单的步骤入门：

首先打开Divi 5中的页面。选择要添加交互的模块，行，列或部分。例如，在页面上选择一个图像模块。

导航到高级选项卡，然后单击“交互”下拉列表。单击其中的+添加交互按钮。

我们希望为我们的图像创建倾斜/变换鼠标验效果。为此，我们需要创建两个交互 - 一个用于图像，另一个用于包含图像的列。首先在管理标签中给您的互动一个名称，然后输入以下设置：

• 触发事件：鼠标输入
• 效果行动：镜像运动
• 目标模块：图像
• 时间延迟： 0
• 运动类型：翻译
• 灵敏度： 10

所有设置到位后，单击“保存交互”按钮继续。

接下来，我们将在列上创建变换交互。再次单击 +添加交互。输入以下设置以创建交互：

• 管理标签：倾斜列
• 触发事件：鼠标输入
• 效果行动：镜像运动
• 目标模块：列
• 时间延迟： 0
• 运动类型：倾斜
• 灵敏度： 30

输入设置后，您的互动应该看起来像这样：

使用“预览”按钮查看您的交互。

您的页面将出现在新标签中，使您可以预览和测试交互。

您可以创建的互动类型

以下是一些实用示例，以展示Divi 5交互的多功能性，并配有触发器，效果和现实世界应用。

欢迎新访客弹出窗口

弹出窗口非常适合敦促游客报名参加新闻通讯，促销或活动。使用Divi 5互动，您可以创建一个欢迎的弹出窗口，该弹出窗口在页面加载后出现。

要创建此交互，您需要为弹出窗口创建一个部分并分配以下设置：

• 管理标签：弹出窗口
• 触发事件：加载
• 效果行动：显示元素
• 目标模块：部分（弹出） - 在创建交互之前，请确保命名您的部分
• 时间延迟： 5秒

我们还需要创建一个交互以关闭弹出窗口。最简单的方法是将图标模块添加到弹出部分的右上角并分配以下设置：

• 管理标签：关闭按钮
• 触发事件：单击
• 效果动作：隐藏元素
• 目标模块：部分（弹出）
• 时间延迟： 0

要控制弹出窗口的位置，请使用Divi 5的位置设置。在“高级”选项卡中，找到位置下拉菜单并将位置设置为固定。从那里，选择您希望弹出窗口出现在页面上的位置。在此示例中，我们将其设置为中心。设置Z索引也是一个好主意，以便弹出窗口出现在页面上的其他所有内容之上，例如99999 。

最后一步是将弹出窗口的可见性设置为隐藏在所有设备上。为此，请导航到“高级”选项卡，滚动到可见性下拉菜单，然后切换所有选项以隐藏所有设备上的弹出部分。

切换元素的可见性

切换非常适合创建可折叠的内容部分，例如常见问题解答，手风琴菜单，定价表或服务。它们允许用户单击扩展或折叠内容，以保持页面清洁和交互式。例如，您可以揭示仅在单击按钮后才可见的完整服务列表。

为了创建此效果，您将在要设置的按钮上设置一个交互作用，以作为部分的触发器。输入以下互动设置：

• 管理标签：显示服务
• 触发事件：单击
• 效果行动：显示元素
• 目标模块：部分（揭示服务）
• 时间延迟： 0

接下来，设置锚点链接以打开部分。打开按钮的设置，然后在内容选项卡的“按钮链接URL”字段中输入#Services 。

单击按钮下方的功能部分，然后导航到高级选项卡。通过在CSS ID和类菜单下的CSS ID字段中添加服务来设置锚点。

在“高级”选项卡中，您还需要将该部分的可见性设置为隐藏，就像我们在弹出窗口中一样。

小鼠运动效应

Divi 5交互使您可以在用户徘徊在设计元素上时创建动态鼠标运动效果。例如，您可以将交互结合起来，在标题和父列中创建倾斜效果。

您需要首先创建标题的交互，以完成此交互。在图像的高级选项卡中输入以下设置：

• 管理标签：动画标题
• 触发事件：鼠标输入
• 效果行动：镜像运动
• 目标模块：文本
• 时间延迟： 0
• 运动类型：倾斜
• 灵敏度： 30

输入设置时，它们应该看起来像下面的屏幕截图。

接下来，通过使用以下设置在包含标题的列上设置交互：

• 管理标签：列倾斜
• 触发事件：鼠标输入
• 效果行动：镜像运动
• 目标模块：列
• 时间延迟： 0
• 运动类型：倾斜
• 灵敏度： 50

完成后，您的设置应与下面的屏幕截图相似。

基于预设的互动

您可以将Divi 5交互与预设旁边使用，以与MouseOver或视口Enter/退出触发器创建效果。例如，如果您想通过更改背景颜色或添加边框阴影样式来展示页面上的一个部分，则可以使用交互来完成。在下面的示例中，当用户徘徊在本节上时，背景颜色，宽度和边界会发生变化。

为了创建此效果，您首先需要创建一个预设以显示鼠标之前和之后的部分。在此示例中，我们创建了两个 - 一个具有纯黄色背景，另一个具有各种效果和绿色背景。

创建预设后，您可以使用交互来切换悬停的更改。首先创建与以下设置的第一个交互：

• 管理标签：黄色背景
• 触发事件：鼠标输入
• 效果动作：切换预设
• 目标模块：部分（定价）
• 时间延迟： 1秒
• 预设：黄色背景

接下来，通过输入以下设置来为鼠标折叠创建第二个交互：

• 管理标签：绿色背景
• 触发事件：鼠标退出
• 效果动作：切换预设
• 目标模块：部分（定价）
• 时间延迟： 0
• 预设：绿色预设

使用Divi 5互动的好处

Divi 5交互作用为构建网站提供了强大的简化方法，提供了一系列优势，使其成为Divi用户的出色功能。这是一个更深入的了解，为什么此功能是Divi 5的如此有用的补充：

1。无需插件

由于Divi 5交互被集成到Divi的核心中，因此它消除了对第三方插件创建弹出窗口和其他交互的需求。这种本机方法减少了您网站上运行的脚本数量，从而导致加载时间更快并改善了性能指标。

例如，Divi 5 Interactions不再依靠弹出插件，而是处理视觉构建器中的所有内容，从而确保了精益的代码库和更流畅的用户体验。这也意味着更少的更新和降低插件冲突的风险，从而使您的网站更可靠。

2。它是用户友好的

Divi 5交互是直观设计的，只需要几下即可创建交互。初学者可以快速掌握基础知识，而专业开发人员可以无需编写一行代码即可进入复杂的组合。

交互设置在任何元素的高级选项卡中都整齐地组织，并带有清晰的标签和工具提示，可引导您完成整个过程。例如，设置弹出窗口需要单击几下才能选择触发器和效果，从而使任何人都可以轻松使用。

3。自定义自由

Divi 5互动及其巨大设置（触发器，效果和目标）的灵活性使您可以为网站的访问者创造独特的体验。您可以将多个触发器混合在一起，例如将基于滚动的视口与时间延迟相结合，以创建复杂的交互作用，例如促销横幅，该宣传横幅在用户滚动后沿着页面中间滚动而逐渐消失。

针对任何模块，行，列或部分的能力意味着您可以在需要的地方精确地应用效果，无论是对单个按钮进行动画还是转换整个英雄部分。

4。增强的用户参与度

交互式元素通过使网站更加沉浸式和响应迅速来增强用户参与度。 Divi 5互动可以通过鼓励互动来帮助您保持网站的访问者，例如单击切换以揭示替代定价或触发弹出窗口以捕获导线。例如，餐厅网站可以使用卷轴触发的动画来揭示菜单部分。

入门的实用技巧

为了充分利用Divi 5相互作用，请从战略上使用以确保最佳结果。以下是指导您完成整个过程的一些技巧：

• 开始简单：从弹出窗口或切换等简单的交互开始，以在处理鼠标移动或多触发动画之类的先进效果之前熟悉该功能。
• 使用管理标签字段：标记您的交互和元素至关重要，尤其是在具有多个部分的复杂页面上。在每个模块的“内容”选项卡中添加名称字段中的名称可以使您可以保持有组织的内容并轻松识别正确的目标元素。
• 使用预设： Divi 5的预设系统非常适合节省时间和跨互动的一致性。预设允许您定义可重复使用的样式，例如淡入淡出的动画或颜色过渡，并将其应用于多个元素。
• 彻底测试：始终使用Divi 5的预览功能预览您的交互，以便在发布之前捕获任何问题。您还可以使用Divi 5的可自定义响应式断点来测试所有设备上的交互作用。

通过Divi 5互动来提升您的网站

Divi 5互动是创建引人入胜的无代码交互元素以增强您网站的用户体验的完美功能。从捕获的弹出窗口导致滚动触发的动画，使您的设计栩栩如生，此功能使任何人都可以构建动态，专业的网站而无需触摸代码。它的轻巧集成和多样化的触发选择使其成为现代网络设计的重要工具。

准备开始了吗？下载最新的Divi 5 alpha，然后潜入互动中，以创建弹出窗口，切换内容，滚动效果等。快速注意：Divi 5已准备好用于新网站，但我们不建议在现有网站上使用它。

在下面发表评论或在我们的社交媒体渠道上与我们分享您的创作。我们很想见他们！