如何僅使用 Divi 的內置選項將漸變文本顏色應用於您的副本

無論您創建什麼樣的網站，突出顯示副本和內容仍然是首要任務之一。 使用 Divi 的內置選項，有很多方法可以到達那裡。 您擁有的一種可能性是將漸變文本顏色應用於您的副本。 這是為您的網站添加顏色的好方法，尤其是當您保持網站的其餘部分乾淨和簡約時。 它有助於平衡空白，並為您的網站帶來新鮮空氣。

在本教程中，我們將向您展示如何僅使用 Divi 的內置選項為您的文本提供漸變顏色。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們先看看不同屏幕尺寸的結果。 我們將向您展示如何使用淺色和深色調色板進行這項工作。 一旦掌握了方法，您就可以使用漸變文本創建各種設計。

方法

1. 了解 Divi 混合模式

混合模式的工作方式與您在圖像編輯軟件中習慣使用的方式完全相同。 它們基於層結構。 具體來說，這意味著 Divi 中的混合模式將遵循一定的層次結構：

• 應用於模塊的混合模式將混合模塊 + 其下方的列
• 應用於列的混合模式將混合其下方的列 + 行
• 應用於行的混合模式將混合其下方的行 + 部分

對於本教程，有必要了解應用於模塊的混合模式將與其下方的列混合。 通過給列一個漸變背景和有問題的模塊一個混合模式，我們可以設法實現漸變色文本。

2. 在全深或淺色調色板之間進行選擇

要完成這項工作，您必須使用完全深色或淺色的調色板。 我們使用的混合模式，變亮和變暗，只會在您使用全黑或全白時提供所需的結果。 使用其他顏色時，我們所應用的效果會顯示出來。

3. 刪除列和模塊之間的所有裝訂線寬度

正如方法的第一部分所述，我們將使用列漸變背景。 為了確保這個漸變背景不會出現在我們不想出現的任何地方，我們將刪除所有的間距寬度。 通過這樣做，我們將確保模塊之間沒有應用默認的自定義邊距。 為了彌補我們失去的空間，我們將手動添加自定義填充。

4. 使用填充而不是改變元素的寬度

為了調整設計元素的寬度，我們將使用自定義的左右填充。 更改大小設置中的寬度將更改整個模塊的寬度，並允許列漸變背景顯示在左側和右側，這是我們不想要的。

讓我們開始創作吧！

訂閱我們的 YouTube 頻道

添加新部分

背景顏色

讓我們開始吧！ 將常規部分添加到新頁面或現有頁面並為其提供正確的背景顏色（取決於您是要重新創建淺色還是深色佈局）。

• 背景顏色：#ffffff（淺色佈局）、#000000（深色佈局）

間距

繼續向該部分添加一些自定義填充。

• 頂部填充：215px
• 底部填充：215px

添加第 1 行

列結構

然後，使用以下列結構添加新行：

第 2 列漸變背景

向該行的第二列添加漸變背景。 這是我們將在教程的下一部分中放置標題文本模塊的地方。

• 顏色 1：#c700ff
• 顏色 2：#32f1ff
• 第 2 列梯度方向：150 度
• 第 2 列起始位置：20%
• 第 2 列結束位置：60%

漿紗

還要更改大小設置。

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

間距

並修改間距設置。

• 上邊距：50px
• 下邊距：50px
• 左填充：50px
• 右填充：50px

將文本模塊添加到第 2 列

添加內容

現在繼續將文本模塊添加到您添加的行的第二列。

背景顏色

根據您要重新創建的佈局類型，為您的模塊提供正確的背景。

• 背景顏色：#ffffff（淺色佈局）、#000000（深色佈局）

標題文字設置

接下來更改標題文本設置。

• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#000000（淺色佈局）、#ffffff（深色佈局）
• 標題 2 文字大小：67 像素（桌面）、50 像素（平板電腦）、40 像素（手機）
• 標題 2 字母間距：-2px

間距

並添加一些底部填充。 請記住，我們使用底部填充而不是邊距來確保不顯示列漸變背景。

• 底部填充：50px

混合模式

要將列的漸變背景應用於您添加的模塊，請在過濾器設置中應用混合模式。

• 混合模式：變亮（淺色佈局）、變暗（深色佈局）

將分隔模塊添加到行

能見度

我們在這一行中需要的第二個也是最後一個模塊是分頻器模塊。

