這是一篇“ Elementor Pro 教學 ”的進階版指南。Elementor Pro是Elementor的付費版本。
覺得Elementor Pro貴的話，可以看這篇Elementor Pro太貴怎么辦
使用 WordPress 建設網站，Elementor頁面編輯器通常是不可或缺的一環，尤其像跨境電商網站，還有B2b外貿獨立站。
除此之外，不論是品牌官網設計、架設購物網站等各類型網站，有個好用的頁面編輯器，可以幫助你更快的制作出美觀的網站和高轉化率的網站。
我們看一下這次的文章目錄。
1. Elementor 是什么？
2. Elementor Pro 如何購買？
3. Elementor Pro外掛安裝＋憑證連線
4. Pro 進階區塊＋模板
5. Pro 元素介紹
6. Pro WooCommerce 元素介紹
7. Theme Builder 主題編輯器
8. Popups 彈出式視窗
9. 自訂程式碼 / 字型 / 圖示
常見問題
1. Elementor 是什么？
Elementor 是全球知名的 WordPress 頁面編輯器，全球已經有 500w+ 次下載量，基本上與所有主題兼容。可參考 Elementor 插件教學。
你不需會任何編程基礎，只要用區塊拖拽方式，就能定制化網站設計。
有關任何的頁面佈局、新增區塊功能、編輯區塊內容等 ..，都將變得更加簡單。
Elementor 形象教學示范
Elementor 有多種功能區塊，是建置網站的好幫手，當你心中簡單構圖完成，接下來只要拖放區塊，并放置在網頁上即可完成設計。
Elementor 有多種區塊模板和網站樣板，點擊按鈕就可套用，再從中進行修改自己喜歡的設計，可節省大量的建置網站時間。?
購物網站盛行的時期，或許你想架設購物網站，Elementor 對于 WooCommerce 電商外掛，有良好的支援。
并為此開發了 WooCommerce Builder（購物網站編輯器），除了一般的頁面設計，你也能設計定制購物網站頁面。
像是添加購物車按鈕、產品價格、產品圖片和說明、相關產品列表、產品庫存提醒等 .. ，如下圖。?
方案評論
Elementor 有免費版方案可使用，如果感覺不錯用且有更多設計上的需求，再升級為進階版即可。完整 Elementor Pro 進階教學。
Elementor 進階版，有額外 50 多個專業元素功能、300 多種進階模板、主題編輯器、表單編輯器、彈出式廣告編輯器、WooCommerce Builder（購物網站編輯器）等 ..，有更多功能可以使用。
Elementor 進階版方案，分為個人用、公司用的兩大類型，裡面又有不同的方案，但能使用的功能幾乎都一樣，最大的差別是“ 使用的網站數量 ”。
如果你只有一個網站會使用，只需購買最低的方案即可，依此類推。
產品定價
Elementor 個人用，起手價格是 $ 49 美元 / 年，算是滿平價的費用，可應用在一個網站上，并享用它的全部功能。?
2. Elementor Pro 如何購買？
如果你對 Elementor Pro 有興趣，那要如何購買呢？這邊帶大家簡單跑一次流程。
首先，前往 Elementor 方案頁面，如果個人（少數量網站）使用選 Individuals，如果是公司（多數量網站）使用選 Teams。
前往 Elementor 方案頁面
下圖，我是用個人的基本方案示范（適用一個網站），如果有多個網站需使用，就選擇適合的方案即可，里面都有標示可供幾個網站使用。
購買安裝＋費用下載
小提醒：Advanced（3 個網站 99 美元）方案被放在下面的小字，3 個網站方案對于站長來說十分實用，可以參考看看：）
接著進入結帳頁面，需先創建 Elementor 帳號，輸入電子信箱、密碼，選擇創建帳號。
跳轉第三步驟，填入相關購買資訊，這裡都需填寫英文。
最后確認金額，和選擇付款方式，完成后，點選“ Pay now ”送出訂單。
接著，后面流程就照 Elementor 指示進行操作即可。
完成后前往 Elementor 會員后臺，等等會教大家如何下載＋安裝 Elementor Pro 外掛。
3. Elementor Pro 外掛安裝＋憑證連線
登入并前往 Elementor 會員后臺，在右上角會有下載 Icon，點擊下載 Elementor Pro 外掛。
前往 WordPress 后臺，找到外掛 > 安裝外掛 > 上傳外掛，把剛下載的 Elementor Pro 外掛上傳安裝＋啟用。
前往 Elementor > License，點擊 Connect ＆ Activate，與 Elementor 系統進行串接。
輸入帳密登入 Elementor 后臺，就會看到你的網域和帳號使用者，進行串接的圖示，點擊 Activate 連線。
如果有看到狀態顯示 Active，就代表網站的 Elementor Pro 功能，已經被順利激活了唷：）
接下來，我們就能享用 Elementor Pro 強大的能力了。
4.?Elementor?Pro 進階區塊＋模板
Elementor Pro 功能解鎖后，有更多的進階區塊＋模板，可以直接套用。
不論是區塊或是頁面類型，有標注 Pro 的都可以使用囉，如果你有多個網站架設需求，這會很有幫助！
Elementor Pro 進階區塊樣板
5. Pro 元素介紹
Elementor Pro 提供多達 50 多種元素功能，基本上想要制作的功能，都可以直接拿來用。
如果加上第三方主題或外掛（有支援 Elementor 的），有些還會提供更多 Elementor 元素可用，簡單來說根本達到無敵境界。
像是 Astra Pro 主題 的 Ultimate Addons for Elementor 插件，或是 Soledad 主題 內建的 Elementor 擴充，都是相關例子。
或是搭配 Essential Addons Elementor 外掛，都有提供非常多種元素功能。
下面我會挑選 Elementor Pro 的部分元素，做個簡單翻譯＋介紹，那我們開始囉。
Posts 列表：可把多個文章 / 頁面 / 商品類型，用列表的方式呈現出來。
能設定顯示樣式、一欄顯示幾個、是否顯示圖片＆尺寸、顯示標簽、顯示分頁、文章顯示條件等 。
Portfolio 作品集：可制作個人 / 公司作品集，或相關客戶案例。
能設定佈局樣式
作品顯示類型（文章 / 頁面 / 商品）
作品顯示條件（例如，只顯示某分類 / 標籤 / 作者的作品）
作品排序條件（例如，只顯示最近一個禮拜 / 一個月的作品）
是否顯示分類標簽（訪客可點擊某分類標簽，會自動帶出分類下的作品）
更多設定
Gallery 畫廊：跟上一個 Portfolio 作品集功能差不多，但點擊圖片會有圖片放大的輪播功能，滿適合有展示設計作品的需求。
Slides?輪播圖：輪播圖功能，可設定區塊高度、顯示導航、自動輪播、轉場效果、輪播速度、無限輪播等 。
Price Table 價格表：如果是提供軟件服務、專案服務等 ..（品項較少），這類型的價格表滿好用的，可更換內容細項、顯示樣式等 ..。
Elementor Pro 還提供另一種價格顯示元素，就是 Price List 價格清單，滿適合有多項產品類型、服務類型的呈現。
Share Buttons 社群按鈕：新增社群分享功能，可自訂顯示樣式。
Form 表單功能：表單留言功能，有支援多種欄位類型、按鈕樣式設定、訊息送出后相關動作 ..
有關 Form 表單元素，因為網站有很多表單設計都需要用到它，像是聯絡表單、電子報訂閱表單、會員登入 / 注冊表單等 ..，所以我有特別寫一篇 如何制作＋設計客制化表單，應該會有效的幫到你。
至于電子報訂閱表單，可搭配 MailChimp 電子郵件軟件，可以藉由這個平臺完美的操作郵件營銷。
還有會員登入 / 注冊表單，常會用到社群快速注冊功能，可參考 Super Socializer 外掛教學，就能啟用此功能。
6.?Elementor?Pro WooCommerce 元素介紹
Elementor 和 WooCommerce 電商外掛有完美的支持，我在常見商品類型，有分享多種商品建立方法，可滿足不同商家的需求。
Elementor Pro 有提供多個元素，可用在 WooCommerce 頁面。但要留意的是，在不同的主題或頁面上，不一定會顯示所有的 WooCommerce 元素（有支援才會顯示）。
否則網站不是架設購物網站，但卻出現 WooCommerce 元素在工具列，那也會有點不太合理。
下面我會挑選幾個 Elementor Pro 的 WooCommerce 元素來分享。
Product Images 商品圖片：支援多張商品圖呈列，可調整邊線或其他樣式。
Product Title 商品標題：設定商品名稱。
Product Content 商品內容：商品內容描述。
Add To Cart 加入購物車：購買按鈕。
我用上面提到的元素，快速設計一個單一商品頁面，實在很方便（下圖）。
Products 商品列表：新增商品列表功能。可設定顯示的商品條件，像是用近期商品、特價商品、特色商品、手動指定等 .. 作為顯示的條件。
還有許多功能，像是 Product Related 相關商品、WooCommerce Pages 頁面套入等 .. 功能，有興趣都可自行玩玩看：）
7. Theme Builder 主題編輯器
這是 Elementor 很酷的功能之一，可以用它打造自己的網站佈局（網站主題）。
我們知道一個網站的組成，可能是由多個頁面組成，而且一般來說不同頁面的頭部、尾部都長的一樣，但如果我們想要不同頁面，呈現不同的頭部或尾部，那要怎麼做呢？
這個功能就派上用場啦！它能讓你自定義顯示條件，讓你在指定類型 or 指定頁面，顯示指定的頭部或尾部區塊，是不是很方便呢！
至于要如何做呢？下面我示范給大家看。
前往 Templates > 主題建構器，點擊常見的左上角“ 新增 ”也可以。
但這裡玩點不一樣的，我們試看看 Elementor 新功能，點 Try it now 就能前往 Theme Builder。
進入后，左手邊可選取想新增的類型，這邊我示范新增頂部 Header，選好之后點右上角的 Add New。
然后 Elementor 會自動帶入選擇類型的模板，像是我選 Header 頁首，就出現了很多相關的類型，可選擇自己喜愛的使用（如果打算自己設計，可直接關閉）。
進入后會看到左邊面板，Elementor 自動把頁首相關元素都放在前面了，方便我們選用。
這裡就可以自由設計區塊啦，編輯完成后點發布。
發佈后會出現跟之前不太一樣的視窗。
你可以設定剛設計的區塊，想要在哪個頁面顯示（設定顯示條件），完成后儲存就搞定啦。
之后在設定的頁面條件，就會出現你剛剛設計的區塊囉！以上就是 Elementor 的 Theme Builder 主題編輯器 簡單介紹：）
8. Popups彈出式窗口
我們在逛別的網站時，常會看到滑到某個地方，或點擊某個按鈕就跳出視窗，而視窗內容可能是商品或服務的訊息，或是打算收集訪客 Email 的欄位，都是滿常看到的！
Elementor Pro 有 Popups 彈出式視窗，功能非常的完整＋齊全，下面我會示范如何制作一個彈跳視窗，然后收集訪客的 Email，我們開始囉。
Step1：新增 Popup 窗口
前往 Templates > Popups，點擊新增 Popup。
Elementor 會自動帶入 Popup 類型，幫版型取個名字，然后確認。
選擇喜歡的彈出式視窗模板，然后套用。
選取 Popups 版型
Step2：調整表單設定
點擊表單欄位，左手邊會顯示可調整項目，可更改標題文字、新增其他欄位等 。
切換到 Advanced 進階，設定欄位 ID（可任意取名，系統用來判別欄位用的），ID 務必要填寫，不然無法順利發信。
接著 Shortcode 會自動帶入 ID 的值（除非沒有帶入，再自行填寫）。
切換到 Email 選項卡，這是當訪客留言完，信件傳送的相關設定。Elementor 會幫你帶入預設值，你也能自行修改。
Message 信件內容：的預設短代碼功能，是 Elementor 會自動帶入所有訪客留言的值（所以剛上面才需要設定欄位 ID 的原因在這），然后傳到你的信箱。
Message 信件內容：能自行編輯程式碼內容，欄位支援動態內容顯示。
To 收件者：可填入自己的系統信箱。
From Email 發信來源：系統預設是網域信箱（可維持預設值，單純顯示用的，沒特別功用）。
“ Additional Options 額外選項 ”可設置顯示訊息，像是表單傳送后的成功訊息等 ..。
上面都設定完畢后，就點擊發布。
Step3：設定 Popup 顯示條件
Conditions 是設定 Popup 要在哪邊顯示，有像是全網站顯示、指定文章顯示等 ..，有很多條件可運用。
我選擇 Entire Site 全網站通用，點 Next。
Triggers 是彈出式視窗的觸發條件，有 On Page Load 到了幾秒就顯示、On Scroll 網頁滑到指定高度百分比就顯示、On Scroll To Element 滑到指定位置就顯示、On Click 點擊就顯示等 ..，多種觸發條件。
下面我用 On Scroll（網頁滑到指定高度百分比就顯示）做示范。
Advanced Rules 是進階規則設定，有 Show after X page views 瀏覽幾個頁面就顯示、Show up to X times 總共出現幾次等 ..。
這裡我不開啟功能，如果有需要你也能使用，確認后送出。
Step4：前臺測試成果
好囉，接著前往網站前臺，并把滾動頁面超過一半的高度，就會看到漂亮的彈出式視窗出現啦，就能收集訪客的資訊了。
Popup 彈出式視窗出現啦！
以上就是 Elementor Pro 的 Popup 彈出式視窗的簡單示范，不知道大家有沒有學會呢：）
9. 自訂程式碼 / 字型 / 圖示
Elementor Pro 有自訂程式碼（Custom Code）、自訂字體（Custom Fonts）、自訂圖示（Custom Icons）功能，可滿足客制化需求，我挑選其中一個做分享。
Custom Code 自訂程式碼 是我覺得 Elementor Pro 滿佛心的小功能，因為之前嵌入 GA 分析碼、FB 像素等 ..，都還需額外安裝外掛嵌入。
這功能可讓你為不同程式碼片段，分開取名方便管理，還能設定在指定頁面才會執行。
下面示范嵌入 GA 追蹤碼（如果你有其他的代碼，也可以這樣處理），我們開始囉！
Location 是程式碼的放置位置，有 head 放置頁首、body start 內容開始、body end 內容尾部可選擇，有關 GA 碼我就放置頁首。
Priority 是權重排序，因為一個網站可能會有多個嵌入碼，數字越小排序越前面。
點擊發布，會出現顯示條件設定，這裡我用 Entire Site 全網站都執行，確認后送出。
備注：如果使用的屏幕比較小，右下角的儲存＆發布按鈕，可能會在視窗之外，只要把瀏覽器百分比縮小就可以正常點擊了。（因為我用 13 寸螢幕操作，一度找不到送出按鈕）
恭喜你，這樣代碼就嵌入成功囉！
常見問題
如果購買一年的許可證，但沒有繼續續約，我的網站還能繼續工作嗎？
當然可以。你現有的項目將保持不變，但將無法繼續訪問 Elementor Pro 進階功能，等于就是回到免費版的使用資格。
Elementor Pro 方案購買完，如果打算升級方案，有辦法做到嗎？
可以的。Elementor 會員后臺隨時都能讓你升級方案，或是延長使用時間。
我可以使用 Elementor Pro 幫客戶架設網站嗎？
可以的。Elementor 當初在建立軟體時，就考慮了團隊運作的模式，如果你有多個客戶需服務，也可購買 STUDIO（能架設 100 個網站）或 AGENCY 方案（能架設 1000 個網站）。
除了 Elementor 之外，還有推薦的優質頁面編輯器嗎？
有的。WordPress 頁面編輯器領域，是一個很競爭的市場，有許多專業團隊都相繼投入開發。
除了 Elementor 以外，使用 Divi 也是熱門的選擇，因為購買 Divi 不光只有頁面編輯器能用，還包含 Elegant Themes 公司開發的 Extra（佈景主題）、Bloom（電子報行銷）、Monarch（社群工具）等 ..，都能同時使用。
