如何在 Divi 中为抽象悬停效果转换多个元素

正如您现在已经知道的那样，Divi 有大量的设计设置，允许您为任何 Divi 元素（部分、行或模块）创建独特的悬停效果。 通常，悬停效果仅与一个元素隔离。 例如，如果您在悬停时向模块添加变换旋转属性，则将在悬停在模块上时激活该旋转。 但是，如果您向包含模块的行添加额外的悬停效果，则会在悬停在模块上时添加另一层悬停效果。 这为一些独特的抽象悬停效果打开了大门。

在本教程中，我们将探索如何使用 Divi 的内置设置为抽象悬停效果转换多个元素。 由于我们将在此设计中稍微不同地使用行，我将向您展示如何为您的行创建网格布局，以便您可以在画廊中展示这些悬停效果（如果需要）。

让我们开始吧。

抢先看

免费下载悬停布局上的变换多个元素

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

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

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

入门

订阅我们的 YouTube 频道

对于本教程，您将需要以下内容：

1. 已安装并激活 Divi 主题
2. 几张图。 我正在使用可从 Divi Builder 中访问的预制布局中的图像

准备好后，转到您的 WordPress 仪表板。 然后创建一个新页面（Pages > Add New），给你的页面一个标题，然后部署 Divi Builder。 选择“从头开始构建”选项。

现在你的空白画布在等着你！

图像的抽象悬停效果

第一个设计将结合行上的倾斜变换悬停效果和图像模块，在悬停时为我们的图像创建扇形效果。 除了看起来很酷之外，这种效果还可以作为有用的 UI 交互，让用户知道通过单击图像，您将看到更多图像。 因此，如果您愿意，您可以使用该图像作为您画廊页面的链接。

这是如何做到的。

首先创建一个具有一列行的新常规部分。

然后将图像模块添加到该行。

接下来，将上传图像添加到模块。

添加图像模块悬停效果

现在我们可以向图像添加一些变换悬停效果，这些效果将缩放、旋转和倾斜图像。 为此，请转到转​​换选项并更新以下内容：

变换比例 X 和 Y 轴：110%

Transform 旋转 Z 轴：9deg

Transform Skew X 轴和 Y 轴：3deg

就是这样！ 很简单。 现在我们需要自定义行以添加另一个悬停效果，该效果将在悬停在元素上时激活。

行设置

为了使此设计起作用，该行需要与其中的图像大小相同，以便两者的悬停区域相同。 这将允许我们为模块和将在悬停在模块上时激活的行（或在这种情况下为图像）添加不同的悬停效果。 这是有效的，因为将鼠标悬停在一行内的模块上将激活悬停效果，就像将鼠标悬停在该行上一样。 而且，因为我们在模块上有不同的悬停效果，所以当悬停在模块上时，两种悬停效果都会激活。 这允许我们使用框阴影、变换倾斜和变换旋转到行和模块的抽象悬停效果的组合。

我们已经为我们的图像设置了模块悬停效果，现在我们需要调整行的大小。 根据图像的大小，模块应该已经跨越行的整个宽度，因此从技术上讲，不需要调整行的宽度。 但是对于这个例子，我将缩小行以便为我们的悬停效果腾出空间。

更新行设置如下：

最大宽度：400px

由于我们希望行的高度与其中的图像相匹配，因此我们需要摆脱默认的顶部和底部填充：

自定义填充：0px 顶部，0px 底部

现在我们需要向行列添加背景图像。 每当图像模块变换悬停效果倾斜和旋转时，此背景图像就会出现。

第 1 列背景图片：[输入图片]

继续更新带有悬停框阴影的行，如下所示：

盒子阴影：见截图
框阴影水平位置：0px（默认），-30px（悬停）
框阴影垂直位置：0px（默认），-15px（悬停）
阴影颜色：#002f66

此框阴影添加了出现在行背景图像后面的另一个图像的效果，一旦我们添加变换悬停效果，该效果将旋转并将背景图像倾斜到视图中，该效果就会出现。

最后，我们准备添加 skew 变换属性来为行添加额外的悬停效果。

变换倾斜 X 和 Y 轴：-3deg

最后结果

这是最终结果。

它也将在移动设备上很好地扩展。

号召性用语的抽象悬停效果（示例 1）

行设置

用一列行创建一个新的常规部分。

然后按如下方式更新行设置：

第 1 列背景渐变左颜色：rgba(34,43,58,0.71)
第 1 列背景渐变右颜色：#222b3a
背景图片：[插入图片]
最大宽度：400px
自定义填充：0px 顶部，0px 底部

稍后我们将返回行设置以完成我们的抽象悬停效果，但现在，让我们将调用添加到行中的 Action Module。

号召性用语模块设置

打开 Call to Action Module 设置并更新内容如下：

