如何使用 Divi 的背景設置創建漸變背景疊加

在今天的教程中，我們將探索新的 Divi 背景設計功能為您的網站帶來的新的優雅的可能性，更具體地說； 通過使用漸變背景疊加。

通過此新的後台更新，Divi 構建器中添加了許多新選項，這將幫助您在設計自己的或為客戶的網站時滿足您的需求。 這些新選項讓您可以隨意調整網站的外觀和感覺。

在此更新發布之前，大多數更改（現在可以在 Divi 構建器中進行）必須通過自定義 CSS 代碼進行。 對您的背景進行設計更改現在變得比以往任何時候都容易。 只需點擊幾下，您就可以為網站的所有不同部分創建漂亮的背景。

漸變背景疊加示例

我們創建了三個帶有前後圖像的部分，它們將向您展示新選項如何增強您的網站所反映的整體感覺，並賦予它某種“je ne sais quoi”因素。

英雄部分

這是僅添加背景圖像時英雄部分的樣子：

當我們將漸變背景疊加添加到上圖中使用的相同背景圖像時，我們的最終結果將是這樣的：

模糊部分

這是使用單色背景時模糊部分的樣子：

這就是當我們將漸變背景疊加添加到圖案背景時最終結果的樣子：

定價部分

當我們使用一種顏色（較淺和較深的色調）時，定價部分是這樣的：

這就是使用漸變背景疊加後最終結果的樣子：

它們中的每一個都有不同的設置，我們將準確地向您展示——並逐步向您展示如何創建這種外觀，以便您可以在自己的網站上使用它。

循序漸進：英雄部分

對於本文的第一部分，我們將重新創建一個英雄部分。 此示例將反映背景設計功能如何更改圖像中使用的顏色。 雖然我們使用了漸變背景疊加，但我們所做的更改非常微妙。 我們結合不同顏色的天空為圖像添加了較暗的色調。

開始創作

讓我們首先在您的 WordPress 網站上創建一個新頁面。 現在，向該頁面添加一個帶有全角行的標準部分。 接下來，將不同的模塊放在您的行中。 我們使用了兩個文本模塊和一個按鈕模塊。

第一個文本模塊設置

第一個文本模塊是您的英雄部分的標題將出現的地方。在內容選項卡的文本子類別中的內容框中鍵入要顯示的文本，然後移至設計選項卡。

在“設計”選項卡中，對“文本”子類別進行以下修改：

• 文字方向：居中
• 文字字體大小：30
• 文字字體顏色：#FFFFFF

第二個文本模塊設置

現在，打開下一個文本模塊並在內容框中輸入文本。 接下來，轉到“設計”選項卡並對“文本”子類別進行以下修改：

• 文字方向：居中
• 文字字體大小：16
• 文字字體顏色：#FFFFFF

向下滾動相同的選項卡，並將“500px”添加到“大小”子類別中的“最大寬度”，並將“2%”添加到“間距”子類別中的底部邊距。

按鈕設置

最後但並非最不重要的是，打開按鈕模塊的設置。 在“內容”選項卡的“文本”子類別中鍵入要鏈接到按鈕的 CTA，然後轉到“設計”選項卡。

在“設計”選項卡中，對“按鈕”子類別進行以下調整：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：20
• 按鈕文字顏色：#FFFFFF
• 按鈕背景顏色：rgba(0,0,0,0)
• 按鈕邊框寬度：2
• 按鈕邊框顏色：#FFFFFF
• 按鈕邊框半徑：7

現在，打開行部分並在設計模塊的間距子類別中進行以下調整：

最高利潤率：15%
底邊距：10%

漸變背景疊加設置

現在我們進入有趣的部分； 將漸變背景疊加添加到背景圖像。 繼續並打開該部分的設置。 接下來，轉到背景子類別並開始添加漸變背景。

對於我們製作的示例，我們使用了以下設置：

