如何使用Divi 5的Loop Builder構建投資組合網格

投資組合網格是展示您作品的簡單，有效的方法。使用Divi 5的循環構建器，您可以設計可重複使用的卡片佈局，並將其直接從視覺構建器中的內容中自動填充。

與單用途模塊不同，循環構建器可讓您使用任何Divi元素，為帖子或自定義帖子類型設置查詢，並輸出一個繼承您的全局樣式的響應式網格。在本教程中，我們將使用“自定義帖子”類型逐步構建一個投資組合網格。

了解Divi 5的循環構建器

Divi 5的循環構建器是一項新功能，可讓您輕鬆創建動態循環的內容佈局。與博客或投資組合模塊不同，循環構建器使您可以輕鬆地循環任何Divi元素以顯示帖子，條款或用戶。這意味著您可以構建一個模板，該模板會自動從WordPress站點中填充內容。

LOOP構建器支持各種內容類型，包括自定義郵政類型（CPT），WooCommerce產品和高級自定義字段（ACF），從而使您可以準確地顯示您的作品集。

循環構建器的主要好處

由於其強大的自定義選項，Loop Builder非常適合創建投資組合網格。這是其出色的功能：

• 設計自定義循環模板的靈活性：使用循環構建器，您不僅限於預定義的佈局。您可以使用任何Divi模塊為每個投資組合項目設計一個唯一的模板。
• 可自定義的查詢：循環構建器可讓您微調哪些內容出現在您的網格中。按類別，帖子類型或自定義字段過濾，以僅在您的首選訂單中顯示所需的項目。
• 動態內容集成：無縫吸引動態內容數據，例如項目標題，特色圖像，描述或自定義元數據，以使每個投資組合項目引人入勝。

這些功能使Divi 5的循環構建器成為創建完全可定制且易於導航的拋光，專業投資組合的理想工具。

建立使用Loop Builder的投資組合

我們將使用Divi的內置項目自定義帖子類型（CPT）與Loop Builder創建投資組合。 CPT項目旨在展示投資組合風格的內容，使其成為我們佈局的理想選擇。儘管Divi確實提供了投資組合模塊，但我們將使用Loop Builder，因為它為我們提供了創建獨特投資組合的無限選項。

首先，將新行添加到您的頁面。為此，我們將使用3列佈局。

我們將向第一列添加標題模塊。

輸入標題或使用Divi AI為您生成一個。

導航到“設計”選項卡，請選擇“標題”字體的Inter ，為標題字體重量重量，將標題文本大小設置為2EM ，然後分配1.3EM標題線高。

現在，讓我們構建循環。導航到我們行的第二列。

找到“循環”選項卡，展開它，然後啟用循環元素切換。

接下來，選擇查詢類型。對於本教程，我們將使用Divi的內置CPT項目。在郵政類型下，選擇項目。我們想展示所有項目，因此我們將盡一切努力。

您可以通過設置，每個頁面帖子和發布偏移選擇訂單。由於我們的第一列包含一個標題模塊，因此我們將每個頁面的帖子設置為8 。這樣，即使在我們的三列行之間，輸出也將是。

您會注意到我們的循環正在嘗試堆疊所有列。要解決此問題，我們需要轉到行設置。導航到3列行，單擊“設計”選項卡，然後找到佈局設置。

展開佈局設置選項卡。找到佈局包裝設置，然後選擇包裝。這將把我們的循環歸還為3列。

造型循環列

現在，循環設置已經到位了，是時候為我們的列設計了。我們在這裡選擇的樣式設置將影響循環中的其餘列。在3列行中，單擊第二列，然後單擊“設計”選項卡。導航到邊框下拉列表，並將15px邊框半徑分配給列。在邊框樣式下，添加1PX邊框寬度，並使用＃000000作為邊框顏色。

將內容添加到循環中

我們可以通過分配的列樣式開始將內容添加到循環中。單擊以將圖像模塊添加到第二列中。添加後，循環中的每一列將顯示一個圖像佔位符。

我們將使用Divi 5的動態內容功率來吸引我們項目的特色圖像。懸停在圖像上方以揭示圖標。單擊動態內容圖標以繼續。

當選項出現時，選擇循環特色圖像。

我們的循環將將每個項目的特色圖像直接放入我們的投資組合循環中。

接下來，將標題模塊添加到特色圖像下的第二列中。這將用於項目標題。重複上述步驟以添加標題。但是，這次選擇循環帖子標題。

在“設計”選項卡中，選擇標題級別的H3 ，用於標題字體，標題文本對齊中心和20px的標題文本大小。

