模具這東西很妙。工廠把一套模具打磨好，不管換進去的原料是什麼顏色、哪一批，量產出來的每一件成品外型都長得一模一樣，差別只在裡面裝的料不同。
網站的文章列表、商品列表，其實也在做同一件事，每一篇文章、每一件商品內容都不同，但你希望它們共用同一套卡片外觀。問題是，大多數頁面編輯器只給幾種固定版型可選，想改一個小細節常常就卡住，只能一篇一篇手動調整，新增內容時還得重來一次。Elementor Loop Builder 就是解決這個問題的內建功能。設計好一張卡片模板，Elementor 就會照著它自動排出一整排外觀一致、內容各自不同的卡片，而且改一次範本，所有套用它的地方會一起更新，這是 Elementor Pro 才有的功能。
這篇會照實際動手做的順序，從設計卡片範本、套進頁面、設定查詢與篩選，講到版面分頁與套用在 WooCommerce 商品列表；先從它跟大家原本熟悉的 Posts 小工具，差在哪裡講起。
Elementor Loop Builder 是什麼？和 Posts 小工具有什麼差異？
Loop Builder 說穿了就是讓你自己決定「一個項目」長什麼樣，一張文章卡片、一列商品的樣子，由你從零開始設計，Elementor 再把這張設計自動複製套用到所有符合條件的文章或商品上。
在它出現之前，想在頁面上拉出一排文章列表，多半靠 Posts 或 Products 這類小工具，選一個內建版型、調整欄位順序與要不要顯示某些資訊，大部分情況夠用。但只要遇到比較客製化的需求，像是想把價格擺在標題正上方、想加一個自訂欄位做的小標籤、想讓卡片背景直接用特色圖片鋪滿，內建版型就做不到了，只能另外找外掛或改程式碼。Loop Builder 因為是讓你用容器和一般小工具，從零把一張卡片蓋出來，版面自由度自然比固定版型高出一截。
要留意的是，Loop Builder 是 Elementor Pro 的付費功能，免費版沒有這個工具。它實際上由兩塊組成：負責設計「單一項目長怎樣」的 Loop Item，和負責「把這個設計重複鋪成一整排」的 Loop Grid，後面的步驟就是照這個順序，先做範本，再套元件。
開始設計之前，兩個底層機制要先確認
動手之前，有兩件事值得先確認，免得卡在第一步就找不到 Loop Grid 這個小工具。
第一、Loop Builder 只能搭配 Elementor 的 Flexbox 容器版面使用（新推出的 Grid 容器目前還不吃），也不吃比較舊的區塊、欄位結構，如果網站的頁面還是用舊版排版方式做的，得先切換成容器，Loop Builder 才會出現在小工具清單裡。新安裝的 Elementor 站台，容器多半已經是預設啟用的穩定功能；如果是比較舊、很久沒更新的網站，才需要到 Elementor 後台的設定裡，把「功能」頁面的容器狀態確認為啟用中。
第二、Loop Builder 剛推出的頭幾個版本，還需要另外開啟實驗性功能才能使用，如今它已經走到穩定功能的階段，多數版本已經預設可用。萬一介面上真的找不到 Loop Grid，第一件事就是回頭去同一個功能設定頁面確認狀態，而不是急著懷疑自己哪裡按錯。
Loop Item 和 Loop Grid，兩個名詞要先分清楚
這裡先把兩個名詞分清楚，免得後面看操作步驟時搞混。Loop Item 是「一個項目的設計範本」，像模具本身，在主題建構器裡建立；Loop Grid 則是「放在頁面上的元件」，負責選一個 Loop Item 範本、決定要抓哪些內容、排成幾欄幾列。順序永遠是先做範本，再套元件；下面就先講怎麼把模具做出來。
設計 Loop Item，把卡片模具做出來
進到後台的「範本」，點新增，類型選 Loop Item，來源選文章或商品，替範本取個好辨識的名字，例如「部落格卡片 v1」，就會直接跳進編輯畫面。設計時幾乎可以用上 Elementor 所有的小工具，標題、精選圖片、摘要、文章資訊之外，想加一個圖示或分隔線做純裝飾用途也沒問題。唯一要注意的重點是，每個欄位掛的不是打死的文字，而是動態內容。至於單一元素怎麼掛動態標籤，屬於動態內容這個主題的範圍，這裡只需要知道特色圖片、標題、摘要、日期、分類這些常用欄位都能直接綁定，細節不在這篇展開。
卡片骨架要用容器搭起來
在 Loop Item 裡，先放一個容器當最外層骨架，寬度設成滿版，避免不同螢幕寬度跑版；裡面再照設計需求依序排標題、圖片、簡介、按鈕。如果有需要橫向並排的資訊，例如作者名字旁邊放一個「閱讀更多」按鈕，就在容器裡再嵌一層子容器，把方向設成橫向。容器本身的方向、對齊、間距怎麼調有一整套邏輯，這裡只需要知道怎麼把它套用在卡片上就夠用。
要幫欄位掛上動態內容，不要留死的文字
如果標題、摘要這些欄位沒有綁定動態標籤，做出來的每一張卡片就會顯示一模一樣的死文字，而不是各篇文章自己的標題和摘要，這是最容易疏忽的地方。掛的方式很簡單，每個小工具都有一個動態內容的圖示，點開選對應欄位即可，細節留給動態內容的主題處理。另外有一個常見的客製化小提醒，想讓特色圖片維持一致比例，不因為每篇文章上傳的圖片尺寸不同而讓卡片高低不一，可以在圖片尺寸設定裡指定固定的寬高，讓它照比例裁切。
把範本放進頁面，Loop Grid 怎麼套用？
模具做好了，接下來要做的是量產。把 Loop Grid 元件拖進想顯示列表的頁面，例如部落格頁面，或某個著陸頁裡的精選文章區塊，在內容設定裡選擇剛剛做好的 Loop Item 範本即可。如果還沒做範本，也可以直接在拖進 Loop Grid 的當下按「建立範本」，就地跳進設計畫面，不用先繞去主題建構器。
同一個 Loop Item 範本可以在不同頁面被多個 Loop Grid 重複使用，改一次範本，所有套用它的地方會一起更新。這是它比手動排版省下最多工夫的地方。以前想調整卡片樣式，得逐頁、逐篇檢查；現在只要改範本一次就夠。
查詢設定決定網格裡出現哪些項目
範本套上去之後，還要告訴 Loop Grid 該抓哪些內容，這一步靠查詢設定完成。來源可以選文章、頁面、手動選頁面，也可以選「目前查詢」；篩選條件能指定包含或排除某個分類、標籤、作者，也能設定排序方式，依日期新到舊或依標題字母順序都行。這一塊是多數教學只講「怎麼套版型」、完全沒提到的部分，但它才是決定這個列表會出現哪些內容的關鍵。
Current Query：同一個範本套進不同分類頁
這裡最容易被忽略，也最容易出錯。如果目標是同一張範本要套用在好幾個不同分類頁，各自只顯示自己分類底下的文章或商品，例如分類頁、標籤頁、WooCommerce 的商品分類頁，來源要選「目前查詢」，讓 Loop Grid 自動依照目前所在的頁面抓對應內容，不用每個分類各做一份查詢設定。
如果沒選這個選項，而是手動指定了某個固定條件，換到別的分類頁時，抓到的內容可能還是原本那組，不會跟著頁面自動切換。這個狀況很常讓人以為是 Loop Grid 壞掉，實際上只是查詢設定沒對上。
欄數、間距與分頁，版面細節怎麼調整？
內容抓對了，接下來是版面呈現。欄數決定一列排幾張卡片，可以依裝置切成桌機、平板、手機各自的欄數；卡片之間的間距靠間隔設定控制。版面高低不整齊時，可以打開砌牆式排版，讓卡片像磚牆一樣錯落排列、不留白，適合簡介長短不一的清單；關掉的話，每張卡片就會維持等高。
分頁的呈現方式也有好幾種可以選：傳統頁碼、上一頁與下一頁、點擊載入更多、無限捲動，依內容量與使用情境挑選，列表本來就長、想讓讀者慢慢往下滑就用無限捲動，想讓使用者能明確跳到特定頁就用頁碼。
Loop Builder 能不能套用到 WooCommerce 商品列表？
Loop Builder 一樣能套用到 WooCommerce 商品列表，差異只在來源與掛的欄位：把來源改選成商品，或選商品分類來顯示不同分類頁，卡片裡放的元件也換成商品專屬的，像是商品圖片、商品標題、價格、加入購物車按鈕、商品評分，都能直接掛上去。
Elementor 官方在最初推出這項功能時就提過，商品列表的完整支援要等後續版本才會到位；如今這項擴充已經完成，可以完整客製化商品列表的外觀。如果只是想在單一分類頁自動顯示該分類的商品，一樣靠前面提過的「目前查詢」處理，不用另外做一次查詢設定。
卡片高度對不齊、篩選跑出錯的項目，兩個最常卡關的地方
設計流程走到這裡，多數人接下來最容易卡在兩個地方：卡片高度亂掉，或是換了分類頁後篩選跟著跑掉。
第一個狀況是，同一排卡片因為簡介長短不一，高度看起來參差不齊。處理方式有兩種思路：一種是打開砌牆式排版，讓版面自然錯落，不強求每張卡片等高；另一種是把容易長短不一的那個欄位，通常是摘要，在進階設定裡調成自動撐開，讓它往下延伸，把矮的卡片撐到跟高的一樣。兩種思路各有適合的情境，依設計需求擇一就好。
第二個狀況是，換了分類頁，但列表顯示的內容跟預期不同，甚至整個網站的文章都跑出來。這時候該回頭檢查的是查詢設定的來源有沒有設成「目前查詢」，這正是前面提過最容易被忽略的一步。
模具做得好不好，決定的不是這一次的排版好不好看，而是往後每一次新增文章或上架商品時，要不要再重新排一次版。花時間把 Loop Item 範本設計到位，之後每一篇新文章、每一件新商品，都自動套上同一套版面，省下來的是長期反覆的排版工夫。等熟悉了文章與商品列表的做法，下一步自然會想把同一套邏輯用到更多地方，像是作品集、活動列表，讓整個網站的重複性內容都靠同一套模具量產。