Divi 的新背景設置現在可以實現 10 個背景設計技巧

自從 Divi 新的後台選項界面發布後，Divi 變得更加強大。 新功能開闢了許多新的設計可能性。 今天，我將介紹一些你可能不知道的新設計技巧，希望我能激勵你創造一些很棒的背景設計。

您可以使用 Visual Builder 創建無數的背景設計組合和混合。 我為這篇文章確定的 10 個技巧只會觸及皮毛，但它們旨在向您介紹不同的概念並激發您的興趣。 大多數這些設計技巧都是使用新的背景選項完成的，例如新的漸變背景選項以及將背景圖像與漸變顏色相結合。

不過我必須警告你。 一旦您開始深入研究背景選項，您可能永遠不會退出！ 真是太有趣了。 嗯，至少對我來說是這樣。

享受。

這是設計技巧的先睹為快

如何關注這篇文章

每次我解釋一個新的設計技巧時都不必從頭開始，我對大多數設計使用了相同的示例設計，並為該設計添加了不同的技巧。 這意味著大多數示例都要求您完成先前的設計技巧，然後才能使用新技巧。 技巧 #1-9 都遵循相同的基本設置，並且需要技巧 #1 作為先決條件。 因此，如果您正在測試這些功能，我建議您從技巧 #1 開始。

Divi 的 10 個背景設計技巧

訂閱我們的 YouTube 頻道

技巧#1：對角疊加

添加一個全角部分，然後插入一個全角頭模塊。

然後更新頭模塊設置如下：

內容選項

標題：[輸入標題]
副標題：[輸入副標題]
標誌圖片網址：[輸入標誌]
背景漸變色：rgba(12,113,195,0.55), rgba(255,255,255,0)
漸變類型：線性
梯度方向：135deg
起始位置：60%
最終位置：60%（任何 60% 或以下的都可以）

由於漸變在同一點開始和結束，所以基本上沒有漸變效果發生。 所以結果是 60% 標記每側的兩種顏色。 這與漸變方向的角度相結合產生了這種效果。

設計選項

文字顏色：淺
標題字體：默認、粗體 (B)、大寫 (TT)
標題字體大小：40px
副標題字體大小：24px

高級選項

在 Main Element 框中的 Custom CSS 下，添加以下 CSS：

Padding: 150px 0;

這只是在頭模塊的頂部和底部添加一些額外的填充

保存設置

現在是時候為您的全角部分添加背景了。 單擊紫色控制框中的齒輪圖標，轉到“全寬部分設置”。

然後更新部分設置內容選項如下：

背景圖片：[在此處輸入背景圖片。 它應該至少有 1960 像素寬。 我從 unsplash.com 中選擇了這張圖片並對其進行了裁剪，以便圖片的突出部分位於右側。]
使用視差效果：是（這是可選的，但我認為它與對角疊加效果很好）
視差法：真視差

就是這樣！ 您可以根據自己的喜好隨意調整漸變顏色的不透明度和漸變方向的程度。

我認為我們有一個良好的開端。 讓我們繼續第二個技巧。

技巧#2：分層對角疊加

這個設計技巧是技巧#1 的延續，所以在繼續之前確保你已經完成技巧#1。

在技​​巧 #1 中，我們使用 Fullwidth Header Module 中的背景漸變選項停止了對角線疊加。

使用相同的示例，向全角部分添加額外的背景漸變。 我們已經為該部分提供了背景圖像，但是通過 Divi 的新選項，我們可以將漸變顏色與您的背景圖像結合，然後將它們與某些效果混合。

轉到全寬部分設置並更新以下內容選項：

背景漸變色：rgba(131,0,233,0.38), rgba(255,255,255,0)
漸變類型：線性
漸變方向：135deg（與標題模塊中的其他漸變方向相同）
起始位置：38%
結束位置：38%

現在單擊背景圖像圖標並更改以下內容：

使用視差效果：否
背景圖像混合：相乘

現在您有 2 個重疊的對角疊加層，可以輕鬆定制獨特的背景設計。

技巧 #3：圓形疊加

這個設計技巧是技巧#1 的延續，所以在繼續之前確保你已經完成技巧#1。

現在，我們要將 Trick #1 中的對角疊加層變成圓形疊加層。 為此，請轉到全寬模塊設置並更新以下內容：

內容選項

背景漸變類型：徑向
徑向：中心
起始位置：30%
結束位置：30%

設計選項

文字和標誌方向：中心

現在檢查新的標題背景。

