如何使用 Divi 将悬停社交图标添加到团队成员图像

在构建您的关于页面时，您可能会考虑在展示中添加您公司的不同团队成员。 在开始设计过程时，您会注意到三样东西不能一蹴而就：图像、名称和位置。 但是，如果您想进一步突出您的团队成员，您也可以考虑将他们的社交网络链接添加到设计中。 当然，您可以采用老式的方式并在此人的姓名和职位下方添加社交媒体关注模块。 但是，您也可以选择通过在有人悬停其中一个人物图像时立即触发社交图标来添加一点点互动。 在今天的教程中，我们将向您展示如何使用 Divi 做到这一点。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

让我们开始重建吧！

添加第 1 节

背景颜色

首先向您正在处理的页面添加一个新部分。 打开部分设置并更改背景颜色。

• 背景颜色：#0f0f0f

间距

移至该部分的设计选项卡，然后更改间距设置。

• 顶部填充
  • 台式机和平板电脑：100px
  • 电话：50px
• 底部填充：
  • 台式机和平板电脑：100px
  • 电话：50px

添加新行

列结构

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

将文本模块 #1 添加到列

添加H1内容

使用您选择的一些 H1 内容将第一个文本模块添加到行的列。

H1 文本设置

转到模块的设计选项卡并相应地更改 H1 文本设置：

• 标题字体：Alata
• 标题文字颜色：#ffffff
• 标题文字大小：
  • 桌面：50px
  • 平板电脑：45px
  • 电话：35px
• 标题线高度：1.2em

将分隔模块添加到列

能见度

接下来，我们将添加一个 Divider 模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

线

移至模块的设计选项卡并更改线条颜色。

• 线条颜色：#ffffff

浆纱

也更改大小设置。

• 分隔线重量：2px
• 最大宽度：100px
• 高度：2px

将文本模块 #2 添加到列

添加说明内容

我们在这一行中需要的下一个也是最后一个模块是另一个文本模块，其中包含您选择的一些描述内容。

文字设置

转到模块的设计选项卡并按如下方式更改文本设置：

• 文字字体：阿拉塔
• 文字颜色：#7c7c7c
• 文字大小：17px
• 文本行高：1.9em

间距

也删除默认的底部边距。

• 下边距：0px

添加第 2 节

渐变背景

在上一个的正下方添加另一个部分，并为其使用渐变背景。

• 颜色 1：#0f0f0f
• 颜色 2：#000000
• 起始位置：10%
• 结束位置：10%

间距

接下来修改间距设置。

• 顶部填充：0px
• 底部填充：200px

添加新行

列结构

继续使用以下列结构向该部分添加新行：

浆纱

打开行设置并更改大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：2px

将社交媒体关注模块添加到第 1 列

添加选择的社交网络

我们行中需要的第一个模块是第 1 列中的社交媒体关注模块。添加您选择的社交网络。

单独删除每个社交网络背景颜色

然后，单独打开每个社交网络并删除背景颜色。

单独添加到每个社交网络的链接

也为每个社交网络添加相应的链接。

默认背景颜色

然后，返回常规模块设置并应用以下背景颜色：

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

悬停背景颜色

更改悬停时的背景颜色。

• 悬停背景颜色：#494949

背景图片

然后，上传背景图片。

• 背景图片尺寸：封面
• 背景图像混合：相乘

结盟

移至模块的设计选项卡并更改对齐方式。

• 模块对齐：居中

图标

也修改图标颜色。

• 图标颜色：rgba(0,0,0,0)

间距

然后，转到间距设置并应用以下值：

• 下边距：0px
• 顶部填充：
  • 桌面：250px
  • 平板电脑：450px
  • 电话：200px
• 底部填充：20px

边界

我们也在更改边框设置。

• 所有角落：100px
• 边框宽度：2px
• 边框颜色：rgba(255,255,255,0)

悬停边框

在悬停时使用另一种边框颜色。

• 悬停边框颜色：#ffffff

CSS 类

然后，转到高级选项卡并应用自定义 CSS 类。

• CSS 类：团队社交

在元素前悬停

并通过在 before 元素上启用悬停设置并复制粘贴以下 CSS 代码行来完成模块设置：

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

将人员模块添加到第 1 列

添加内容

我们在第 1 列中需要的下一个也是最后一个模块是 Person 模块。 添加一些您选择的内容。

文字设置

转到模块的设计选项卡并按如下方式更改文本设置：

• 文本对齐：居中
• 文字颜色：浅

标题文字设置

接下来为标题文本设置样式。

• 标题字体：阿拉塔
• 标题文字大小：
  • 桌面：27px
  • 平板电脑：25px
  • 电话：22px

位置文本设置

然后，修改位置文本设置。

• 位置字体：Alata
• 位置文字大小：
  • 桌面：17px
  • 平板电脑和手机：15px

间距

将一些自定义顶部和底部填充应用于间距设置。

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

边界

并通过应用以下边框设置完成模块设置：

• 边框宽度：1px
• 边框颜色：#ffffff

删除行的剩余列

完成第 1 列中的模块后，您可以删除该行的其余两列。

克隆列两次

通过克隆两次来重复使用第 1 列。

克隆整行

然后，根据需要多次克隆整行。

更改所有重复内容

社交媒体关注链接

当然，您需要修改所有重复的内容，从每个重复的社交媒体关注模块中的社交网络链接开始。

社交媒体关注背景图片

然后，更改每个社交媒体关注模块中的背景图像。

人物模块内容

并通过修改每个 Person Module 中的内容来完成更改。

在第 1 节第 1 行的最后一个文本模块下方添加代码模块

现在，为了确保在整个模块悬停时每个社交网络都改变样式，我们需要几行 CSS 代码。 我们将把这段代码放在一个新的代码模块中，我们将把它添加到第一部分，就在描述文本模块的正下方。

添加 CSS 代码

复制粘贴以下几行 CSS 代码即可完成：

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何通过团队成员展示来发挥创意。 更具体地说，我们向您展示了如何在您将鼠标悬停在团队成员的一张图片上时触发社交图标。 这会产生微妙但有趣的交互，您可以将其用于您构建的任何类型的网站。 您也可以免费下载 JSON 文件！ 如果您有任何疑问，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。