如何使用Divi 5的循環構建器創建自定義博客文章循環

您的品牌不應受到靜態佈局的限制，因此，隨著Divi 5的不斷發展，我們旨在為您提供充分的靈活性。 Divi 5的新循環構建器是朝這個方向邁出的重要一步。它使您可以設計一個項目，然後將其循環到動態網格或列表中。

在本教程中，我們將向您展示如何設置自定義博客文章循環。我們將設計清單，連接動態字段，設置查詢，並為乾淨的網格或列表完善佈局。讓我們開始！

什麼是Divi 5的循環構建器

使用Divi 5的Loop Builder，您可以在視覺構建器中設計一個單個“卡”佈局，並使用任意多的Divi模塊，然後為您選擇顯示的每個項目循環Divi loops。

訂閱我們的YouTube頻道

在列上啟用循環元素，設置查詢（帖子，定制帖子類型，例如項目，術語或用戶），以及地圖動態字段，例如標題，特色圖像，類別，自定義字段和按鈕。您可以重新排序元素，控制間距，並讓所有內容繼承您的全局樣式。

結果是響應迅速的可重複使用的列表，它與您的系統匹配，而無需額外的插件或自定義代碼。

循環構建器的工作方式

您可以通過打開其內容選項卡並啟用循環，在任何部分，行，列或模塊中打開循環模式。

從那時起，Divi會自動重複與您的設置相匹配的每個帖子的元素。

這是真正控制的地方。在循環設置中，您可以：

• 查詢類型：在基本帖子查詢或元查詢之間進行選擇，按類別，標籤，自定義字段或其他元數據進行過濾。
• 帖子類型：選擇要顯示的內容類型，從博客帖子到產品再到任何自定義帖子類型。
• 僅包含具有特定術語的帖子：僅顯示與某些類別，標籤或其他分類學條款匹配的帖子。
• 排除具有特定術語的帖子：刪除與所選類別，標籤或術語匹配的帖子。
• 僅包括特定帖子：選擇要包括的單個帖子。
• 排除特定帖子：隱藏您不需要的單個帖子。
• 元查詢：添加自定義字段條件以控制出現的內容。
• 訂單作者：選擇結果是否按日期，標題，菜單訂單或自定義字段值進行排序。
• 訂單：以上升或降序顯示結果。
• 每頁帖子：確定分頁前顯示多少帖子。
• 後偏置：從一開始就跳過一定數量的帖子，方便避免具有特色部分的重複項。
• 忽略粘性帖子：選擇粘性帖子是否獲得優先級或像普通帖子一樣對待。

定義查詢後，Divi會自動填充每個明信片的內容，並保持佈局和造型相同。您完全關注卡的外觀，Divi處理人口和重複。通過單個面板控制了所有內容，只需進行一些設置即可使您的博客列表在沒有手動編輯的情況下進行更新。

了解有關Divi 5的循環構建器的所有內容

使用Divi 5創建自定義博客文章循環

使用循環構建器構建自定義博客文章循環有兩個部分。首先，您設計明信片的佈局，確切選擇出現的內容以及外觀。然後，您將該設計放置在一個循環中，因此Divi會在您要顯示的每個帖子中自動重複它。

我們將逐步瀏覽它，從卡片佈局開始，然後設置循環。

開始之前

如果您要從博客模塊轉到循環構建器，並且已經有一個博客列表頁面，則可以跳過來創建循環佈局。如果沒有，這是快速設置：

1。添加博客頁面

從您的WordPress儀表板中，轉到頁面>添加新的，將其命名為“博客”，然後發布。

此頁面將是您帖子的主要樞紐。

2。在WordPress設置中設置您的博客頁面

在設置>閱讀中，選擇一個靜態頁面。將您的主頁和新博客頁面分配給帖子頁面。

僅當您使用單獨的主頁和博客列表頁面時，才需要。

3。創建一個主題構建器模板

接下來，您將為博客列表頁面創建一個新模板。如果您已經有一個，則可以自定義。確保您使用最新的Divi 5版本來訪問循環構建器。

在Divi>主題構建器中，單擊“添加新模板”>構建新模板。

將其分配到您的博客頁面，然後單擊“創建模板”。

要設計您的博客文章列表頁面，請單擊“添加自定義”>“構建自定義主體”。

現在，您將進入Divi Builder，我們將開始構建循環佈局。

1。導入佈局

從佈局開始可以節省大量時間，並幫助您從一開始就保持一致的設計。對於本教程，我正在使用營銷代理商博客頁面佈局進行品牌推廣。

您可以選擇相同的或導入任何為您提供良好基礎工作的佈局。在模板中，您將擁有一個現成的結構，您可以適應您的需求，而不是從頭開始構建所有內容。

2。設計一張博客發布卡

這是Loop Builder真正實現的靈活性的地方。您沒有被鎖定在博客模塊的固定佈局中，而是確切地確定明信片上的內容以及它的佈置方式。

將新部分添加到模板中。您可以從預設的結構中挑選或使用單列選項創建自己的。

對於此示例，讓我們選擇一個三列行結構部分。

在第一列中，我們將創建明信片。我們將使用一個模塊組保存所有元素。

然後為特色圖像添加圖像模塊，郵政標題的標題模塊以及摘錄的文本模塊。我們還將添加元信息和更多讀取按鈕，以便訪問者可以單擊完整的帖子。

一旦基本結構出現，請自定義卡的設計，以便適合您的品牌。調整顏色，字體，間距以及使其成為您的任何獨特視覺細節。

3。啟用行包裹