最後，我們將添加一個鏈接到每個項目的按鈕。將按鈕模塊添加到帖子標題下方的第二列。單擊按鈕鏈接URL中的動態內容圖標，然後選擇循環鏈接。

切換到“設計”選項卡並將對齊設置為中心。

展開按鈕下拉設置，並啟用使用自定義樣式進行按鈕。輸入以下設計設置：

• 按鈕背景： ＃000000
• 按鈕邊框半徑： 15px
• 按鈕邊框寬度： 0px
• 按鈕字體： inter
• 按鈕文字顏色： #FFFFFF
• 按鈕文字大小： 16px
• 保證金： 15px底部
• 填充： 15px頂部和底部，左右35px

就是這樣！如您所見，使用Divi 5創建一個循環是一個簡單的過程。

用循環構建器更換樣式

編輯循環的樣式與創建循環本身一樣簡單。假設您想從光線換成循環的黑暗主題。進行設計更改僅需幾秒鐘。您可以更改部分的背景顏色，然後單擊幾下對單個循環元素進行更改。

無需單獨編輯循環項目。由於它們都是連接的，因此您只需要編輯一次模塊，而Divi 5將在循環中的每個模塊中自動應用更新的樣式。

您可以在循環中添加更多模塊，例如項目摘錄，發布日期，評論計數，作者生物，自定義字段等。

如果要收緊循環中項目周圍的空間，則可以調整行和列設置中的垂直差距。這樣可以使用Divi 5的Flexbox佈局系統來控制每行和單個模塊之間的空間數量，從而使您可以完善循環的外觀。

測試和完善投資組合循環

一旦建立了投資組合，就該對其進行測試以確保一切按預期工作。首先，使用Visual Builder頂部的預覽鏈路預覽前端的網格。

驗證每個項目的標題，特色圖像，摘錄和循環鏈接正在從項目CPT中正確提取。確保沒有佔位符被破壞的元素。

回到視覺構建器中，檢查以確保使用Divi 5的可自定義響應式斷點來確保佈局適當調整。默認情況下，Divi 5提供3個斷點- 一個用於台式機，平板電腦和電話- 但您可以通過單擊Visual Builder頂部欄中的省略號菜單來啟用最多7個。

瀏覽每個斷點，檢查佈局，並根據需要進行調整。

為了使佈局更加友好，您可以使用Divi 5的更改列結構設置來更改較小設備上顯示的列數。

最佳實踐和技巧

為了確保您充分利用Divi 5和Loop Builder，在構建投資組合時，這裡有一些最佳實踐。

1.確保設計變量的設計一致性

Divi 5的設計變量功能使您可以在投資組合頁面上定義一致的版式，顏色和間距。在Visual Builder中，為字體，顏色和填充/邊緣設置全局變量，以確保每個投資組合項目看起來都均勻。要創建變量，請單擊Visual Builder左側菜單上的變量管理器圖標。

從那裡，您可以分配全局字體，顏色等，以確保整個網站的設計不僅僅是您的投資組合頁面。

2。考慮可訪問性

可訪問性確保所有用戶，包括殘疾人，都可以導航並享受您的工作。將圖像上傳到媒體庫時，請確保為圖像添加替代文本。這有助於屏幕讀取器將內容傳達給視力受損的用戶。

選擇具有足夠的對比度的顏色也可以確保視覺障礙用戶的可讀性。

3。保存和重用模板

完善循環構建器模板後，將其保存到Divi庫中，右鍵單擊“投資組合”部分並選擇保存到庫中。給它一個描述性的名稱，以便簡單參考。這使您可以在其他頁面上重複使用模板，而無需從頭開始重新構建。

要使用其他網站上的模板，您可以將其保存到Divi Cloud並一鍵將其導入其他Web項目。

保存模板簡化了您的工作流程，並確保您可以快速部署未來項目的專業投資組合網格。

下載文件

免費下載

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

下載

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

今天嘗試Divi 5中的循環構建器

Divi 5的循環構建器使創建動態投資組合網格變得容易，從而使您可以以風格和效率來展示您的作品。通過利用內置項目CPT和Loop Builder的強大功能，您可以創建靈活且完全可定制的網格，以動態吸引項目的內容。它的靈活性使您可以使用任何Divi模塊設計獨特的佈局，設置查詢以顯示特定的項目，並創建在任何設備上發光的響應網格。

您準備好將投資組合栩栩如生嗎？潛入Divi 5的最新公共Alpha版本，並嘗試使用您的投資組合佈局。無論您是自由職業者展示項目還是突出客戶工作的業務，Loop Builder都可以輕鬆創建專業，動態的顯示。