WordPress divi主题

如何使用 Divi 创建漂亮的渐变背景悬停过渡

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

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

最近,Divi 中添加了一些额外的悬停选项——允许您创建更酷的效果,而无需接触任何一行代码。 例如,您现在可以创建令人惊叹的渐变背景悬停过渡。 通过组合列、行和截面渐变,您可以实现独特的设计。 在本教程中,我们将向您展示如何做到这一点。 我们将通过一些一般步骤开始。 完成后,我们将分别关注三个设计示例。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下我们将在本教程中重新创建的三个不同示例。

示例 #1

悬停过渡

示例 #2

悬停过渡

示例#3

悬停过渡

免费下载英雄章节

订阅我们的 Youtube 频道

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

一般步骤

添加新部分

间距

让我们从一些一般步骤开始。 向您正在处理的页面添加一个新部分并删除所有默认填充。 稍后,移除所有顶部和底部填充将帮助我们组合列、行和部分渐变背景。

WordPress divi主题
  • 顶部填充:0px
  • 底部填充:0px

悬停过渡

添加新行

立柱结构

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

悬停过渡

浆纱

在不添加任何模块的情况下,打开行设置并允许行占据部分容器的整个宽度。

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

悬停过渡

间距

继续进行间距设置并删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

悬停过渡

将文本模块 #1 添加到列

添加H1内容

让我们开始添加模块! 我们需要的第一个是带有一些 H1 内容的文本模块。

悬停过渡

H1 文字设置

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

fiverr建站WordPress程序员
  • 标题字体:蒙特塞拉特
  • 标题文本对齐:居中
  • 标题文字颜色:#000000
  • 标题文字大小:3vw(桌面)、6vw(平板电脑和手机)
  • 标题字母间距:0.7vw

悬停过渡

浆纱

接下来打开尺寸设置并更改宽度以及模块对齐方式。

  • 宽度:48%(桌面)、60%(平板电脑和手机)
  • 模块对齐:中心

悬停过渡

间距

通过添加一些上边距来完成模块的设计。

悬停过渡

独立站选品工具

将分隔模块添加到列

能见度

进入下一个模块! 添加一个分频器模块并确保启用了“显示分频器”选项。

悬停过渡

线

接下来更改线条颜色。

悬停过渡

浆纱

继续调整大小设置并应用以下设置:

高质量外链购买
  • 分压器重量:0.1vw
  • 宽度:10%(台式机)、16%(平板电脑)、25%(手机)
  • 模块对齐:中心

悬停过渡

间距

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

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

悬停过渡

将文本模块 #2 添加到列

添加内容

进入下一个模块,这是另一个文本模块。 添加您选择的一些段落内容。

悬停过渡

JasperAI 10000字免费额度试用

文字设置

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

  • 文字字体:Open Sans
  • 文本对齐:对齐
  • 文字行高:2.3em

悬停过渡

浆纱

接下来在尺寸设置中修改宽度和模块对齐方式:

  • 宽度:30%(台式机)、54%(平板电脑)、70%(手机)
  • 模块对齐:中心

悬停过渡

将按钮模块添加到列

添加副本

我们在列中需要的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本。

WordPress备份工具updrafplus

悬停过渡

结盟

转到设计选项卡并更改按钮对齐方式。

悬停过渡

按钮设置

修改按钮设置。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.8vw(桌面)、2vw(平板电脑)、2.8vw(手机)
  • 按钮文字颜色:#000000
  • 按钮边框宽度:1px
  • 按钮边框半径:1px
  • 按钮字体:蒙特塞拉特

悬停过渡

悬停过渡

间距

并在不同的屏幕尺寸上添加一些自定义间距值。

  • 最高利润:2vw(桌面),8vw(平板电脑和手机)
  • 底边距:10vw
  • 顶部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 底部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 左填充:3vw(桌面)、6vw(平板电脑)、8vw(手机)
  • 右填充:3vw(桌面)、6vw(平板电脑)、8vw(手机)

悬停过渡

克隆部分两次

