WordPress divi主题

如何使用 Divi 为推荐创建独特的悬停重叠

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

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

推荐书对许多网站来说都是一笔大买卖。 他们展示了专业知识,如果他们想弄清楚一家公司或个人的可信度,他们通常会去寻找他们。 这就是为什么考虑在您的网站上以视觉方式呈现推荐的方式很重要。

google广告开户

使用 Divi,您可以完全按照您想要的方式显示您的推荐信。 为了激发您的灵感,我们将向您展示如何使用悬停重叠创建令人惊叹且独特的方式来展示推荐。

让我们开始吧!

预览

在我们深入教程之前,让我们看一下最终结果。

悬停重叠

添加新部分

让我们开始吧! 添加新页面或打开现有页面并添加新的常规部分。

悬停重叠

添加新行 1

立柱结构

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

悬停重叠

WordPress divi主题

浆纱

尚未添加任何模块,打开行设置并更改大小设置。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

悬停重叠

间距

还添加一些自定义间距值。

  • 顶部填充:0px
  • 底部填充:0px
  • 第 2 列左侧填充:2vw(桌面)、3vw(平板电脑和手机)
  • 第 2 列右侧填充:11vw(桌面)、3vw(平板电脑和手机)

悬停重叠

将图像模块添加到第 1 列

上传图片

是时候开始添加各种模块了! 从第一列中的图像模块开始。 上传选择的肖像图像。

悬停重叠

图像对齐

打开图像设置并更改图像对齐方式。

悬停重叠

浆纱

接下来更改大小设置。

  • 宽度:78%(桌面)、70%(平板电脑和手机)
  • 模块对齐:左

悬停重叠

fiverr建站WordPress程序员

将悬停重叠文本模块添加到第 1 列

添加内容

在图像模块正下方,添加一个文本模块。 将人员的详细信息放在内容框中。

悬停重叠

默认背景

继续添加背景颜色。

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

悬停重叠

悬停背景

在悬停时添加另一种背景颜色。

独立站选品工具
  • 背景颜色:#0f1bff

悬停重叠

默认文本设置

然后,更改文本设置。

  • 文字颜色:#ffffff
  • 文字大小:0px
  • 文字行高:0px

悬停重叠

悬停文本设置

对悬停时的文本设置进行一些调整。

  • 文字大小:19px
  • 文本行高:2em

悬停重叠

高质量外链购买

默认标题文本设置

标题文本设置也需要修改。

  • 标题 3 字体粗细:超粗体
  • 标题 3 字体样式:大写
  • 标题 3 文本颜色:#ffffff
  • 标题 3 文字大小:0px
  • 标题 3 行高:0em

悬停重叠

悬停标题文本设置

在悬停时添加不同的值。

  • 标题 3 文字大小:35px
  • 标题 3 行高:1.1em

悬停重叠

间距

接下来,转到间距设置并添加一些值。

JasperAI 10000字免费额度试用
  • 上边距:-100px
  • 左边距:50px
  • 右边距:50px
  • 上边距:40px
  • 底部填充:60px

悬停重叠

更改文本方向

返回文本设置并更改文本方向。

悬停重叠

默认框阴影

然后,将默认框阴影添加到文本模块。 这个盒子阴影将成为整体设计的一部分。

  • 盒子阴影水平位置:1000px
  • 盒子阴影垂直位置:-400px
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:250px
  • 阴影颜色:rgba(175,175,175,0.13)

悬停重叠

WordPress备份工具updrafplus

悬停框阴影

要创建特殊的悬停重叠效果,请添加悬停框阴影。

  • 盒子阴影水平位置:-73px
  • 盒子阴影垂直位置:-49px
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:10px
  • 阴影颜色:rgba(255,182,12,0.53)

悬停重叠

过渡

要创建平滑过渡,请在高级选项卡中更改过渡持续时间。

  • 转换持续时间:1000ms

悬停重叠

将推荐文本模块添加到第 2 列

添加内容

在第二列中,我们需要的第一件事是标题文本模块。 继续添加推荐的摘要。

悬停重叠

标题文字设置

