WordPress divi主题

如何仅使用 Divi 的内置选项将渐变文本颜色应用于副本

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

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

无论您要创建哪种类型的网站,突出显示副本和内容仍然是首要任务之一。 使用 Divi 的内置选项,有很多方法可以到达那里。 您拥有的一种可能性是将渐变文本颜色应用于您的副本。 这是为您的网站添加颜色的好方法,尤其是在您保持网站的其余部分干净和简约的情况下。 它有助于平衡空白,并为您的网站带来新鲜空气。

google广告开户

在本教程中,我们将向您展示如何仅使用 Divi 的内置选项为您的文本提供渐变颜色。

让我们开始吧!

预览

在我们深入教程之前,让我们看一下不同屏幕尺寸的结果。 我们将向您展示如何使用浅色和深色调色板来完成这项工作。 一旦掌握了这种方法,您就可以使用渐变文本创建各种设计。

渐变文本颜色

方法

1. 了解 Divi 混合模式

混合模式的工作方式与您在图像编辑软件中习惯的方式完全相同。 它们基于层结构。 具体来说,这意味着 Divi 中的混合模式将遵循一定的层次结构:

  • 应用于模块的混合模式将混合其下方的模块 + 列
  • 应用于列的混合模式将混合其下方的列 + 行
  • 应用于行的混合模式将混合其下方的行 + 部分

对于本教程,有必要了解应用于模块的混合模式将与其下方的列混合。 通过给列一个渐变背景和有问题的模块一个混合模式,我们可以设法实现渐变色文本。

2. 在完全深色或浅色调色板之间进行选择

要完成这项工作,您必须使用完全深色或浅色的调色板。 我们使用的混合模式(变亮和变暗)只有在您使用全黑或全白时才能提供所需的结果。 当使用其他颜色时,我们应用的效果会有所体现。

3.删除列和模块之间的所有装订线宽度

如方法的第一部分所述,我们将使用列渐变背景。 为了确保这个渐变背景不会出现在我们不想出现的任何地方,我们将删除所有的装订线宽度。 通过这样做,我们将确保在模块之间没有应用默认的自定义边距。 为了弥补我们失去的空间,我们将手动添加自定义填充。

4.使用填充而不是改变元素的宽度

为了调整设计元素的宽度,我们将使用自定义左右填充。 改变大小设置中的宽度会改变整个模块的宽度,并允许列渐变背景显示在左侧和右侧,这是我们不想要的。

WordPress divi主题

让我们开始创作吧!

订阅我们的 Youtube 频道

添加新部分

背景颜色

让我们开始吧! 将常规部分添加到新页面或现有页面并为其提供正确的背景颜色(取决于您是否要重新创建浅色或深色布局)。

  • 背景颜色:#ffffff(浅色版面)、#000000(深色版面)

渐变文字颜色

间距

继续向该部分添加一些自定义填充。

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

渐变文字颜色

添加第 1 行

立柱结构

然后,使用以下列结构添加新行:

渐变文字颜色

第 2 列渐变背景

将渐变背景添加到该行的第二列。 这是我们将在本教程的下一部分中放置标题文本模块的地方。

  • 颜色1:#c700ff
  • 颜色 2:#32f1ff
  • 第2列梯度方向:150度
  • 第 2 列起始位置:20%
  • 第 2 列结束位置:60%

渐变文字颜色

fiverr建站WordPress程序员

浆纱

也更改大小设置。

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

渐变文字颜色

间距

并修改间距设置。

  • 上边距:50px
  • 下边距:50px
  • 左填充:50px
  • 右内边距:50px

渐变文字颜色

将文本模块添加到第 2 列

添加内容

现在继续在您添加的行的第二列中添加一个文本模块。

独立站选品工具

渐变文字颜色

背景颜色

根据您要重新创建的布局类型,为您的模块提供正确的背景。

  • 背景颜色:#ffffff(浅色版面)、#000000(深色版面)

渐变文字颜色

标题文字设置

接下来更改标题文本设置。

  • 标题 2 文本对齐:居中
  • 标题 2 文本颜色:#000000(浅色版面)、#ffffff(深色版面)
  • 标题 2 文字大小:67 像素(桌面)、50 像素(平板电脑)、40 像素(手机)
  • 标题 2 字母间距:-2px

渐变文字颜色

高质量外链购买

间距

并添加一些底部填充。 请记住,我们使用底部填充而不是边距来确保不显示列渐变背景。

渐变文字颜色

混合模式

要使列的渐变背景应用于您添加的模块,请在过滤器设置中应用混合模式。

  • 混合模式:变亮(浅色布局)、变暗(深色布局)

渐变文字颜色

将分隔模块添加到行

能见度

我们在这一行中需要的第二个也是最后一个模块是 Divider Module。

JasperAI 10000字免费额度试用

渐变文字颜色

背景颜色