為了確保您的卡在不同屏幕尺寸的行中整齊地顯示，您需要啟用Flex包裝。選擇主行並打開“設計”選項卡。

去佈局。確保佈局樣式設置為彈性。

啟用佈局包裝，使卡在需要時可以移至新線路，然後選擇最適合您設計的包裝對齊。

4。打開循環

現在是使其全部自動的步驟。選擇卡的列。

然後，在“內容”選項卡下打開循環選項。啟用循環後，Divi將為滿足您查詢設置的每個帖子重複您的卡設計。

對於此佈局，我設置了：

• 帖子類型：帖子
• 每頁帖子： 10
• 訂單：日期
• 訂單：下降（最新第一）
• 後偏置： 0（從最新開始顯示全部）
• 忽略粘性帖子：是的

這些小調整確保網格按照所需的順序準確顯示您想要的帖子。您可以隨時更改這些值，以使佈局適應不同的需求。

5。添加動態內容

使循環栩栩如生的最後一步是將卡中的每個模塊連接到實時發布數據。這就是將靜態卡變成自動化的，始終始終至今的列表的原因。例如：

• 將圖像模塊鏈接到帖子的特色圖像。
• 將標題模塊鏈接到帖子標題。
• 將文本模塊鏈接到帖子摘錄。
• 將更多按鈕連接到帖子URL。

循環時，Divi將用循環中每個帖子的正確數據代替佔位符內容。

要設置特色圖像，請打開圖像模塊，懸停在圖像選項上，然後單擊動態內容圖標。選擇循環的特徵圖像，所有相關圖像將立即填充。

重複您要顯示的帖子標題，已發布日期，摘錄以及任何其他字段。

當您單擊模塊的動態內容圖標時，您將看到一系列特定於循環的選項。您不僅限於標題和圖像；您還可以顯示發布日期，修改日期，作者名稱，評論計數，類別，標籤，甚至自定義字段。

這意味著您的明信片可以盡可能少或詳細。構建一個乾淨的，以圖像為中心的網格，富含內容的佈局，甚至突出顯示小眾自定義郵政類型字段。一次設計一次，Divi在整個循環中保持準確和一致。

6.保存模板並預覽

一旦一切都正確，請進行任何最終調整，並節省Divi Builder和主題構建器的更改。

預覽您的頁面以查看行動中的循環。這是完成的博客列表頁面：

博客模塊有限制，循環構建器沒有

博客模塊工作正常，所以我們為什麼要推動循環構建器？因為“罰款”是指固定的。博客模塊將您鎖定在其模板中，但是循環構建器為您提供了空白的畫布。您可以自動選擇它的佈局，順序，樣式和分區循環。

那是真正的轉變：您不是在調整別人的模板，而是在設計自己的模板。讓我們再次將其付諸實踐，並設計與典型的博客模塊結構不同的佈局。

首先，添加一個單列行和部分。調整尺寸，並確保為行啟用Flex和Flex包裝。

此行將包含您的博客卡。現在，在列內添加另一個嵌套行以創建您的卡結構，圖像在左側，右側的元數據在右側。

完全按照需要設計您的結構，無需遵循博客模塊序列。現在將左列的空白留。我們將添加特色圖像作為列的背景圖像。

自定義您的博客列表卡。

您還可以在設計>佈局>垂直間隙選項中的右列中修改模塊組的垂直間隙。

接下來，我們啟用循環選項。從父行中選擇第一列。

同樣，我們循環動態內容。從圖像開始，轉到左列的背景選項，其餘的將相同。

這是您的列表式博客循環。現在，如果要將其轉換為網格，只需更改列的寬度即可。因為我們在行中啟用了FLEX包裝，所以隨著我們更改其尺寸，卡片將自己包裝。

如果這使您的圖像太大，則可以刪除摘錄，更改行的列結構，甚至將水平差距調整為零。

就像您的網格也準備好了。

這個示例只是瞥見循環構建器所能做到的。真正的收穫是，您不再限於幾個預設佈局。明信片的每個部分都是您的安排，樣式和重新構想，而Divi會自動重複它。這種靈活性將簡單的博客列表變成了為您的網站設計的東西。

使用分頁模塊

如果您限制循環查詢中每個頁面的帖子，則可能需要一種讓讀者查看其餘部分的方法。在您的網格下方添加分頁模塊，並將其目標循環設置為啟用循環的元素。要進行完整的演練，請參閱如何一起使用Divi 5的循環構建器和分頁模塊：閱讀教程。

下載博客模板

如果您想在博客模板中嘗試使用網格，請下載以下本教程中使用的模板。要導入這些，請導航到您的Divi主題構建器。您可以使用右角的導入/導出圖標導入這些內容。

下載文件

免費下載

加入Divi新聞通訊，我們將向您發送終極Divi著陸頁佈局包的副本，以及大量其他驚人和免費的Divi資源，提示和技巧。跟進，您將立即成為Divi大師。如果您已經訂閱，則只需在下面的電子郵件地址中輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

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

立即在Divi 5中構建您的自定義博客文章循環

在Divi 5的循環構建器之前，創建一個真正的自定義博客文章循環通常意味著用剛性模板來搏鬥或為每個小更改編寫自定義代碼。現在，這是一個從頭到尾的視覺過程。您可以設計一次卡，將其模塊鏈接到實時數據數據，然後讓Divi處理其餘的。

如果您一直在博客模塊的範圍內工作，則循環構建器是您一直在等待的升級。在下一個項目中嘗試一下，看看創建一個確切想要的博客（或產品，事件或列表）要容易得多！