這個技巧創建了漂亮的標題或號召性用語。 圓形疊加層的大小可以輕鬆調整，並且可以很好地響應不同的屏幕尺寸。 現在我在背景圖像上使用半透明漸變色，但是如果沒有背景圖像，這看起來會很棒。

這是一個沒有背景圖像和較暗文本顏色的示例。

技巧 #4：分層圓形疊加層以創建圓形邊框

這是 Trick #3 的延續，在那裡我們停止向全角標題模塊添加圓形覆蓋。 一旦您的圓形疊加層就位，我們可以添加第二個圓形疊加層作為第一個的邊框。 我們通過向位於全寬標題模塊後面的全寬部分添加另一個背景漸變來做到這一點。

轉到全角部分設置並更新以下內容：

內容選項

在背景圖像選項卡下：

使用視差效果：否
背景圖像混合：相乘

在背景漸變選項卡下：

背景漸變色：rgba(0,0,0,0.45), rgba(255,255,255,0)
背景漸變類型：徑向
徑向：中心
起始位置：34%
結束位置：34%

保存設置

就是這樣。

您還可以通過調整起始位置的百分比輕鬆更改背景漸變圓的大小。

技巧#5：反圓疊加

這是 Trick #3 的延續，它在全角標題模塊中留下了一個圓形覆蓋。 現在圓圈是半透明的藍色，背景圖像的其餘部分根本沒有漸變疊加顏色。 對於這個技巧，我將把它切換出來並反轉圓形疊加層，這樣半透明的藍色漸變疊加層將圍繞圓圈，圓圈內部將暴露其背後的背景圖像。

為此，請轉到全角標題設置並更新以下內容：

內容選項

背景漸變色：rgba(255,255,255,0), rgba(12,113,195,0.79)

注意：您在這裡真正要做的就是交換左側和右側的顏色。 現在透明顏色顯示在圓圈內，藍色漸變圍繞它。 我會增加藍色的不透明度，使其更暗一些。

一探究竟…

技巧 #6：帶有視頻背景的反圓疊加

這是 Trick #5 的延續，它給我們留下了一個帶有周圍藍色背景的反圓覆蓋。 目前，圓圈在其後面暴露了一個背景圖像。 您可以輕鬆添加視頻背景以位於此圓形疊加層後面。 我建議使用不太分散注意力的視頻。 此外，每當您使用視頻時，請確保文件大小較小，這樣您的頁面加載時間就不會受到影響。

要用視頻替換背景圖像，請轉到全角部分設置，單擊
背景視頻圖標並添加您的視頻。

現在轉到全角標題設置並更新以下內容：

內容選項

背景漸變顏色：rgba(12,113,195,0.67), #333333

使用新的漸變顏色，背景視頻僅在圓圈內可見。 疊加的顏色確實使文本流行起來。

技巧#7：偏心倒圓疊加

這是 Trick #5 的延續，它給我們留下了一個反圓覆蓋。 如果您返回全角頁眉設置，您可以將徑向方向調整為不同的設置，從而為頁眉創建不同的外觀。

轉到 Fulwidth Header Settings 並更新以下內容：

內容選項

徑向：右

設計選項

文字和標誌方向：左

這是最終結果和幾個不同徑向方向的示例：

這些例子顯然需要一些工作，但你明白了。

技巧 #8：使用漸變來實現陰影效果

這個技巧可能不會令人瞠目結舌，但它非常有用。 對於我們這些不想費心使用像 Photoshop 這樣的照片編輯器為您的圖像添加陰影的人來說，這是給您的。

這是技巧 #1 的延續，它使用全寬標題模塊中的背景漸變選項以對角線疊加的方式結束。 現在讓我們將半透明的藍色疊加層更改為一些從圖像左側開始並逐漸淡出到右側的深色陰影。 這樣，右側圖像的主要部分保持不變，左側的暗影有助於使文本更具可讀性。

要添加陰影效果，請轉到全角標題設置並更新以下內容：

內容選項

背景漸變顏色：rgba(0,0,0,0.55), rgba(0,0,0,0)
梯度方向：90度
起始位置：38%
結束位置：85%

這是結果。

技巧 #9：背景圖像混合

Divi 的新背景選項包括用於自定義圖像的 CSS 混合模式。 探索不同的圖像混合非常有趣，並且往往會創造出一些令人驚訝的設計。 對於那些不是設計師的人，您不必知道飽和度或亮度的定義就可以利用這些很酷的選項。 您需要將背景顏色或漸變設置與背景圖像結合起來才能看到所有很酷的效果（僅使用背景圖像是行不通的）。 然後四處玩耍，直到獲得您想要的外觀。 結果可能會讓你大吃一驚。

