如何在 Divi 中使用扇出悬停效果重新创建 ET 的布局包预览

已发表: 2019-07-05

Elegantthemes.com 新网站设计的酷炫功能之一是 Divi 产品页面上的预制布局包预览。这种设计的独特之处在于每个布局包如何以三个独立的图像为特色，这些图像在悬停时扇出。

今天，我们将向您展示如何在 Divi 中使用同样令人印象深刻的扇出悬停效果重新创建布局包预览的设计。由于设计更高级一些，我们将结合 Divi 的内置设计选项使用一些自定义 CSS。不过别担心，构建不会花费很长时间，结果绝对值得。

让我们开始吧。

抢先看

以下是带有扇出悬停效果的布局包预览。请注意，底行具有辅助悬停效果，可在悬停时分别旋转图像。

divi 布局包预览扇出悬停效果

桌面上的三列布局将在平板电脑和手机上调整为一列。

divi 布局包预览扇出悬停效果

免费下载布局包预览扇出悬停效果布局

divi 布局包预览扇出悬停效果

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

下载文件

免费下载

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

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

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

让我们进入教程好吗？

订阅我们的 YouTube 频道

你需要什么开始

首先，您需要进行以下设置：

已安装并激活 Divi 主题
创建了一个新页面，用于在 Divi 的前端（视觉）构建器上从头开始构建。
用于模拟内容的三个图像。图像应该在 250 像素 x 375 像素左右以获得最佳效果。由于这些是网页的预览，您可以创建自己的任何页面设计的屏幕截图，然后相应地裁剪/调整每个图像的大小。

之后，您将有一个空白画布开始在 Divi 中构建一些悬停选项卡。

在 Divi 中使用扇出悬停效果重新创建 ET 的布局包预览

构建部分和行

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

divi 布局包预览扇出悬停效果

在添加任何模块之前，打开行设置并更新大小和间距，如下所示：

天沟宽度：2
宽度：90%
最大宽度：1120px（桌面），400px（平板）

divi 布局包预览扇出悬停效果

然后在平板电脑上的行中添加一些填充以在移动设备上增加间距。

第 1 列填充：底部 20%
第 2 列填充：底部 20%
第 3 列填充：底部 20%

divi 布局包预览扇出悬停效果

添加图像 1

现在我们准备添加构成布局包预览设计的三个图像中的第一个。继续将图像模块添加到第 1 列。

divi 布局包预览扇出悬停效果

然后将图像上传到图像模块（大小应该在 250 像素 x 375 像素左右）。

divi 布局包预览扇出悬停效果

然后更新设计设置如下：

图像对齐：居中
宽度：220px
垂直溢出：隐藏
Z指数：4

divi 布局包预览扇出悬停效果

由于我们需要定位图像容器（而不是图像本身），我们需要使用自定义 CSS 添加自定义高度、框阴影和边框半径。将以下 CSS 添加到主元素：

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

当我们稍后添加悬停效果时，这将允许图像与图像容器一起调整。正如你现在看到的，图像底部被稍微切掉了，因为我们有一个 240px 的自定义高度，并且溢出设置为“隐藏”。

divi 布局包预览扇出悬停效果

添加图像 2

要创建第二个图像，请在第 1 列中的第一个图像模块下方添加一个新图像模块。然后将新图像 (250X350) 上传到该模块。

divi 布局包预览扇出悬停效果

然后我们需要将图像定位在图像 1 的后面并稍微靠左。为此，我们需要添加一个自定义宽度和高度并隐藏垂直溢出（就像我们对图像 1 所做的一样）。这里的主要区别是我们需要给图像一个绝对位置，以便显示在图像 1 后面的列的左上角。

为此，请更新以下内容：

宽度：180px
垂直溢出：隐藏

然后将以下自定义 CSS 添加到主元素：

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

divi 布局包预览扇出悬停效果

添加图像 3

现在我们准备添加第三张图像以完成布局包预览。在这一点上，使用线框视图模式是有意义的，因为我们有一些重叠，这使得使用可视化构建器更加困难。部署线框模式并复制图像 2。

divi 布局包预览扇出悬停效果

我们复制了图像，因为我们想要保留我们用于图像 2 的大部分设置。唯一的区别（除了新图像）是我们需要将图像定位到右侧而不是左侧。

打开复制的图像（图像 3）并使用新图像（250×375）更新图像模块。

然后，通过改变更新自定义CSS left位置属性设置为一个right位置属性。不需要对 CSS 进行其他更改。

divi 布局包预览扇出悬停效果

如果您愿意，可以将以下 CSS 复制并粘贴到 Main Element 中以替换当前 CSS。

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

到目前为止，一切都很好

这是到目前为止的最终结果。

divi 布局包预览扇出悬停效果

该设计实际上非常漂亮，但让我们通过扇出悬停效果将其提升一个档次。

添加扇出悬停效果 CSS

