如何在 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 中創建等寬字體設計的最佳之處在於字體樣式的多功能性。 只需輕輕一點，就能產生很大的不同。 此外，這些應用程序對任何網站都非常實用。

你覺得這三個例子中哪一個最有前途？

我期待在評論中收到您的來信。

乾杯!