如何为您的下一个 Divi 项目创建一个充满活力的 Hover 团队页面

团队页面经常被低估。 在购买产品或雇用服务之前，许多用户导航到团队或关于页面，以更好地了解公司及其背后的人员。 如果您的团队页面给人留下了积极的第一印象，则可能会带来更高的转化率。 现在，有很多方法可以使用 Divi 创建漂亮的团队页面，但是如果您正在为下一个项目寻找灵感，那么您会喜欢这篇文章。 我们将重新创建一个充满活力的悬停团队页面，在悬停时触发成员简历。

让我们开始吧！

预览

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

桌面

移动的

订阅我们的 YouTube 频道

1.从一个常规部分+标题的一列行开始

打开一个新页面并将页面属性设置为“空白页面”。 完成后，进入 Divi Builder 并添加一个包含一列行的部分。

添加文本和分隔线模块。

2.将内容添加到文本模块并为其设置样式

向文本模块添加一些 H1 内容。

转到设计选项卡并相应地设置 H1 文本设置的样式：

• 标题字体： Poppins
• 标题字体粗细：轻
• 标题文本对齐方式：居中
• 标题文字颜色：黑色 #000000
• 标题文字大小：
  • 桌面 = 6vw
  • 平板电脑 = 9vw
  • 电话 = 11vw
• 标题字母间距：-0.4vw

3. 设计分隔线

进入下一个模块，即分频器模块。 将分隔线颜色更改为黑色并修改大小设置。

• 分隔线颜色：黑色#oooooo
• 分隔线重量：12px
• 宽度：14%
• 模块对齐：居中

4.使用常规部分+三列行创建团队简历

现在我们已经完成了标题部分，我们准备开始构建团队简介。 首先添加一个具有三列行的新常规部分。

5. 调整行大小设置

通过修改大小设置，允许行占据部分容器的整个宽度。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

6. 调整行距设置

添加一些自定义的顶部和底部填充。

• 顶部填充：2vw
• 底部填充：2vw

7. 将图像和模糊模块添加到第一列

我们将用于创建最终效果的两个主要模块是图像和模糊模块。 首先，添加图像模块，然后添加简介。

8.上传图片并设置样式

您的悬停团队页面都是关于展示团队成员的。 打开图像模块并添加其中一个的照片。 我们将使用我们的 Divi 图片之一。 确保您的图片尺寸为 612 像素 X 612 像素。

结盟

移至设计选项卡并更改图像对齐方式。

• 图像对齐：居中

浆纱

也修改大小设置。

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

间距

并添加一些负上边距。

• 利润：
  • 桌面 = -3vw
  • 平板电脑和手机 = -13vw

边界

要将图像变成圆形，我们将更改边框设置。

• 圆角：20vw 所有四个角
• 边框样式：所有四个边
• 边框宽度：12px
• 边框颜色：白色#ffffff
• 边框样式：双

盒子阴影

我们还通过应用微妙的框阴影为图像添加了一些深度。

• 框阴影：第一个选项
• 框阴影模糊强度：50px

Z索引

在前面的步骤之一中，我们添加了一些负上边距。 为了确保图像保持在列的顶部，即使它超过它，我们将增加可见性设置中的 z 索引。

• Z指数：3

9. 添加内容到模糊和样式

将自定义 CSS 添加到页面设置

在我们做任何其他事情之前，我们将添加一些自定义 CSS 以摆脱模糊内图标的默认底部边距。 将以下 CSS 代码行添加到页面设置中：

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

给 Blurb 一个 CSS 类

接下来打开 blurb 模块并添加匹配的 CSS 类。

• CSS 类：模糊图标

添加内容

我们将使用占位符文本，但您可以插入团队成员的实际姓名和描述。

选择图标

接下来选择一个加号图标。

• 使用图标：是
• 图标：圆圈内的加号

风格背景

转到背景设置，在悬停时添加白色默认背景颜色和渐变背景。

• 背景：白色#ffffff
• 悬停背景：渐变
• 渐变色一：#00ffa1
• 渐变色二：#29c4a9
• 渐变类型：线性
• 梯度方向：154deg
• 起始位置：0
• 最终位置：46%

样式图标

接下来应用以下图标设置：

• 图标颜色：
  • 默认值：#29c4a9
  • 悬停：透明 rgba(255,255,255,0)
