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

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

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

让我们开始吧！

预览

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

方法

1. 了解 Divi 混合模式

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

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

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

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

要完成这项工作，您必须使用完全深色或浅色的调色板。 我们使用的混合模式，变亮和变暗，只会在您使用全黑或全白时提供所需的结果。 使用其他颜色时，我们所应用的效果会显示出来。

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

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

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

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

让我们开始创作吧！

订阅我们的 YouTube 频道

添加新部分

背景颜色

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

• 背景颜色：#ffffff（浅色布局）、#000000（深色布局）

间距

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

• 顶部填充：215px
• 底部填充：215px

添加第 1 行

列结构

然后，使用以下列结构添加新行：

第 2 列渐变背景

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

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

浆纱

还要更改大小设置。

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

间距

并修改间距设置。

• 上边距：50px
• 下边距：50px
• 左填充：50px
• 右填充：50px

将文本模块添加到第 2 列

添加内容

现在继续将文本模块添加到您添加的行的第二列。

背景颜色

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

• 背景颜色：#ffffff（浅色布局）、#000000（深色布局）

标题文字设置

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

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

间距

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

• 底部填充：50px

混合模式

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

• 混合模式：变亮（浅色布局）、变暗（深色布局）

将分隔模块添加到行

能见度

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

• 显示分隔线：是

背景颜色

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

• 背景颜色：#ffffff（浅色布局）、#000000（深色布局）

间距

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

• 左填充：250px
• 右填充：250px

混合模式

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

• 混合模式：变亮（浅色布局）、变暗（深色布局）

添加第 2 行

列结构

进入下一行！ 使用以下列结构：

第 1 列渐变背景

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

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

第 2 列渐变背景

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

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

第 3 列渐变背景

第三列也是如此。

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

浆纱

接下来更改大小设置。

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

间距

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

• 左填充：100px（桌面和平板电脑），50px（手机）
• 右内边距：100px（桌面和平板电脑），50px（手机）

将 Blurb 模块添加到第 1 列

添加内容

是时候开始添加模块了！ 将 Blurb 模块添加到第 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 的内置选项在您的网站上创建渐变文本。 为了使本教程有效，并能够在其他设计上练习该方法，您有必要阅读本文的方法部分并在重新创建设计时理解它。 如果您有任何问题或建议，请务必在下方评论区留言！