WordPress divi主题

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

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

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

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

google广告开户

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

让我们开始吧。

抢先看

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

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

divi等宽字体设计
divi等宽字体设计

开始建筑设计#1

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

divi等宽字体设计

开始建筑设计#2

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

divi等宽字体设计

开始建筑设计#3

WordPress divi主题

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

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

订阅我们的 Youtube 频道

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

让我们进入教程,好吗?

你需要什么开始

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活已安装的 Divi 主题(如果不使用 Divi 主题,则安装并激活 Divi Builder 插件)。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 将一些模拟图像上传到媒体库以用于本教程。 我们将使用来自 HVAC 布局包的 200 像素 x 200 像素的图像徽标,以及来自 Cake Maker 布局包和家居装修布局包的两个背景图像(至少 1920 像素宽)。

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

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

divi等宽字体设计

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

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

fiverr建站WordPress程序员

divi等宽字体设计

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

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

  • 背景颜色:#121212
  • 背景图片: [insert 200px by 200px image icon]
  • 背景图像尺寸:实际尺寸
  • 背景图像位置:中心

divi等宽字体设计

添加文本模块

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

独立站选品工具

divi等宽字体设计

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

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

divi等宽字体设计

添加等宽字体设计

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

高质量外链购买

然后更新设计设置如下:

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

divi等宽字体设计

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

间距

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

更新以下内容:

JasperAI 10000字免费额度试用
  • 边距:0px 底部
  • 填充:顶部 2em,底部 2em,左侧 1.3em

divi等宽字体设计

更改中心字母的颜色

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

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

divi等宽字体设计

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

WordPress备份工具updrafplus

就是这样!

使行全宽

我们需要为将要添加的文本腾出一些空间,所以继续通过打开行设置并更新以下内容使行全宽:

  • 宽度:100%
  • 最大宽度:100%

divi等宽字体设计

最后结果

这是最终结果。

divi等宽字体设计

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

divi等宽字体设计

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

divi等宽字体设计

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

这是如何做到的。

创建一个具有单列行的新常规部分。

divi等宽字体设计

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

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

divi等宽字体设计

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

divi等宽字体设计

添加行宽

接下来,更新行宽如下:

  • 宽度:100%
  • 最大宽度:100%

divi等宽字体设计

添加文本模块

获得全角行后,将文本模块添加到该行。

divi等宽字体设计

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

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

divi等宽字体设计

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

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

divi等宽字体设计

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

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

divi等宽字体设计

间距

文本样式化后,按如下方式更新间距:

  • 边距:0px 底部
  • 填充:左侧 0.16em,右侧 3em

divi等宽字体设计

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

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

divi等宽字体设计

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

divi等宽字体设计

最后,突出显示链接文本中的前五个字母(“学习”)并将颜色更新为以下内容:#f34a43。

divi等宽字体设计

最终设计

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

divi等宽字体设计

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

divi等宽字体设计

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

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

divi等宽字体设计

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

  • 背景图片: [insert image]
  • 背景渐变左颜色:
  • 背景渐变正确颜色:
  • 渐变方向:90度
  • 起始位置:25%
  • 结束位置:0%
  • 在背景图像上方放置渐变:是

divi等宽字体设计

行设置

完成部分背景后,使用新宽度和一些间距打开行设置。

  • 宽度:100%
  • 最大宽度:100%
  • 填充:顶部 22vw,左侧 5vw

divi等宽字体设计

添加文本模块

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

divi等宽字体设计

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

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

divi等宽字体设计

复制文本模块

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

divi等宽字体设计

更新文本模块 #2

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

然后更新以下内容:

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

divi等宽字体设计

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

盒子阴影

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

  • 盒子阴影:见截图
  • 盒子阴影垂直位置:0px
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:0.08em
  • 阴影颜色:#dddddd(与背景颜色相同)

divi等宽字体设计

Z 指数

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

divi等宽字体设计

更新文本模块 #3

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

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

  • 边距:顶部 -1em,左侧 2em

divi等宽字体设计

最终设计

divi等宽字体设计

移动的

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

divi等宽字体设计

divi等宽字体设计

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

最后的想法

也许在 Divi 中创建等宽字体设计的最好的事情是字体样式的多功能性。 只是一些小的接触可以产生很大的不同。 此外,这些应用程序对任何网站都非常实用。

您认为这三个例子中哪一个最有希望?

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

干杯!

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