對於此示例，我將繼續使用“全角標題模塊”中的背景漸變選項，從技巧 #1 繼續使用對角線疊加。

轉到全角標題設置並刪除內容選項下的背景漸變。

保存設置

現在轉到“部分設置”並更新以下內容：

內容選項

背景漸變顏色：rgba(0,0,0,0.76), #0c71c3
梯度方向：90度
起始位置：50%
結束位置：50%

您還看不到任何更改。 沒關係。 轉到背景圖像選項卡並更新以下內容：

使用視差效果：否
背景圖像混合：強光

就是這樣。 檢查結果。

注意：此處使用的顏色將根據您使用的背景圖像創建不同的效果。 所以我建議嘗試使用顏色和混合選項，直到你得到你喜歡的顏色。

技巧 #10：分層為漸變背景添加更多顏色。

默認情況下，每個部分、行、列和模塊都可以有兩種顏色漸變。 但是，當您將它們組合起來並將它們疊加在一起時，您可以為漸變背景創建 5 種顏色。 當這 5 種顏色混合在一起時，您可以創建一個非常酷的光譜。

這是你如何做到的。 首先，添加一個具有 1 列結構行的常規部分。 然後在行內，添加一個 Blurb 模塊。

更新 Blurb 模塊設置如下：

內容選項

標題：[輸入標題]
內容：[輸入內容]

設計選項

文字顏色：淺
文字方向：居中
標題字體：默認，粗體（B）
標題字體大小：56px
正文字體大小：22px
自定義填充：頂部 100 像素，底部 100 像素

由於宣傳文字是白色背景上的白色，您還看不到它，但這沒關係。 你很快也會的。 是時候開始添加漸變顏色了。

我們將從後到前，從左到右工作。 首先，轉到“部分設置”並更新以下內容：

內容選項

背景漸變顏色：#ff0077、#0c71c3
梯度方向：90度
起始位置：0%
結束位置：30%

設計選項

自定義填充： 0px 頂部，0px 底部

現在讓我們更新我們的下一級漸變顏色——我們的行。 轉到行設置並更新以下內容：

內容選項

背景漸變顏色：rgba(255,255,255,0), #8300e9
梯度方向：90度
起始位置：25%
結束位置：50%
第 1 列背景漸變顏色：rgba(255,255,255,0), #e02b20
梯度方向：90度
起始位置：50%
結束位置：75%

設計選項
使這一行全寬：是
使用自定義裝訂線寬度：是
天溝寬度：1
自定義填充：0px 頂部，0px 底部

保存設置

現在對於最後一層漸變，我們需要轉到 Blurb 模塊並更新以下內容：

內容選項
背景漸變顏色：rgba(255,255,255,0), #edf000
梯度方向：90度
起始位置：75%
結束位置：100%

設計選項

自定義填充：頂部 100 像素，底部 100 像素

就是這樣。 現在你有五種漸變顏色混合在一起，創建了一個非常豐富多彩的背景。

別忘了，您還可以將漸變類型更改為徑向（圓形）並完全更改設計（大約需要 20 秒）。

如果您將所有圖層（部分、行、列和模糊模塊）的漸變類型更改為徑向，您將得到類似的結果。

獎勵技巧

下面是一個示例，說明如何使用視差對背景圖像進行分層。 這是一個帶有使用 True Parallax 的背景圖像的常規部分。 該部分內部是一個 1 列行，該行是全寬的，沒有填充，因此它會拉伸該部分的整個寬度。 在該行中，我使用 CSS 視差方法添加了一個帶有一些漸變圓圈（應該看起來像氣泡）的透明背景圖像。 然後我在具有透明背景的行中添加了一個 Call to Action Module。 當向下滾動頁面上的部分時，這種組合會產生移動。

這個技巧有點複雜，因為它需要在 Divi 之外創建自定義照片。 我只是希望向您展示可能性。

再舉幾個例子

我將用我在測試本文中提到的相同技巧時構建的一些設計示例來結束本文。

最後的想法

我希望您喜歡探索這些新的背景選項，並對它們帶來的可能性感到興奮。 而且，由於這些選項可用於部分、行、列和模塊，因此您可以在網站的任何部分應用這些設計技巧。 如果您還沒有，請花一些時間深入挖掘，讓這些創意源源不斷。 我相信，如果您花時間為自己探索背景選項，您會很高興在下一個項目中實現它們。 我迫不及待想看看你想出了什麼。

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