Divi 5的相互作用（弹出，切换，鼠标效果等）

如今，我们很高兴发布Divi 5的交互，这是一个强大的系统，用于创建诸如弹出式和切换之类的交互式元素，以及基于创意卷轴和基于鼠标运动的效果。

这不是弹出式建筑商；这是一个建筑商。创建触发器，分配效果，选择目标并将您的自定义互动栩栩如生。您可以使用该系统做很多令人惊奇的事情，我迫不及待地想向您展示其工作原理，所以让我们跳入。

查看以下视频以查看动作中的新功能。

建立自己的互动元素

您会在所有元素的高级选项卡中注意到一个新的交互组。单击“添加交互”按钮将打开交互编辑器，您可以在其中配置每个交互的触发器，效果和目标。

扳机会启动交互，例如单击或悬停时。当触发交互作用（例如切换可见性，预设或属性）时，效果就会发生，目标是页面上的受影响元素。

互动示例

在深入这些设置之前，让我向您展示一些互动可以实现的示例。

示例1：建立弹出窗口

在下面的视频示例中，我使用交互创建弹出窗口。

我在一个部分中添加了一个Enter视口触发器，该触发器将切换可见性效果应用于我的弹出窗口。本节进入我的视口，触发弹出窗口的可见性，并在使用Divi的动画设置时滑动。

此外，弹出窗口中的图标模块具有基于点击的交互，该相互作用可在弹出窗口上切换可见度以关闭它。您可以创建任何类型的弹出式或浮动横幅！

示例2：构建切换

在下面的视频示例中，我使用互动来切换每月和年度定价表。

我在行中添加了两个交互，以切换每年和每月定价部分交替的可见性。接下来，我添加了另外两个交互，以切换两个图标模块的可见性，从而为用户提供了单击时的其他反馈。

示例3：预设之间的过渡

最有力的效果之一是切换预设效应。由于预设允许您修改元素的设置，因此您可以做什么没有限制。当触发器更改目标元素上的预设时，它可以以许多方式转换。

在下面的视频示例中，我设置了两个交互，以在进入并退出视口时在行上添加和删除预设。高光预设会改变行的背景颜色和比例，并增加一个盒子阴影，在用户向下滚动页面时引起人们的注意！

示例F：鼠标运动效果

相互作用系统的基于鼠标运动的效果非常有趣。

在下面的视频示例中。我在英雄部分中添加了几个相互作用，针对各种元素，具有不同敏感性的基于小鼠运动的影响。

相互作用触发鼠标输入，对随着鼠标移动的变化元素应用不透明，运动和倾斜影响。我还向按钮模块添加了一个交互，该模块可以切换预设以更改方形轮廓的样式。

可能性是无限的！

我可以继续进行不同的例子，很高兴看到您想出的内容。

更仔细地查看交互编辑器，您可以看到一些我尚未提到的其他效果，例如将属性，cookie和滚动到元素上。

例如，您可以使用属性效果来更改元素的CSS类，ID或其他任何内容。

互动的第一版支持以下效果：

• 切换可见性- 自动在可见和隐藏状态之间切换一个元素。
• 显示元素- 使隐藏的元素可见。
• 隐藏元素- 使可见元素隐藏。
• 切换预设- 为元素打开/关闭预设，可选地更换现有预设。
• 添加预设- 将预设样式类应用于元素，可选替换现有预设。
• 删除预设- 从元素中删除预设样式类。
• 切换属性- 添加或删除元素的特定HTML属性值，例如CSS类和ID。
• 添加属性- 如果不存在，则将特定的HTML属性值添加到元素。
• 删除属性- 从元素中删除特定的HTML属性值。
• 切换cookie - 从cookie中添加或删除cookie值。例如，当弹出窗口在用户看到弹出窗口时似乎正在跟踪时，设置cookie。然后，使用Divi的条件选项隐藏该用户的未来页面访问中的弹出窗口。
• 添加cookie - 添加您定义的cookie和cookie值，并在访问者的浏览器中定义。
  卸下cookie - 卸下指定的cookie。
• 滚动到元素- 平滑滚动页面以将目标元素视为视图。
• 镜像鼠标的运动- 使目标元素使用可调敏感性的各种运动类型（翻译，比例，不透明度，倾斜或旋转）遵循触发元件中的鼠标运动。

今天尝试Divi 5

Divi 5的互动今天可以使用，这是今年将进入Divi的许多功能之一。

您可以随着我们的进展，通过Divi 5及以后的最终版本，每两周更新一次。根据您的优先级，您现在可以使用Divi 5来构建新网站或等到我们添加更多功能，任何最适合您的功能。

如Divi 5的原始多相发布时间表中所述，Divi 5公共alpha就像“ Divi 5 Lite”。它缺少一些功能，并且可能不适合现有网站，但是如果您更喜欢Divi 4的体验，就可以在新网站上使用。

我们希望您尝试一下，如果您喜欢它，请使用它；当每个人都喜欢它时，我们将正式进行。

您尝试过相对颜色吗？

如果您错过了它，我们最近发布了Divi 5的相对颜色，使Divi成为颜色管理和高级颜色系统的清晰领导者。它使您可以使用HSL创建具有嵌套颜色关系的数学上美丽的基于可变的颜色系统。您不想在此功能上睡觉。

观看此视频以获取所有细节。

更多Divi 5更新正在进行

2025年是Divi 5年。乏味的工作在我们身后。我们建立了超级快速的基础，现在是时候让Divi卷土重来了。

如果您是在这里进行Divi卷土重来，请给我们一个巨大的忙，并通过喜欢此视频并发表评论来告诉我们。看到您为Divi加油对我们来说意义重大，喂养算法并传播词至关重要。

不要忘记在YouTube上关注我们并订阅Divi新闻通讯，因此您永远不会错过更新。我很快就会见到您进行另一个Divi 5功能公告，我保证将在拐角处。