如何在 Divi 中创建 3 个令人惊叹的等宽字体设计

等宽字体是网页设计的一项令人愉快的资产。 它们对于创建具有美丽对称性和平衡性的设计特别有用。 等宽字体由具有相同宽度（或水平间距）的字母和字符组成。 因此，它们为显示文本提供了一致且优雅的结构。 出于这个原因，等宽字体在编码中被广泛使用。

在本教程中，我们将在 Divi 中创建三个令人惊叹的等宽字体设计。 我们将讨论如何正确自定义文本模块，以一些非常独特的方式定位和设计等宽字体，等等。

让我们开始吧。

抢先看

这是我们将在本教程中构建的设计的快速浏览。

等宽字体设计#1：标志样式

开始建筑设计#1

等宽字体设计#2：大字母块

开始建筑设计#2

等宽字体设计#3：填字游戏

开始建筑设计#3

免费下载等宽字体设计布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有，请安装并激活已安装的 Divi 主题（如果不使用 Divi 主题，请安装并激活 Divi Builder 插件）。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 将一些模拟图像上传到用于本教程的媒体库。 我们将使用来自 HVAC 布局包的 200px x 200px 图像徽标，以及来自 Cake Maker Layout Pack 和 Home Improvement Layout Pack 的两张背景图像（至少 1920px 宽）。

之后，您将有一个空白画布开始在 Divi 中进行设计。

等宽字体设计#1：标志样式

让我们从一个简单的等宽字体设计开始，突出字母的对称平衡。 由于字母间隔均匀，因此等宽字体非常适合用于图形和徽标。 这是一个快速示例，说明如何将等宽字体与简单的图像图标相结合以创建漂亮的图形。

首先，创建一个具有一列行的常规部分。

在添加文本模块之前，我们将向该部分添加背景。 背景将由带有深灰色背景的居中图标图像组成。 我们将使用的图标图像取自 HVAC Layout Pack。 确保图像图标大约为 200 像素 x 200 像素，因为我们将使用实际大小作为背景图像。

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

• 背景颜色：#121212
• 背景图像：[插入 200 像素 x 200 像素的图像图标]
• 背景图片尺寸：实际尺寸
• 背景图片位置：中心

添加文本模块

完成该部分后，将文本模块添加到一列行。

这是我们使用等宽字体添加文本的地方。 等宽字母的方便之处在于，由于每个字母的宽度相同，您可以轻松地将页面上文本的中间字母居中。 这将使与我们添加到该部分的背景图像图标对齐变得容易。

打开文本模块设置，用“优雅”一词更新正文内容。 实际上，您几乎可以使用任何具有奇数个字母的单词，这样我们就有一个中心字母可以很好地重叠背景图像图标。

添加等宽字体设计

Divi 有大约 12 种不同的等宽字体包含在我们可以选择的 Divi 构建器中。 要查看它们，我们可以单击选择一种文本字体并在搜索栏中输入“mono”。 这将显示可用等宽字体的列表。

然后更新设计设置如下：

• 文字字体：Droid Sans Mono
• 文字文字大小：5vw
• 文字字母间距：1.3em
• 文本行高：1em

文本大小的 vw 长度单位和字母间距和行高的 em 长度单位的这种组合将确保文本完美响应所有浏览器大小。

间距

字体准备好后，为文本模块添加一些间距以确保文本完全居中。 由于字母间距，我们可以看到文本有点偏离中心。 我们可以通过添加与我们为字母间距添加的值相等的左填充来轻松解决此问题。

更新以下内容：

• 边距：0px 底部
• 填充：顶部 2em，底部 2em，左侧 1.3em

更改中心字母的颜色

在 Divi 中更改单个字母颜色的一种简单方法是在前端使用构建器时使用内联样式选项。

只需突出显示要更改的字母，然后单击菜单栏中的文本颜色图标。

然后添加以下颜色代码：rgba(248, 142, 96, 0.54)

就是这样！

使行全宽

我们需要为将要添加的文本留出一些空间，因此请继续通过打开行设置并更新以下内容来使行全宽：

• 宽度：100%
• 最大宽度：100%

最后结果

这是最终结果。

如果需要，您可以为文本中的中心字符添加一个空格，以将背景图像图标用于空白区域。 这就是它的样子。

等宽字体设计#2：大字母块

下一个设计展示了等宽字体可能使用的块状字体结构。 与常规（可变宽度）字体不同，等宽字体相互堆叠，以实现现代且赏心悦目的平衡设计。

这是如何做到的。

用一列行创建一个新的常规部分。

在添加任何模块之前，使用背景设计更新该部分，如下所示：

