如何在 Divi 5（公共 Alpha 版）中掌握悬停效果

Divi 5 使添加和编辑悬停效果变得比以往更容易。在本指南中，我们将引导您完成对悬停效果的所有关键改进，以及如何在 Divi 5 中使用它们以前所未有的方式简化您的工作流程。

了解有关 Divi 5 Public Alpha 以及如何下载的更多信息。

下载 Divi 5 公共 Alpha 版

了解 Divi 5（公共 Alpha 版）中的悬停效果

在 Divi 5 中，关于悬停效果的重大变化之一是它们现在更容易实现且更易于访问。在 Divi 4 中，您必须手动为设置中的每个元素启用悬停效果。此过程可能很麻烦，因为您必须在应用任何更改之前找到特定选项并激活悬停状态。

凭借 Divi 5 的新界面，悬停效果、响应式和粘性编辑模式完全集成，使它们可以立即访问。不再需要单独启用它们！

这项改进通过减少应用高级悬停状态设计所需的步骤、加快工作流程并使创建动态交互更加直观，简化了设计流程​​。

Divi 5 悬停效果的主要改进

以下是 Divi 5 的一些关键改进，可以更快、更轻松地应用和编辑悬停效果：

• 正常模式和悬停模式之间的导航速度更快：通过一键切换，可以更轻松地在状态之间切换并进行调整。
• 所有悬停设置都集中在一个面板中：不再有分散的设置。元素的所有悬停设置都可以在设置面板中轻松更新。
• 即时视觉反馈：实时预览会显示您制作的悬停效果变化，从而加快您的工作流程。
• 更好的组织和可见性设置：非活动设置呈灰色，帮助您专注于可用选项。

这些改进简化了创建具有悬停效果的动态交互式设计的过程。

想要更深入地了解新设置吗？查看了解 Divi 5 界面，了解它如何简化您的设计工作流程。

获取 Divi 5 公开 Alpha 版

如何在 Divi 5（公共 Alpha 版）中掌握悬停效果

1.在一处访问和编辑所有悬停状态设置

Divi 5 的悬停设置方便地显示在设置面板中，让您可以在一处快速访问所有内容。这个简化的面板减少了为每个选项切换单独的悬停效果的需要。换句话说，一旦在设置面板中选择了悬停效果状态，每个选项卡（内容、设计和高级）下的所有选项现在将仅适用于元素的悬停状态。

这使得添加自定义或复杂的悬停效果可以更快地实现。

2.轻松管理不支持的悬停设置

在 Divi 5 中，不支持的悬停设置会自动变灰（无法访问），使您可以快速查看哪些功能不适用于您正在处理的元素。这种可见性可以防止浪费时间尝试清除那些在悬停状态下可自定义的选项和不可自定义的选项，从而改善您的整体工作流程。

3.享受即时的实时视觉反馈

Divi 5 的实时视觉反馈是即时的。当您调整设置时，您会立即看到更改，从而减少猜测并允许您随时随地微调悬停效果。

4.在整个页面中快速编辑悬停效果

在 Divi 5 中，当单击其他元素时，设置面板保持悬停状态。这使您可以通过单击元素并进行更改来快速更新整个页面元素的悬停效果。

5. 在前端自信地预览悬停效果

在设置面板中激活悬停状态后，您只需单击一下即可预览任何元素的悬停状态设计。悬停状态将保持活动状态，因此如果您的元素具有悬停效果，单击该元素将立即显示悬停状态设计，并同时打开该元素的悬停状态设置。

正如您在下面的视频片段中看到的，您可以在前端预览每个简介的悬停状态设计，它将显示与预览实时页面相同的悬停效果。

因此，如果想检查页面上的悬停状态设计，只需单击页面上的某个元素即可立即显示该元素的悬停状态设计。这样可以轻松确保您的悬停效果准确，而无需来回切换到实时页面。

下载 Divi 5 公共 Alpha 版

如何在 Divi 5 中创建悬停效果：快速示例

现在我们已经介绍了 Divi 5 悬停效果的主要功能，让我们通过一个快速示例向您展示在 Divi 5 中创建悬停效果是多么容易：

1. 添加模块

在 Divi 视觉生成器中，添加您要自定义的模块。对于本示例，我们添加一个按钮。

2. 访问悬停设置

单击模块以显示设置面板。在右侧边栏中，单击悬停图标以切换到悬停模式。

3. 自定义悬停效果

在悬停模式下，您可以更改各种样式属性，例如背景颜色、边框、缩放或动画。让我们为按钮添加一个变换效果，以便它在悬停时放大。

别忘了。 Divi 5 的简化设置面板将所有控件集中在一个面板中，因此请进行所需的更改，然后在完成后单击“保存” 。

请随意测试不同的悬停效果设置，包括颜色和背景过渡、图像和文本动画、阴影效果以及用于缩放、旋转或平移元素的变换控件。您还可以调整边框样式和滤镜（例如模糊或亮度），并应用高级 CSS 动画以获得更具吸引力的用户体验。

Divi 5 是悬停效果设计的游戏规则改变者

与 Divi 4 相比，Divi 5 的悬停效果提供了无与伦比的易用性、速度和灵活性，简化了您的设计流程。无论您是经验丰富的网页设计师还是新手，这些直观的功能都使向您的网站添加交互元素变得比以往更加简单。

准备好提升您网站的用户体验了吗？立即下载 Divi 5 Public Alpha 并开始尝试新的悬停效果，让您的设计栩栩如生！

下载 Divi 5 公共 Alpha 版