如何使用 Divi 創建美麗的模糊背景

如今，漸變背景幾乎是您遇到的每個現代網站的一部分。 但是，一旦您想要創建更複雜的漸變，您可能傾向於使用圖像編輯軟件。 有了 Divi，還有另一種選擇。 由於 Divi 具有許多內置選項，您可以將圖像模塊變成模糊背景。 我們會將背景模糊到只有顏色顯示出來的程度，從而形成漸變。 我們將從頭開始重新創建一個漂亮的示例，並免費共享設計示例 JSON 文件！

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載模糊背景佈局

要使用免費的模糊背景佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

方法

• 我們將三個不同的模塊添加到一列； 兩個圖像模塊和一個 CTA 模塊
• 第一張圖片保持其初始外觀
• 第二張圖像將變得模糊並增大尺寸
• 我們還將通過使用圖像模塊中包含的其他過濾器設置來增強顏色
• CTA 模塊將重疊模糊的圖像模塊並將其用作其背景
• 為了確保 Image Module #2 的模糊和大小增加不會超過列容器，我們將隱藏列溢出

讓我們開始重建

訂閱我們的 YouTube 頻道

添加新部分

首先向您正在處理的頁面添加一個新的常規部分。

添加新行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並在設計選項卡中更改大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 最大寬度：100%

第 2 列溢出

移至高級選項卡並使用一行 CSS 代碼隱藏第 2 列溢出。 這樣做將幫助我們確保沒有超出列容器的內容。 一旦我們開始將圖像模塊轉換為模糊背景並增加其大小，這將變得尤為重要。

overflow: hidden;

第 3 列溢出

對第三列做同樣的事情。

overflow: hidden;

將文本模塊 #1 添加到第 1 列

添加 H2 副本

是時候開始添加模塊了，從第一列中的文本模塊開始。 輸入您選擇的一些 H2 含量。

H2 文本設置

轉到設計選項卡並更改 H2 文本設置。

• 標題 2 字體：Poppins
• 標題 2 文本顏色：#232323
• 標題 2 文字大小：40px

間距

添加一些自定義上邊距。

• 最高利潤率：9vw

將分頻器模塊添加到第 1 列

能見度

我們在第 2 列中需要的第二個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

移至設計選項卡並更改線條顏色。

• 線條顏色：#000000

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

添加內容

繼續添加另一個帶有您選擇的段落內容的文本模塊。

文字設置

接下來更改文本設置。

• 文字字體： Poppins
• 文字字體粗細：輕
• 文字大小：17px
• 文本行高：2.1em

將按鈕模塊添加到第 1 列

添加副本

我們在第 1 列中需要的下一個也是最後一個模塊是按鈕模塊。 輸入您選擇的一些副本。

按鈕設置

轉到設計選項卡並在按鈕設置中設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：20px
• 按鈕文字顏色：#000000
• 按鈕背景顏色：#f4f4f4
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字體： Poppins
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

間距

添加一些自定義間距值。

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

將圖像模塊 #1 添加到第 2 列

上傳 1:1 圖片

進入第二列！ 在這裡，我們需要的第一個模塊是圖像模塊。 上傳比例為 1:1 的圖片。 這意味著您的圖像必須是一個完美的正方形（寬度應等於高度）。

漿紗

轉到設計選項卡並啟用“強制全角”選項。

• 強制全角：是

將圖像模塊 #2 添加到第 2 列

上傳 1:1 圖片

我們在第 2 列中需要的第二個模塊是另一個圖像模塊。 我們再次使用比例為 1:1 的圖像。

漿紗

轉到設計選項卡並更改大小設置。

• 強制全角：是
• 高度：320px

間距

通過添加一些負上邊距在此模塊和上一個模塊之間創建重疊。

• 上邊距：-100px

過濾器

接下來，我們將更改過濾器設置。 這是我們將圖像變成模糊背景的部分。

• 飽和度：200%
• 亮度：145%
• 對比度：117%
• 模糊：40px

變換比例

為了確保圖像覆蓋列的整個寬度，我們將在變換設置中增加大小。 由於我們在行設置中添加了隱藏的列溢出，沒有什麼會超過列容器。

• 正確：180%
• 底部：180%

將 CTA 模塊添加到第 2 列

添加內容

我們在第二列中需要的下一個也是最後一個模塊是 CTA 模塊。 輸入您選擇的一些副本。

添加鏈接

轉到鏈接設置並添加按鈕鏈接 URL 以使按鈕顯示在設計中。

刪除背景顏色

也刪除背景顏色。

• 使用背景顏色：否

標題文字設置

繼續轉到設計選項卡並更改標題文本設置。

• 標題標題級別：H3
• 標題字體: Poppins
• 標題文字大小：40px
• 標題字母間距：-1px

正文設置

還要修改正文設置。

• 正文字體： Poppins
• 正文字體重量：輕
• 車身線條高度：2.2em

按鈕設置

隨著按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：20px
• 按鈕文字顏色：#ffffff
• 漸變顏色 1：rgba(244,244,244,0.4)
• 漸變色 2：rgba(255,255,255,0)
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字體： Poppins
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

• 上邊距：50px
• 頂部填充：20px
• 底部填充：20px
• 左填充：50px
• 右填充：50px

間距

最後但並非最不重要的一點是，通過添加一些負上邊距，在此模塊和模糊背景之間創建重疊。 我們還在模塊的左側和右側留下了一些空白

• 上邊距：-250px
• 左填充：2vw
• 右填充：2vw

克隆第 2 列中的所有模塊並在第 3 列中放置重複項

完成第二列中的所有模塊後，您可以克隆它們並將重複項放在第三列中。

更改重複圖像模塊 #1

更改圖像

更改圖像模塊 #1 中的圖像。

更改重複圖像模塊 #2

更改圖像

對列中的第二個圖像模塊執行相同操作。

更改過濾器設置

並修改第二個圖像模塊的過濾器設置。

• 飽和度：180%
• 亮度：102%
• 對比度：117%
• 模糊：35px

更改重複的 CTA 模塊

更改副本

繼續更改 CTA 模塊的內容。

更改按鈕漸變背景

隨著第一個按鈕漸變顏色，你就完成了！

• 漸變色 1：rgba(244,244,244,0.15)

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項創建模糊背景。 我們從頭開始重新創建了一個漂亮的示例，您可以將其用於您創建的任何類型的網站。 我們希望本教程能激發您使用本教程中分享的技巧創建自己的定制設計。 如果您有任何問題或建議，請務必在下方評論區留言！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。