• 背景渐变左颜色：#fcd1e5
• 背景渐变右侧颜色：rgba(255,255,255,0)
• 梯度方向：135deg
• 起始位置：50%
• 结束位置：76%

然后添加背景图像。 我正在使用 Cake Maker Layout Pack 中的一个。

添加行宽

接下来，按如下方式更新行宽：

• 宽度：100%
• 最大宽度：100%

添加文本模块

获得全角行后，向该行添加一个文本模块。

然后使用以下内容更新正文内容：

<p>dividesign<a href="#">learnmore</a></p>

然后按如下方式设置段落文本的样式：

• 文字字体：Overpass Mono
• 文字字体样式：TT
• 文字文字颜色：#2e298f
• 文字文字大小：15vw
• 文字字母间距：0.16em
• 文本行高：1em

我们将为链接文本添加不同的样式，如下所示：

• 链接字体样式：下划线
• 链接文字颜色：#2e298f
• 链接文字大小：3.5vw
• 链接字母间距：0em

间距

文本样式化后，更新间距如下：

• 边距：0px 底部
• 填充：左 0.16em，右 3em

之后，保存设置。 然后使用内嵌样式选项更改字母的颜色，就像我们在文章前面的第一个设计示例中所做的那样。

为此，突出显示前四个字母并将颜色更改为白色。

将第二个字母颜色更改为以下内容：#f34a43

最后，突出显示链接文本中的前五个字母（“learn”）并将颜色更新为以下内容：#f34a43。

最终设计

现在让我们在实时页面上查看最终结果。

等宽字体设计#3：填字游戏

最后一个设计利用等宽字体为您的文本创建填字游戏类型布局。 这是如何做到的。

首先，创建一个具有一列行的新常规部分。

在添加任何模块之前，打开部分设置并添加具有渐变的背景图像，如下所示：

• 背景图片：[插入图片]
• 背景渐变左颜色：
• 背景渐变右颜色：
• 梯度方向：90度
• 起始位置：25%
• 结束位置：0%
• 将渐变放在背景图像上方：是

行设置

部分背景完成后，打开具有新宽度和一些间距的行设置。

• 宽度：100%
• 最大宽度：100%
• 填充：22vw 顶部，5vw 左

添加文本模块

行更新后，在行中添加一个新的文本模块，以单词“mono”作为正文内容。

然后更新文本模块设计如下：

• 文字字体：Rubik Mono One
• 文字文字颜色：#faac00
• 文字文字大小：8vw
• 文字字母间距：0.15em
• 文本行高：1em

复制文本模块

为了加快接下来两个文本块的设计，让我们将刚刚设计的文本模块复制两次，这样您总共可以将三个文本模块堆叠在一起。

更新文本模块 #2

复制文本模块后，打开第二个（中间）文本模块的设置并将正文文本更改为“字体”一词。

然后更新以下内容：

• 正文：“字体”
• 背景颜色：#dddddd
• 文字文字颜色：#930565
• 宽度：0.86em
• 边距：-3em 顶部，2em 左

请注意更改文本模块的宽度如何导致文本垂直显示。 而且因为它是等宽字体，所以它们堆叠均匀。 并且宽度等于每个字母块的大小，我们可以以 1em 的增量移动文本模块。 所以 -3em 上边距将使文本正好 3 个字母块。 2em 左边距会将文本模块向右移动 2 个字母块。 这使得在填字游戏布局中放置项目变得容易。

盒子阴影

让我们添加一个框阴影来增加文本模块后面的背景大小。

• 盒子阴影：见截图
• 框阴影垂直位置：0px
• 框阴影模糊强度：0px
• 箱体阴影扩散强度：0.08em
• 阴影颜色：#dddddd（与背景颜色相同）

Z索引

要确保此文本块位于其他文本模块之上，请按如下方式更新 z 索引：

• Z指数：11

更新文本模块 #3

文本模块#2 完成后，打开第三个文本模块的设置并将正文文本更改为“spaced”一词。

然后使用我们神奇的 em 边距值将模块移动到位：

• 边距：-1em 顶部，2em 左

最终设计

移动的

因为这些设计是使用 vw 和 em 长度单位构建的，所以设计将在所有浏览器尺寸上保持一致。 这是设计在平板电脑和手机显示屏上的样子。

注意：唯一没有响应的元素是第一个设计中的背景图像图标。 但是，您可以轻松地在平板电脑和手机上添加较小的背景图像来解决此问题。

最后的想法

也许在 Divi 中创建等宽字体设计的最佳之处在于字体样式的多功能性。 只需轻轻一点，就能产生很大的不同。 此外，这些应用程序对任何网站都非常实用。

你觉得这三个例子中哪一个最有前途？

我期待在评论中收到您的来信。

干杯!