為您的 Divi 博客文章下載 5 種充滿活力的背景樣式

我們在這裡提供另一個免費的 Divi 下載！ 這一次，我們將向您展示 5 種不同的充滿活力的背景樣式，您可以將它們用於您網站上的博客文章。 您可以在同一網站上輕鬆組合這些背景樣式，為您發布的各種博客文章提供不同的外觀和感覺。 除了免費為您提供所有這些充滿活力的背景樣式之外，我們還將指導您創建博客文章模板，您可以將其重複用於您在網站上創建和發布的任何博客文章。

讓我們開始吧！

預覽

讓我們首先看看 5 種不同的結果和不同屏幕尺寸上的視圖。

免費下載充滿活力的背景樣式

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

下載文件

免費下載

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

下載

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

調色板

對於每一種背景樣式，您都可以在下面找到一個調色板。 我們將在整個教程中引用顏色編號，因此請選擇您想要創建的背景樣式和調色板，然後從那裡開始。

調色板 #1

• 顏色 #1：#886DFC
• 顏色 #2：#7C56BD
• 顏色 #3：#372C66

調色板 #2

• 顏色 #1：#42bcb2
• 顏色 #2：#9CFEF0
• 顏色 #3：#a8baf7

調色板 #3

• 顏色 #1：#96b2ff
• 顏色 #2：#d999ff
• 顏色 #3：#357ff4

調色板 #4

• 顏色 #1：#B981FF
• 顏色 #2：#24EEFA
• 顏色 #3：#be7bf2

調色板 #5

• 顏色 #1：#e02b20
• 顏色 #2：#f6ff56
• 顏色 #3：#db241e

創建新帖子

添加詳細信息並啟用 Divi Builder

讓我們從頭開始！ 向您的 WordPress 網站添加一個新頁面，添加您的頁面標題，上傳特色圖片並啟用 Divi Builder。

分區頁面設置

在切換到 Visual Builder 之前，對您所在頁面右上角的 Divi 頁面設置框進行一些更改。 這將確保您完全使用 Divi 來創建博客文章佈局。 如果您計劃在您的網站上重複使用該模板，則必須記住在每次創建新博客文章時修改這些設置。

• 頁面佈局：全角
• 文章標題：隱藏

切換到 Visual Builder

您現在可以切換到 Visual Builder。

完成後，屏幕上將出現三個選項。 單擊藍色按鈕從頭開始構建。

創建博客文章設計

添加第 1 節

背景圖片

讓我們開始創建模板吧！ 從頂部的空白部分開始。 打開版塊設置，進入背景設置，上傳選擇的背景樣式。 您可以通過轉到下載的文件夾 > Hero找到所有 5 個變體。

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

間距

要讓背景圖像完全顯示，請使用該部分的頂部填充。

• 頂部填充：660px

添加第 2 節

間距

在剛剛添加的部分的正下方，繼續添加另一個部分。 打開設置，轉到間距設置並刪除所有默認的自定義填充。

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

添加新行

列結構

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

間距

刪除下一節底部的所有默認填充。

• 底部填充：0px

添加帖子標題模塊

元素

是時候開始添加模塊了！ 在這一行中，我們只需要一個帖子標題模塊。 添加完元素後，選擇要顯示的元素。

標題文字設置

然後，轉到標題文本設置並進行一些更改。

• 標題字體：Abril Fatface
• 標題文本對齊：居中
• 標題文字大小：73 像素（桌面）、50 像素（平板電腦）、40 像素（手機）

元文本設置

元文本設置也需要修改。

• 元文本對齊：居中
• 元文本顏色：顏色 #1（在調色板中查找）
• 元文本大小：18px
• 元線高度：3em

添加第 3 部分

背景圖片

此頁面的最後一部分將包含博客文章內容和 CTA。 首先上傳您選擇的背景樣式。 您可以通過轉到下載的文件夾 > Body來找到變體。 上傳背景圖像後，對背景設置進行一些更改。

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：頂部中心
• 背景圖像重複：空間

間距

刪除此部分的所有默認頂部填充以消除此部分與前一部分之間的所有空白。

• 頂部填充：0px

添加第 1 行

列結構

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

背景顏色

為下一行添加略微透明的背景色。

• 背景顏色：rgba(255,255,255,0.86)

間距

在這裡也刪除默認的自定義填充。

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

添加文本模塊

添加內容

繼續向您添加的行添加文本模塊。 在這裡，您可以添加您想要的所有博客文章內容，並使用不同的文本樣式來獲得所需的結果。 在下面的打印屏幕中，我們使用標題和段落。

文字設置

轉到文本設置並在那裡進行一些更改。

• 文字大小：21px（桌面）、18px（平板電腦）、15px（手機）
• 文本行高：2em

標題設置

標題文本設置也需要修改。

• 標題字體：Abril Fatface
• 標題文字大小：46 像素（桌面）、40 像素（平板電腦）、30 像素（手機）
• 標題線高度：1.5em

間距

接下來添加一些自定義填充值。

• 頂部填充：80px
• 底部填充：80px
• 左內邊距：80 像素（桌面）、40 像素（平板電腦）、30 像素（手機）
• 右內邊距：80 像素（桌面）、40 像素（平板電腦）、30 像素（手機）

盒子陰影

最後，向文本模塊添加一個微妙的框陰影。 這將為博客文章模板帶來一些深度。

• 框陰影模糊強度：80px
• 框陰影擴散強度：-14px

添加第 2 行

列結構

繼續使用一列在前一行的正下方添加一個新行。

間距

也刪除此行的所有默認自定義填充。

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

添加電子郵件選擇模塊

添加內容

然後，添加您的 CTA。 我們正在使用電子郵件選擇模塊。 添加後，修改內容。

字段

我們僅在此模塊中使用電子郵件地址，因此請繼續在字段設置中禁用名字和姓氏。

漸變背景

繼續向 Email Optin 模塊添加漸變背景。

• 顏色 1：顏色 #2（在調色板中查找）
• 顏色 2：顏色 #3（在調色板中查找）
• 梯度方向：144deg

佈局

然後，更改模塊的佈局。

• 佈局：身體在頂部，形式在底部

文字設置

還要更改文本設置。

• 文字方向：居中
• 文字顏色：淺

標題文字設置

接下來，打開標題文本設置並進行一些更改。

• 標題字體：Abril Fatface
• 標題文字大小：54 像素（桌面）、40 像素（平板電腦）、35 像素（手機）

按鈕設置

還要修改按鈕外觀。

• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 字體樣式：下劃線
• 下劃線樣式：雙

間距

最後，在 Email Optin 模塊的間距設置中使用不同的自定義填充值。

• 頂部填充：100px
• 底部填充：100px
• 左填充：300px（桌面），50px（平板電腦和手機）
• 右內邊距：300 像素（桌面）、50 像素（平板電腦和手機）

在 Divi 庫中保存佈局以供重用

唯一要做的就是將佈局保存在 Divi 庫中。 這樣，您也可以將其重複用於其他頁面！ 創建新頁面時，您還可以將博客文章作為現有頁面訪問。

預覽

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

最後的想法

在這篇文章中，我們與您分享了一些令人驚嘆且充滿活力的背景樣式，您可以免費下載這些樣式。 最重要的是，我們還指導您從頭開始創建博客帖子模板。 隨意將這些背景樣式用於您自己設計的博客文章模板。 如果您有任何問題或建議，請務必在下方評論區留言！