如何為您的 Divi 存檔頁面提供磚石佈局

為了給你的存檔頁面一個自定義的磚石佈局，我們可以使用 Divi 主題構建器來設計一個自定義的動態存檔頁面模板。 在 Divi 中，在 Divi Theme Builder 出現之前，開發人員不得不依賴手動自定義存檔頁面模板主題文件上的 PHP 代碼，然後純粹使用外部 CSS 對頁面模板進行樣式設置。 這使得創建磚石佈局更加困難。 但是現在，有了 Divi Theme Builder，這個過程變得簡單而愉快！

在本教程中，我們將向您展示如何創建動態顯示存檔頁面標題、副標題和博客文章的存檔頁面模板。 而且，使用博客帖子模塊，我們可以輕鬆地以磚石網格佈局顯示我們的帖子存檔。

讓我們開始吧！

搶先看

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

免費下載存檔頁面模板

要使用本教程中的模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 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。 然後單擊空白的灰色框區域以添加新模板。

接下來，將模板分配給所有存檔頁面。

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

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

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

添加動態存檔標題

在模板佈局編輯器中，使用背景顏色更新默認部分設置。

• 背景顏色：#eeeeee

然後在常規部分內創建一個新的單列行。

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

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

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

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

前：

<h1>

後：

</h1>

出於 SEO 的目的，我們需要將標題包裝在 H1 標籤中。

樣式動態存檔標題

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

• 標題字體：Mulish
• 標題字體：重量：重
• 標題文本對齊方式：居中
• 標題文字顏色：#3a405a
• 標題文字大小：70px（桌面），40px（平板電腦和手機）

添加動態存檔子標題文本

因為我們可以用自定義 HTML 包裝我們的動態存檔頁面標題，所以我們可以添加一個副標題，將動態存檔頁面標題拉入副標題文本中。

為此，請在具有標題的前一個文本模塊下創建一個新的文本模塊。

刪除默認的正文文本並將帖子/存檔標題動態內容添加到正文中（就像我們之前所做的那樣）。

打開帖子/存檔標題設置並在內容前後添加以下內容。

前：

<h3>Here are the articles on 

後：

 </h3>

現在標題將與前一行文本一致顯示。

樣式動態存檔標題

一旦動態內容就位，我們可以通過更新以下 H3 設置來設置樣式：

• 標題 3 字體：Mulish
• 標題 3 文本對齊方式：居中

使用博客模塊動態顯示當前頁面的帖子

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

添加新部分

在我們添加博客模塊之前，讓我們向頁面添加一個新部分。

添加新的一列行

然後，向新部分添加一個新的單列行。

然後打開行設置並更新以下內容：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2；
• 寬度：95%

添加博客模塊以動態顯示當前頁面的帖子

現在我們需要向該行添加一個博客模塊。

請記住，我們必須確保為 archvie 頁面啟用當前頁面的帖子以提取正確的帖子存檔。 更新內容選項如下：

• 當前頁面的帖子：是

設計博客模塊

內容設置到位後，讓我們對設計進行一些更改。 在設計選項卡下，按如下方式更新佈局：

• 佈局：網格

現在返回內容選項卡並將以下背景顏色添加到網格項：

• 背景顏色：#3a405a

更新標題文本樣式

• 標題字體：Mulish
• 標題字體粗細：粗體
• 標題文字顏色：#eee
• 標題文字大小：34px
• 標題行高度：1.3em

更新正文樣式

• 正文字體：蒙特塞拉特
• 正文顏色：#ffffff
• 車身線高：2em

更新元文本樣式

• 元字體：蒙特塞拉特
• 元文本顏色：#ffb100

更新分頁樣式

• 分頁字體粗細：粗體
• 分頁文字顏色：#3a405a

此時，我們的存檔頁面模板已啟動並運行，包括頁面標題和博客文章（以磚石佈局），它將動態顯示當前存檔頁面的文章。

最後結果

要測試結果，請訪問您網站上不同類型的存檔頁面。

這是一個類別存檔頁面模板的示例，顯示類別“WordPress”的所有帖子。

這是一個作者存檔頁面模板，顯示特定作者的所有帖子。

這是一個標籤存檔頁面，顯示所有帶有“新聞”標籤的帖子。

這是一個日期存檔頁面模板，顯示 2019 年 10 月的所有帖子。

最後的想法

一旦您知道如何使用 Divi 的主題構建器創建新的存檔模板，為帖子添加磚石佈局就很容易了。 訣竅是使用 Divi 的內置選項將存檔頁面標題顯示為動態內容，然後使用博客模塊以磚石網格佈局動態顯示當前頁面的帖子。 希望通過定位那些容易被忽視的存檔頁面，這將有助於提升您網站的整體設計。

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

乾杯!