WordPress divi主题

如何使用 Divi 更改悬停时的渐变背景

| 5月 15, 2022 | Divi主题使用教程 | 0 条评论

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

创建网站就是要确保每个细节都是正确的。 注意设计中的小细节将很快增加并提升您网站的质量。 使用 Divi 的新悬停选项,您可以毫不费力地在您的网站上添加小型交互。 悬停选项适用于几乎所有设计设置。 例如,您可以在悬停时间接更改渐变背景以创建漂亮的过渡。 这正是我们将在这篇博文中向您展示的内容。 除了实现渐变过渡,我们还将从头开始创建一个令人惊叹的设计示例,您可以免费将其用于您构建的任何类型的网站。

google广告开户

让我们开始吧!

预览

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

静止的

悬停时的渐变背景

徘徊

悬停时的渐变背景

免费下载插图

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

让我们开始创作吧!

订阅我们的 Youtube 频道

添加第 1 节

间距

您需要做的第一件事是创建一个新页面或打开一个现有页面并向其中添加一个新的常规部分。 打开设置并添加一些自定义的顶部和底部边距。

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

悬停时的渐变背景

WordPress divi主题

添加第 1 行

立柱结构

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

悬停时的渐变背景

第 1 列默认背景颜色

在不添加任何模块的情况下,打开行设置并将以下默认背景颜色添加到第 1 列:

  • 背景颜色:#e7ffa0

悬停时的渐变背景

第 1 列悬停背景颜色

在悬停时更改此背景颜色。

  • 背景颜色:#00020c

悬停时的渐变背景

第 1 列渐变背景

也将渐变背景颜色添加到第 1 列。 您会注意到我们使用的是一种完全透明的颜色。 这种颜色将允许背景颜色显示出来,然后在悬停时改变。

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:rgba(16,0,201,0.8)
  • 第 1 列梯度类型:线性
  • 第1列梯度方向:50度
  • 第 1 列起始位置:20%

悬停时的渐变背景

第 2 列背景颜色

还添加第 2 列背景颜色。

  • 第 2 列背景颜色:#ffffff

悬停时的渐变背景

fiverr建站WordPress程序员

浆纱

然后,转到设计选项卡并更改尺寸设置。

  • 使用自定义宽度:是
  • 单位:PX
  • 自定义宽度:2000px
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

悬停时的渐变背景

间距

继续在间距设置中添加一些自定义填充值。

  • 顶部填充:0px
  • 底部填充:0px
  • 第 2 列顶部填充:6vw(桌面),120px(平板电脑和手机)
  • 第 2 列底部填充:6vw(桌面),120px(平板电脑和手机)
  • 第 2 列左侧填充:5vw(桌面)、80px(平板电脑)、50px(手机)
  • 第 2 列右侧填充:5vw(桌面)、80px(平板电脑)、50px(手机)

悬停时的渐变背景

盒子阴影

并给该行一个微妙的盒子阴影。

独立站选品工具
  • 盒子阴影模糊强度:100px
  • 盒子阴影传播强度:-10px

悬停时的渐变背景

过渡

最后但同样重要的是,我们将通过增加高级选项卡中的过渡持续时间来创建平滑的渐变背景过渡。

  • 转换持续时间:1100ms

悬停时的渐变背景

将图像模块添加到第 1 列

上传图片

是时候开始添加模块了! 将图像模块添加到第一列并上传“divi-gradient-background-on-hover-illustration-1.png‘ 文件,您可以在本文开头下载的压缩文件夹中找到该文件。

悬停时的渐变背景

高质量外链购买

渐变背景

转到此图像模块的背景设置并添加渐变背景。 我们再次使用一种完全透明的颜色来让其他颜色显示出来。

  • 颜色1:rgba(50,217,255,0.66)
  • 颜色 2:rgba(255,255,255,0)
  • 渐变类型:径向
  • 径向:顶部
  • 结束位置:57%

悬停时的渐变背景

间距

然后,向模块添加一些自定义顶部填充。

悬停时的渐变背景

将标题文本模块添加到第 2 列

添加内容

进入第二列! 我们需要的第一个模块是标题文本模块。 继续并添加一些选择的标题内容。

JasperAI 10000字免费额度试用

悬停时的渐变背景

标题文字设置

然后,转到标题文本设置并进行一些更改。

  • 标题字体:Abril Fatface
  • 标题文字颜色:#000000
  • 标题文字大小:4vw(桌面)、60px(平板电脑)、40px(手机)

悬停时的渐变背景

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

添加内容

我们需要的第二个模块是另一个文本模块。 添加一些选择的内容。

悬停时的渐变背景

WordPress备份工具updrafplus

文字设置

然后,转到文本设置并更改文本方向。

  • 文本方向:对齐

