WordPress divi主题

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

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

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

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

google广告开户

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

让我们开始吧!

预览

在我们深入教程之前,让我们看一下不同屏幕尺寸的结果。

桌面

生物悬停效果

移动的

生物悬停效果

让我们开始重新创建

订阅我们的 Youtube 频道

添加新部分

间距

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

  • 上边距:100px
  • 底部填充:100px

生物悬停效果

WordPress divi主题

添加第 1 行

立柱结构

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

生物悬停效果

添加文本模块

添加H2含量

将标题文本模块添加到列中,并选择一些 H2 副本。

生物悬停效果

H2 文本设置

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

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

生物悬停效果

添加分频器模块

能见度

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

生物悬停效果

分隔线颜色

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

生物悬停效果

fiverr建站WordPress程序员

浆纱

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

  • 宽度: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 模块将用于将图标添加到左下角并在悬停时添加生物。 使用正方形大小的图像将图像模块添加到第一列。

生物悬停效果

过滤器

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

生物悬停效果

将 Blurb 模块添加到第 1 列

添加内容

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

JasperAI 10000字免费额度试用

生物悬停效果

选择图标

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

生物悬停效果

默认背景颜色

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

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

生物悬停效果

WordPress备份工具updrafplus

悬停背景颜色

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

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

生物悬停效果

默认图标设置

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

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

生物悬停效果

悬停图标设置

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

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

生物悬停效果

默认标题文本设置

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

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

生物悬停效果

悬停标题文本设置

修改悬停时的文本大小。

生物悬停效果

默认正文文本设置

修改正文文本设置。

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

生物悬停效果

悬停正文文本设置

并且,再次,在悬停时更改正文文本大小。

生物悬停效果

默认间距

最后但同样重要的是,我们需要使用负上边距在模糊模块和图像模块之间创建重叠。

  • 最高边距:-3.7vw(台式机),-9vw(平板电脑和手机)
  • 底边距:1.5vw(平板电脑),2vw(手机)

生物悬停效果

悬停间距

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

  • 最高边距:-11.38vw
  • 上边距:20px
  • 底部填充:20px
  • 右内边距:50px

生物悬停效果

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

我们已经完成了我们的第一个生物悬停效果。 为了节省时间,我们可以简单地将第 1 列中的两个模块克隆两次,然后将副本放在剩余的两列中。

生物悬停效果

更改模糊模块的图像和内容

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

生物悬停效果

预览

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

桌面

生物悬停效果

移动的

生物悬停效果

最后的想法

在这篇文章中,我们向您展示了如何仅使用 Divi 的内置选项为团队成员照片的悬停创建生物悬停效果。 我们已经提到创建好的页面是多么重要,因为它们是访问量最大的页面网站之一。 对团队成员照片使用生物悬停效果不仅可以让您将“关于”页面提升到一个新的水平,还可以与访问者建立互动。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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