通常，如果我们只处理一张图像，我们可以使用内置的 Divi 选项轻松添加悬停效果。但是这种扇出悬停效果要求我们在悬停在父列上时同时启用多个子元素（图像）的悬停状态。将鼠标悬停在列上时，我们希望以下内容完成对图像的以下调整。

为每个图像添加过渡持续时间，以便在悬停时平滑过渡。
调整图像 1 的宽度为 180 像素，高度为 240 像素。这将导致图像容器变高变窄以显示更多图像。
调整图像 2 和 3，使其宽度为 160 像素，高度为 220 像素。这也将导致图像变高变窄以显示更多图像。
调整图像 2 逆时针旋转 5 度并稍微向左移动。我们可以通过将 -5 度值添加到transform:rotate属性并将left位置属性的值调整为 0 来实现。
调整图像 3 顺时针旋转 5 度并稍微向右移动。我们可以通过向transform:rotate属性添加 5 度值并将right位置属性的值调整为 0 来实现这一点。

要添加这些悬停效果所需的自定义 CSS，我们需要向包含图像的行添加一个自定义 CSS 类。这将允许我们将自定义 CSS 仅应用于特定行中的图像。

打开行设置并添加以下 CSS 类。

CSS 类：扇出图像

divi 布局包预览扇出悬停效果

要将自定义 CSS 添加到页面，请打开页面设置并在“高级”选项卡下添加以下自定义 CSS。

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

divi 布局包预览扇出悬停效果

我在每个 css 片段上方添加了一条注释，以提醒您每个片段在做什么。

一旦你完成了。查看最终结果。

最后结果

divi 布局包预览扇出悬停效果

可选的悬停效果：在悬停时分别旋转图像 1 和 2

为了给布局包预览图像添加另一个层次的参与度，我们可以将图像 1 和图像 2 的旋转与初始悬停效果分开进行。这将允许用户以独特的方式与图像交互。如果需要，您甚至可以为这些图像添加单独的链接或灯箱预览。

这是你如何做到的。

从页面设置自定义 CSS 中取出转换属性

首先，您需要将鼠标悬停在列上时旋转图像的两行自定义 CSS 取出。打开页面设置自定义CSS，取出以下内容：

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

divi 布局包预览扇出悬停效果

在图像 2 的悬停时添加变换属性

然后打开图像 2 的图像模块设置，并使用 Divi 的内置变换选项添加我们之前为悬停状态删除的相同变换旋转值。

变换旋转 Z 轴（悬停）：-5deg
Transform Translate X 轴（悬停）：-20px

divi 布局包预览扇出悬停效果

在图像 3 的悬停时添加变换属性

然后更新图像 3 的图像模块设置以添加变换旋转属性。

变换旋转 Z 轴（悬停）：5deg
Transform Translate X 轴（悬停）：20px

divi 布局包预览扇出悬停效果

现在看看最终的结果。

最后结果

divi 布局包预览扇出悬停效果

添加图像链接

如果您想创建重定向链接以在单独的页面上展示特定的布局包或页面设计，最好将相同的链接 URL 添加到包中的所有三个图像。为此，请打开每个图像模块并添加链接 URL。

divi 布局包预览扇出悬停效果

向其他列添加新的布局包预览

为了完成设计，我们可以复制第 1 列中的三个图像并将它们粘贴到第 2 列和第 3 列中。

divi 布局包预览扇出悬停效果

之后，您需要做的就是用新的图像更新第 2 列和第 3 列中的每个图像。

就是这样！

最终设计

这是最终的设计。顶行显示悬停在列上时的悬停扇出悬停效果。第二行显示了分别添加到图像 2 和 3 的辅助扇出悬停效果。

divi 布局包预览扇出悬停效果

桌面上的三列布局将在平板电脑和手机上调整为一列。

divi 布局包预览扇出悬停效果

最后的想法

扇出悬停效果是一种美观且引人入胜的设计元素，您可以使用它在您自己的网站上展示页面布局。我们在本教程中介绍的自定义 CSS 和内置 Divi 设置的组合将神奇地工作。此设置将作为使用 Divi 构建器探索更多设计的绝佳起点。希望这能给你一些灵感，让你的投资组合更上一层楼。

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

干杯!

如何在 Divi 中使用扇出悬停效果重新创建 ET 的布局包预览

抢先看

免费下载布局包预览扇出悬停效果布局

免费下载

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

你需要什么开始

在 Divi 中使用扇出悬停效果重新创建 ET 的布局包预览

构建部分和行

添加图像 1

添加图像 2

添加图像 3

到目前为止，一切都很好

添加扇出悬停效果 CSS

最后结果

可选的悬停效果：在悬停时分别旋转图像 1 和 2

从页面设置自定义 CSS 中取出转换属性

在图像 2 的悬停时添加变换属性

在图像 3 的悬停时添加变换属性

最后结果

添加图像链接

向其他列添加新的布局包预览

最终设计

最后的想法

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