在 Divi 中組織博客頁面內容的 5 個技巧
已發表: 2019-12-21您的博客頁面內容可以通過多種方式進行組織。 由於它是一個博客頁面，因此大部分內容將由最近的博客文章的提要組成。 知道如何組織這些內容可以是打破單調並為更獨特的博客頁面設計打開大門的好方法。
在本教程中，我們將與您分享在 Divi 中組織博客頁面內容的 5 個有用提示，這將幫助您了解以下內容：
- 如何創建兩列佈局
- 如何使用置頂帖
- 如何使用後偏移
- 如何使用多個博客模塊為博客文章創建自定義佈局
- 如何按類別顯示最近的帖子
搶先看
以下是我們將在 Divi 中組織博客頁面內容的一些方法。
使用兩列佈局
主要博客提要上方的特色帖子部分
主博客提要上方的全寬帖子滑塊
使用多個博客模塊進行獨特的佈局和設計
按類別展示最近的帖子
你需要什麼開始
如果您還沒有安裝並激活 Divi 主題。
在本教程中，我將使用第二個主題生成器包類別頁面模板。 如果您想繼續使用它，請下載包並使用可移植性選項將 divi-theme-builder-pack-2-category-page-template.json 文件導入主題構建器。 
默認情況下，導入的模板將分配到“所有類別頁面”。 打開模板設置並將其分配給博客。
現在您已準備好開始在模板中組織博客頁面內容的過程。 首先，單擊模板正文區域上的編輯圖標。
現在您可以使用佈局編輯器來修改佈局。
在 Divi 中組織博客頁面模板的 5 個技巧
在此模板中，我們有一個博客模塊，該模塊位於一列行中，用於顯示當前頁面的帖子（在桌面上的三列中）。 這是博客和存檔頁面模板的標准設置。 但是，我們不必保留此標準佈局來顯示帖子。 以下是在 Divi 中組織博客頁面內容的一些有用提示。
#1 創建兩列佈局
如果將模塊添加到一列行（就像在我們的模板中一樣），博客模塊（如果設置為網格佈局）將以三列結構顯示帖子。
如果您想更改佈局以在兩列佈局中顯示帖子，您可以執行以下操作。
首先，將行的列佈局更改為三分之二三分之一佈局。 這將在行左列的兩列中顯示博客文章。
接下來，打開第 1 列（包含博客模塊的那個）的設置並將以下自定義 CSS 添加到主元素：
width: 100% !important;
這將導致列跨越行的整個寬度。
現在我們需要做的就是隱藏右側的列。 打開第 2 列（空的）的設置並禁用該列在所有設備上的可見性。
現在，您可以根據需要在桌面上使用兩列而不是三列來組織博客頁面內容。
#2 使用置頂帖
如果您熟悉 WordPress，您可能已經知道這個。 在 Divi（或 WordPress）中創建的每個帖子都可以設置為粘性。 當您將帖子設為置頂時，該帖子將自動顯示在博客頁面上博客提要的最前面，甚至在最近發布的帖子之前。 這是展示您知道您的受眾希望（或需要）看到的帖子的好方法。
要使帖子具有粘性，只需在 Divi 中編輯帖子並選中右側欄中的“貼到博客頂部”選項。
在後端查看所有帖子時，您製作的每個帖子都會被標記為“粘性”。
現在，當您訪問博客頁面時，您可以看到置頂帖子已跳到博客帖子提要的前面。
注意：在博客模塊中使用帖子偏移時，粘性帖子可能無法按預期工作。 例如，如果您將博客模塊設置為顯示 3 個帖子，帖子偏移量為 3，則您的置頂帖子仍將顯示在 3 個帖子之前（以及除此之外）。
在你繼續下一個技巧之前，我建議你去掉粘性帖子。
#3 使用帖子偏移將博客頁面內容組織成單獨的部分
每個博客模塊都有一個選項來輸入 Post Offest Number。 這告訴博客模塊在顯示博客提要之前跳過一定數量的最近的博客文章。 每當您想通過使用多個博客模塊來顯示您的帖子來稍微混淆博客頁面的佈局時，此選項就會派上用場。 這為您的佈局設計提供了更大的靈活性，因為您可以以不同的方式設計每個博客模塊。
使用 Post Offset 使用單獨的博客模塊展示最新的帖子
您可以在模板佈局上組織博客頁面內容的一種方法是在頁面頂部添加特色博客文章部分。 這是一種您可以以獨特的方式突出顯示前三篇最新帖子的方式。 現在就去做吧。
向佈局添加一個新的常規部分。
然後添加一列行。
複製模板附帶的博客模塊並將其粘貼到新行中。
更新博客設置如下：
- 帖子數：3
- 顯示閱讀更多按鈕：否
- 顯示分類： 沒有
- 顯示評論數：否
- 顯示摘錄：否
- 顯示分頁：否
我們將在頁面的頂部顯示三個最新的帖子。
現在我們需要向原始博客模塊添加一個帖子偏移量，以便它跳過上面已經顯示的前三個帖子。
打開原始博客模塊的博客設置並更新以下內容：
- 後偏移數量：3
現在博客提要將從帖子 #4 開始。
要使頁面頂部的特色部分脫穎而出，您可以添加背景漸變。
下面是一個示例。
在主博客提要上方添加全角帖子滑塊
與上面的特色部分非常相似，我們還可以通過在博客頁面頂部添加全角帖子滑塊來組織博客帖子內容。 這是博客頁面的流行設計，您可以將它與具有帖子偏移量的博客模塊結合使用。
這是如何做到的。
首先，在佈局中添加一個全角部分。
然後向該部分添加一個全寬後滑塊模塊。
然後更新以下設置：
- 當前頁面的帖子：是
- 帖子數：3
然後更新帖子滑塊的設計以匹配佈局，如下所示：
- 標題字體：Lato
- 標題字體粗細：粗體
- 標題文字大小：40px
- 正文文字大小：16px
- 按鈕文字大小：14px
- 按鈕文字顏色：#ff0071
- 按鈕背景顏色：#ffffff
- 按鈕邊框寬度：0px
- 按鈕字體：Lato
- 按鈕字體粗細：粗體
- 按鈕字體樣式：TT
確保博客模塊顯示主提要的帖子偏移量仍然設置為 3，以適應帖子滑塊的 3 個帖子。
然後查看結果。
到目前為止看起來不錯。
現在讓我們通過下一個技巧進一步了解使用單獨的博客模塊的想法。
#4 添加多個博客模塊，每個模塊都有一個帖子
我們不必止步於向模板佈局添加一個額外的博客模塊。 事實上，我們可以根據需要使用盡可能多的博客模塊。 我們甚至可以選擇每個博客模塊只顯示一篇文章，以便為單個博客明信片提供獨特的設計。 然後，使用帖子偏移量，我們可以創建一個完全獨特的動態顯示博客帖子的佈局。
這是如何做到的。
首先，在包含主博客模塊的行上方添加一個新的二分之一列行。
複製下面的原始博客模塊並將其粘貼到新行的左列中。 然後更新以下內容：
- 帖子數：1
- 後偏移量：0
- 顯示分頁：否
接下來，複製您剛剛創建的博客模塊並將副本粘貼到右欄中。
然後更新以下內容：
- 後偏移數：1
- 顯示特色圖片：否
- 顯示評論數：否
- 顯示摘錄：否
確保將後偏移編號設置為 1，以便跳過左列中的第一個。
現在通過創建另一個博客模塊並每次將帖子偏移量增加 1 來繼續此過程。
複製右列中的博客模塊。
然後將後偏移編號更改為 2。
再次復制博客模塊並將帖子偏移量更改為 3。
現在您可以自由地單獨定制每個博客模塊的設計。 例如，您可以為每個添加不同的背景顏色。
這是結果。
如果您要保留下面的主要博客提要，請確保將帖子偏移量更新為 4，以容納上一行中的 4 個帖子。
您還可以看到在我們的一些主題生成器類別頁面模板中使用了相同的技術。 查看我們的教程，了解如何使用相同的概念創建類別頁面模板。
#5 在博客頁面上按類別顯示最近的帖子
除了博客頁面模板上的主要博客提要外，您還可以按類別顯示最近的帖子。 這是通過稍微分解佈局並同時突出顯示不同類別來組織博客頁面內容的好方法。
這是如何做到的。
首先，在包含主博客模塊的行下添加一個新的單列行。
然後更新博客設置如下：
- 當前頁面的帖子：否
- 帖子類型：帖子
- 帖子數：3
- 包含的類別：商業（或您自己的一個）
這將顯示來自業務類別的三個最新帖子。
然後在博客模塊上方添加一個帶有相應類別標題的文本模塊。
就像這樣，您的博客頁面上有一個特色類別部分 - 一種組織博客頁面內容的好方法！
您甚至可以添加多個特色類別部分，每個部分都有獨特的設計。
這些特色類別部分非常適合博客頁面模板的底部。
最後的想法
這些提示應該可以幫助您以各種獨特的方式組織博客頁面內容。 而且，這些相同的技巧適用於使用博客模塊顯示內容的許多其他類型的模板（如類別/存檔頁面模板）。 隨意探索這些技巧並在您的下一個項目中使用它們。
我期待在評論中收到您的來信。
乾杯!