Elementor 編輯器
Elementor 編輯器 進階篇
入門篇把版面排出來之後，這一頁講的是「排不出來的那些效果」：定位、黏貼、格線，以及怎麼讓一個版型自動套用到一整批文章或商品。
物件的定位
在元件的進階 → 定位（Position）裡：
| 絕對 Absolute | 脫離排版流程，相對於上層容器定位。用來把一張小圖壓在標題角落、或做疊在背景上的裝飾。上層容器的定位要設成「相對」。 |
| 固定 Fixed | 相對於瀏覽器視窗定位，捲動時不會跑掉。常用在右下角的浮動按鈕。 |
絕對定位的元件不佔空間，所以它不會把下面的東西推開，也很容易在手機上壓到別的內容。用了之後務必逐一檢查三種裝置寬度。
黏貼效果（Sticky）
進階 → 動作效果 → 黏貼。可以讓一個容器捲到畫面頂端時固定住，常見用途：
- 商品頁右側的「加入購物車」區塊跟著捲動。
- 長文章的目錄固定在側邊。
- 行動裝置上固定在底部的 CTA 按鈕。
記得設定「黏貼於」的裝置與偏移量（避免被固定的頁首擋住）。
Container 與 Grid
容器的版面模式有兩種：
- Flexbox（預設）——一維的排列，橫一排或直一列。要在一排裡放 N 個等寬的東西，用它最快。
- Grid——二維格線，自己指定幾欄幾列。卡片數量不固定、又想維持整齊的方格時用 Grid，它在換行時不會留下奇怪的空隙。
判準：一排東西 → Flexbox；一個方格陣列 → Grid。
Loop Grid：一個版型套用到一整批內容
手動排三張卡片沒問題，但有三十篇文章、兩百個商品的時候就不能手動。Loop Grid 的做法是：先設計一張卡片的樣子（範本），再讓它自動套用到所有符合條件的內容。
- 建立一個 Loop Item 範本，在裡面用動態標籤（Dynamic Tags）綁定標題、精選圖片、價格等欄位。
- 在頁面上放一個 Loop Grid 元件，選擇剛剛的範本。
- 設定查詢條件：要抓文章還是商品、哪些分類、排序方式、每頁幾筆。
同樣的事情，JetEngine 的 Listing Grid 也做得到，而且在自訂內容類型與複雜篩選上更強。兩者擇一即可，不要同一個區塊兩個都用。做法見 JetEngine 列表版型。
Loop Grid 與主題建構器是同一套思維：你設計的不是「這一頁」，而是「這一類頁面的版型」。改一次，全部跟著變。
第三方擴充
站上另外裝了幾組 Elementor 的擴充元件（例如 JetEngine、Crocoblock 系列）。它們會在元件面板裡自成一區。用之前先確認同樣的事情內建元件能不能做——能用內建的就用內建的，之後維護與相容性的麻煩會少很多。