WordPress divi主题

如何使用 Divi 在悬停时创建 3 步模糊显示

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

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

许多公司网站都在某个时候分享了他们的方法的预览。 在创建方法部分时,您可以用传统方式处理它,也可以尝试为其添加更多交互。 如果您正在寻找一种方法来实现第二种选择,那么您会喜欢这篇文章的。

google广告开户

在本教程中,我们将向您展示如何使用 Divi 的新尺寸选项创建 3 步宣传片。 我们将从显示标题开始,然后显示三个指向步骤的箭头,并通过显示动画简介来完成效果。 您还可以免费下载 JSON 文件!

让我们开始吧。

预览

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

桌面

简介揭示

移动的

简介揭示

免费下载 3 步模糊显示布局

要掌握 3 步简介显示布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

让我们开始重建吧!

订阅我们的 Youtube 频道

添加新部分

默认渐变背景

您需要做的第一件事是向您正在处理的页面添加一个新部分。 打开部分设置并为其添加以下渐变背景:

WordPress divi主题
  • 颜色 1:#ffa3ad
  • 颜色 2:#ffcea3
  • 渐变方向:122度

简介揭示

悬停渐变背景

修改悬停时的渐变背景:

  • 颜色 1:#000000
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:顶部
  • 起始位置:36%
  • 结束位置:26%

简介揭示

间距

转到设计选项卡,然后添加一些自定义顶部和底部填充。

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

简介揭示

溢出

在这篇文章的后面,我们将讨论该部分的高度。 为了确保没有超出部分容器,我们将在可见性设置中隐藏溢出。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

简介揭示

添加第 1 行

立柱结构

完成部分设置后,您可以继续使用以下列结构将第一行添加到该部分:

简介揭示

将文本模块添加到行

添加H2含量

将一个新的文本模块添加到该行的列并输入您选择的一些 H2 内容。

fiverr建站WordPress程序员

简介揭示

H2 文本设置

转到设计选项卡并相应地更改 H2 文本设置:

  • 标题 2 字体:蒙特塞拉特
  • 标题 2 字体粗细:半粗体
  • 标题 2 文本对齐:居中
  • 标题 2 文本颜色:#ffffff
  • 标题 2 文本大小:2vw(桌面)、5vw(平板电脑)、6vw(手机)
  • 标题 2 字母间距:-2px

简介揭示

添加第 2 行

立柱结构

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

简介揭示

独立站选品工具

间距

在不添加任何模块的情况下,打开行设置并在不同的屏幕尺寸上添加一些自定义的顶部和底部填充。

  • 顶部填充:2vw(桌面)、4vw(平板电脑)、5vw(手机)
  • 底部填充:2vw(桌面)、4vw(平板电脑)、5vw(手机)

简介揭示

展示

为了确保所有列在较小的屏幕尺寸上彼此相邻,我们将在行的主要元素中添加一行 CSS 代码。

display: flex;

简介揭示

将箭头文本模块添加到第 1 列

添加符号

我们将使用这一行来添加动画箭头。 将新的文本模块添加到行的第一列,并将“↓”符号添加到内容框。

高质量外链购买

简介揭示

文字设置

转到设计选项卡并更改文本设置。

  • 文本对齐:右
  • 文字颜色:#ffa3ad
  • 文字大小:4vw(桌面)、6vw(平板电脑)、8vw(手机)

简介揭示

间距

接下来将一些自定义边距值添加到间距设置中。

  • 最高边距:-3vw
  • 底边距:8vw

简介揭示

JasperAI 10000字免费额度试用

变换旋转

在变换设置中旋转模块。

简介揭示

动画片

并使用以下设置添加自定义动画:

  • 动画风格:幻灯片
  • 动画方向:中心
  • 动画延迟:1000ms

简介揭示

将箭头文本模块添加到第 2 列

添加符号

继续向第二列添加新行并将“↓”符号添加到内容框。

WordPress备份工具updrafplus

简介揭示

文字设置

转到设计选项卡并相应地更改文本设置:

  • 文本对齐:居中
  • 文字颜色:#ffa3ad
  • 文字大小:4vw(桌面)、6vw(平板电脑)、8vw(手机)

简介揭示

间距

接下来添加一些自定义上边距。

简介揭示

动画片

并应用以下动画设置:

  • 动画风格:幻灯片
  • 动画方向:中心

简介揭示

将箭头文本模块添加到第 3 列

添加符号

在第 3 列中的最后一个箭头文本模块上。将“↓”箭头添加到内容框。

简介揭示

文字设置

转到设计选项卡并相应地更改文本设置:

  • 文本对齐:左
  • 文字颜色:#ffa3ad
  • 文字大小:4vw(桌面)、6vw(平板电脑)、8vw(手机)

简介揭示

间距

接下来添加一些负上边距。

简介揭示

变换旋转

在变换设置中旋转模块。

简介揭示

动画片

并通过添加以下动画完成模块的设置:

  • 动画风格:幻灯片
  • 动画方向:中心
  • 动画延迟:1000ms

简介揭示

添加第 3 行

立柱结构

完成第二行后,您可以继续使用以下列结构添加新行:

