重點整理
Loop Grid 是 Elementor 用來自訂文章或商品列表排版的小工具。做法分三步：在後台「範本」新增 Loop Item 範本、用拖曳方式設計版型並發布，再回到頁面的 Loop Grid 小工具選用這個範本。
相信Elrmentor在最近一系列的改版中，增加了不少實用的功能 ，今天來針對其中一個 widget：「Loop Grid」來介紹！
Elrmentor – Loop Grid
一般我們在首頁或是靜態頁面想拉出文章列表，通常都是用 Posts這個小工具來解決，一般而言是沒問題的，也有一些預設的排版可以使用。
但若是想自訂呈現的排版，之前只能用其他的功能性外掛處理（例如 Elementor AE），不過這幾次的改版，Elementor終於也可以自訂排版了，來趕快看一下怎麼使用吧！
首先在頁面編輯的小工具，可以找到新的小工具： Loop Grid，拉進來之後會發現都沒有東西，這是因為我們要建立新的 template。
這時候我們切換到後台控制台的「範本」（Templates）->已存版型，直接點選「新增」。
在跳出來的視窗中，下拉選到「Loop item」，然後根據需求選擇 Posts或是 Products再命名一下。
接著就像一般使用elementor的後台，拖曳、調整你想要顯示的版型，完成後記得要按發布。
最後我們回到剛剛拉「Loop Grid」這個小工具的頁面，可以下拉搜尋我們剛剛新增的 loop item 名稱，套用後再照著以前使用 Posts 的方式，就可以呈現剛剛的版型了！
Loop Grid 和 Posts 小工具差在哪？
兩者都能列出文章，差別在「每一張卡片長什麼樣子」由誰決定：
- Posts 小工具：只能從內建的幾種版型（例如 Classic、Cards）挑選，再調整顏色、間距與要不要顯示摘要、日期。
- Loop Grid：卡片版型是你自己用 Loop Item 範本拖拉出來的，可以放自訂欄位、分類標籤、按鈕，排列位置也能完全自訂。
如果內建版型已經夠用，用 Posts 比較省事；需要跟設計稿一致、或要顯示 ACF 等自訂欄位時，才值得改用 Loop Grid。
使用 Loop Grid 前要注意什麼？
- 先確認有 Elementor Pro 授權：Loop Builder 是 Pro 功能，授權過期後雖然既有頁面通常還會顯示，但無法再更新外掛與取得支援。
- 範本命名要清楚：文章用、商品用、首頁用的 Loop Item 最好分開命名，日後在 Loop Grid 下拉選單裡才找得到。
- 改範本會影響所有使用它的頁面：同一個 Loop Item 被多個 Loop Grid 引用時，修改一次全部跟著變。
- 注意手機版欄數：Loop Grid 的欄數要分別在桌機、平板、手機檢查，避免手機上卡片擠成兩欄看不清楚。
常見問題
Elementor Loop Grid 免費版可以用嗎？
不行，Loop Grid 與 Loop Item 範本屬於 Elementor Pro 的 Loop Builder 功能，只裝免費版的 Elementor 在小工具清單裡找不到它。只想列出文章的話，可以先用 Posts 小工具或佈景主題內建的文章列表。
Loop Grid 拉進頁面後為什麼一片空白？
因為還沒有指定 Loop Item 範本。先到「範本」新增類型為 Loop Item 的範本並按發布，再回到頁面，在 Loop Grid 的設定裡選取這個範本，列表才會顯示內容；範本沒發布也會選不到。
Loop Grid 可以用來顯示 WooCommerce 商品嗎？
可以，新增 Loop Item 範本時把來源選成 Products，就能在範本裡放商品名稱、價格、加入購物車按鈕等動態元素。前提是網站已安裝並啟用 WooCommerce，否則不會出現商品相關的選項。
結語