WordPress divi主题

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

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

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

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

google广告开户

让我们开始吧。

抢先看

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

迪维文字设计

迪维文字设计

迪维文字设计

迪维文字设计

入门

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

设计#1:带有渐变突出显示的破碎文本

WordPress divi主题

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

部分设置

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

背景渐变左颜色: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 长度单位设置分隔线高度将确保分隔线样式可以很好地缩放,以便在所有屏幕尺寸上实现一致的设计。 为部分提供自定义边距是可选的,但也有助于间距,因为我们将在我们的文本模块上使用负边距来扩展它在我们的部分上方和下方(这在以后应该更有意义)。

fiverr建站WordPress程序员

行设置

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

自定义宽度:100%
自定义填充:0px 顶部,0px 底部

由于我们的文本将被添加到行列中,因此我们需要去掉填充,以便我们的分隔符将拥抱我们文本的顶部和底部。

迪维文字设计

文本模块设置

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

独立站选品工具

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

迪维文字设计

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

这是最终的设计。

迪维文字设计

高质量外链购买

文字设计#2:带有垂直线条纹理的文字

迪维文字设计

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

文字设置

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

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

迪维文字设计

JasperAI 10000字免费额度试用

行设置

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

自定义宽度:100%
自定义填充:0px 顶部,0px 底部

迪维文字设计

部分设置

更新部分设置如下:

宽度:70%

WordPress备份工具updrafplus

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

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

自定义填充:0px 顶部,0px 底部

迪维文字设计

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

这是最终的设计。

迪维文字设计

设计#3:顶部和底部带有部分纹理的文本

迪维文字设计

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

迪维文字设计

更新部分设置

背景颜色:#e02b20

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

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

迪维文字设计

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

更新文本设置

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

文字文字颜色:#ffffff

这是最终的设计。

迪维文字设计

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

在我离开这个设计之前,我想我会分享一下本节中的底部分隔线是如何轻松变成草的,这样文本看起来就像坐在田野里一样。 为此,请按如下方式更新设置:

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

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

这是结果。

迪维文字设计

手机呢?

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

迪维文字设计

最后的想法

我希望你在尝试独特的文本设计的部分分隔符时玩得开心。 借助 Divi 中可用的所有不同字体、颜色和分隔线样式,我相信您在为下一个项目创建自己的精美文本设计时不会遇到任何麻烦。

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

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

干杯!

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