WordPress divi主题

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

by | May 11, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

Elegantthemes.com 新网站设计的一个很酷的功能是 Divi 产品页面上的预制布局包预览。 这种设计的独特之处在于每个布局包如何具有三个独立的图像,这些图像在悬停时呈扇形散开。

google广告开户

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

让我们开始吧。

抢先看

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

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

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

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

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

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

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

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

WordPress divi主题

让我们来看看教程好吗?

订阅我们的 Youtube 频道

你需要什么开始

要开始使用,您需要进行以下设置:

  1. Divi 主题已安装并处于活动状态
  2. 在 Divi 的前端(视觉)构建器上从头开始构建的新页面。
  3. 三张用于模拟内容的图像。 为了获得最佳效果,图像应约为 250 像素 x 375 像素。 由于这些是网页的预览,您可以创建自己的任何页面设计的屏幕截图,然后相应地裁剪/调整每个图像的大小。

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

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

构建部分和行

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

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

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

  • 天沟宽度:2
  • 宽度:90%
  • 最大宽度:1120px(台式机),400px(平板电脑)

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

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

fiverr建站WordPress程序员
  • 第 1 列填充:底部 20%
  • 第 2 列填充:底部 20%
  • 第 3 列填充:底部 20%

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

添加图像 1

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

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

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

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

独立站选品工具

然后更新设计设置如下:

  • 图像对齐:居中
  • 宽度:220 像素
  • 垂直溢出:隐藏
  • 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;

当我们稍后添加悬停效果时,这将允许图像与图像容器的配合进行调整。 正如你现在所看到的,由于我们有一个自定义的高度为 240 像素,并且溢出设置为“隐藏”,所以图像在底部被略微切断了。

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

高质量外链购买

添加图像 2

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

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

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

为此,请更新以下内容:

  • 宽度:180 像素
  • 垂直溢出:隐藏

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

JasperAI 10000字免费额度试用
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)更新图像模块。

WordPress备份工具updrafplus

然后通过更改 left 将属性定位到 right 位置属性。 不需要对 CSS 进行其他更改。

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

如果您愿意,可以将以下 CSS 复制并粘贴到主元素中以替换当前的 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. 为每个图像添加过渡持续时间,以便在悬停时平滑过渡。
  2. 将图像 1 调整为宽度为 180 像素,高度为 240 像素。 这将导致图像容器变高变窄以显示更多图像。
  3. 调整图像 2 和 3,使其宽度为 160 像素,高度为 220 像素。 这也将导致图像变高变窄以显示更多图像。
  4. 将图像 2 调整为逆时针旋转 5 度并稍微向左移动。 我们可以通过添加 -5 度值来做到这一点 transform:rotate 财产和调整的价值 left 位置属性为 0。
  5. 将图像 3 调整为顺时针旋转 5 度并稍微向右移动。 我们可以通过将 5 度值添加到 transform:rotate 财产和调整的价值 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
  • 变换平移 X 轴(悬停):-20px

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

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

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

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

  • 变换旋转 Z 轴(悬停):5 度
  • 变换平移 X 轴(悬停):20px

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

现在查看最终结果。

最后结果

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

添加图片链接

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

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

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

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

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

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

就是这样!

最终设计

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

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

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

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

最后的想法

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题