如何使用 Divi 为推荐创建独特的悬停重叠

推荐对许多网站来说都是一笔巨大的交易。 他们展示了专业知识，如果访客想了解一个公司或个人的可信度，他们通常会寻找他们。 这就是为什么重要的是要考虑在您的网站上以视觉方式呈现推荐的方式。

使用 Divi，您可以完全按照您想要的方式展示您的推荐。 为了激发您的灵感，我们将向您展示如何使用悬停重叠创建一种令人惊叹的独特方式来展示推荐。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们先看看最终结果。

添加新部分

让我们开始吧！ 添加新页面或打开现有页面并添加新的常规部分。

添加新行 1

列结构

继续使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并更改大小设置。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

添加一些自定义间距值。

• 顶部填充：0px
• 底部填充：0px
• 第 2 列左填充：2vw（桌面）、3vw（平板电脑和手机）
• 第 2 列右填充：11vw（台式机）、3vw（平板电脑和手机）

将图像模块添加到第 1 列

上传图片

是时候开始添加各种模块了！ 从第一列中的图像模块开始。 上传选择的肖像图像。

图像对齐

打开图像设置并更改图像对齐方式。

• 图像对齐：左

浆纱

接下来更改大小设置。

• 宽度：78%（桌面），70%（平板电脑和手机）
• 模块对齐：左

将悬停重叠文本模块添加到第 1 列

添加内容

在图像模块的正下方，添加一个文本模块。 将人的详细信息放在内容框中。

默认背景

继续添加背景颜色。

• 背景颜色：rgba(255,255,255,0)

悬停背景

在悬停时添加另一种背景颜色。

• 背景颜色：#0f1bff

默认文本设置

然后，更改文本设置。

• 文字颜色：#ffffff
• 文字大小：0px
• 文本行高：0px

悬停文本设置

对悬停时的文本设置进行一些调整。

• 文字大小：19px
• 文本行高：2em

默认标题文本设置

标题文本设置也需要修改。

• 标题 3 字体粗细：超粗体
• 标题 3 字体样式：大写
• 标题 3 文本颜色：#ffffff
• 标题 3 文字大小：0px
• 标题 3 行高：0em

悬停标题文本设置

在悬停时添加不同的值。

• 标题 3 文字大小：35px
• 标题 3 行高：1.1em

间距

接下来，转到间距设置并添加一些值。

• 上边距：-100px
• 左边距：50px
• 右边距：50px
• 顶部填充：40px
• 底部填充：60px

更改文本方向

返回文本设置并更改文本方向。

• 文字方向：居中

默认框阴影

然后，向文本模块添加默认框阴影。 这个盒子阴影将成为整体设计的一部分。

• 框阴影水平位置：1000px
• 框阴影垂直位置：-400px
• 框阴影模糊强度：0px
• 框阴影传播强度：250px
• 阴影颜色：rgba(175,175,175,0.13)

悬停框阴影

要创建特殊的悬停重叠效果，还要添加悬停框阴影。

• 框阴影水平位置：-73px
• 框阴影垂直位置：-49px
• 框阴影模糊强度：0px
• 框阴影传播强度：10px
• 阴影颜色：rgba(255,182,12,0.53)

过渡

要创建平滑过渡，请在高级选项卡中更改过渡持续时间。

• 转换持续时间：1000ms

将推荐文本模块添加到第 2 列

添加内容

在第二列中，我们首先需要的是标题文本模块。 继续并添加推荐摘要。

标题文字设置

然后，更改标题文本设置。

• 标题 3 字体：Goudy 小册子 1911
• 标题 3 文本对齐方式：左
• 标题 3 文字大小：3.5vw（桌面）、40px（平板电脑）、30px（手机）
• 标题 3 行高：1.1em

间距

继续添加一些自定义间距值。

• 上边距：7vw（桌面）、100px（平板电脑）、50px（手机）

将描述文本模块添加到第 2 列

添加内容

添加另一个文本模块，在标题文本模块的正下方添加完整的推荐。

文字设置

添加推荐后，请继续更改文本设置。

• 文本行高：2.2em
• 文本方向：左

间距

添加一些自定义上边距。

• 上边距：4vw（桌面），50px（平板电脑和手机）

添加新行

列结构

现在我们已经完成了第一行，让我们使用以下列结构添加第二行：

浆纱

打开行设置并更改大小设置。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

接下来添加一些自定义间距值。

• 上边距：100px
• 顶部填充：0px
• 底部填充：0px
• 第 1 列左填充：11vw（桌面）、3vw（平板电脑和手机）
• 第 1 列右侧填充：2vw（台式机）、3vw（平板电脑和手机）

克隆上一行的文本模块并放置在第 1 列中

返回上一行并克隆第 2 列中的两个模块。完成后，将重复项放在新行的第一列中。

更改文本方向

更改两个模块的文本方向。

• 文字方向：右

将图像模块添加到第 2 列

上传图片

接下来，将图像模块添加到第二列并上传新的肖像图像。

图像对齐

更改模块的图像对齐方式。

• 图像对齐：右

浆纱

继续更改大小设置。

• 宽度：78%（桌面），70%（平板电脑和手机）
• 模块对齐：右

间距

添加一些自定义间距值。

• 上边距：50px（平板电脑和手机）

将悬停重叠文本模块添加到第 2 列

添加内容

我们需要完成此设计的最后一个模块是图像模块下方的文本模块。 在内容框中添加此人的详细信息。

默认背景

然后，向模块添加背景图像。

• 背景颜色：rgba(255,255,255,0)

悬停背景

更改悬停时的背景颜色。

• 背景颜色：#690cff

默认文本设置

接下来更改文本设置。

• 文字颜色：#ffffff
• 文字大小：0px
• 文本行高：0px
• 文字方向：居中

悬停文本设置

对悬停进行一些调整。

• 文字大小：19px
• 文本行高：2em

默认标题文本设置

还要更改标题文本设置。

• 标题 3 字体粗细：超粗体
• 标题 3 文本颜色：#ffffff
• 标题 3 文字大小：0px
• 标题 3 行高：0em

悬停标题文本设置

在悬停时进行一些小调整。

• 标题 3 文字大小：35px
• 标题 3 行高：1.1em

间距

继续转到间距设置并添加一些自定义值。

• 上边距：-80px
• 左边距：50px
• 右边距：50px
• 顶部填充：40px
• 底部填充：60px

默认框阴影

向文本模块添加默认框阴影。

• 框阴影水平位置：-1000px
• 框阴影垂直位置：-420px
• 框阴影模糊强度：0px
• 框阴影传播强度：250px
• 阴影颜色：rgba(175,175,175,0.13)

悬停框阴影

并在悬停时更改框阴影。

• 框阴影水平位置：-73px
• 框阴影垂直位置：-49px
• 框阴影模糊强度：0px
• 框阴影传播强度：10px
• 阴影颜色：rgba(12,255,238,0.53)

过渡

最后但并非最不重要的一点是，通过更改过渡持续时间来创建平滑过渡。

• 转换持续时间：1000ms

预览

现在我们已经完成了所有步骤，让我们最后看看最终结果！

最后的想法

我们希望这篇文章能激发您使用悬停重叠创建令人惊叹的推荐部分！ 它们确实可以帮助您为网站添加另一个维度，而无需花费大量时间编码或解决问题。 如果您有任何问题或建议，请务必在下方评论区留言！