為 Divi 下載 10 個免費的流體截面背景圖像

如果您希望更新部分的外觀和感覺，這可能是您的理想職位。 我們創建了 10 種不同的流體部分背景圖像，您可以免費下載並在您正在構建的任何網站上使用。 最重要的是，我們還將向您展示如何將這些流體截面背景圖像與 Divi 的內置選項結合起來。 您將能夠為您的流體背景圖像分配任何漸變背景，並將其與一行漸變背景相結合，以確保您的內容也保持可讀性。

讓我們開始吧！

預覽

讓我們先來看看 10 種不同的流體部分背景圖像，您可以在文章下方進一步下載這些圖像。 我們將圖像與漸變背景相結合以創建獨特的效果。 我們也將在這篇文章中分享每一種漸變組合，但您可以隨意嘗試不同的顏色以達到您想要的最終結果。

免費下載流體部分背景圖片

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

下載文件

免費下載

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

下載

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

重新創建部分

添加新的常規部分

間距

下載所有圖像文件後，轉到您的 WordPress 網站並打開一個新頁面或現有頁面。 然後，使用 Divi 的 Visual Builder，添加一個新的常規部分。 打開其設置並更改間距值。

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

添加新行

列結構

繼續使用以下列結構向您的部分添加新行：

漿紗

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

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

間距

也向間距設置添加一些填充值。

• 頂部填充：312px
• 底部填充：312px
• 列左填充：50px
• 列右填充：50px

添加文本模塊

添加內容

是時候開始添加模塊了！ 我們需要的第一個模塊是文本模塊。 繼續向內容框中添加一些內容，最好是 H2 標題和段落。

H2 文本設置

接下來轉到 H2 文本設置並應用以下更改：

• 標題 2 字體：蒙特塞拉特
• 標題 2 字體粗細：超粗體
• 標題 2 文本顏色：#FFFFFF
• 標題 2 文字大小：82 像素（桌面）、60 像素（平板電腦）、40 像素（手機）
• 標題 2 行高：1.4em

文字設置

還要更改整體文本設置。

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

漿紗

繼續減小此模塊在桌面上的寬度。

• 寬度：58%（桌面），100%（平板電腦和手機）
• 模塊對齊：居中

添加按鈕模塊

添加副本

我們需要的第二個也是最後一個模塊是按鈕模塊。 添加文本模塊下方的模塊後，添加一些副本。

按鈕對齊

接下來更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

然後，轉到按鈕設置並進行一些更改。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：18px
• 按鈕文字顏色：#000000
• 按鈕背景顏色：#FFFFFF
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字母間距：-1px
• 按鈕字體：蒙特塞拉特
• 字體粗細：超粗
• 字體樣式：大寫

間距

最後但並非最不重要的一點是，通過添加一些頂部邊距在前一個模塊和這個模塊之間添加一些空間。

• 上邊距：25px

流體部分背景 #1

部分漸變背景

為您的部分使用以下漸變背景：

• 顏色 1：#000000
• 顏色 2：#2d5b9b
• 漸變類型：線性
• 梯度方向：137deg
• 起始位置：48%

部分背景圖像

上傳您可以在下載文件夾中找到的“ fluid-style-1.png ”文件，並將其與以下背景設置組合：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：中心

行漸變背景

最重要的是，在您的部分背景上添加一個行漸變。 這將使文本更具可讀性。 它還將幫助您為頁面添加一些深度。

• 顏色 1：RGBA(0,0,0,0.67)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心

流體部分背景 #2 & #3

部分漸變背景

第二和第三流體截面背景圖像使用以下截面漸變背景：

• 顏色 1：#4f009e
• 顏色 2：#fa00ff
• 漸變類型：線性
• 梯度方向：137deg
• 起始位置：48%

部分背景圖像

上傳您可以在下載文件夾中找到的“ fluid-style-2.png ”或“ fluid-style-3.png ”文件，並將其與以下背景設置組合：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：中心

行漸變背景

添加一個微妙的行漸變背景：

• 顏色 1：RGBA(255,48,75,0.13)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心

流體部分背景 #4

部分漸變背景

為您的部分使用以下漸變背景：

• 顏色 1：#00245e
• 顏色 2：#ffee00
• 漸變類型：線性
• 梯度方向：137deg
• 起始位置：48%

