如何使用 Divi Theme Builder 為您的博客創建類別頁面模板

類別頁面可以為用戶提供一個充滿他們感興趣（或搜索）內容的完整頁面，從而對用戶非常有幫助。 但是很多時候分類頁面在設計方面會受到影響。 在 Divi 中，在 Divi Theme Builder 時代之前，開發人員不得不依靠手動自定義類別頁面模板主題文件上的 php 代碼，然後純粹使用外部 CSS 來設置頁面模板的樣式。 但是現在，有了 Divi Theme Builder，這個過程變得簡單而愉快！

在本教程中，我們將向您展示如何使用 Divi Theme Builder 從頭開始為您的博客創建類別頁面模板。 我們將向您展示如何快速設置分配給帖子類別的新模板，以及如何使用適當的模塊和使用 Divi Builder 的動態內容設計模板。

讓我們開始吧！

搶先看

這是我們將在本教程中一起設計的類別頁面模板的快速瀏覽。 在此圖像中，它用於顯示所有具有“業務”類別的帖子。

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

你需要什麼開始

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

1. 如果您還沒有，請安裝並激活已安裝的 Divi 主題（如果不使用 Divi 主題，請安裝並激活 Divi Builder 插件）。
2. 由於我們將為博客文章創建類別頁面模板，因此您需要在您的網站上創建已分配類別的文章。

之後，您就可以開始了。

可用於類別頁面模板的模塊和動態內容

在為 Divi 博客構建類別頁面模板時，重要的是了解您可以使用哪些工具，以便您可以有效構建動態顯示正確信息的模板。 對於博客帖子的類別頁面模板，我們最感興趣的是每當用戶訪問類別頁面時按當前類別顯示帖子。 例如，如果用戶單擊類別鏈接“商業”，他們應該看到一個存檔頁面，其中顯示了類別為“商業”的所有帖子。 一些 Divi 模塊具有內置選項，可以很容易地在模板上顯示動態內容。

博客模塊

博客模塊是應該用於顯示類別頁面模板的主要模塊。 這是因為具有顯示當前頁面帖子的內置選項。

這基本上是告訴 Divi 顯示通常在用戶訪問頁面時生成的帖子。 因此，將選項設置為顯示“當前頁面的帖子”，用戶將能夠查看類別頁面並按類別正確顯示帖子。

帖子滑塊模塊和帖子標題模塊

您還可以使用帖子滑塊模塊來顯示當前頁面的帖子。 這有助於創建動態帖子滑塊，顯示訪問類別頁面時生成的帖子，就像博客模塊可以做的那樣。

也可以使用帖子標題模塊，但它幾乎僅限於動態顯示頁面標題的能力。 帖子標題模塊中可用的大多數其他元素不適用於存檔頁面，僅適用於特定的帖子模板。

帖子/檔案標題（動態內容）

顯示帖子/存檔頁面標題的一種更簡單的方法是使用常規的 Divi 模塊，然後使用所有 Divi 模塊中可用的動態內容功能拉入帖子/存檔頁面標題。

例如，您可以使用文本模塊，然後將帖子/存檔頁面標題作為動態內容添加到正文內容中。 然後，您可以隨意設置標題的樣式。

現在您了解了創建類別頁面模板所需的工具，讓我們一起來創建一個。

如何為您的博客創建類別頁面模板

對於此類別頁面模板，目標是為分配給 Divi 中博客文章的所有類別頁面的模板創建自定義正文區域。 我們不會為此模板創建自定義頁眉或頁腳區域。 但是您可以輕鬆地在您自己的網站上使用此模板，並使用您自己的頁眉和頁腳。

為帖子類別創建和分配自定義模板

首先，轉到您的 WordPress 儀表板並導航到 Divi > Theme Builder。 然後單擊空白的灰色框區域以添加新模板。

接下來，將模板分配給所有類別頁面。

向模板添加新的自定義正文區域

要為模板構建自定義主體，請單擊“添加自定義主體”區域，然後選擇“構建自定義主體”。

