是否想在完全自定義的佈局中顯示博客帖子，產品或自定義帖子類型等動態內容，而無需觸摸代碼行？ Beaver Builder中的循環模塊使其成為可能。

Loop模塊在Beaver Themer 1.5和Beaver Builder 2.9中引入，是一個強大的工具，可讓您使用標準的Beaver Builder模塊設計可重複的佈局。無論您是構建博客，投資組合，活動列表還是WooCommerce商店，該模塊都可以為您提供完整的設計控制，並具有動態內容的核心。

在本指南中，我們將分解如何使用循環模塊構建現代，動態的佈局，從而增強您的網站的設計，性能和靈活性。

什麼是循環模塊？

循環模塊是一個靈活的容器，可通過查詢內容循環，並使用創建的佈局顯示它。您可以構建自己的自定義設計，而不是依賴默認的WordPress模板，而可以使用模塊，字段連接和有條件的邏輯來構建自己的自定義設計。

循環模塊不僅限於博客文章或自定義帖子類型 - 它可以處理廣泛的動態內容。這是您可以使用它來創建自定義佈局並增強您的網站的幾種強大方法：

• WooCommerce類別或標籤- 使用分類法查詢源在單個產品頁面上顯示相關的產品類別或標籤。
• 自定義內容網格- 使用ACF中繼器查詢源（例如“與團隊”或服務列表）上的ACF中繼器查詢來源顯示動態內容，例如團隊成員或推薦。
• 相關文章- 具有ACF關係查詢源的單個發布頁面上相關的博客內容，有助於提高參與度並降低跳出率。

循環中的每個項目都使用您的自定義設計，並吸引了動態數據，例如帖子標題，特色圖像，摘錄等。

循環模塊的關鍵功能

循環模塊包含功能，使其非常適合構建靈活，內容豐富的頁面：

• 查詢任何帖子類型的動態內容（標准或自定義）
• 使用循環佈局內的任何海狸構建器模塊
• 動態連接字段（例如，標題，特色圖像，元元）
• 從多種佈局類型中進行選擇，例如網格，列表或輪播
• 添加過濾器和分頁以增強用戶體驗

自定義和自動化的這種組合使您可以創建高級佈局，而無需編寫HTML，PHP或CSS。

如何構建自定義循環

使用循環模塊創建自定義內容佈局是簡單，靈活的，並且不需要代碼。無論您是想從現成的佈局開始還是從頭開始構建自己的循環模塊，都可以完全控制您的動態內容。

循環模塊預設佈局選項

當您首先將循環模塊拖到頁面上時，您將提示您從以下預設佈局中進行選擇：列表，列，類別和產品類別。

預設佈局可以通過提供可以完全自定義的預放的模塊，從而為您提供了前端。調整循環設置以滿足您的需求，重新排列或刪除現有模塊，並添加新的模塊以微調佈局。這些現成的設計可幫助您更快地創建拋光，響應的內容顯示。

用空白的佈局從頭開始構建

更喜歡創建完全自定義的東西嗎？選擇空白佈局選項並按照以下步驟：

1. 將循環模塊添加到您的頁面上，或在Beaver Builder編輯器中發布。
   
2. 選擇空白佈局以從一個空環容器開始。
   
3. 配置循環設置以定義要顯示的內容，例如博客文章，WooCommerce產品，ACF中繼器字段或自定義帖子類型。
   
4. 將模塊拖動到循環容器中以從頭開始構建佈局。添加您需要的任何海狸構建器模塊，例如標題，照片，圖標，按鈕等。
   
5. 使用字段連接來吸引每個循環項目的標題，圖像，價格或自定義字段，例如。
   
6. 使用Beaver Builder的拖放工具來安排和設計模塊。

此設置非常適合想要完全控制的高級用戶或設計師。
使用它來構建自定義博客佈局，產品網格或團隊目錄（無需代碼）。

使用框模塊進行佈局控件

在佈局精度和样式靈活性方面，盒子模塊是循環模塊的重要伴侶。