• 使用图标字体大小：是
• 图标字体大小：
  • 桌面 = 2vw
  • 平板电脑 = 4vw
  • 电话 = 6vw

结盟

转到文本设置并更改文本对齐方式。

• 文本对齐：居中

样式标题文本

然后，打开标题文本设置并在不同的屏幕尺寸上进行一些更改。

• 标题：H4
• 标题字体: Poppins
• 标题字体：粗体
• 标题文字颜色：白色#ffffff
• 标题文字大小：
  • 台式机：1.5vw
  • 平板电脑：2.5vw
  • 电话：3.5vw

样式正文

对正文设置执行相同的操作。

• 正文颜色：白色#ffffff
• 正文大小：
  • 桌面 = 0.8vw
  • 平板电脑 = 1.9vw
  • 电话 = 2.6vw
• 车身线高：
  • 桌面 = 2vw
  • 平板电脑 + 手机 = 3vw

浆纱

接下来，我们将更改模糊模块的大小设置。

• 内容宽度：100%
• 宽度：81%
• 模块对齐：居中

间距

我们还将在不同的屏幕尺寸上应用一些自定义边距和填充值。

• 最高保证金：
  • 桌面 = -4vw
  • 平板电脑 + 手机 = -9vw
• 底部边距：
  • 桌面 = 3.5vw
  • 平板电脑 + 手机 = 10vw
• 顶部和底部填充：
  • 桌面 = 7.1vw
  • 平板电脑 = 30vw
  • 电话 = 28vw
• 左右填充
  • 桌面 = 2vw
  • 平板电脑 + 手机 = 8vw

边界

通过添加一些边界半径将模糊模块变成一个圆圈。

• 圆角：50vw 所有四个角

盒子阴影

并通过添加出现在悬停时出现的框阴影来完成模糊模块设计。

• 盒子阴影：第五风格
• 框阴影水平位置：0vw
• 框阴影垂直位置：
  • 桌面 + 悬停 = -14vw
  • 平板电脑 = -44vw
  • 电话 = -46vw
• 箱影扩散强度：
  • 桌面 + 悬停 = -6vw
  • 平板电脑 + 手机 = -19vw
• 框阴影颜色：
  • 悬停 = RGBA(0,0,0,0.05)

10. 样式第一栏

现在我们已经将所有需要的模块添加到第一列，是时候设置列的样式了。

背景

打开第一列背景设置并应用以下渐变背景：

• 背景样式：渐变
• 渐变色一：#00ffa1
• 渐变色二：#29c4a9
• 渐变类型：班轮
• 梯度方向：282度

边界

移至设计选项卡并通过添加一些边框半径将列变成圆形。

• 圆角：50vw

溢出

为了确保图像出现在列上方，我们将更改可见性设置中的水平和垂直溢出。

• 水平和垂直溢出：可见

11.删除空列并复制第一列两次

我们已经完成了第一列和其中的所有模块。 为了节省一些时间，我们将删除空列并克隆第一列两次。

删除第二列和第三列

返回主行设置并单击第二列和第三列的垃圾桶图标。

复制一列两次

删除第二列和第三列后，第一列会在一秒钟内看起来很奇怪，但是一旦您克隆该列两次，所有这些都会发生变化。

12. 更改第二列的内容和颜色

现在是时候为其他两个团队成员设计新列的样式了。

第二栏

打开第二列的设置并更改渐变背景

• 背景渐变色一：#00eeff
• 背景渐变色二：#309ce5

也上传不同的图像。

继续打开模糊模块并更改渐变背景。

• 悬停背景颜色一：#00eeff
• 悬停背景颜色二：#309ce5

还要更改图标颜色。

• 默认图标颜色：#309ce5

第三栏

打开第三列的设置并更改渐变背景。

• 背景渐变色一：#ff91ec
• 背景渐变颜色二：#a500ff

接下来更改模糊渐变背景。

• 悬停背景颜色一：#ff91ec
• 悬停背景颜色二：#a500ff

随着图标颜色。

• 默认图标颜色：#a500ff

预览

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

桌面

移动的

这是一个包裹！

在这篇文章中，我们向您展示了如何使用彩色悬停选项创建充满活力的悬停团队页面。 随意在您的下一个 Divi 项目中使用此设计。 在团队页面或贡献者目录中尝试一下。 如果您有任何想法，请在评论中告诉我们。