然后,更改标题文本设置。

  • 标题 3 字体:Goudy Bookletter 1911
  • 标题 3 文本对齐:左
  • 标题 3 文本大小:3.5vw(桌面)、40px(平板电脑)、30px(手机)
  • 标题 3 行高:1.1em

悬停重叠

间距

继续添加一些自定义间距值。

  • 上边距:7vw(桌面)、100px(平板电脑)、50px(手机)

悬停重叠

将描述文本模块添加到第 2 列

添加内容

在标题文本模块正下方添加另一个文本模块,其中包含整个推荐。

悬停重叠

文字设置

添加推荐后,继续更改文本设置。

  • 文字行高:2.2em
  • 文字方向:左

悬停重叠

间距

添加一些自定义上边距。

  • 上边距:4vw(桌面),50px(平板电脑和手机)

悬停重叠

添加新行

立柱结构

现在我们已经完成了第一行,让我们使用以下列结构添加第二行:

悬停重叠

浆纱

打开行设置并更改大小设置。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

悬停重叠

间距

接下来添加一些自定义间距值。

  • 上边距:100px
  • 顶部填充:0px
  • 底部填充:0px
  • 第 1 列左侧填充:11vw(桌面)、3vw(平板电脑和手机)
  • 第 1 列右侧填充:2vw(桌面)、3vw(平板电脑和手机)

悬停重叠

克隆上一行的文本模块并放在第 1 列中

返回上一行并克隆第 2 列中的两个模块。完成后,将重复项放在新行的第一列中。

悬停重叠

更改文本方向

更改两个模块的文本方向。

悬停重叠

将图像模块添加到第 2 列

上传图片

接下来,将图像模块添加到第二列并上传新的肖像图像。

悬停重叠

图像对齐

更改模块的图像对齐方式。

悬停重叠

浆纱

继续更改大小设置。

  • 宽度:78%(桌面)、70%(平板电脑和手机)
  • 模块对齐:右

悬停重叠

间距

还添加一些自定义间距值。

  • 上边距:50px(平板电脑和手机)

悬停重叠

将悬停重叠文本模块添加到第 2 列

添加内容

我们需要完成此设计的最后一个模块是图像模块下方的文本模块。 在内容框中添加人员的详细信息。

悬停重叠

默认背景

然后,将背景图像添加到模块。

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

悬停重叠

悬停背景

更改悬停时的背景颜色。

  • 背景颜色:#690cff

悬停重叠

默认文本设置

接下来更改文本设置。

  • 文字颜色:#ffffff
  • 文字大小:0px
  • 文字行高:0px
  • 文本方向:中心

悬停重叠

悬停文本设置

对悬停进行一些调整。

  • 文字大小:19px
  • 文本行高:2em

悬停重叠

默认标题文本设置

更改标题文本设置。

  • 标题 3 字体粗细:超粗体
  • 标题 3 文本颜色:#ffffff
  • 标题 3 文字大小:0px
  • 标题 3 行高:0em

悬停重叠

悬停标题文本设置

对悬停进行了一些小调整。

  • 标题 3 文字大小:35px
  • 标题 3 行高:1.1em

悬停重叠

间距

继续进行间距设置并添加一些自定义值。

  • 上边距:-80px
  • 左边距:50px
  • 右边距:50px
  • 上边距:40px
  • 底部填充:60px

悬停重叠

默认框阴影

将默认框阴影添加到文本模块。

  • 盒子阴影水平位置:-1000px
  • 盒子阴影垂直位置:-420px
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:250px
  • 阴影颜色:rgba(175,175,175,0.13)

悬停重叠

悬停框阴影

并在悬停时更改框阴影。

  • 盒子阴影水平位置:-73px
  • 盒子阴影垂直位置:-49px
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:10px
  • 阴影颜色:rgba(12,255,238,0.53)

悬停重叠

过渡

最后但同样重要的是,通过更改过渡持续时间来创建平滑过渡。

  • 转换持续时间:1000ms

悬停重叠

预览

现在我们已经完成了所有步骤,让我们来看看最终的结果吧!

悬停重叠

最后的想法

我们希望这篇文章能激发您使用悬停重叠创建令人惊叹的推荐部分! 它们确实可以帮助您为网站添加另一个维度,而无需花费大量时间编码或弄清楚事情。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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