如何在 Divi 中为团队成员 Bios 添加悬停效果

众所周知，关于页面非常适合在您的网站上创建点击率。 这也是一种页面，可以强调网站背后公司的人性化部分。 了解这一点使我们意识到关注页面的结构方式、共享的信息类型以及创建交互的方式非常重要。 您可以做的一件事来提升关于页面的体验，就是提供一个团队成员部分，让您的员工成为人们关注的焦点。 最重要的是，您可以仅使用 Divi 的内置选项为团队成员照片添加生物悬停效果。 这将允许您节省您正在处理的页面上的空间，并在您和访问者之间创建悬停交互。

在本教程中，我们将逐步向您展示如何到达那里。 一旦掌握了方法，您就可以根据自己的需要自定义设计风格。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们先看看不同屏幕尺寸的结果。

桌面

移动的

让我们开始重建

订阅我们的 YouTube 频道

添加新部分

间距

创建一个新页面或打开一个现有页面并使用以下自定义填充值添加一个新部分：

• 顶部填充：100px
• 底部填充：100px

添加第 1 行

列结构

完成将自定义填充添加到部分后，您可以关闭部分设置并仅使用一列添加新行。

添加文本模块

添加 H2 内容

将标题文本模块添加到带有一些 H2 副本的列中。

H2 文本设置

然后，转到 H2 文本设置并对副本的外观进行一些更改。

• 标题 2 字体：Cinzel
• 标题 2 字体样式：小型大写字母
• 标题 2 文本对齐：居中
• 标题 2 文字大小：70px

添加分频器模块

能见度

继续在标题文本模块正下方添加一个新的分隔线模块。

• 显示分隔线：是

分隔线颜色

转到设计选项卡，打开颜色设置并相应地更改分隔线的颜色：

• 分隔线颜色：#333333

浆纱

接下来，我们将减小分隔线的大小并将其居中。

• 宽度：26%
• 模块对齐：居中

添加第 2 行

列结构

在您添加的前一行的正下方，继续使用三个相同大小的列添加一个新行。

浆纱

在不添加任何模块的情况下，打开行设置并对大小设置进行一些调整。

• 使用自定义宽度：是
• 单位：PX
• 自定义宽度：2000px
• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是

间距

然后，转到间距设置并添加自定义边距和填充值。

• 上边距：50px
• 下边距：50px
• 顶部填充：10px
• 底部填充：10px
• 左填充：5px
• 右填充：5px
• 第 1、2 和 3 列左填充：5px
• 第 1、2 和 3 列右填充：5px

盒子阴影

我们还通过使用以下设置向其添加框阴影来为我们的行添加一些深度：

• 框阴影模糊强度：80px
• 框阴影扩散强度：-14px
• 阴影颜色：rgba(0,0,0,0.3)

将图像模块添加到第 1 列

上传图片到图片模块

是时候开始添加模块了！ 为了实现生物悬停效果，我们总共需要两个模块； 一个图像模块和一个模糊模块。 图像模块将保存您要展示的团队成员的图像。 另一方面，Blurb 模块将用于将图标添加到左下角，并在悬停时添加生物。 使用正方形大小的图像将图像模块添加到第一列。

过滤器

我们正在创建的设计完全是灰度的。 要将此灰度添加到我们的图像中，请转到过滤器设置并删除所有饱和度。

• 饱和度：0%

将 Blurb 模块添加到第 1 列

添加内容

继续在第 1 列中的图像模块正下方添加一个新的 Blurb 模块。将团队成员的姓名添加到标题字段，并在内容框中输入有关团队成员的更多信息。

选择图标

接下来我们要做的是选择一个首选图标，向访问者展示它不仅仅是一张图片。

默认背景颜色

然后，我们将选择一个完整的透明背景色。

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

悬停背景颜色

我们将在悬停时更改该颜色。

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

默认图标设置

我们想要一个引人注目的图标，以帮助访问者了解他们可以将其悬停。 更改图标设置以实现这样的图标。

• 图标颜色：#ffffff
• 圆形图标：是
• 圆圈颜色：#000000
• 图标位置：左
• 使用图标字体大小：是
• 图标字体大小：50px

悬停图标设置

但是，我们不希望图标出现在悬停时。 这就是为什么我们将使用完全透明的颜色。

• 图标颜色：rgba(255,255,255,0)
• 圆圈颜色：rgba(255,255,255,0)

默认标题文本设置

接下来，转到标题文本设置并进行一些更改。

• 标题字体：Cinzel
• 标题字体粗细：粗体
• 标题字体样式：小型大写字母
• 标题文字颜色：#000000
• 标题文字大小：0px

悬停标题文本设置

在悬停时修改文本大小。

• 标题文字大小：30px

默认正文设置

还要修改正文设置。

• 正文字体：Open Sans
• 正文颜色：#000000
• 正文文字大小：0px
• 车身线高：1.8em

悬停正文设置

再次，在悬停时更改正文文本大小。

• 正文文字大小：14px

默认间距

最后但并非最不重要的一点是，我们需要使用负上边距在 Blurb 模块和图像模块之间创建重叠。

• 最高边距：-3.7vw（台式机），-9vw（平板电脑和手机）
• 下边距：1.5vw（平板电脑），2vw（手机）

悬停间距

悬停时更改自定义边距和填充值。

• 上边距：-11.38vw
• 顶部填充：20px
• 底部填充：20px
• 右填充：50px

克隆两个模块两次并在剩余列中放置重复项

我们已经完成了我们的第一个生物悬停效果的创建。 为了节省时间，我们可以简单地将第 1 列中的两个模块克隆两次，并将重复项放在剩余的两列中。

更改 Blurb 模块的图像和内容

记得更改图像模块中的图像和模糊模块中的副本以完成团队成员部分！

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项在悬停团队成员照片时创建生物悬停效果。 我们已经提到创建好的页面是多么重要，因为它们是访问量最大的页面网站之一。 为团队成员照片使用生物悬停效果不仅可以让您的关于页面更上一层楼，还可以与访问者建立互动。 如果您有任何问题或建议，请务必在下方评论区留言！