作品名：积分旅行
按钮文字：点击这里
内容：限时
按钮链接 URL：#（现在只是为了激活按钮）
使用背景颜色：否

然后更新模块的文本和间距的设计设置。

标题字体：Gilda Display
按钮文字大小：16px
按钮文字颜色：#ffb238
按钮背景颜色：rgba(0,0,0,0)
按钮边框宽度：0px

自定义填充：顶部 20%，底部 20%

现在为模块添加边框。

边框宽度：2px
边框颜色：#222b3a

这照顾了我们的默认设计。 现在是有趣的部分了。 请记住，因为我们的行和模块的大小（高度和宽度）基本相同，所以两者的悬停区域将相同。 换句话说，我们添加到行和模块的悬停效果在悬停在元素上时都会激活。 这允许我们使用框阴影、变换倾斜和变换旋转到行和模块的抽象悬停效果的组合。

让我们从行悬停效果开始。

行悬停效果

首先，我们可以在悬停时向我们的行添加一个框阴影。 打开行设置并更新以下内容：

盒子阴影：见截图
框阴影水平位置：0px（默认），90px（悬停）
框阴影垂直位置：0px（默认），80px（悬停）
框阴影传播强度：0px（默认），-40px（悬停）

阴影颜色：#ffb238

请记住，框阴影也将继承我们接下来要添加的变换选项。

现在让我们在悬停时添加一个旋转和倾斜变换属性。

Transform 旋转 X 轴（悬停）：10deg
Transform Skew X 轴（悬停）：-4deg
变换倾斜 Y 轴（悬停）：-4deg

这会处理行悬停效果。 现在我们需要将悬停效果添加到将完成设计的号召性用语模块。

号召性用语模块悬停效果

打开号召性用语模块设置，给它一个框阴影悬停效果，如下所示：

盒子阴影：见截图
框阴影水平位置：0px
框阴影垂直位置：0px（默认），30px（悬停）
阴影颜色：#ffffff

最后，在悬停时添加缩放、旋转和倾斜变换属性，如下所示：
变换缩放 X 和 Y 轴（悬停）：115%
Transform 旋转 Z 轴（悬停）：9deg
Transform Skew X 轴（悬停）：3deg
Transform Skew Y 轴（悬停）：3deg

在悬停时使用缩放来增加模块的大小将有助于最大限度地减少用户仅悬停在行元素而不是模块上的机会。

最后结果

这是抽象悬停效果的最终结果。 请注意行悬停效果和模块悬停效果如何在悬停时激活以倾斜抽象设计的元素。

这是悬停效果在移动设备上的样子。 但是，由于大多数移动浏览器需要点击来激活悬停效果，您可能希望在移动设备上禁用悬停效果，以避免用户在使用模块作为链接时必须双击。

号召性用语的抽象悬停效果（示例 2）

为了快速启动下一个抽象悬停效果的设计，让我们复制包含第一个示例的部分。 现在我们需要做的就是对设计和悬停效果进行一些细微的调整，以获得独特的设计。

更新行设置

首先，更新行设置如下：

Transform 旋转 Z 轴：-5deg
变换倾斜 X 和 Y 轴：-4deg

更新号召性用语模块设置

现在让我们调整模块设置如下：

首先，取出边界……

边框宽度：0px

然后更新框阴影如下：

框阴影水平位置：0px
框阴影垂直位置：110px
（确保并禁用从您复制的先前设计继承的悬停效果）
阴影颜色：#ffb238

现在我们可以更新我们的变换属性悬停效果。 在这里，我们基本上减少了比例，并为我们之前的旋转和倾斜变换属性添加了负值，以在悬停时向相反方向移动元素。

更新以下转换选项：

变换缩放 X 和 Y 轴（悬停）：110%
变换旋转 Z 轴（悬停）：-9deg
Transform Skew X 轴（悬停）：-3deg
Transform Skew Y 轴（悬停）：-3deg

为您的行创建网格布局

由于这种设计要求父行环绕模块并具有相同的高度和宽度，因此您实际上无法像通常那样创建列布局，但是，您可以使用 flex 属性来对齐行在网格布局中水平放置。

为此，首先将包含您的模块的行复制几次，以便在一个部分中有三行。

然后为每一行添加自定义边距：

自定义边距：顶部 50 像素，底部 50 像素

然后打开部分设置并简单地将以下自定义 CSS 添加到主元素。

display: flex;
flex-wrap: wrap;

现在您有三列将响应您的浏览器大小的行。

最后的想法

在悬停时转换多个元素确实提供了您可以探索的另一个层次的创造力。 本教程中的示例旨在向您展示什么是可能的，但您可以随意调整您自己项目的设计。 正如您所料，如果您愿意，您可以变得非常古怪。 但是您也可以更加保守地创建一个微妙的交互设计元素，例如本教程中的图像模块示例。

我期待在评论中收到您的来信。

干杯!