根据您正在重新创建的布局类型更改背景颜色。

  • 背景颜色:#ffffff(浅色版面)、#000000(深色版面)

渐变文字颜色

间距

为了减小分隔线的宽度,我们将在左侧和右侧添加一些自定义填充。

  • 左填充:250px
  • 右内边距:250px

渐变文字颜色

WordPress备份工具updrafplus

混合模式

再次,添加混合模式以使列渐变背景显示。

  • 混合模式:变亮(浅色布局)、变暗(深色布局)

渐变文字颜色

添加第 2 行

立柱结构

到下一行! 使用以下列结构:

渐变文字颜色

第 1 列渐变背景

继续向第一列添加渐变背景。

  • 颜色1:#c700ff
  • 颜色 2:#32f1ff
  • 第 1 列梯度类型:线性
  • 第1列梯度方向:105度
  • 第 1 列起始位置:20%
  • 第 1 列结束位置:50%

渐变文字颜色

第 2 列渐变背景

我们也在为第二列使用渐变背景。

  • 颜色 1:#32f1ff
  • 颜色 2:#c700ff
  • 第 2 列梯度类型:线性
  • 第2列梯度方向:90度
  • 第 2 列起始位置:40%
  • 第 2 列结束位置:60%

渐变文字颜色

第 3 列渐变背景

第三列也是如此。

  • 颜色1:#c700ff
  • 颜色 2:#32f1ff
  • 第 3 列梯度类型:线性
  • 第三列梯度方向:85度
  • 第 3 列起始位置:20%
  • 第 3 列结束位置:50%

渐变文字颜色

浆纱

接下来更改大小设置。

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

渐变文字颜色

间距

并添加一些自定义左右填充。

  • 左填充:100px(台式机和平板电脑),50px(手机)
  • 右内边距:100 像素(台式机和平板电脑),50 像素(手机)

渐变文字颜色

将 Blurb 模块添加到第 1 列

添加内容

是时候开始添加模块了! 将带有所选标题的 Blurb Module 添加到第 1 列。 稍后在帖子中,我们将使用一个单独的模块来添加正文内容。

渐变文字颜色

选择图标

选择一个选择的图标。

渐变文字颜色

背景颜色

并修改 Blurb Module 的背景颜色。

  • 背景颜色:#ffffff(浅色版面)、#000000(深色版面)

渐变文字颜色

图标设置

继续转到图标设置并在那里进行一些更改。

  • 图标颜色:#000000(浅色布局)、#ffffff(深色布局)
  • 图像/图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:51px

渐变文字颜色

标题文本设置

更改标题文本设置。

  • 标题字体粗细:粗体
  • 标题文本对齐方式:居中
  • 标题文字颜色:#000000(浅色版面)、#ffffff(深色版面)
  • 标题字母间距:-1px
  • 标题行高度:1.2em

渐变文字颜色

间距

然后,转到间距设置并添加一些自定义边距和填充值。

  • 下边距:5px
  • 上边距:50px
  • 底部填充:50px
  • 左填充:50px
  • 右内边距:50px

渐变文字颜色

混合模式

最后但同样重要的是,应用正确的混合模式。

  • 混合模式:变亮(浅色布局)、变暗(深色布局)

渐变文字颜色

将文本模块添加到第 1 列

添加内容

我们将 Blurb 模块的标题和正文分成两个模块,以使混合模式仅适用于图标和标题。 继续并在包含正文内容的 Blurb 模块正下方添加一个文本模块。

渐变文字颜色

背景颜色

接下来,添加背景颜色。

  • 背景颜色:#ffffff(浅色版面)、#0c0c0c(深色版面)

渐变文字颜色

文字设置

并更改文本设置。

  • 文字间距:0.5px
  • 文字行高:2.3em
  • 文本方向:对齐
  • 文字颜色:深色(浅色布局)、浅色(深色布局)

渐变文字颜色

间距

为了给模块一些呼吸空间,在间距设置中添加一些自定义填充值。

  • 上边距:100px
  • 底部填充:100px
  • 左填充:70px
  • 右内边距:70px

渐变文字颜色

盒子阴影

最重要的是,还要添加一个微妙的盒子阴影。

  • 盒子阴影模糊强度:56px
  • 盒子阴影传播强度:-12px
  • 阴影颜色:rgba(0,0,0,0.3)

渐变文字颜色

克隆 Blurb 模块和文本模块两次 + 放置在剩余的列中

最后但并非最不重要的一点是,克隆您可以在第 1 列中找到的两个模块,并将重复项放在剩余的两列中。 相应地更改内容。

渐变文字颜色

预览

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

渐变文本颜色

最后的想法

在这篇文章中,我们向您展示了如何仅使用 Divi 的内置选项在您的网站上创建渐变文本。 为了使本教程有效,并能够在其他设计中实践该方法,您有必要阅读本文的方法部分并在重新创建设计时理解它。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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