如何使用 Divi 的主題生成器設計博客帖子模板（免費下載）

博客帖子模板可能是您可以添加到博客站點的最重要的模板。 它提供了一種“神奇”地應用於前端所有博客文章的結構和設計，而博主只需要擔心在後端寫文章。 這通過簡化創建過程以將您的帖子快速發佈到網絡上來大大節省時間。 使用 Divi Theme Builder，您將不必滿足於看起來像網絡上所有其他博客文章的無聊帖子模板。 您可以創建無數真實的設計（視覺上）並輕鬆地在整個模板中添加靜態和動態內容的不同組合。

在這篇文章中，我們將介紹使用 Divi Theme Builder 構建博客文章模板所需了解的所有內容。 我們將涵蓋很多內容，但我想您會驚訝於這些模板在您眼前變得如此簡單。

現在讓我們開始吧！

搶先看

這是我們將在本教程中創建的博客文章模板的快速瀏覽。

您可能已經從我們的數字營銷佈局包中註意到此設計的相似之處。 創建此帖子模板以匹配佈局，以便您可以將其與數字營銷佈局包結合使用。

享受！

免費下載博客帖子模板

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

下載文件

免費下載

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

下載

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

要將模板佈局導入您的網站，您需要轉到 Divi 主題構建器並使用可移植性選項將 .json 文件導入主題構建器。

什麼是博客帖子模板，為什麼需要一個？

博客文章模板是一個站點範圍的模板，用於您網站上的所有（或部分）單個博客文章。 它是一個預先設計的模板，使用動態內容構建，因此任何新的或現有的帖子都將自動繼承指定模板的佈局和設計。

使用博客文章模板有幾個令人信服的理由。 使用博客帖子模板的主要原因是為了簡化博客流程。 擁有已經為您的帖子設計的現成模板可以通過消除動態設計帖子元素的需要並讓博主有更多時間做他們最擅長的事情 - 編寫內容，從而大大加快創建過程。 但這還不是全部！ 博客帖子模板可以在帖子中加入額外的元素（如評論、分享按鈕和電子郵件選項），以提高用戶參與度和轉化率。

使用 Divi Theme Builder，創建博客帖子模板非常容易。 在 Divi 中構建博客文章模板的秘訣在於了解要使用哪些模塊以及如何有效地將動態內容元素合併到模板中。

在我們開始一起構建博客文章模板之前，讓我們首先了解一些可用於構建一個的工具。

博客帖子模板的構建塊

博客帖子模板可以根據博客的需要而有所不同。 但通常，博客文章模板將由以下結構組成：

• 標題 - 帖子的頂部區域，通常包括帖子標題、特色圖片和帖子元數據（類別、標籤、作者、發布日期等）
• Post Content – 文章的主要內容。
• 相關帖子 - 指向讀者可能感興趣的其他文章的鏈接。
• 評論 – 供用戶添加和回復有關帖子的評論的部分。
• 號召性用語——通常是電子郵件選擇表單、社交分享圖標或某種促銷優惠。

Divi 模塊和動態內容

可以使用 Divi 模塊中固有的 Divi 內置動態內容功能在 Divi Theme Builder 中創建博客帖子模板。 有一些專門為帖子構建的 Divi 模塊。 但是，大多數 Divi 模塊都能夠提取與帖子相關的可用動態內容。 以下是在 Divi 中設計博客文章模板時可用的一些選項的細分。

• 為帖子模板構建的 Divi 模塊
  • 帖子導航模塊 - 有助於提供上一個和下一個帖子的導航鏈接。
  • 帖子滑塊模塊 - 有助於提供按最近或按類別組織的帖子庫。
  • 帖子標題模塊 - 有助於在一個方便的模塊中顯示帶有特色圖片的帖子標題。
  • 帖子內容模塊 - 帖子模板的必要模塊，用於顯示帖子內容。 帖子內容模塊還包括可用作站點範圍帖子內容的默認設計的設計選項。

• 所有 Divi 模塊中可用的帖子模板的動態內容元素
  • 帖子/檔案標題
  • 帖子摘錄
  • 當前的日期
  • 網站標語
  • 作者簡介
  • 帖子作者
  • 發布鏈接
  • 帖子分類
  • 發表評論數
  • 發布日期
  • 自定義字段

