如何在 Divi 中使用分区分隔符创建令人惊叹的文本设计

为您的网站创建独特的文本设计可能具有挑战性，特别是如果您不想使用大量 CSS 或诉诸于为您在 Photoshop 中设计的图像补充 seo 友好的文本。 使用 Divi（以及一些“开箱即用”的思维），您可以创建一些独特的文本设计，而无需任何外部 css 或自定义图像。 诀窍是使用 Divi 的部分分隔符来覆盖您的文本，以多种不同的方式添加中断和纹理。 在本教程中，我将探索 Divi 分区分隔符的强大功能，以创建一些独特的文本设计，将您的页眉提升到一个新的水平。

让我们开始吧。

抢先看

以下是使用此技术可能进行的文本设计的几个示例：

入门

对于此设计，您需要使用可视化构建器创建一个新页面。 从您的 WordPress 仪表板，导航到页面 > 添加新。 然后给你的页面一个标题并部署可视化构建器。 选择“从头开始构建”选项。 现在您可以开始了！

设计#1：带有渐变高光的破碎文本

在第一个文本设计中，我将使用部分分隔符来拆分文本并使用渐变背景添加形状独特的突出显示元素。 添加具有一列布局的新部分。 此时您不需要添加模块。 我们将首先自定义该部分。

部分设置

打开部分设置并更新以下内容：

背景渐变左颜色：rgba(124,218,36,0.66)
背景渐变右颜色：rgba(0,106,193,0.61)

宽度：80%
截面对齐：居中

顶部分隔线样式：见截图
顶部分隔线颜色：#ffffff
顶部分隔线高度：1.8vw
顶部分隔线水平重复：3x
顶部分隔线排列：在部分内容的顶部

底部分隔线样式：见截图
底部分隔线颜色：#ffffff
底部分隔线高度：1.8vw
底部分隔线水平重复：3x
底部分隔线排列：在部分内容的顶部

自定义边距：5vw 顶部，5vw 底部
自定义填充：0px 顶部，0px 底部

由于文本的设计将使用节分隔符进行，因此重要的是保持节紧凑，没有任何填充，以便分隔符以最小的分隔高度与文本重叠。 使用 vw 长度单位设置分隔线高度将确保分隔线样式能够很好地缩放，以在所有屏幕尺寸上实现一致的设计。 为该部分提供自定义边距是可选的，但也有助于间距，因为我们将在我们的文本模块上使用负边距将其扩展到我们部分的上方和下方（这在稍后会更有意义）。

行设置

对于行，我们需要做的就是调整宽度和填充。 更新以下行设置：

自定义宽度：100%
自定义填充：0px 顶部，0px 底部

由于我们的文本将被添加到行列中，因此我们需要去掉内边距，以便我们的分隔线能够紧贴文本的顶部和底部。

文本模块设置

现在我们终于可以将文本模块添加到一列行了。 在该行内，添加一个内容为“我们的工作”的文本模块。 然后更新设计设置如下：

文字字体：Oswald
文字字体样式：TT
文字文字颜色：#0c71c3
文字文字大小：10vw
文本行高：1em
文字方向：居中
自定义边距：-5vw 顶部，-4vw 底部
自定义填充：2vw 顶部，2vw 底部

这里的关键是使用自定义负边距来扩展该部分上方和下方的文本。 这允许部分分隔符与文本内部重叠以创建破碎的设计效果。 并且背景渐变也给它一个很好的设计触感。 结果可能是我最喜欢的文字设计之一，它为大量创意变化打开了大门。

这是最终的设计。

文字设计#2：具有垂直线条纹理的文字

对于第二个文本设计，继续创建一个具有一列行的新部分。 然后在列中添加一个文本模块。 我认为最好从文本模块开始，而不是先自定义该部分，以便您可以更好地了解设计过程。

文字设置

在单列行中，添加内容为“我们的工作”的文本模块。 然后更新设计设置如下：

文字字体： Poppins
文字字体粗细：超粗
文字字体大小：8vw
文本行高：1em
文字方向：居中
自定义边距：0px 顶部，0px 底部

行设置

行设置将与第一个设计示例相同，因此您可以复制行样式并将其粘贴到该行中。 或者只是更新行设置如下：

自定义宽度：100%
自定义填充：0px 顶部，0px 底部

部分设置

更新部分设置如下：

宽度：70%

顶部分隔线样式：见截图
顶部分隔线颜色：#ffffff
顶部分隔线高度：8vw
顶部分隔线水平重复：150x
顶部分隔线排列：在部分内容的顶部

底部分隔线样式：见截图
底部分隔线颜色：#ffffff
底部分隔线高度：8vw
底部分隔线水平重复：150x
底部分隔线翻转：垂直
底部分隔线排列：在部分内容的顶部

自定义填充：0px 顶部，0px 底部

此设计的关键是分隔线水平重复选项。 将分隔线水平重复设置为 150 倍，高度等于文本的高度，会创建一系列重叠的垂直线，从该部分的顶部和底部延伸。 不要忘记将底部分隔线设置为垂直翻转，以便“线条”向上延伸。

这是最终的设计。

设计 #3：顶部和底部带有局部纹理的文本

为了加快下一个设计的过程，请继续复制您刚刚在上面第二个设计示例中创建的部分。

更新部分设置

背景颜色：#e02b20

顶部分隔线样式：见截图
顶部分隔线颜色：#e02b20
顶部分隔线高度：3vw
顶部分隔线水平重复：30x

底部分隔线样式：见截图
底部分隔线颜色：#e02b20
底部分隔线高度：3vw
底部分隔线水平重复：30x

这里的关键是确保您的分隔线颜色与部分背景颜色匹配，以便分隔线仅在与文本重叠的地方可见。

更新文本设置

现在剩下的就是更新文本颜色：

文字文字颜色：#ffffff

这是最终的设计。

一个有趣的设计替代设计 #3

在我离开这个设计之前，我想我想分享一下这个部分的底部分隔线是如何很容易地变成草的，这样文本看起来就像坐在田野里一样。 为此，请按如下方式更新设置：

背景渐变左颜色：#68a4d8（天空）
背景渐变右颜色：#1c7503（草）
起始位置：82%
结束位置：0%
自定义填充：5vw 顶部
顶部分隔线样式：云（或气泡？）
底部分隔线颜色：#1c7503

然后将文字颜色更新为#000835

这是结果。

手机呢？

因为在这些设计中都使用了 vw 长度单位，文本和分隔线样式将在所有浏览器上很好地缩放，而无需在平板电脑和智能手机上分配额外的尺寸。 但是，如果您在智能手机上遇到文本缩小太少的问题，您可能需要增加文本大小 vw 长度单位值。

最后的想法

我希望您在尝试使用部分分隔符进行独特的文本设计时会感到很有趣。 有了 Divi 中可用的所有不同字体、颜色和分隔线样式，我相信您在为下一个项目创建一些看起来很棒的文本设计时不会遇到任何麻烦。

有关如何以创造性方式使用分区分隔符的更多灵感，请查看这些背景纹理、导航菜单框架和底部页脚栏背景。

直到下一次，我期待在评论中收到您的来信。

干杯!