完成该部分后,您可以克隆它两次; 每个示例一个。

悬停过渡

重新创建渐变背景悬停过渡 #1

悬停过渡

部分

默认渐变背景

让我们开始创建第一个悬停过渡! 打开部分设置并添加以下默认渐变背景:

  • 颜色 1:#d1d1ff
  • 颜色 2:#f7f7f7
  • 渐变方向:90度
  • 起始位置:50%
  • 结束位置:50%

悬停过渡

悬停渐变背景

修改悬停时的渐变背景。

  • 颜色 1:#f7f7f7
  • 颜色 2:#ffc1c7
  • 渐变方向:90度
  • 起始位置:50%
  • 结束位置:50%

悬停过渡

默认渐变背景

接下来打开行设置并应用以下默认渐变背景设置:

  • 颜色1:#7032ff
  • 颜色 2:rgba(255,255,255,0)
  • 渐变方向:90度
  • 起始位置:10%
  • 结束位置:10%

悬停过渡

悬停渐变背景

修改悬停时的渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色 2:#ff324a
  • 渐变方向:90度
  • 起始位置:90%
  • 结束位置:90%

悬停过渡

重新创建渐变背景悬停过渡 #2

悬停过渡

部分

默认渐变背景

继续第二个例子! 打开部分设置并添加以下渐变背景:

  • 颜色 1:#f7f7f7
  • 颜色 2:#eceaff
  • 渐变方向:156度
  • 起始位置:50%
  • 结束位置:50%

悬停过渡

悬停渐变背景

在悬停时添加不同的渐变背景:

  • 颜色 1:#ffeaec
  • 颜色 2:#f7f7f7
  • 渐变方向:204度
  • 起始位置:50%
  • 结束位置:50%

悬停过渡

默认渐变背景

接下来打开行设置并应用以下渐变背景设置:

  • 颜色 1:#a932ff
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:左下
  • 起始位置:14%
  • 结束位置:14%

悬停过渡

悬停渐变背景

相应地更改悬停时的行渐变背景:

  • 颜色1:#ff324a
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:左上
  • 起始位置:14%
  • 结束位置:14%

悬停过渡

柱子

默认渐变背景

转到列设置并添加以下渐变背景:

  • 颜色 1:#a932ff
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:右上
  • 起始位置:14%
  • 结束位置:14%

悬停过渡

悬停渐变背景

修改悬停时的列渐变背景:

  • 颜色1:#ff324a
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:右下
  • 起始位置:14%
  • 结束位置:14%

悬停过渡

重新创建渐变背景悬停过渡 #3

悬停过渡

部分

默认渐变背景

继续下一个也是最后一个示例! 打开部分设置并应用以下渐变背景:

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

悬停过渡

悬停渐变背景

修改悬停时的部分渐变背景。

  • 颜色1:#ffc1c7
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:左
  • 起始位置:20%
  • 结束位置:20%

悬停过渡

默认渐变背景

接下来打开行设置并添加以下渐变背景:

  • 颜色 1:#d3dfff
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:底部
  • 起始位置:45%
  • 结束位置:45%

悬停过渡

悬停渐变背景

相应地修改渐变背景:

  • 颜色 1:#d3dfff
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:右
  • 起始位置:20%
  • 结束位置:20%

悬停过渡

柱子

默认渐变背景

最后但同样重要的是,添加一个列渐变背景,你就完成了!

  • 颜色 1:#f7f7f7
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:中心
  • 起始位置:41%
  • 结束位置:41%

悬停过渡

预览

现在我们已经完成了所有步骤,让我们最后看看我们在本教程中重新创建的所有三个示例的结果!

示例 #1

悬停过渡

示例 #2

悬停过渡

示例#3

悬停过渡

最后的想法

在这篇文章中,我们向您展示了如何创造性地使用 Divi 的附加渐变背景悬停选项,仅使用 Divi 的内置选项创建漂亮的悬停过渡。 我们从一些一般步骤开始,然后重新创建三个示例中的每一个。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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

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