現在您對可用的工具有了一個很好的了解，讓我們跳到如何從頭開始在 Divi 中構建博客文章模板。

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題（如果不使用 Divi 主題，則安裝並激活 Divi Builder 插件）。
2. 確保您至少創建了一些博客文章，以便查看我們將構建的博客文章模板的結果。 確保在每個帖子中包含盡可能多的內容（即特色圖片、類別等），以便您擁有真實帖子的好例子。

之後，您就可以開始為 Divi 中的博客文章構建新模板了。

如何在 Divi Theme Builder 中構建博客帖子模板

訂閱我們的 YouTube 頻道

與所有模板一樣，博客文章模板是在 Divi Theme Builder 中創建的，這將允許您利用 Divi Builder 的強大功能完全從頭開始構建模板。

創建新模板

從 WordPress 儀表板，導航到 Divi > Theme Builder。 然後點擊“添加新模板”空白方塊。

將模板分配給所有博客文章

添加新模板後，將彈出模板設置框，允許您將模板分配給整個網站的頁面和/或帖子。 由於我們要為站點範圍內的所有博客文章創建一個博客文章模板，因此選擇“所有文章”並單擊創建模板按鈕。

創建自定義身體區域佈局

接下來，單擊模板的“添加自定義正文”區域，為帖子模板創建一個新的正文區域。 然後選擇“構建自定義主體”。

選擇“從頭開始構建”選項以開始構建過程。

為帖子模板構建自定義正文佈局

啟動模板佈局編輯器後，您可以使用 Divi Builder 自由地從頭開始構建博客文章模板的整個主體。

首先，向默認的常規部分添加一列行。

然後，在添加模塊之前，使用背景設計和一些填充更新部分設置，如下所示：

• 背景漸變左顏色：#8624e1
• 背景漸變右顏色：#3607a6
• 梯度方向：130度
• 起始位置：25%
• 背景圖片：插入圖片
• 使用視差效果：是
• 填充：7vw 頂部，7vw 底部

使用文本模塊將帖子標題創建為動態內容

在單列行內，添加一個文本模塊。

然後在將鼠標懸停在正文內容區域上時單擊動態內容圖標。

從列表中選擇 Post/Archive Title 元素。

然後，單擊 Post/Archive Title 元素上的齒輪圖標並使用 h1 標籤更新前後輸入區域，如下所示：

前：

<h1>

後：

</h1>

現在使用以下設計設置設計標題：

• 文字字體：Roboto
• 文字文字大小：16px
• 文本行高：1.8em
• 文本對齊：居中
• 標題字體：Roboto
• 標題字體粗細：粗體
• 標題文字大小：60 像素（桌面）、40 像素（平板電腦）、32 像素（手機）
• 標題線高度：1.2em

使用圖像模塊添加特色圖像作為動態內容

標題部分到位後，讓我們為帖子模板添加特色圖片。 為此，請添加另一個具有三分之二和三分之一列佈局的常規部分。

然後在左欄中添加一個圖像模塊。

然後為圖像添加特色圖像動態內容元素。

設計圖像模塊

跳轉到設計選項卡並按如下方式自定義圖像：

• 圖像對齊：居中
• 邊距：-9vw（桌面），0vw（平板）
• 圓角：8px
• 盒子陰影：見截圖
• 框陰影垂直位置：16px
• 框陰影模糊強度：96px
• 框陰影傳播強度：-24px

將 Post Author 和 Author Bio 添加到 Blurb 模塊作為動態內容

接下來，我們將使用博客模塊添加 Post Author 和 Post Author Bio。 因此，繼續將博客模塊添加到右列。

在簡介設置中，將鼠標懸停在標題輸入框上，然後單擊動態內容圖標。 然後為 Title 內容添加 Post Author 動態內容元素。

接下來，打開 Post Author 設置並更新 before 輸入，如下所示：

• 之前：作者

對於簡介模塊的正文內容，單擊動態內容圖標並從列表中選擇“作者簡介”動態內容元素。

對於blurb模塊的Image，添加“Post Author Profile Picture”作為動態內容。

Design Post Author 和 Bio Blurb 模塊

現在優化圖片的設計如下：

• 圖像/圖標放置：左
• 圖像圓角：50%
• 標題字體：Roboto
• 標題字體粗細：粗體
• 標題行高度：1.3em
• 正文字體：Lato
• 車身線高：1.4em
• 圖片寬度：50px

將帖子類別作為動態內容添加到 Blurb 模塊

