WordPress divi主题

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

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

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

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

google广告开户

让我们开始吧!

预览

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

桌面

认识团队预览 gif

移动的

充满活力的团队悬停的响应式预览

订阅我们的 Youtube 频道

1.以常规部分+标题的一列行开头

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

添加一次列行

添加文本和分隔符模块。

WordPress divi主题

添加文本和分隔符模块

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

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

将内容添加到文本模块

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

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

风格会见团队简介

3. 设计分隔线

进入下一个模块,即除法器模块。 将分隔线颜色更改为黑色并修改尺寸设置。

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

分频器设置

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

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

添加一个新部分

添加三列行

fiverr建站WordPress程序员

5.调整行大小设置

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

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

行间距

6.调整行间距设置

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

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

行设置的填充

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

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

独立站选品工具

添加图像和简介

8. 上传图片并设置样式

您的悬停团队页面旨在展示团队成员。 打开图像模块并添加其中一张的照片。 我们将使用我们的一张 Divi 库存图片。 确保您的图像尺寸为 612 像素 X 612 像素。

添加图像

结盟

转到设计选项卡并更改图像对齐方式。

居中图像对齐

高质量外链购买

浆纱

也修改大小设置。

  • 宽度:30%
  • 模块对齐:中心

调整图像大小

间距

并添加一些负上边距。

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

设置图像的边距

边界

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

JasperAI 10000字免费额度试用
  • 圆角:20vw 所有四个角
  • 边框样式:所有四个边
  • 边框宽度:12px
  • 边框颜色:白色#ffffff
  • 边框样式:双

为图像添加双边框

盒子阴影

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

  • 盒子阴影:第一个选项
  • 盒子阴影模糊强度:50px

为图像添加框阴影

Z 指数

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

将 z 索引设置为 3

WordPress备份工具updrafplus

9.添加内容到Blurb & Style It

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

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

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

将 CSS 添加到页面设置

给 Blurb 一个 CSS 类

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

向简介中添加一个 CSS 类

添加内容

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

在简介中添加内容

选择图标

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

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

为简介选择一个图标

风格背景

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

  • 背景:白色#ffffff
  • 悬停背景:渐变
  • 渐变色一:#00ffa1
  • 渐变色二:#29c4a9
  • 渐变类型:线性
  • 渐变方向:154度
  • 起始位置: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
  • 盒子阴影颜色:

简介的框阴影

10.样式栏一

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

背景

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

  • 背景样式:渐变
  • 渐变色一:#00ffa1
  • 渐变色二:#29c4a9
  • 渐变类型:衬里
  • 渐变方向:282度

设置列的背景

边界

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

绕过柱子的角落

溢出

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

  • 水平和垂直溢出:可见

能见度和溢出

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

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

删除第二列和第三列

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

删除第二列和第三列

将第一列复制两次

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

重复的列

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

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

第二栏

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

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

在列设置中更改颜色背景

上传不同的图像。

改变图像

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

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

更改简介背景悬停渐变

更改图标颜色。

  • 默认图标颜色:#309ce5

更改图标颜色

第三栏

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

  • 背景渐变色一:#ff91ec
  • 背景渐变色二:#a500ff

设置第三列的颜色

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

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

更改简介背景

连同图标颜色。

  • 默认图标颜色:#a500ff

更改简介中的图标颜色

预览

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

桌面

认识团队预览 gif

移动的

充满活力的团队悬停的响应式预览

这是一个包装!

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

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