然後選擇選項“從頭開始構建”。

添加動態存檔標題

在模板佈局編輯器中，在常規部分內創建一個新的一列行。

然後向該行添加一個文本模塊。

刪除默認正文內容，然後單擊“使用動態內容”圖標並選擇“發布/存檔標題”選項。

發布/存檔標題元素到位後，單擊齒輪圖標打開設置。

然後更新 Before 和 After 輸入區域，將內容包裹在 H1 標籤中，並在動態標題後添加額外的靜態內容，如下所示：

前：

<h1>

後：

 Articles</h1>

出於 SEO 的目的，我們需要將標題包裝在 H1 標籤中。 在標題後添加靜態詞“文章”，以便用戶訪問“商業”類別頁面時，標題將顯示為“商業文章”。

樣式動態存檔標題

一旦動態內容就位，我們可以使用以下方式對其進行樣式設置：

• 標題字體：Ubuntu
• 標題字體：粗細：粗體
• 標題文字顏色：#192231
• 標題文字大小：48px（桌面）、38px（平板電腦）、28px（手機）
• 標題線高度：1.2em

使用博客模塊動態顯示當前類別的帖子

有了動態類別頁面標題，我們需要添加博客模塊來顯示當前類別頁面的帖子。

添加新行

在當前頂行下添加一個新的單列行。

添加博客模塊

然後向該行添加一個博客模塊。

更新內容選項如下：

• 當前頁面的帖子：是
• 帖子數：9
• 顯示閱讀更多按鈕：是

請記住，我們必須確保為類別頁面啟用當前頁面的帖子以提取正確的帖子存檔。

設計博客模塊

內容設置到位後，讓我們對設計進行一些更改，如下所示：

• 佈局：網格

• 標題字體：Ubuntu
• 標題字體粗細：粗體
• 標題文字顏色：#192231
• 元字體：Ubuntu
• 元文本顏色：#985e6d
• 元文本大小：13px

• 閱讀更多字體：Ubuntu
• 閱讀更多字體粗細：粗體
• 閱讀更多字體樣式：下劃線
• 閱讀更多文字顏色：#985e6d
• 分頁字體：Ubuntu
• 分頁文字顏色：#985e6d
• 分頁文字大小：18px
• 分頁行高：2em

• 網格佈局邊框寬度：0px
• 盒子陰影：見截圖
• 框陰影模糊強度：70px
• 框陰影傳播強度：-10px
• 陰影顏色：rgba(25,34,49,0.3)

在這一點上，我們有一個基本類別頁面啟動並運行完成，頁面標題和博客文章將根據當前類別頁面正確顯示。 但是，我們可以通過添加附加模塊以創造性的方式顯示帖子來獲得更多創意。

創建一個帖子滑塊以提取當前類別中的 4 個最新帖子。

我們也可以使用帖子滑塊模塊來動態顯示類別頁面帖子。 這是如何做到的。

添加新行

首先在頂行下添加一個具有 1/3 2/3 列佈局的新行。

添加後滑塊模塊

在左欄中，添加一個帖子滑塊模塊。

然後更新帖子滑塊內容選項如下：

• 當前頁面的帖子：是
• 帖子數：4
• 顯示帖子元：否

設計後滑塊模塊

既然帖子滑塊內容已就位，請按如下方式更新設計設置：

• 文本對齊方式：左
• 標題字體：Ubuntu
• 標題行高度：1.3em
• 為按鈕使用自定義樣式：是
• 按鈕文字大小：16px
• 按鈕背景顏色：#985e6d
• 按鈕邊框寬度：0px
• 按鈕字體：Ubuntu

• 盒子陰影：見截圖
• 框陰影模糊強度：70px
• 框陰影傳播強度：-10px
• 陰影顏色：rgba(25,34,49,0.3)

創建一個全角佈局的博客模塊

在右欄中，我們可以添加另一個具有全角佈局而不是網格佈局的博客模塊。 這將使我們能夠為我們的類別帖子提供另一個獨特的顯示區域。