在剛剛創建的 Author 和 Author Bio Module 下，在其下添加另一個簡介模塊並為 Title 選擇 Post Categories 動態內容元素。

然後使用圖標更新簡介，如下所示：

• 使用圖標：是
• 圖標：見截圖

設計後期分類模糊模塊

更新設計設置如下：

• 圖標顏色：#dddddd
• 圖像/圖標放置：左
• 使用圖標字體大小：是
• 圖標字體大小：20px
• 標題字體：Roboto
• 標題字體粗細：中等
• 標題文字顏色：#f92c8b
• 標題文字大小：16px
• 標題行高度：20px
• 填充：左16px

將評論計數作為動態內容添加到 Blurb 模塊

要為博客帖子模板添加帖子評論計數，請複制剛剛創建的模糊模塊。

然後使用 Post Comment Count 動態內容元素更新 Title 內容。

由於評論計數只顯示一個數字，我們需要在數字後用一些添加文本來補充數字。 為此，請打開 Post Comment Count 設置並更新以下內容：

之後：評論

然後更新圖標如下：

• 使用圖標：是
• 圖標：見截圖

將發布發布日期作為動態內容添加到 Blurb 模塊

對於最後一段元數據，複製帶有評論計數的模糊模塊。 然後使用“發布發布日期”動態內容元素更新標題內容。

提示：您可以隨時打開 Post Publish Date 動態元素的設置來更改日期顯示的格式。

然後更新圖標如下：

• 使用圖標：是
• 圖標：見截圖

添加帶有內容設計設置的帖子內容模塊

有了帖子標題、特色圖片、帖子作者和元數據，我們就可以準備主要帖子內容了。

添加具有一列佈局的新行。

然後向該行添加一個帖子內容模塊。

此帖子內容模塊將顯示帖子的主要內容。 此外，我們可以更新設計設置，以便為使用默認編輯器輸入的所有帖子內容建立默認設計。 我們可以像更新任何其他模塊一樣更新 Post Content Module 的設置。 並且我們可以在更新模塊時查看模塊提供的模擬內容。

打開帖子內容模塊設置並更新以下圖像設置：

• 圖片圓角：8px
• 圖像框陰影：見截圖
• 框陰影垂直位置：16px
• 框陰影模糊強度：96px
• 框陰影傳播強度：-24px

接下來，當用戶使用默認編輯器創建博客文章時，我們需要為所有可能的文本內容元素設置設計。 打開文本選項組切換，顯示文本設計類型的 5 個不同選項卡——段落、鏈接、無序列表、有序列表和塊引用。

然後更新每個選項卡下的以下選項。

繼續更新每個標題級別的標題文本設置 - h1、h2、h3、h4、h5、h6。

• 標題字體：Roboto
• 標題字體粗細：粗體
• 標題文字大小 (h1)：56 像素（桌面）、42 像素（平板電腦）、28 像素（手機）
• 標題文字大小 (h2)：45 像素（桌面）、35 像素（平板電腦）、24 像素（手機）
• 標題文字大小 (h3)：40 像素（桌面）、30 像素（平板電腦）、20 像素（手機）
• 標題文字大小 (h4)：32 像素（桌面）、24 像素（平板電腦）、18 像素（手機）
• 標題文字大小 (h5)：28 像素（桌面）、20 像素（平板電腦）、16 像素（手機）
• 標題文字大小 (h6)：24 像素（桌面）、18 像素（平板電腦）、14 像素（手機）

添加帖子導航模塊

在 Post Content Module 下，添加一個帶有 Post Navigation Module 的新的單列行。

更新上一個和下一個鏈接文本如下：

• 上一個鏈接： 上一個： %title
• 下一個鏈接： 下一個： %title

然後更新帖子導航設計如下：

• 鏈接字體：Roboto
• 鏈接字體粗細：粗體
• 鏈接文字顏色：#f92c8b

添加相關帖子部分

在帖子導航之後，我們準備將“相關帖子”部分添加到我們的博客帖子模板中。 這將有助於根據正在查看的帖子的當前類別為用戶提供建議的帖子。

使用文本模塊添加相關帖子標題

在添加博客模塊以拉入相關帖子之前，我們需要為該部分創建一個靜態標題。 為此，請創建一個具有一列行的新部分。 然後向該行添加一個文本模塊。

使用以下 H2 標題更新文本內容：