• 第一種顏色：#3730ff
• 第二種顏色：#e02b20
• 漸變類型：線性
• 梯度方向：272deg
• 起始位置：40%
• 結束位置：100%

現在，轉到背景圖像選項卡並添加您選擇的圖像。 我們特意選擇了一個包含天空的圖像來增強我們試圖創造的效果。

現在，向下滾動相同的選項卡。 將背景圖像居中並激活背景圖像混合下拉菜單中的乘法選項。 您還有很多其他選項可以幫助您達到所需的確切結果。

而且，你有最終的結果：

一步一步：模糊部分

我們將向您展示如何創建的第二個示例是簡介部分。 我們希望將注意力集中在簡介的內容上，這就是為什麼我們沒有選擇繁忙的背景而是選擇圖案背景的原因。

本例中使用的背景圖案來自 Toptal。 你可以下載你喜歡的模式，將它們用於各種目的——包括商業目的。 只是不要忘記按照他們的常見問題解答中的說明將它們記入您網站的來源。

我們還使模糊圖標稍微透明，以使漸變顏色通過。 儘管每個宣傳語都具有相同的設置，但通過圖標顯示的顏色略有不同，並且與我們使用的漸變顏色一致。

開始創作

首先將標準部分添加到新頁面或現有頁面。 在該部分中，我們需要一行三列。

繼續在行的第一列中添加一個 Blurb 模塊。 我們將在每一列中使用相同的模糊模塊設置。 這就是為什麼我們只需要製作一次 blurb 模塊並為其他兩列克隆它。

模糊設置

打開 Blurb 模塊的設置，然後在內容選項卡的文本子類別中鍵入標題和內容。 轉到“設計”選項卡並對“圖像和圖標”子類別進行以下調整：

• 圖標顏色：rgba(255,255,255,0.36)
• 圓形圖標：是
• 圓圈顏色：rgba(255,255,255,0)
• 顯示圓形邊框：是
• 圓形邊框顏色：rgba(255,255,255,0.36)
• 圖像/圖標放置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：96px

向下滾動相同的選項卡並將文本方向置於“文本”子類別中的“居中”。

繼續滾動並打開標題文本子類別。 繼續並使用以下設置：

• 標題字體大小：18
• 標題文本顏色：#FFFFFF
• 標題行高度：1em

現在，唯一需要更改的是正文子類別。 確保以下設置適用：

• 正文字體大小：14
• 正文顏色：#FFFFFF
• 車身線高：1.5em

不要忘記克隆 Blurb 模塊兩次，將它們放在其他兩列中並相應地更改內容。

行設置

打開行設置並轉到“設計”選項卡中的“間距”子類別。 您唯一需要做的就是將頂部和底部邊距更改為“5%”。

漸變背景疊加設置

最後但並非最不重要的一點是，我們將添加帶有漸變疊加的背景圖像。 打開您的部分的設置，然後轉到內容選項卡的背景子類別。

接下來，對漸變選項進行以下更改：

• 第一種顏色：#52009b
• 第二種顏色：#0edeed
• 漸變類型：徑向
• 徑向：右
• 起始位置：28%
• 結束位置：100%

轉到背景選項，上傳選擇的圖案並進行以下更改：

• 背景圖片位置：中心
• 背景圖像重複：重複（取決於您的模式）
• 背景圖像混合：相乘

就是這樣！ 你現在應該有以下驚人的結果：

循序漸進：定價部分

這篇文章的最後一個例子是定價部分。 在本節中，我們想向您展示您可以在任何地方使用漸變背景。 它不僅可以在部分中使用，還可以在列中使用。 我們將只對兩列使用漸變背景，並為第二列進行漸變背景疊加。

我們這樣做的原因是為了強調特色定價包。 我們使用比其他兩列更強烈的顏色，我們還添加了圖案背景。 這兩件事相結合，增加了吸引人們使用您最想推廣的特色定價套餐的機率。

開始創作