部分背景圖像

上傳您可以在下載文件夾中找到的“ fluid-style-4.png ”文件，並將其與以下背景設置組合：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：中心

行漸變背景

最後，使用以下設置添加一行漸變背景：

• 顏色 1：RGBA(0,0,0,0.37)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心

流體部分背景 #5

部分漸變背景

將以下漸變背景添加到您的部分：

• 顏色 1：#04000f
• 顏色 2：#00436d
• 漸變類型：線性
• 梯度方向：137deg
• 起始位置：48%

部分背景圖像

然後，上傳您可以在下載文件夾中找到的“ fluid-style-5.png ”文件，並將其與以下背景設置相結合：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：中心

行漸變背景

使用以下行漸變背景完成您的設計：

• 顏色 1：RGBA(0,0,0,0.58)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心

流體部分背景 #6

部分漸變背景

使用以下令人驚嘆的部分漸變背景組合：

• 顏色 1：#4800ff
• 顏色 2：#c854ff
• 漸變類型：線性
• 梯度方向：137deg
• 起始位置：48%

部分背景圖像

上傳您可以在下載文件夾中找到的“ fluid-style-6.png ”文件，並將其與以下背景設置相結合：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：中心

行漸變背景

最後但並非最不重要的是，添加一行漸變背景疊加。

• 顏色 1：RGBA(0,0,0,0.51)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心

流體部分背景 #7

部分漸變背景

將以下漸變背景設置應用於您的部分：

• 顏色 1：#ff8300
• 顏色 2：#52006b
• 漸變類型：線性
• 梯度方向：137deg
• 起始位置：48%

部分背景圖像

上傳您可以在下載文件夾中找到的“ fluid-style-7.png ”文件，並將其與以下背景設置相結合：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：右上角

行漸變背景

最後，在您的部分頂部添加一行漸變背景。

• 顏色 1：RGBA(106,0,198,0.34)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心

流體部分背景 #8

部分漸變背景

將以下藍色漸變背景應用到您的部分：

• 顏色 1：#0b43dd
• 顏色 2：#09f9ed
• 漸變類型：線性
• 梯度方向：137deg
• 起始位置：48%

部分背景圖像

上傳您可以在下載文件夾中找到的“ fluid-style-8.png ”文件，並將其與以下背景設置結合起來：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：左上角

行漸變背景

通過應用行漸變背景來完成您的設計。

• 顏色 1：RGBA(0,7,119,0.57)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：線性
• 徑向：中心

流體部分背景 #9

部分漸變背景

將以下漸變背景添加到您的部分：

• 顏色 1：#051f89
• 顏色 2：#6d0272
• 漸變類型：線性
• 梯度方向：137deg
• 起始位置：48%

部分背景圖像

上傳您可以在下載文件夾中找到的“ fluid-style-9.png ”文件，並將其與以下背景設置相結合：

• 背景圖片尺寸：封面
• 背景圖片位置：中心

行漸變背景

最後但並非最不重要的一點是，使用行漸變背景提高內容的可讀性。

• 顏色 1：RGBA(0,0,0,0.59)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心

流體部分背景 #10

部分漸變背景

最後一個例子需要以下部分漸變背景：

• 顏色 1：#051f89
• 顏色 2：#6d0272
• 漸變類型：線性
• 梯度方向：137deg
• 起始位置：48%

部分背景圖像

上傳您可以在下載文件夾中找到的“ fluid-style-10a.png ”文件，並將其與以下背景設置組合：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：左上角

行漸變背景

接下來添加一行漸變背景。

• 顏色 1：RGBA(0,0,0,0.59)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心

行背景圖像

還將背景圖像添加到您的行中。 在下載文件夾中找到‘ fluid-style-10b.png ’，上傳並結合如下背景設置：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：右下角

預覽

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

最後的想法

在這篇文章中，我們分享了 10 種不同且獨特的流體部分背景圖片，您可以在自己的網站上不受任何限制地使用它們。 最重要的是，我們還為您提供了令人驚嘆的漸變背景，您可以僅使用 Divi 的內置選項將其與流暢的背景圖像結合起來。 如果您有任何問題或建議，請務必在下面的評論部分留言，讓我們知道您最喜歡哪一張流體部分背景圖片！