添加博客模塊

為了節省時間，讓我們複製底行中現有的博客模塊並將其粘貼到帖子滑塊旁邊的右列中。

更新重複的博客模塊設置

打開重複的博客模塊設置並更新以下內容：

• 當前頁面的帖子：是
• 帖子數：3
• 摘錄長度：120
• 顯示特色圖片：否（至少現在）
• 顯示分頁：否

• 佈局： 全寬：
• 盒子陰影：無

到目前為止的結果

到目前為止，結果是三個博客文章的最小顯示。

但是如果我們想更進一步，我們可以在每個帖子摘錄的左側添加一些小的特色圖片。

使用自定義 CSS 創建較小的特色圖像，這些圖像漂浮在帖子摘錄內容的左側。

要在博客文章摘錄的左側添加一些小特色圖片，我們需要添加一些自定義 CSS。

給博客模塊自定義 CSS 類

首先，我們需要向 Blog 模塊添加一個自定義 CSS 類。 打開博客設置，然後在高級選項卡下輸入以下內容：

• CSS 類：左博客圖像

使用代碼模塊添加 CSS 代碼

由於我們只是在此模板中添加了一個小的 CSS 片段，因此我們可以使用代碼模塊。 在博客模塊下添加代碼模塊。

插入 CSS 代碼

然後在代碼內容區域內輸入以下 CSS：

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

更新博客模塊設置以包含特色圖片

現在，我們可以重新添加特色圖片，使其顯示在左側的新位置，這要歸功於 CSS 代碼段。

模板的附加樣式

在我們結束之前，讓我們對設計進行一些小的修飾。

在存檔標題下添加分隔線並為其設置樣式

在模板頂部的存檔頁面標題下直接添加分隔模塊。

然後按如下方式更新分隔線設置：

• 線條顏色：#985e6d
• 分隔線重量：3px
• 最大寬度：200px

將分區分隔線添加到佈局

打開部分設置並添加一個部分分隔符，如下所示：

• 頂部分隔線樣式：見截圖
• 頂部分隔線顏色：rgba(73,78,107,0.07)
• 分頻器高度：90vw
• 分隔線翻轉：水平和垂直

對每個模塊使用 Post Offset Number 以避免重複的 post Displays

現在我們所有的模塊都為當前類別頁面提取相同的帖子內容。 為了防止這些模塊顯示重複，我們可以使用 Post Offset Number 選項來“跳過”顯示帖子提要的一定數量的帖子。

全寬博客模塊帖子偏移量

由於我們的帖子滑塊已經顯示了當前類別頁面的第一篇（最近的）帖子，我們可以將此帖子偏移到與其相鄰的博客模塊上。 打開帖子滑塊右側博客模塊的設置，更新帖子偏移量，如下所示：

• 後偏移數：1

現在該模塊將從當前類別頁面的第二個最新帖子開始。

網格博客模塊帖子偏移量

一旦第一個博客模塊帖子偏移就位，我們需要在模板底部偏移主博客模塊中的帖子。 打開該博客模塊並更新帖子偏移量，如下所示：

• 後偏移數量：4

我們需要將偏移量設置為 4 以說明上面已經顯示的 4 個帖子。 該模塊現在將從其他模塊停止的地方開始，並從最近的第五篇文章開始。

最終結果

要查看最終結果，請轉到 WordPress 儀表板並導航到帖子 > 類別。 然後單擊以查看現有類別之一。

這是最終結果。

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

最後的想法

希望這篇文章能幫助您在面臨為您的網站創建類別頁面設計的挑戰時更輕鬆一些。 Divi Theme Builder 確實讓它變得非常容易，尤其是博客模塊現在可以選擇顯示當前頁面的帖子。 並且帖子偏移選項允許您組合多個博客模塊（甚至帖子滑塊模塊）而不會在顯示中看到重複的帖子。

Divi Theme Builder 如何幫助您構建類別頁面？

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

乾杯!