這個 Elementor 教學系統化，涵蓋：購買 Elementor 時如何避免陷阱、入門、進階操作、實務案例研究和常見問題，讓你有更深入的理解。 我使用 Elementor 已經超過 7 年了，我認為它是市面上最好的 WordPress 頁面編輯器。
Elementor 不僅讓我們能取得你在建立網頁時看到的內容，也比其他頁面編輯器更易使用，並提供更豐富的第三方擴充功能。
如果您想順利熟悉 Elementor 網站建置流程，請參閱：如何使用 Elementor 建立獨立的外貿網站。
如果你想快速了解 Elementor 如何建立其網站，請觀看本文中的影片。
Elementor 是基於 WordPress 存在的。你必須先有一個 WordPress 網站才能使用。如果你對 WordPress 一無所知，請參考 WordPress 的教學。
購買Elementor授權
Elementor的官方價格最低59美元/站/年，我曾經在學習階段下載過網路上的免費破解版本，然後過了半年，在我學習SEO時，才發現中招了，網站被植入了很多隱藏的外鏈。 因此，我總結了下面兩篇教程，第一篇教你如何避坑與選購什麼官方套餐，第二篇教你通過更換綁定功能變數名稱的方式，將官方授權的價值最大化。
Q1. 啟動Elementor Pro授權時，介面提示reconnect按鈕，並且點擊按鈕后無法啟動
當你啟動Elementor Pro的授權時，看到提示：We’ve noticed that you are trying to connect： 你的域名. Please make sure this is the correct URL and click ‘Reconnect’. 同時提供了一個Reconnect按鈕。 即便你點擊了這個按鈕，也依舊無法激活授權。
造成這個問題的原因是 WordPress 地址和網站後端設定>一般頁面上的地址不同。Elementor Pro 要求你將它們統一。請在啟用授權前確保它們一致。
參考資料：https://elementor.com/help/activate-your-license-key/
安裝Elementor
首先，你得有一個WordPress網站，建議使用專門的WordPress主機，我給建站客戶用的是Cloudways，它能節省你的運維學習時間以及管理實踐，在主機中安裝WordPress，登錄網站後台之後，你便可以按下方的教程安裝Elementor。
基礎操作
進階操作
製作頁面（視頻）
我的專業領域是建外貿網站，所以，我以為外貿網站的常見頁面為例，使用Elementor逐一製作它們，並錄製完整的教學視頻，我想付費的教程視頻也大抵如此。
製作頁頭頁腳（Pro）
也許你還在用Astra主題或者其他主題提供的頁頭頁腳配置功能，而Elementor直接打破規則，它雖不是一個主題，但它可以替代主題去靈活的製作網站的頁頭和頁腳。
製作文章範本（Pro）
製作產品範本（Pro）
繼續打破規則，不再受限於主題本身提供的產品清單或詳情頁的範本，你可以用Elementor Pro DIY產品清單、文章詳情頁的範本，就跟上面的文章範本一樣靈活。 目前，我注意到Woodmart主題也增加了Layout功能來實現DIY產品的範本。
Elementor所提供的產品範本定製功能，也並不是完美無缺的，如果你的定製需求複雜，你還是會用到一些第三方的擴展外掛程式，譬如Crocoblock的jetplugins。
建立查詢表單（專業版）
你是否還在用contact form 7或者是wpforms外掛程式呢？ 我過去就用過它們，前者功能不全，後者免費版功能不全。 直到我用上Elementor Pro的form元素，我就再也不用其他表單外掛程式了，少裝一個外掛程式，少一點網站的重量，還能剩下一些成本。
適合Elementor的主題
如果你問我用什麼主題搭配Elementor。 我會說，如果做非B2C網站，我用Hello Elementor主題，它是官方原配。 如果是B2C網站，我用Woodmart主題。 如果你做博客站，我便推薦你用Astra或Generatepress主題。
問題答疑
可以，請看下圖，在Elementor設置的文章類型中，勾選產品並保存。 然後你在編輯產品時，就能看到使用Elementor編輯按鈕了。
可以用Elementor編輯產品的詳細介紹，也可以認為是產品的正文而產品的簡介（short description）是無法使用Elementor編輯的。
與上文同理，請在下圖的Elementor設置中勾選你添加的文章類型並保存
可以，譬如你可以用Custom post type ui（CPT UI）添加名叫case的文章，便於管理公司的案例，如果你想以類似博客的形式展示case，那麼你在用CPT UI添加case時，需要注意下圖中的配置：將has archive選擇為true，這樣以來，才能用Elementor Pro製作針對case的文章清單範本（Archive），然後發佈範本時設置display condition為case archive即可。
原因是：這個頁面在woocommerce的設置中已被設為商店頁面，所以不可以用Elementor直接編輯。 但你可以使用Elementor Pro製作Product archive範本，並在保存發佈時，設置展示條件為shop page。
用Elementor Pro製作產品清單範本時，設置展示條件為shop page
有讀者反饋希望banner不因設備尺寸的改變而改變佈局，譬如：不希望文字把背景圖片擋住，又希望圖片在不同設備上都能完整顯示….emm，你只有把文案做到圖片里直接作為banner了。
目前有幾種方法：現在我比較推薦的是使用Eelementor的Image carousel元素來實現。
下面是我以前用的舊方法。
以Elementor Pro為例，你需要使用slider元素，將圖片上傳到背景中，同時設置size：contain，然後點擊height（高度）旁邊的設備圖示，切換到不同設備上，分別設置圖片的高度，以便圖片寬度能完整顯示。
接下來，切換到這個banner的content標籤頁，將內容、按鈕都清空，設置link（連結），將連結方式（apply link on）設置為whole slider。
如果你使用的是免費的Elementor，那麼你需要使用 Premium Addons For Elementor 高級元素擴展中的Premium Carousel / 輪播來製作banner。
因為在網站後台設定>閱讀設定中，這頁面被設定為文章頁面。一旦設定成這樣，你就無法直接用 Elementor 編輯
如果你想編輯它，要麼，你取消這個設置，要麼，用Elementor的template功能，製作archive類型的文章清單範本，並將condition設置為Post archive/文章Archive
