最後更新時間：2026-01-01，由 Dean 更新 
過往做案子，發現不少人在使用免費版 Elementor 設計頁面時，常常遇到像「樣板套不起來」、「表單功能太陽春」、「無法做出可篩選的分類頁」的狀況，但其實這些 Pro 版都能做到。
Elementor Pro 是 Elementor 的進階付費版本，需至官網訂閱後下載並安裝。
這篇文章會帶你了解 Elementor Pro 幾個關鍵、但常被忽略的設定方式，並實作一個「可篩選的分類頁」，讓你更清楚它能為網站帶來哪些實用的提升。
Elementor Pro 有哪些方案？適合誰？
提到 Elementor 付費版，大多人知道的都是 Elementor Pro，但實際上，Elementor Pro 又分為 Essential、Advanced、Expert、Agency 等四種方案，下面一一說明。
Elementor Pro 方案比較
Essential 是最入門的方案，但 4 個方案中，只有 Essential 與 Advanced 有功能差異，其他只差在網站授權的數量。
| Essential | Advanced Solo | Advanced Shop | Advanced | Expert | Agency | |
|---|---|---|---|---|---|---|
| 網站數量 | 1 | 1 | 1 | 3 | 25 | 1000 |
| 年訂閱 (USD) | 60 | 84 | 108 | 99 | 204 | 399 |
以功能來說，最便宜的 Essential 方案缺少了像是全域小工具、小工具顯示條件、自訂字體上傳、角色管理員 (權限管理)、自訂 CSS、表單重定向、第三方整合、電商動態標籤和 WooCommerce 建構器等進階功能。
所以，Elementor 官方後來推出了「Advanced Solo」個人版本和「Advanced Shop」商店版本：
| Essential | Advanced Solo | Advanced Shop | |
|---|---|---|---|
| 快速簡介 | 授權一個網站，無進階功能 | 授權一個網站，包含進階功能 | 授權一個網站，包含進階 + 電商功能 |
| 全域功能 | ．57 小工具 ．一般動態標籤 ．頁面顯示條件 ．滾動固定效果 ．頁面轉場 | ．86 小工具 ．WooCommerce動態標籤 ．ACF & Toolset 整合 ．元件顯示條件 ．全域小工具 ．協作筆記 ．角色管理員(權限管理) | ．86 小工具 ．WooCommerce動態標籤 ．ACF & Toolset 整合 ．元件顯示條件 ．全域小工具 ．協作筆記 ．角色管理員(權限管理) |
| 自訂功能 | ．Google 字型 | ．自訂字型 ．自訂程式碼 ．自訂 CSS ．全域自訂 CSS | ．自訂字型 ．自訂程式碼 ．自訂 CSS ．全域自訂 CSS |
| 行銷功能 | ．表單建構器 ．表單通知 | ．表單建構器 ．表單提交後動作 ．第三方整合 ．彈窗建構器 ．自訂屬性 | ．表單建構器 ．表單提交後動作 ．第三方整合 ．彈窗建構器 ．自訂屬性 |
| 電商功能 | ．PayPal 整合 ．Stripe 整合 ．WooCommerce 小工具 | ．PayPal 整合 ．Stripe 整合 ．WooCommerce 小工具 ．優惠券系統 ．運費計算 ．一鍵退款 ．願望清單 ．候補名單 ．庫存顯示/管理 浮動/迷你購物車 ．多種貨幣支援 ．訂單系統 |
換句話說，如果你只有一個網站，並且：
- 想利用「專業版小工具」設計出更美觀的頁面。
- 沒有需要將表單整合第三方，只單純蒐集名單。
- 不需要電商功能。
使用 Essential 就可以，大大節省預算。
Elementor Pro 適合對象
Elementor Pro 可用於各種需求，只要根據自己的需求考量該買哪一種方案即可。
| Essential | Advanced Solo | Advanced Shop | Expert | Agency | |
|---|---|---|---|---|---|
| 站長 (個人使用) | √ (想自訂頁面) | √ (行銷、會員和名單蒐集等) | |||
| 設計師 & 開發者 | √ (個人形象網站) | √ | √ (大型專案) | ||
| 小型商家 | √ (僅展示產品) | √ (有電商需求) | √ | ||
| 中小型企業 | √ | √ | √ (完整電商需求) | √ (多個子品牌) | |
| 設計公司 | √ (協助客戶製作電商網站) | √ (管理客戶網站) | √ | ||
| 大型企業 | √ (建構大型電商網站) | √ | √ |
如何購買並安裝 Elementor Pro？
step 1
首先，你需要先到 Elementor 官網購買 Pro 方案。
購買成功後，會跳轉感謝購買頁，直接按「Download Elementor Pro」下載檔案。
step 2
接下來，要先安裝免費版的 Elementor 外掛，如果還沒裝，先到《Elementor 教學》看安裝步驟。
免費版安裝完後，回到 WordPress 後台：
- 左側選單點開「外掛」，選「已安裝的外掛」。
- 等跳轉頁面，在最上方點「上傳外掛」。
step 3
外掛頁上方會跳轉出上傳欄位：
- 按「選擇檔案」在儲存壓縮檔的資料夾點選檔案。
- 再按「立即安裝」。
- 等跳出「啟用外掛」鈕，點進去。
step 4
接下來會跳轉回「已安裝的外掛」頁，找到 Elementor Pro，在下面點「Connect & Active」。
step 5
進入啟用頁，點「Connect & Active」。
step 6
等跳轉回 WordPress 後台，就會看到狀態是「Active」，代表已經啟用 Elementor Pro 憑證了，可以開始使用進階版。
啟用 Elementor Pro 時出現錯誤訊息，怎麼辦？
如果啟用時出現了「http_request_failed」訊息，可能是網站伺服器連不上 Elementor 授權伺服器，請先：
- 確認網站是否能連到外部網站。
- 檢查防火牆或安全外掛有沒有擋到 Elementor。
- 將 “http://my.elementor.com”、”http://elementor.com” 列入白名單。
- 在伺服器上啟用 CURL。
如果你不會做，可以聯絡你的主機商，請他們幫你檢查與設定。
10 個 Elementor Pro 核心功能介紹
主題建構器
網站長什麼樣子通常是由佈景主題決定，而佈景主題背後是一堆 php 檔案 (像 header.php 管頁首、footer.php 管頁尾)，若想改動這些地方，會需要改寫程式碼，對許多人來說是很大的門檻。
Elementor Pro 的「主題建構器」就是讓這件事變簡單，並有更多應用：
- 不必處理程式碼，用 Elementor 編輯器改動網站的每個頁面和每個區塊。
- 統一管理，只要更動一次，就會全站更新。
- 可設計專屬的頁首、頁尾和 404 頁等，套用在指定頁面上，如為商店設計專屬的頁首、頁尾、分類頁、搜索結果頁等。
有 3 個地方可以登入主題建構器：
- WordPress 後台選單點開「範本 > Theme Builder」。
- Elementor 編輯器中，左上方點開 Logo，點「主題建構器」。
- Elementor 編輯器中，右邊顯示區點資料夾圖示。
主題建構器的介面：
- 左邊是分類。
- 右邊可直接選一個類別，新增範本或套用其他模板。
動態標籤
動態標籤不是文字、圖片或某種小工具，而是一個簡單的代碼，如 {{Post Date}} 或 {{Post Modified Date}}。
在製作範本頁時，只要放上這些代碼，就會從「指定來源」自動抓取資料，無論有多少篇文章或產品，都可以套用同一個範本，不用再一篇篇、一頁頁去修改。
「指定來源」可以是文章、頁面或產品，也可以是產品的標題、分類、描述等，有幾種情況會放上動態標籤，例如：
- 想在文章上放更新日期，可用動態標籤自動更新日期，不用手動更新。
- 製作分類商品頁時，在標題加入一個「商品分類」的動態標籤，並在商品列表設好抓取哪一類商品的資料，標題和商品列表就會根據指定分類更新內容。
以小工具「圖片轉盤」為例，我們希望圖片轉盤中的圖片能自動更換：
- 點進「圖片轉盤」的設定。
- 在左側內容設定中，找到上傳圖片的地方，點開像錢幣疊起來的小圖示。
- 等跳出選單，就有文章圖片 (附件) 或商品圖片庫等 2 種來源可選。設定完後，未來的圖片都會是資料庫中的最新圖片。
補充說明：若有設定動態，網站快取的時間不能太久 (建議 1 小時)，以免瀏覽時看到舊資料。
條件顯示
「條件顯示」的全名是「Display Conditions」，可以根據不同設定，自動顯示或排除某些內容，例如：
- 只對登入會員顯示有「會員專區」的導覽選單。
- 只在特定節日顯示促銷的彈出視窗。
- 只對新訪客顯示電子報訂閱的彈出視窗。
「條件顯示」會分別出現在兩個地方：
- 主題建構器：當你建立頁首、頁尾、文章模板、404 頁、搜尋結果頁等範本後，可選擇套用在哪些頁面或內容上，例如：此頁首只套用在商店頁、僅登入會員才看到這個頁面等。
- 小工具：可選擇放在頁面上的表單、按鈕、某段文字、某個彈窗訊息等內容，只出現在登入後出現，精準指定給誰看到、什麼時候看到。
一、頁面或區塊的「條件顯示」功能：
- 點開編輯器發佈鈕右方的箭頭。
- 等跳出視窗，點「ADD CONDITION」新增顯示條件。
- 上面會跳出欄位，可選包含或不包含，全部網站、商店、分類頁或特定頁面。
- 確認後，在右下方按「Save & Close」儲存並關閉視窗。
二、小工具的「條件顯示」功能：
- 在小工具的「進階設定」中，往下拉找到三個小方塊連起來的小圖示並點開。
- 等跳出設定視窗，按「ADD CONDITION」新增顯示條件。
- 設定顯示的條件，例如只對登入者顯示、只在指定的星期幾顯示等。
- 確認後，按「Save & Close」儲存並關閉視窗。
補充說明：條件顯示是動態設定，開啟快取時可能會失效，所以官方建議停用快取外掛。
除了「區塊、頁面、小工具」外，「彈出視窗」也有條件顯示功能，下一段說明。
彈出視窗建構器
「彈出視窗」就是在瀏覽網站時會跳出的小視窗，有登入、促銷、訂閱、公告等功能。
在一般 WordPress 網站中，要安裝像是 Popup Maker 跳窗外掛才能做出來，但 Elementor Pro 本身就提供完整的彈出視窗功能，而且外觀可以自己設計，我覺得這功能超棒。
而且除了設計外觀外，Elementor Pro 也可設定觸發時機、顯示對象和頁面、重定向等詳細的顯示規則，並且 Advanced 以上的方案還能和 ActiveCampaign、Kit、Zapier 等第三方服務整合。
以下教你怎麼設計一個彈窗：
step 1
到 WordPress 網站後台：
- 點開 Elementor 下的「範本 > 彈出式視窗 Popups」。
- 進入頁面後，按「新增 Popup」。
step 2
接下來，會需要你建立一個新的跳窗：
- 版型類型不用更動，維持 Popup。
- 幫這個跳窗取名，方便管理的名稱都可以。
- 按「建立版型」。
step 3
按右上的「x」，直接進入編輯器。
step 4
再來，要設計跳窗：
- 點擊跳窗，設定內容和外觀。
- 點開右上角發佈鈕的箭頭。
- 在跳出選單中點「Display Conditions」。
step 5
設定顯示條件：
- 點「ADD CONDITION」新增顯示條件。
- 在跳出欄位中，選擇在哪裡顯示或不在哪裡顯示，這你需要自己思考一下。
- 按 Next 到下一步設定觸發條件。
step 6
設定觸發條件：
- 開啟要使用的觸發條件，我比較常用到的有「滾動、在意圖離開頁面時」。
- 按 Next，到進階設定。
AdBlock Detection：當有人使用「廣告阻擋功能」來瀏覽你的網站時，網站可以偵測到，並跳出一個訊息提醒他們關閉廣告阻擋功能，避免一些重要資訊也被屏蔽。
step 7
進階設定：
- 選擇開啟更進階的顯示條件，這邊你就自己玩看看，我自己是不太會設定那麼細。
- 確認後，按「Save & Close」儲存並關閉視窗。
這樣就完成跳出視窗的設定了，記得到指定頁面測試一下是否成功。
自訂 CSS
CSS 是用來調整網頁外觀的語法，它可以改變文字顏色、大小、版面配置，讓網頁看起來更好看。設計時，如果 Elementor 元件細節無法調整，我們通常都會手動寫 CSS。
但這種做法，得先按 F12 開啟開發者工具，找出那個元件的 class 名稱，再靠 CSS 外掛或佈景主題的全站 CSS 編輯區寫 CSS。
不過，Elementor Pro 的「自訂 CSS」功能就可以直接對「小工具」、「區塊」或「整頁」寫 CSS，不用再到頁面上仔細查找 class 名稱，也不用擔心寫錯地方。
以下是小工具、頁面等的自訂 CSS 實例與比較：
| 層級 | 設計舉例 | 一般 CSS 外掛 | Elementor Pro 自訂 CSS |
|---|---|---|---|
| 小工具 | 對按鈕加上動畫，游標接觸時，圖示會有變化 | 找到按鈕的 CSS class 或 ID > 寫 CSS 套用到按鈕上 | 小工具設定 > 進階 > 自訂 CSS |
| Container | 把區塊裁成多邊形、圓形或其他自訂形狀 | 找到 Container 的 CSS class 或 ID > 寫 CSS 定義形狀 | Container 設定 > 進階 > 自訂 CSS |
| 頁面 | 幫頁面切換套用動畫效果 | 寫 CSS定義動畫效果 > 放在 CSS 外掛 | 頁面設定圖示 > 進階 > 自訂 CSS |
| 全站 | 在整個網站中添加自訂的滑鼠游標效果 | 在 CSS 外掛寫 CSS，但很容易和其他層級的 CSS 搞混 | 網站設定 > 自訂 CSS |
全域小工具
「全域小工具」指的是把一個小工具存成「重覆區塊」(跟區塊編輯器的重覆區塊功能類似)，只要區塊有更新，全站有插入這個區塊的地方，就會同步更新，通常會用在下列情況：
- 聯絡資訊： 電話、Email、地址、營業時間等。
- 社群媒體連結： Facebook、Instagram、Twitter 等社群媒體圖示和連結。
- 行動呼籲按鈕：如「立即購買」、「了解更多」、「聯絡我們」等按鈕。
- 說明欄位：公司經營項目、服務方案、活動宣傳等。
- 特殊公告： 例如促銷活動、網站維護通知等。
設定「全域小工具」的方法如下：
- 在要設定的小工具上按右鍵 (這邊是用聯絡我按鈕示範)。
- 選「Save as a global」。
- 幫這個小工具取個名稱，再按「儲存」鈕，就存成全域小工具了 。
設好全域小工具後，拖曳到要使用的頁面：
- 在元素列表，上方切換成「Global」。
- 拖曳到頁面的區塊裡，這樣就成功插入了。
角色管理員
如果你的網站有不同的使用者，如寫文章的作者、設計網站的編輯和來投稿的人等等，就需要以角色的方式分配權限，以保護網站的資料。
Elementor Pro 的「角色管理員」能控制不同 WordPress 角色在 Elementor 編輯器中可做哪些事：
- Elementor 編輯器：是否能進入 Elementor 編輯器。
- JSON 檔：這是範本 (Templates) 的副檔名，指的是否可匯入 Elementor 範本。
- HTML 小工具： 是否能在編輯器中新增自訂的 HTML、JavaScript 或 PHP 程式碼。
以下是設定方式與建議：
在 WordPress 後台左側選單點「Elementor > 角色管理員」，就會跳到設定畫面，總共有 5 個 WordPress 預設的角色。設定好後，按「儲存設定」就完成了。
| WordPress 角色 | 建議開啟 | 說明 |
|---|---|---|
| 管理員 | 全部 | 有最高權限可編輯或上傳任何內容，通常是站長本人 |
| 編輯 | 存取權限僅限編輯內容 | 能在 Elementor 編輯器中編輯頁面，通常開放給設計師使用 |
| 作者 | 無 | 只負責撰寫和編輯文章，不會用到 Elementor 編輯器 |
| 投稿者 | 無 | 只能上傳文章草稿，不能發佈文章，無須使用 Elementor 編輯器 |
| 訂閱者 | 無 | 只有瀏覽網站內容的權限，無須 Elementor 編輯器 |
自訂字型 (Custom Code)
如果你要套用 Google Fonts 找不到的特殊字型，可透過 Elementor Pro 的「自訂字型」功能，把字體上傳到 WordPress，之後就可在編輯器中套用了，常用的字體格式如 ttf、woff 都能支援。
從 WordPress 後台選單點「Elementor > 自訂字型」，再按「新增字型」，就可以上傳你的字體。
自訂圖示 (Custom Fonts)
除了字型以外，如果你有自己設計的圖示，如品牌專屬 icon、社群貼紙、客製化 UI 圖示等，也可透過 Elementor Pro 的「自訂圖示」功能一次上傳，支援格式是 SVG 檔。
從 WordPress 後台選單點「Elementor > 自訂圖示」，再按「新增圖示集」上傳就行了。
自訂程式碼 (Custom Icons)
如果你要在網站中加上追蹤碼，如 Google Analytics、像素碼 (如 Facebook Pixel)、驗證碼、或額外的自訂腳本，都可透過 Elementor Pro 的「Custom Code」功能管理，不用再裝外掛，也不會動到佈景主題的程式碼。
從 WordPress 後台選單點「Elementor > 自訂程式碼」，再按中間的「新增 Custom Code」就可以將程式碼插入<header>、<body>開頭或結尾。
Elementor Pro 主題建構器：自訂文章列表示範
主題建構器使用的方式有很多種，我在幫客戶實際設計網站時，最常會使用它來設計「文章列表」，並且這個文章列表需要能夠「自動更新」，以下分享基本的設定方式。
步驟一：建立文章列表
一、新增分類頁範本
打開主題建構器，新增一個給文章分類頁套用的範本：
- 左邊選單點「文章列表」。
- 跳轉頁面後，按右上角的「Add New」。
- 會跳出一個套用模板的視窗，先按「x」關掉。
二、加入 Container & 基本小工具
進入編輯器，把分類頁會用到的基本工具拖到頁面上：
- Container：拖曳入 2 個 Container 區塊。
- 文章列表標題：
- 位置：拖曳到上面的區塊裡。
- 調整：切換到樣式，調整對齊方式和邊框間距，拉開和上下區塊的位置。
- Loop Grid：
- 位置：拖曳到下面的區塊裡。
- 用途：等等會在卡片中加入精選圖片、標題、文章敘述等工具，並設定動態標籤，讓它自動抓取網站中的所有文章，重複顯示成一張張卡片，形成完整的文章列表。
步驟二：設計 Loop 範本
step 1
先新增 Loop Grid 小工具範本，才可以開始編輯：
- 在頁面上的 Loop Grid 點「Create a template」鈕。
- 進入 Loop Grid 範本模式。
step 2
現在，一一加入文章資訊區塊需要的小工具：
- 先加入一個 Container。
- 將特色圖片 (精選圖片)、文章資訊、文章標題、文章摘要等小工具都依序拖曳進 Loop Grid 裡。
接下來 4 個步驟會分別設定 Loop Grid 裡的特色圖片、文章資訊、文章標題和文章摘要，最後才是設定自動抓取資料。
step 3
- 點一下 Loop Grid 中的圖片。
- 設定 Image Resolution (圖片解析度)，可選大、中、小、填滿或自訂，自訂要填入尺寸。
- 打開「連結」選單，選「客製 URL」，再點開下面的動態標籤 (錢幣圖示)，選「文章連結」。
step 4
- 點一下 Loop Grid 中的文章資訊欄位。
- 新增項目，建議加入 Date (日期格式)、Author (開啟頭像)、Terms。
- 設定 Date、Author、Terms：
- 類型：選「分類項目」，指定自動抓取的是分類。
- 分類法：讓它抓取文章的分類。
- 連結：開啟，點分類會跳轉分類頁。
- 圖示：我選「無」。
step 5
- 點一下文章標題。
- 點動態標籤圖示 (錢幣圖示)，選「文章連結」。
step 6
- 點一下文章摘要的欄位。
- 在「內容」下面點「文章摘要」，設定摘要長度。不用開啟 Apply to post Content。
到這，Loop Grid 動態資料設定完成。
補充說明：如果還想調整文章卡片的排版，可以在 Container 調整間距、加上背景色及框線，而在「其他工具」則可調整對齊和文字樣式。
step 7
最後，Loop Grid 別忘記存檔：
- 點上方的設定圖示 (舊版在左下角) 。
- 切換到「設定」。
- 取一個好辨認的 Loop Grid 名稱。
- 在 Loop Grid 綠框上方按「Save & Back」存檔。
步驟三：設定文章抓取規則
現在，我們回到文章列表頁了，還要在頁面設定 Loop Grid 抓取文章的規則，才會顯示正確的內容。
先點一下 Loop Grid：
- 點選設定「內容」。
- 佈局：
- Choose a template type：選擇「Loop Grid」範本的類型，有文章、商品或頁面。
- Choose a template：點開選「Loop Grid」範本。
- 欄：設定一列有幾欄，我設定 3 欄。
- Items per Page：每頁顯示幾篇文，我設 2 篇。
- 瀑布流版型：如 Pinterest 的版型，內容框會垂直填充空白處，瀏覽時就會像瀑布一樣。我還蠻喜歡這種排版，這邊我把它打開。
- Apply an alternate template：是否選擇備用「Loop Grid」範本，可以不用開啟。
- 查詢：
- 來源：從哪邊抓取內容，首頁通常會放文章，所以選「文章」。
- 日期：指定抓取的日期範圍，我選「全部」。
- 排序依：如熱門度、最新日期、選單排序或隨機等方式排列內容的順序，我選「日期」。
- 排序：降冪或升冪。像我前一項選日期，這邊選降冪，那就是由大到小排序。
- 忽略置頂文章：就是要不要把置頂文章算進去，通常會開啟，不然文章會重複展示。
- 查詢 ID：點旁邊的動態標籤，可查詢特定內容，如特色圖片描述、作者姓名等。
- 分頁：
- 分頁：分頁方式，我選的是 Infinite Scroll，頁面滑到底部時，會自動出現下一頁。
- Spinner：可以選右側，開啟載入的動態圖示，對使用者體驗比較好。
- No More Posts Massage：當使用者滑到最底部後，如果沒有文章了，要顯示「沒有更多文章」的顯示訊息，這部分可自訂文字，像我就打「沒有更多文章了」。
步驟四：加入 Taxonomy Filter
step 1
「文章列表」到前一個步驟就設定完了，但我通常還會在頁面上加入「分類篩選器」，方便讀者找到自己要的內容。
在小工具列表上搜尋 Taxonomy Filter，並拖曳到頁面上。
接下來要設定 Taxonomy Filter。
Taxonomy Filter 是什麼？
中文是「分類篩選器」，是一個會自動抓取相關內容的工具。
當讀者看完網站上的某篇文章，對這類內容感興趣，點了文章上的「分類」或「標籤」，就會顯示我們現在設計的這個頁面，並透過自訂格式變成文章列表。
另外，Elementor Pro 的分類篩選器可以即時顯示，不會跳轉頁面、打斷讀者的注意力，還能額外設定篩選邏輯，像是同時符合才顯示、顯示子分類等，讓分類篩選更有彈性。
step 2
指定 Taxonomy Filter 要抓取哪些內容：
- 選擇頁面上的 Taxonomy Filter。
- 佈局：
- Selected loop grid：點開選擇剛設定好的 loop grid 範本。
- 分類法：選分類或標籤，我通常選標籤。
- 方向：水平或垂直，通常選水平。
- Item Alignment：篩選項目內部的對齊方式。
- 設定 (篩選邏輯)：
- 複選：叫出下面的 Logical Combination，有 AND 和 OR 可選，我選 OR，可顯示較多內容。
- Empty Items：如果點的分類或標籤沒有內容，是否顯示其他內容，建議開啟。
- Taxonomy Children：子分類，如果主分類很少才開啟。
- First Item：顯示的第一個項目，預設開啟並顯示「全部」，可自訂文字或設定動態內容。
- Number of taxonomies：分類項目的數量，沒設定就不限制。如果顯示的分類數量太多，通常會搭配下面「水平捲軸」的功能。
- 水平捲軸：顯示的項目較多才啟用。
step 3
接著，設定 Taxonomy Filter 字型、顏色和排版：
- Space between Items：分類項目之間的間距大小，預設通常就是最自然的，不用調整。
- 排版樣式：選全域字型或自訂，基本上依照全域字型就行。
- 文本顏色：文字的顏色，建議一般和懸停都要設定，因為篩選器常常會被點擊。
- 邊框圓角半徑 & 內距：因為滑鼠移到選項標籤上，會出現方框，可多設定圓角和內距的大小。
step 4
最後，要設定 Taxonomy Filter 的排版和背景色，讓版面好看些：
- 邊框距離：等等我需要設定背景，這邊先輸入數值，調整一下內距，讓整體往內縮一點。
- Align Serif：篩選器的對齊方式，我選對齊左邊，置中對齊也蠻常會看到的。
- 背景：先往下拉找到「Background Type」，再點筆刷圖示，選一個適合的顏色。蠻建議設定背景色，可讓篩選功能區跟列表做出區隔，如下圖樣式。
設定完 Taxonomy Filter 篩選器後，就完成文章列表的基本設計了，是不是還不錯看呀？
步驟五：將頁面儲存成範本
最後，不要忘記把我們設計的「文章列表」存成範本，在主題建構器重複使用：
- 上方點開設定圖示 (舊版在左下角)。
- 進入頁面設定後，標題填入自訂名稱以方便管理，例如：我輸入「文章列表」。
- 右上角發佈鈕點開「箭頭」圖示，在選單點「Dispaly Conditions」。
- 跳出視窗後，點「Add Condition」。
- 上方會跳出欄位，選擇「包含 + 文章列表」。
- 下面按「Save & Close」存檔並關閉。
進入主題建構器，就會在「文章列表」中看到這個版型了，左下角也會顯示版型的「顯示條件」。
Elementor Pro WooCommerce 常用小工具介紹
Elementor Pro 中的 WooCommerce 小工具是用來設計範本的，包括單一商品頁、商品彙整頁、商品分類頁、商品搜索結果頁等。
WooCommerce 小工具如下，目前有 25 個 (如果覺得不夠，可安裝擴充外掛)：
接下來依「單一商品頁」、「商品彙整頁」和「其他」等 3 個類別介紹。
單一商品頁
通常「單一商品頁」一定會有「基本小工具」，「其他小工具」則是看需求增減。
下圖是實際用 Elementor Pro 設計的「單一商品頁」，可以看到每個區塊都是 WooCommerce 小工具，只要拉出、調整樣式，就能快速打造完整的單一商品頁：
下面是 Elementor Pro 「單一商品頁」所有小工具，我就先簡單說明它們是做什麼的，你們設計時可以再自己玩看看。
- 基本小工具：
- 商品標題： 商品的名稱。可使用標籤、標題前後出現的文字和暫無資料的替代文字。
- 商品圖片： 可放上特賣標籤或放大預覽、滑動瀏覽。
- 商品價格：有定價和促銷價，在 WP 後台設定。
- 商品資料標籤：把商品的描述內容和評價分頁籤置放，方便瀏覽，如無評價功能，也可用「商品內容」代替。
- 加到購物籃：「加入購物車」按鈕。
- 商品內容：詳細介紹商品的功能、特色、材質等等，加入更多資訊取得消費者信賴。
- 其他小工具：
- 短介：連接到 WP 後台的「商品簡短說明」，可放在桌機模式，其他模式則隱藏，增加購買意願，還可修改字型與顯示順序。
- WooCommerce 導覽列 (建議要放)： 讓消費者了解目前位置和商品分類。
- 商品評分：顯示其他人對商品的評價。
- 商品存貨 (實體商品必放)：有時候有促銷的效果。
- 附加資訊：通常會放保固期限，商品規格、食品營養資訊等非商品文案的重要資訊。
- 商品相關：推薦相關的商品，可設數量、欄位。
- 推薦銷售：要在 WP 後台單一商品設定「連結商品」才會出現。
商品彙整頁
「商品彙整頁」是 WooCommerce 常見的頁面類型，當消費者點選某個「分類」或「標籤」時，系統就會自動跳轉到這個頁面，顯示所有符合條件的商品。
下圖是「商品彙整頁」的運用範例，你可以從右側的結構層中，看出這個頁面是用哪些 Elementor Pro 工具組成的。
下列則是 Elementor Pro 所有會用到「商品彙整頁」上的小工具：
- 商品檔案
- 文章列表標題：自動抓取彙整頁面 (如商店首頁或分類頁) 的標題。
- 封存商品：設計彙整頁時使用，自動顯示符合目前頁面查詢條件的商品列表，如商品分類頁、商品標籤頁等。
- 文章列表描述：自動抓取彙整頁面的描述內容，如商品分類的描述。
- WooCommerce：
- 商品：建立自訂的商品列表，可自由選擇要顯示的商品和呈現方式。
- 商品分類：顯示商品分類，會抓取 WooCommerce 商品分類的標題和精選圖片，吸引消費者瀏覽其他商品分類。
其他 WooCommerce 小工具
這邊是比較少會用到的 WooCommerce 小工具，但你還是可以參考看看有沒有哪些需要的：
- 購物籃選單：設計選單時使用，方便消費者隨時查看購物車狀態並快速結帳。可設點擊後出現下拉式選單、側邊欄或直接跳轉。
- 自訂新增到購物籃：自訂「加入購物車」按鈕的外觀和點擊行為，覆蓋預設設定。
- WooCommerce Notices：WooCommerce 的重要公告、宣導或行銷活動通知。
- Purchase Summary (訂單摘要)： 顯示訂單的摘要資訊，讓消費者在付款前再次確認訂單內容。
- WooCommerce 頁面：把 WooCommerce 預設頁面 (購物車、結帳、我的帳戶) 嵌入 Elementor。
- 結帳：設計結帳頁面時使用，讓消費者填寫資料、付款並完成訂單。
- 購物籃：設計購物車頁面，讓消費者可檢視、修改購物車內容並結帳。
- 我的帳戶： 再設「帳戶」頁面時使用，可讓消費者管理帳戶資訊和訂單記錄。
Elementor Pro 其他問題
安裝 Elementor Pro 後可以刪除 Elementor 嗎？
不能，因為 Elementor Pro 是 Elementor 外掛的擴充外掛，兩個一起安裝才能使用完整功能。
Elementor Pro 試用期多久？如何退款？
Elementor 首次購買的 30 天內取消，可以保證全額退款，流程如下：
1. 到官網登入帳戶。
2. 點「取消表單」。
3. 打開下拉式選單，點選要取消的訂閱項目及「Accounts, Bill and Subscriptions」，按 Next。
4. 等顯示「I want to cancel my subscriptions」，再按 Next。
5. 接下來會要你再確認一次退款項目及選「A New Purchase」，按 Next。
6. 在選項中選一個接近的退款原因，再按 Next。
7. 確認 72 小時後，網站會整個移除 Elementor，按 Next。
8. 最後按「No Thanks, Continue」再按「Submit」就完成了。
要注意的是，信用卡退款要 5 到 10 個工作天。
不想續訂 Elementor Pro，在哪裡取消？
要登入官網取消，步驟如下：
1. 登入「My Elementor Dashboard」。
2. 在左側導航選單點「Subscriptions」。
3. 在要取消續訂的訂單中選「Manage this subscription」。
4. 跳轉頁面後，往下拉到「Billing Information」點右上角的編輯圖示。
5. 在跳出的小視窗中把「Auto renewal」關閉。
不續訂 Elementor Pro，我的網站會怎麼樣？
不續訂 Elementor Pro，設計的頁面還是可以使用和瀏覽，但只限於靜態畫面，如果有設定動態內容，則無法查詢和自動抓取資料，而且無法再更動其中的設定。
可以把 Elementor Pro 金鑰轉到另個網站上嗎？
可以，做法如下：
1. 先取消舊網站的授權：登入 Elementor 帳戶，在首頁的舊網站資訊卡旁邊點「…」，在跳出選單上點「View related subscruption」，進入訂閱頁後，右下角點鎖鏈圖示，取消連結。
2. 在新網站啟用授權 (要先安裝 Elementor + Elementor Pro)：登入新網站的 WordPress 後台，進入「Elementor > License」，點「Connect & Activate」連結帳戶與新網站。
綁定 Elementor Pro 但改網域名稱，怎麼設定？
1. 登入 WordPress 後台。
2. 在左邊選單的 Elementor 下方，點「工具 (Tools) > Repalce URL」。
3. 在欄位中填寫舊的網域名稱和新的網域名稱。
4. 最下面點「Replace URL」鈕。
如何聯絡 Elementor 客服？
主要有以下 2 種方式：
．線上客服：登入 Elementor 後台，右下角點開聊天圖示，先選好問題類型後，才會接到真人客服。
．提交工單：登入 Elementor 後台，左側選單點「Surpport」，右側選擇「Submit a ticket」後填寫表單。