• 顯示分隔線：是

背景顏色

根據您重新創建的佈局類型更改背景顏色。

• 背景顏色：#ffffff（淺色佈局）、#000000（深色佈局）

間距

為了減少分隔線的寬度，我們將在左側和右側添加一些自定義填充。

• 左填充：250px
• 右填充：250px

混合模式

再次，添加混合模式以顯示列漸變背景。

• 混合模式：變亮（淺色佈局）、變暗（深色佈局）

添加第 2 行

列結構

進入下一行！ 使用以下列結構：

第 1 列漸變背景

繼續向第一列添加漸變背景。

• 顏色 1：#c700ff
• 顏色 2：#32f1ff
• 第 1 列漸變類型：線性
• 第 1 列梯度方向：105deg
• 第 1 列起始位置：20%
• 第 1 列結束位置：50%

第 2 列漸變背景

我們也為第二列使用漸變背景。

• 顏色 1：#32f1ff
• 顏色 2：#c700ff
• 第 2 列梯度類型：線性
• 第 2 列梯度方向：90 度
• 第 2 列起始位置：40%
• 第 2 列結束位置：60%

第 3 列漸變背景

第三列也是如此。

• 顏色 1：#c700ff
• 顏色 2：#32f1ff
• 第 3 列漸變類型：線性
• 第 3 列梯度方向：85deg
• 第 3 列起始位置：20%
• 第 3 列結束位置：50%

漿紗

接下來更改大小設置。

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

間距

並添加一些自定義的左右填充。

• 左填充：100px（桌面和平板電腦），50px（手機）
• 右填充：100px（桌面和平板電腦），50px（手機）

將 Blurb 模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 將 Blurb 模塊添加到第 1 列並選擇標題。 在帖子的後面，我們將使用一個單獨的模塊來添加正文內容。

選擇圖標

選擇一個選擇的圖標。

背景顏色

並修改 Blurb Module 的背景顏色。

• 背景顏色：#ffffff（淺色佈局）、#000000（深色佈局）

圖標設置

繼續轉到圖標設置並在那裡進行一些更改。

• 圖標顏色：#000000（淺色佈局）、#ffffff（深色佈局）
• 圖像/圖標放置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：51px

標題文字設置

還要更改標題文本設置。

• 標題字體粗細：粗體
• 標題文本對齊：居中
• 標題文本顏色：#000000（淺色佈局）、#ffffff（深色佈局）
• 標題字母間距：-1px
• 標題行高度：1.2em

間距

然後，轉到間距設置並添加一些自定義邊距和填充值。

• 下邊距：5px
• 頂部填充：50px
• 底部填充：50px
• 左填充：50px
• 右填充：50px

混合模式

最後但並非最不重要的是，應用正確的混合模式。

• 混合模式：變亮（淺色佈局）、變暗（深色佈局）

將文本模塊添加到第 1 列

添加內容

我們將 Blurb 模塊的標題和正文分成兩個模塊，以使混合模式僅應用於圖標和標題。 繼續並在包含正文內容的 Blurb 模塊正下方添加一個文本模塊。

背景顏色

接下來，添加背景顏色。

• 背景顏色：#ffffff（淺色佈局）、#0c0c0c（深色佈局）

文字設置

並更改文本設置。

• 文字字母間距：0.5px
• 文本行高：2.3em
• 文本方向：對齊
• 文字顏色：深色（淺色版式）、淺色（深色版式）

間距

為了給模塊一些喘息的空間，在間距設置中添加一些自定義填充值。

• 頂部填充：100px
• 底部填充：100px
• 左填充：70px
• 右填充：70px

盒子陰影

最重要的是，還添加一個微妙的框陰影。

• 框陰影模糊強度：56px
• 框陰影擴散強度：-12px
• 陰影顏色：rgba(0,0,0,0.3)

克隆 Blurb 模塊和文本模塊兩次 + 放在剩餘的列中

最後但並非最不重要的一點是，克隆您可以在第 1 列中找到的兩個模塊，並將重複項放在剩餘的兩列中。 相應地更改內容。

預覽

現在我們已經完成了所有步驟，讓我們最後看看最終結果。

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項在您的網站上創建漸變文本。 為了使本教程有效，並能夠在其他設計上練習該方法，您有必要閱讀本文的方法部分並在重新創建設計時理解它。 如果您有任何問題或建議，請務必在下方評論區留言！