使用 Divi 的文本模塊在您的 Divi 頁面設計中創建塊元素

文本模塊是您使用 Divi 創建的任何頁面設計的重要組成部分，我相信這是我們都同意的。 通常，它們用於以簡單的方式顯示文本。 但是您也可以使用文本模塊來創建令人驚嘆的設計元素。 在之前的博文中，我們已經向您展示瞭如何使用文本來提升您的網頁設計。

在本教程中，我們將繼續添加選項供您在設計頁面和使用文本模塊時進行選擇。 您可能知道也可能不知道，您可以在同一個文本模塊中組合多種不同的文本類型。 此外，一個模塊可以包含多個標題、段落、鏈接等。 在這篇文章中，我們將充分利用所有這些文本類型，在我們的頁面設計中創建令人驚嘆的塊元素。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們先看看不同屏幕尺寸的最終結果。

讓我們開始吧！

添加新的常規部分

背景顏色

首先向您當前正在處理的頁面添加一個新的常規部分。 然後，打開部分設置並更改背景顏色。

• 背景顏色：#000000

間距

接下來轉到您部分的間距設置並添加一些自定義填充值。

• 頂部填充：280 像素（桌面）、150 像素（平板電腦和手機）
• 底部填充：280 像素（桌面）、150 像素（平板電腦和手機）

添加新行

列結構

完成修改部分設置後，使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並在大小設置中使行佔據屏幕的整個寬度。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

最後，在間距設置中添加一些自定義填充。

• 第 1 列左填充：100 像素（桌面和平板電腦），50 像素（手機）
• 第 2 列自定義填充：50px
• 第 3 列自定義填充：50px

將標題文本模塊添加到第 1 列

內容框

是時候開始添加不同的模塊了！ 第一列中我們需要的第一個模塊是文本模塊。 向內容框中添加一些 H2 內容。

H2 文本設置

然後，轉到 H2 文本設置並進行一些更改：

• 標題 2 字體：Source Code Pro
• 標題 2 字體樣式：大寫
• 標題 2 文本顏色：#ffffff
• 標題 2 文字大小：100px
• 標題 2 字母間距：24px

間距

通過使用一些負上邊距來減少頂部的空間。

• 上邊距：-50px

將描述文本模塊添加到第 1 列

文字設置

第一列中需要的第二個模塊是描述文本模塊。 添加內容後，轉到文本設置並進行一些更改：

• 文本字體：Source Code Pro
• 文字顏色：#ffffff
• 文本方向：對齊

漿紗

也減少文本模塊的寬度。

• 寬度：68%

間距

最後但並非最不重要的一點是，在此文本模塊和間距設置中的前一個模塊之間創建一些空間。

• 上邊距：200 像素（桌面）、100 像素（平板電腦和手機）
• 下邊距：100px（平板電腦和手機）

將塊文本模塊添加到第 2 列

內容框

是時候進入第二列了！ 在這裡，我們將使用文本模塊來創建塊元素。 完成這項工作的一個重要部分是正確構建內容框。 在下面的打印屏幕中，您可以看到我們使用了 H3 標題、H4 標題、段落和鏈接。 在 H4 標題和段落之間，我們確保還有一些額外的空間。

背景顏色

為文本模塊添加黑色背景色。

• 背景顏色：#000000

文字設置

我們將分別修改每一種文本類型。 首先修改段落設置。

• 文本字體：Source Code Pro
• 文本方向：左
• 文字顏色：淺

鏈接文字設置

然後，對鏈接設置進行一些額外的更改。

• 鏈接字體樣式：大寫和下劃線
• 鏈接下劃線顏色：#ffffff
• 鏈接文字顏色：#edf000
• 鏈接文字大小：16px
• 鏈接字母間距：3px

標題 3 文本設置

我們內容框中的 H3 標題需要以下設置：

• 標題 3 字體樣式：大寫
• 標題 3 文字大小：33px

標題 4 文本設置

繼續打開 H4 文本設置並在那裡進行一些更改。

• 標題 4 文本顏色：#4f4f4f
• 標題 4 文字大小：19px
• 標題 4 字母間距：-1px

漿紗

為了創建我們想要的確切形狀，接下來我們將減少文本模塊的寬度。

• 寬度：88%（桌面）、60%（平板）、90%（手機）

間距

我們還需要更改間距設置。

• 左邊距：200px（平板電腦）
• 頂部填充：50px
• 底部填充：50px
• 左填充：50px
• 右填充：50px

邊界

然後，為文本模塊添加一個微妙的邊框。

• 邊框寬度：2px
• 邊框顏色：#424242

盒子陰影

最後，添加一個彩色框陰影。

• 框陰影水平位置：19px
• 框陰影垂直位置：16px
• 框陰影擴散強度：-4px
• 陰影顏色：#f2ff00

克隆塊文本模塊兩次並放置在第 3 列中

為了節省時間，我們將克隆我們已經創建兩次的塊文本模塊，並將兩個副本放在行的第三列中。

紅色文本模塊修改

更改鏈接文本顏色

打開第三列中的第一個文本模塊並更改鏈接顏色。

• 鏈接文字顏色：#e02b20

更改間距

然後，轉到間距設置並添加一些上邊距。

• 上邊距：-150px（桌面）、-20px（平板）、50px（手機）

更改框陰影顏色

將框陰影顏色更改為用於鏈接文本的相同顏色。

• 陰影顏色：#e02b20

藍色文本模塊修改

更改鏈接文本顏色

還要更改第三列中第二個文本模塊的鏈接顏色。

• 鏈接文字顏色：#0ff3ff

更改尺寸

接下來更改大小設置。

• 大小：67%（桌面）、60%（平板電腦）、90%（手機）

更改間距

並且要在此模塊和其他兩個文本模塊之間創建一些重疊，請使用自定義邊距值。

• 上邊距：-20px（桌面）、-30px（平板）、50px（手機）
• 左邊距：-160px（桌面）、200px（平板）、0px（手機）

更改框陰影顏色

最後，將框陰影顏色更改為與鏈接文本相同的藍色，您就完成了！

• 陰影顏色：#0ff3ff

預覽

現在我們已經完成了所有步驟，讓我們最後看看在不同屏幕尺寸上的結果。

最後的想法

您會驚訝於將文本模塊與 Divi 的內置選項結合使用可以實現多少獨特的設計。 不需要額外的 CSS 代碼。 在這篇文章中，我們向您展示瞭如何使用不同的文本類型在您的 Divi 頁面設計中創建令人驚嘆的塊元素。 如果您有任何問題或建議，請務必在下方評論區留言！