如何一起使用Divi 5的循環構建器和分頁模塊

如果您顯示所選且有限的帖子集，則靜態列表的內容列表很好。但是通常，您希望用戶訪問比原始循環顯示的更多內容。您想確定最初的內容加載多少，並為讀者提供清晰的方式來在批處理之間移動。那就是Divi 5的循環構建器和分頁模塊成為完美的一對。

這篇文章將引導您完成每個工作的工作方式，然後向您展示如何連接它們。到最後，您將知道如何使用適當的分頁構建循環佈局。

認識Divi 5的循環構建器

循環構建器是Divi 5最大的升級之一。它為您提供了舊博客模塊永遠無法做到的自由。任何元素都可以成為“循環”容器。這意味著Divi將對與查詢相匹配的每個帖子，產品或自定義帖子類型自動重複它。

您沒有被預先設計的帖子列表粘住，而是將一個“模板”項目設計為循環。 Divi用於每個結果，從循環查詢中交換動態內容。這可能是：

• 從帖子數據中獲取的標題
• 特色圖像
• 自定義字段
• 鏈接到完整的帖子或產品

您可以使用任何模塊顯示此數據，而不僅僅是博客特定的數據。想要一個花式的藍色模塊顯示您的最新課程列表嗎？完畢。需要用於WooCommerce項目的自定義產品卡佈局嗎？也完成了。

這很靈活，因為您自己正在建立設計和內容結構。 Divi處理重複。

從博客模塊切換到循環構建器意味著從標準模板轉移到完全自定義的佈局系統。我真的很喜歡建造它，我也知道您也會！

滿足分頁模塊

分頁是說“將結果分為頁面”的一種奇特方式。而不是將所有項目倒在單頁上，而是將它們分解為較小的集合。有幫助：

• 頁面加載時間
• 可讀性
• 掃描性

Divi 5中的分頁模塊確實可以做到這一點，但具有一些智能集成。它不僅與博客文章有關。相反，它可以連接到您在頁面上構建的任何循環。

它通過添加兩個導航元素（即預覽和下一個鏈接）來起作用，它們可以自定義。如果較舊的項目超過當前集，則“較舊”（或您選擇的文本）將處於活動狀態。如果有較新的項目，“較新”將處於活動狀態。

構建循環 +分頁佈局

讓我們通過完整的設置運行。此示例假設您需要一個帶有分頁的自定義循環。這是我創建的Flex佈局，它將顯示我們的循環。您可以在下面下載完整的佈局。

請注意，該卡的寬度和柔性增長〜50％，因此，當循環卡在彈性行中本身時，它將在容器內部變成全寬。

步驟1：創建循環容器

在您的頁面中添加一個部分。在其中，添加要重複的模塊。這可能是一個單個模塊（例如Blurb），也可以是列或組中多個模塊的更複雜的佈局。

選擇您的容器後，打開其設置並啟用循環選項。

選擇您的數據源。這是循環將運行的“查詢”。

首先，選擇查詢類型。根據您網站的配置，您可能會看到以下選項：

• 發布類型（例如您的博客文章或自定義帖子類型，例如“項目”）
• 術語（類別和分類法）
• 用戶（返回網站用戶列表，例如作者）
• 中繼器字段（由插件創建的自定義字段用於在循環中創建循環）

接下來，根據您在上面選擇的哪種查詢類型，您將有機會更具體。選擇“帖子類型”可能使您可以使用以下帖子類型：

• 博客文章
• 專案
• 產品
• 無論您為自己定制的CPT

從那裡開始，您可以更具體地說明循環中應該出現的內容。你可以：

• 包括具有特定類別或標籤的項目
• 排除具有特定類別或標籤的項目
• 包括特定項目（通過郵政ID）
• 排除特定項目（通過郵政ID）
• 構建您自己的元查詢（用於基於自定義字段數據創建包含物/排除的信息）
• 設置匹配查詢的順序（例如字母順序和下降）
• 每個頁面值的項目控制循環中顯示多少
• 後偏置，如果您想在周期後期開始循環
• 忽略粘性帖子

這就是我們的示例在這一點上的看法。我們創建了循環並將其分配給我們的博客文章類型。我將顯示限制設置為3。

現在，我們必須分配具有動態循環內容的超鏈接的各種文本字段和項目。

步驟2：在循環中添加動態內容

我們的下一個任務是單擊每個循環的模塊，然後用動態內容字段替換靜態文本或圖像。例如：

• 在文本模塊中，從動態內容選擇器中選擇“帖子標題”
• 在圖像模塊中，您可以選擇“特色圖像”
• 在按鈕模塊中，將鏈接設置為“發布URL”
• 在整個循環容器上，還將鏈接設置為“郵政URL”

這告訴Divi為每個循環項目提取正確的內容。

請記住 - 每個結果都重複循環內部的任何內容。將非環內容（例如標題，廣告或CTA）放在外面。如果循環中沒有與動態數據連接的內容，則循環中的每個項目都會顯示AS-IS（例如示例卡右下角的“讀取→”文本）。

步驟3：添加分頁模塊

在循環部分下方，添加新行。插入分頁模塊。在模塊的設置中，找到目標字段。使用它從頁面上的循環列表中選擇循環。這將分頁控制與該特定循環聯繫起來。專家提示：如果您使用管理標籤，則更容易選擇正確的目標。這也用於互動。

自定義“上一個”和“下一個”標籤。您可以使用“舊帖子 /較新的帖子”，“後背 /向前”，甚至可以使用“← /→”，以最少。

關鍵是分頁模塊必須坐在它控制的循環外部。並確保將其分配到正確的目標（如果您在同一頁面/模板上有多個循環）。

步驟4：測試互動

保存您的頁面並預覽它。單擊“較舊”以轉到下一組循環項目。

請注意，URL如何通過標識循環頁面的查詢參數變化。另請注意，只有循環內容會隨機變化/變化 - 桌面，頁腳和側邊欄應保持不變。

獲取此循環佈局

是否想剖析這種佈局，看看自己是如何為自己構建的？在這裡下載！

解壓縮文件夾後，導航到Divi庫上傳文件。上傳後，您將可以將部分添加到您正在處理的任何頁面中。

下載文件

免費下載

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

下載

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

享受一個更具活力的分區

Divi 5的循環構建器和分頁模塊是靈活性的巨大飛躍。循環構建器使您擺脫了舊模塊的剛性設計，使您可以使用動態內容構建自己的重複佈局。分頁模塊通過將它們分解為用戶友好的塊，可以使這些佈局快速可管理。

循環構建器和分頁模塊與其他新的Divi 5功能（Flexbox，Interactions，HSL Color Controls）配對，一如既往地強大。您可以對所有這些進行一些令人難以置信的頁面設計。

建立了第一個分頁循環後，您將看到在博客，產品網格，投資組合或您需要組織的任何內容類型之間重複使用該方法的容易。