• 將循環模塊包裝在盒子模塊中，以管理外部容器的寬度，填充，邊距和背景樣式。這使您可以完全控制您的循環內容如何在整個頁面佈局中。
• 在循環內嵌套一個盒子模塊，以分組每個循環項目的內部內容。此設置使您可以利用高級佈局技術（例如CSS網格或Flexbox） 。例如，您可以在每個循環項目中創建一個兩列佈局。將圖像放在左側，並在右側放置文本 - 完全控制間距和對齊方式。

使用框模塊進行戰略性的使用，有助於維護乾淨，響應式的設計，同時增強動態內容的視覺結構。

查詢設置：將顯示哪些內容？

循環模塊中的“內容”選項卡可讓您控制循環內容的查詢和顯示方式，例如：

• 選擇帖子類型（帖子，頁面，CPT，產品等）
• 通過分類學，類別，標籤或作者過濾
• 根據帖子狀態或日期顯示內容
• 設置偏移，排序訂單和郵政限制

這包括查詢源，要顯示的項目數量，訂購和高級過濾器選項。

分頁

“分頁”選項卡可讓您控制內容如何分配和顯示在多個頁面上，這是用於改善導航和用戶體驗的理想。

• 數字：在您的帖子下方顯示編號鏈接。單擊一個數字加載一個帶有相應帖子集的新頁面。
• 滾動：在用戶滾動時，自動加載其他帖子，將內容保存在單個頁面上。
• 無：禁用分頁。使用此選項顯示有限數量的帖子（例如最新的三個），而無需導航控件。
• 每頁帖子：設置每頁出現多少個項目。默認值為10。

這些選項有助於將內容交付到您的佈局和用戶交互目標。

帶有字段連接的動態數據

在循環佈局中，您可以使用字段連接來動態地吸入帖子數據，例如：

• 帖子標題
• 特色圖像
• 摘錄或完整內容
• 自定義字段
• 作者，日期，類別，標籤

任何支持動態內容的模塊（例如標題，照片，按鈕，HTML等）都可以連接到郵政數據。

高級樣式和有條件的邏輯

是否希望以不同的方式樣式的不同帖子類型或根據條件顯示/隱藏元素？循環模塊支持條件邏輯和自定義CSS類。

例如，您可以：

• 隱藏按鈕如果自定義字段為空
• 為特色帖子添加徽章
• 根據郵政類別應用不同的顏色或樣式

這使您可以微調用戶體驗並在內容中保持一致的品牌。

現實世界循環模塊用例

Beaver Builder中的循環模塊具有難以置信的通用性，可讓您在符合您的設計需求的佈局中顯示動態內容。以下是一些使用它的有力方法：

• 博客檔案：創建具有特色圖像和摘錄的最新博客文章的視覺吸引人網格或列表。
• WooCommerce產品：在可自定義的網格中展示WooCommerce產品，並具有動態定價，圖像和添加到車按鈕。
• 投資組合展示：以靈活的佈局來突出顯示您的項目或案例研究，以反映您的品牌風格。
• 推薦：從自定義帖子類型中顯示客戶推薦，並樣式與您的網站設計相匹配。
• 事件列表：以日期，位置和事件描述為按時間順序列出即將舉行的事件或網絡研討會。
• 團隊成員：使用照片，名稱，標題和BIOS介紹您的團隊 - 將每個項目鏈接到詳細的個人資料頁面。
• 房地產清單：使用自定義帖子類型提供帶有屬性圖像，定價和關鍵細節的房地產清單。
• 課程目錄：顯示在線課程或講習班的目錄，並附有標題，描述和註冊鏈接。
• 作業清單：建立一個定制的工作板，其中包含動態清單，其中包括標題，位置和簡短的角色摘要。
• 食譜索引：配備圖像，標題和描述的食譜集合，這是食品博客作者的理想之選。

這些用例證明了Beaver Builder中環模塊的多功能性。它可以在各種行業和網站上使用，可幫助您創建動態，引人入勝和自定義的內容佈局。

最終想法：為什麼使用循環模塊？

Beaver Builder中的循環模塊使您有能力輕鬆創建完全自定義的動態佈局。無論您是構建博客，商店還是複雜的內容目錄，此模塊都可以控制數據的顯示方式，同時保持工作流的視覺流和無代碼。

如果您認真地使用Beaver Builder構建現代定制的WordPress網站，則循環模塊是您工具包中的必備品。在此處探索完整的循環模塊文檔。