悬停时的渐变背景

浆纱

在尺寸设置中调整宽度。

  • 宽度:73%(桌面)、100%(平板电脑和手机)

悬停时的渐变背景

间距

最后,为模块添加一些自定义的顶部和底部边距以创建空白。

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

悬停时的渐变背景

将按钮模块添加到第 2 列

添加副本

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

悬停时的渐变背景

按钮设置

接下来修改按钮设置。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1.2vw(桌面),14px(平板电脑和手机)
  • 按钮文字颜色:#ffffff
  • 渐变色 1:#9ea6ff
  • 渐变色 2:rgba(16,0,201,0.8)
  • 渐变方向:78度
  • 按钮边框宽度:0px
  • 按钮边框半径:30px
  • 按钮字母间距:-1px
  • 字体粗细:超粗体
  • 字体样式:大写

悬停时的渐变背景

悬停时的渐变背景

间距

还添加一些自定义填充值。

  • 上边距:10px
  • 底部填充:10px
  • 左填充:40px
  • 右内边距:40px

悬停时的渐变背景

盒子阴影

并在按钮上应用一个微妙的框阴影。

  • 盒子阴影模糊强度:40px

悬停时的渐变背景

添加第 2 节

间距

现在我们已经完成了第一部分,我们将继续下一部分。 使用以下自定义填充值添加新的常规部分:

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

悬停时的渐变背景

添加第 2 行

立柱结构

继续使用以下列结构向该部分添加新行:

悬停时的渐变背景

第 1 列背景颜色

在不添加任何模块的情况下,打开行设置并将以下背景颜色添加到第 1 列:

  • 第 1 列背景颜色:#ffffff

悬停时的渐变背景

第 2 列默认背景颜色

将以下背景颜色添加到第 2 列。

  • 第 2 列背景颜色:#ffffff

悬停时的渐变背景

第 2 列悬停背景颜色

并在悬停时更改此背景颜色。

  • 第 2 列背景颜色:#3d02ff

悬停时的渐变背景

第 2 列渐变背景

也为列添加渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:#ff7700
  • 第 2 列起始位置:20%

悬停时的渐变背景

浆纱

然后,转到尺寸设置并进行一些更改。

  • 使用自定义宽度:是
  • 单位:PX
  • 自定义宽度:2000px
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

悬停时的渐变背景

间距

继续在间距设置中添加自定义填充值。

  • 顶部填充:0px
  • 底部填充:0px
  • 第 1 列顶部填充:6vw(桌面),120px(平板电脑和手机)
  • 第 1 列底部填充:6vw(桌面),120px(平板电脑和手机)
  • 第 1 列左侧填充:5vw(桌面)、80px(平板电脑)、50px(手机)
  • 第 1 列右侧填充:5vw(桌面)、80 像素(平板电脑)、50 像素(手机)

悬停时的渐变背景

盒子阴影

并为这一行添加一个微妙的盒子阴影。

  • 盒子阴影模糊强度:100px
  • 盒子阴影传播强度:-10px

悬停时的渐变背景

过渡

最后但同样重要的是,通过增加高级选项卡中的过渡持续时间来创建平滑过渡。

  • 转换持续时间:1100ms

悬停时的渐变背景

第 1 行的重复文本模块和按钮模块

由于我们已经拥有了上一节中需要的所有模块,因此我们将通过克隆它们来节省时间。

悬停时的渐变背景

将重复项放在第 2 行的第 1 列

并将重复项放在新行的第一列。

悬停时的渐变背景

更改内容

确保更改模块的内容。

悬停时的渐变背景

更改按钮渐变背景

也更改按钮渐变背景。

  • 颜色 1:#ff653f
  • 颜色 2:#0066ff
  • 渐变方向:39度

悬停时的渐变背景

第 2 行的克隆图像模块

克隆您也可以在上一行的第一列中找到的图像模块。

悬停时的渐变背景

将重复项放在第 2 行的第 2 列

并将副本放在新行的第二列中。

悬停时的渐变背景

更改图像

将图像更改为’divi-渐变背景-悬停插图-2.png‘ 文件,您可以在本文开头下载的压缩文件夹中找到该文件。

悬停时的渐变背景

更改渐变背景

最后但同样重要的是,更改图像模块的渐变背景。

  • 颜色1:rgba(0,2,12,0.66)
  • 颜色 2:rgba(255,255,255,0)
  • 结束位置:57%

悬停时的渐变背景

预览

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

静止的

徘徊

悬停时的渐变背景

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 更改悬停时的渐变背景。 我们还使用这种方法从头开始创建了一个令人惊叹的设计示例。 您可以自由地将设计和插图用于您正在构建的任何类型的网站。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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