<h2>You May Also Like...</h2>

然後更新標題文字設計如下：

• 標題 2 字體：Roboto
• 標題 2 文字大小：48 像素（桌面）、38 像素（平板電腦）、28 像素（手機）

現在我們的標題已經到位，我們準備添加我們的相關帖子。

使用博客模塊為當前類別的帖子添加相關帖子

在包含標題的文本模塊下，添加一個新的博客模塊。

然後更新博客模塊內容如下：

• 帖子數：3
• 包含的類別：當前類別
• 摘錄長度：120
• 顯示作者：NO
• 顯示分類： 沒有
• 顯示分頁：否

這些設置最重要的方面是“當前類別”選擇。 這將允許帖子模板提取與當前帖子共享同一類別的最新帖子。

博客模塊內容設置到位後，跳轉到設計設置並更新以下內容：

• 佈局：網格
• 標題字體：Roboto
• 標題文字大小：14px
• 標題行高度：1.3em
• 正文字體：Lato
• 元字體：Lato
• 元文本顏色：#f92c8b
• 元文本大小：13px
• 網格佈局圓角：20px

繼續更新帶有框陰影的設計，如下所示：

• 網格佈局邊框寬度：0px
• 盒子陰影：見截圖
• 框陰影垂直位置：16px
• 框陰影模糊強度：96px
• 框陰影傳播強度：-24px

添加評論模塊

此博客文章模板的最後一部分將包含評論。 要向帖子添加評論，只需創建一個新的一列行並將評論模塊放入其中。

設計評論模塊

現在剩下要做的就是自定義評論模塊的設計以匹配我們的模板。 更新以下設計設置：

• 背景顏色：#f2f5f9
• 字段背景顏色：#ffffff
• 字段焦點背景顏色：#ffffff
• 字段焦點文本顏色：#222222
• 字段邊距：底部 3px
• 字段填充：頂部 18px，底部 18px
• 字段字體：Lato
• 字段文本大小：16px
• 字段線高：1.4em

繼續更新設置如下：

• 圖像圓角：60px
• 標題字體：Roboto
• 標題文字大小：26 像素（桌面）、20 像素（平板電腦）、15 像素（手機）
• 標題行高度：1.3em
• 元字體：Lato
• 評論字體：Lato
• 評論文字顏色：#222222
• 填充：頂部 5%，底部 5%，左側 5%，右側 5%

最後，自定義評論的按鈕樣式如下：

• 按鈕文字大小：14px
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：4px
• 按鈕字母間距：5px（桌面），5.5px（懸停）
• 按鈕字體：Roboto
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫 (TT)
• 按鈕填充：頂部 16 像素，底部 16 像素

將節分隔符添加到頁眉

在設計帖子模板時，不要忘記您可以使用的所有驚人的設計選項。 例如，我們可以給標題部分一個分隔線設計。 為此，請返回頁面頂部並打開包含標題的頂部部分的設置。 然後更新以下內容：

• 底部分隔線樣式：見截圖
• 分隔線顏色：#ffffff
• 分頻器高度：10vw
• 分隔線翻轉：水平

不要忘記保存佈局和主題生成器的設置，以便保存您的更改。

就是這樣！ 讓我們看看最終的結果。

最後結果

要查看最終結果，我們可以打開 Divi 站點中的任何博客文章（因為模板已分配給所有博客文章）。

這是從後端的帖子編輯器查看時的示例帖子。

這是前端的帖子，我們的博客帖子模板就位。

這是在平板電腦和手機顯示屏上：

使用 Divi Builder 創建帶有博客帖子模板的博客帖子

如果您願意，您可以輕鬆部署 Divi Builder 以使用像這樣的博客文章模板來設計博客文章。 使用 Divi Builder 創建和設計的任何內容都將顯示在模板的發佈內容模塊區域內。

最後的想法

我希望本教程可以作為使用 Divi Builder 從頭開始創建自己的博客文章模板的一個很好的起點。 不要忘記花時間考慮所有可用的工具以及您希望如何構建帖子模板佈局。 在整個博客帖子模板中使用盡可能多的動態內容元素始終很重要，以便更好地簡化與博客相關的創建過程。 有了漂亮的模板，博主就可以真正專注於內容創建，而模板會自動完成所有繁重的設計工作。

您是否使用 Divi Theme Builder 構建了博客文章模板？ 讓我們知道您的想法。

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

乾杯!