简介揭示

浆纱

在不添加任何模块的情况下,打开行设置并在尺寸设置中修改宽度和最大宽度值。

  • 宽度:100%
  • 最大宽度:100%

简介揭示

间距

接下来在不同的屏幕尺寸上添加一些自定义填充值。

  • 顶部填充:2vw(桌面)、8vw(平板电脑)、6vw(手机)
  • 底部填充:2vw(桌面)、8vw(平板电脑)、6vw(手机)
  • 左填充:10vw(桌面),0vw(平板电脑和手机)
  • 右填充:10vw(桌面)、0vw(平板电脑和手机)

简介揭示

展示

在行的主要元素中添加一行 CSS 代码,以确保所有列在较小的屏幕尺寸上彼此相邻。

display: flex;

简介揭示

溢出

在本教程的最后一部分,我们将更改行的高度。 为此,我们需要通过在可见性设置中隐藏溢出来确保没有任何内容超出行容器。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

简介揭示

将数字文本模块添加到第 1 列

添加内容

是时候开始添加模块了! 在第一列添加一个新的文本模块并输入一个数字。

简介揭示

渐变背景

使用以下设置向模块添加渐变背景:

  • 颜色 1:#ffa3ad
  • 颜色 2:#ffcea3
  • 渐变方向:122度

简介揭示

文字设置

转到设计选项卡并相应地更改文本设置:

  • 文字字体:蒙特塞拉特
  • 文字字体粗细:超粗体
  • 文本对齐:居中
  • 文字颜色:#ffffff
  • 文字大小:2vw(桌面)、4vw(平板电脑)、8vw(手机)
  • 文本行高:1em

简介揭示

间距

在不同的屏幕尺寸上添加一些顶部和底部填充。

  • 顶部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 底部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)

简介揭示

边界

并通过在边框设置中的每个角添加“20px”来完成模块的设置。

简介揭示

克隆数字文本模块两次并在剩余列中放置重复项

继续克隆第 1 列中的文本模块两次,并将重复项放在该行的剩余两列中。

简介揭示

更改号码

确保更改每个重复项中的数字。

简介揭示

将 Blurb 模块添加到第 1 列

添加内容

第一列中我们需要的第二个模块是 Blurb 模块。 输入您选择的一些内容。

简介揭示

选择图标

选择一个图标继续。

简介揭示

背景颜色

并将背景颜色更改为白色。

  • 背景颜色:#ffffff

简介揭示

图标设置

转到设计选项卡并相应地更改图标设置:

  • 图标颜色:#ffcea3
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:4vw(桌面)、5vw(平板电脑)、6vw(手机)

简介揭示

标题文本设置

修改标题文本设置。

  • 标题字体:蒙特塞拉特
  • 标题字体粗细:粗体
  • 标题文本对齐方式:居中
  • 标题文字颜色:#000000
  • 标题文字大小:1vw(桌面)、2vw(平板电脑)、4vw(手机)

简介揭示

正文文本设置

连同正文文本设置。

  • 正文文本对齐:居中
  • 正文文本大小:0.6vw(桌面)、1.3vw(平板电脑)、2vw(手机)
  • 车身线高:2.5em

简介揭示

间距

我们还通过在不同的屏幕尺寸上添加以下自定义填充值来为我们的模块提供所需的形状:

  • 顶部填充:3vw(桌面)、5vw(平板电脑)、7vw(手机)
  • 底部填充:3vw(桌面)、5vw(平板电脑)、7vw(手机)
  • 左填充:1vw
  • 右填充:1vw

简介揭示

边界

接下来将“20px”添加到边框设置中的每个角。

简介揭示

盒子阴影

并通过添加微妙的盒子阴影来创建一点深度。

  • 阴影颜色:rgba(0,0,0,0.07)

简介揭示

动画片

最后但同样重要的是,向模块添加动画。

  • 动画风格:幻灯片
  • 动画方向:中心
  • 动画延迟:1000ms

简介揭示

克隆 Blurb 模块两次并在剩余列中放置重复项

完成第 1 列中的 Blurb 模块后,您可以将其克隆 3 次,然后将副本放置在该行的剩余两列中。

简介揭示

更改两个副本的内容

确保更改每个重复项的内容。

简介揭示

修改第 3 行大小设置

默认高度

现在,为了使悬停效果起作用,我们将打开最后一行的设置并转到尺寸设置。 在那里,我们将修改不同屏幕尺寸的高度。

  • 高度:6vw(台式机)、18vw(平板电脑)、24vw(手机)

简介揭示

悬停高度

我们将在悬停时恢复正常高度。

简介揭示

修改截面尺寸设置

默认高度

接下来打开部分设置并相应地更改高度:

  • 高度:7vw(台式机)、15vw(平板电脑)、20vw(手机)

简介揭示

悬停高度

在悬停时恢复高度,你就完成了!

简介揭示

预览

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

桌面

简介揭示

移动的

简介揭示

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的新尺寸选项创建 3 步宣传片。 该示例的结果是高度响应的,并允许您向页面添加额外的交互。 我们希望本教程也能激发您创建自己的替代三步设计。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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