首先將新的標準部分添加到您網站上的新頁面或現有頁面。 該部分需要一行三列。 我們將使用的模塊對於每一列都是相同的，並且包含相同的設置。 這就是為什麼我們要為第一列製作它們，然後將它們克隆到其他兩列。

第一個文本模塊設置

將新的文本模塊添加到第一列，將價格包的類型添加到內容選項卡的文本子類別中的內容框中，然後移至設計選項卡。

將以下更改應用於“設計”選項卡的“文本”子類別：

• 文字方向：居中
• 文字字體大小：24
• 文字字體顏色：#FFFFFF
• 文本行高：1.5em

向下滾動相同的選項卡並對 Spacing 子類別進行以下修改：

• 上邊距：50px
• 下邊距：20px

第二個文本模塊設置

將另一個文本模塊添加到同一列。 在“內容”選項卡的“文本”子類別中的內容框中記下包裝的價格，然後轉到“設計”選項卡。

在“設計”選項卡中，進行以下調整：

• 文字方向：居中
• 文字字體大小：82px
• 文字字體顏色：#FFFFFF
• 文本行高：1.1em

向下滾動相同的選項卡並將“10px”添加到底部邊距。

第三個文本模塊設置

對於我們的最後一個文本模塊，將文本添加到內容選項卡的文本子類別中的內容框中。 然後，轉到“設計”選項卡並對“文本”子類別進行以下更改：

• 文字方向：居中
• 文字字體大小：16
• 文字字體顏色：#FFFFFF
• 文本行高：1.1em

向下滾動相同的選項卡並將“33px”添加到“間距”子類別的底部邊距。

按鈕設置

我們將添加到此列的下一個模塊是按鈕模塊。 在“內容”選項卡的“文本”子類別中的內容框中鍵入要顯示的 CTA，然後移至“設計”選項卡。

在“設計”選項卡中，將“對齊”子類別中的“按鈕對齊”置於“居中”，並對“按鈕”子類別進行以下更改：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：13
• 按鈕文字顏色：#FFFFFF
• 按鈕背景顏色：rgba(255,255,255,0.11)
• 按鈕邊框寬度：2
• 按鈕邊框顏色：#FFFFFF
• 按鈕邊框半徑：4
• 按鈕字母間距：1

分隔線設置

最後，我們將向列添加分隔線以創建空間。 在“內容”選項卡中選擇“不顯示分隔線”，然後轉到在高度字段中放置“25px”的設計選項卡。

既然我們已經添加了所有模塊，請確保克隆它們並將它們也放在其他列中。

漸變背景疊加設置

對於此示例，我們將為不同的列使用兩種不同的背景設置。 第一列和最後一列相同，第二列略有不同。

轉到行設置並將以下更改應用於“內容”選項卡的“背景”子類別中第一列和第三列的漸變選項：

• 第一種顏色：rgba(10,122,178,0.57)
• 第二種顏色：rgba(142,0,142,0.47)
• 第 1 列漸變類型：徑向
• 第 1 列徑向：左上角
• 第 1 列起始位置：0
• 第 1 列結束位置：100%

接下來，轉到第 2 列並對梯度選項進行以下更改：

• 第一種顏色：#0a7ab2
• 第二種顏色：#8e008e
• 第 2 列梯度類型：線性
• 第 2 列梯度方向：180 度
• 第 2 列起始位置：0
• 第 2 列結束位置：100

轉到背景圖片選項，上傳背景圖片並更改設置：

• 第 2 列背景圖像位置：左上角
• 第 2 列背景圖像重複：重複
• 第 2 列背景圖像混合：相乘

最後的想法

我們在這篇博文中向您展示的示例只是您在使用新的背景設計功能時可以獲得的結果的一小部分。 在即將發布的帖子中，我們肯定還會處理其他示例，這些示例將幫助您為您製作的網站創建出色的設計。 如果您有任何問題、意見或建議； 在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！