Elementor是一款成熟的視覺化編輯器外掛：它用拖曳介面與模板/元件，降低了對開發的依賴，讓市場或營運同學也能獨立完成頁面搭建與日常改版。
它預設的響應式能力也能保障電腦與手機端的一致呈現。對於外貿獨立站，它還能與常見WordPress主題、表單、分析工具和CRM插件順暢協作，涵蓋從內容更新到獲客線索收集的日常需求。
本Elementor教學章節將帶你安裝Elementor外掛程式並完成必要的基礎設置，並示範如何使用Elementor來編輯頁面。
安裝Elementor插件
Elementor免費版可以直接在WordPress的插件市場中安裝，透過“Plugins” –> “Add New Plugin”，搜尋“Elementor”，點擊安裝並啟用。
如果是Elementor Pro版，則需要訂閱後再在Elementor的背景下載Elementor Pro插件，然後再透過上傳安裝。
Elementor基礎配置
當我們首次啟動Elementor後，會跳出Elementor的設定精靈，我們一直點「Skip」跳過即可。只有我們購買了Elementor Pro才需要登入帳號，並使用免費版的話跳過該階段即可。
然後Elementor就會帶我們進入到頁面編輯頁面，現在我們就可以使用Elementor來進行拖曳式頁面設計。
但首先，我們得先對Elementor做一些基礎的設定。
我們點擊左上角的Elementor圖標，然後點擊Exit to WordPress回到WP後台。
透過「Elementor」 –> “Settings”進入到Elementor的設定頁面。
我們在General中需要進行的設定有：
- Post Types：設定允許使用Elementor編輯的頁面類型，預設Posts和Pages。如果我們安裝了WooCommerce，那麼在Elementor設定頁面還會有一個Products類型的選項。勾選上的話我們編輯產品頁面的時候就可以使用Elementor來編輯了。按需勾選。
- Disable Default Colors：禁用Elementor預設顏色，建議勾選。
- Disable Default Fonts：禁用Elementor預設字體，建議勾選。
Elementor的小部件都會有預設的顏色和字體，跟我們的WordPress主題設定不一樣，如果我們想用WordPress主題的設置，那麼建議勾選Disable Default Colors和Disable Default Fonts這兩個選項。
設定完畢以後，點選「Save Changes」更改完畢。
Elementor的基本配置已經完成了。
如何使用Elementor來開啟並編輯頁面
一、新文章/頁面/產品並用Elementor編輯
在Posts、 Pages或Products清單中新頁面後，就可以看到「Edit with Elementor」這個按鈕，點擊該按鈕即可進入到Elementor的視覺化編輯頁面：
提示：
如果你安裝了Classic Editor插件，該按鈕位置會顯示在編輯器上方；使用區塊編輯器（Gutenberg）時，按鈕通常在頂部工具列。
二、使用Elementor編輯現有頁面
情形A：該頁面不是用Elementor製作的
如果之前該頁面不是使用Elementor製作的，那麼需要像上面這樣，點進去到對應的頁面，再點選「Edit with Elementor」按鈕才能使用Elementor來編輯。
情形B：該頁面已經用Elementor製作
如果頁面已經是使用Elementor製作的了，那麼我們有三種更省事的入口：
- 後台編輯頁按鈕
- 列表頁快捷入口
- 前台管理欄(Admin Bar)
下面會逐一示範：
1.後台編輯頁按鈕。進入到單一頁面中可以看到這種介面：
此時我們點選Edit with Elementor也可以進入到視覺化編輯頁面。
2、清單頁快速入口。在文章/頁面/產品清單頁中，如果該頁面已經是Elementor頁面，那麼在標題後邊會帶有“—Elementor”標記，而且滑鼠移動上去會有「Edit with Elementor」按鈕，點擊即可使用Elementor編輯。
為什麼有些頁面會帶有—Elementor標記呢？標題後面有「— Elementor」的頁面=這個頁面已經用Elementor編輯過，並預設由Elementor接管編輯與渲染。
它仍然是普通的頁面，沒有變成別的類型，只是在後台列表裡用這個標記提醒你用Elementor打開過。
3、前台管理欄(Admin Bar)。
我們在前台開啟對應的頁面，然後點擊頂部管理欄中的「Edit with Elementor」也可以進入到視覺化編輯頁面。
下面該學習啥？
Elementor教學的第一篇就到此結束了，現在你應該能夠學會怎麼樣用Elementor來編輯頁面。打個比喻，跟學習羽毛球一樣，我們這個章節只是教會了你怎麼握拍，至於後面的高遠球、批吊、殺球，都會在後面的章節裡面介紹。
Elementor最基礎的容器和佈局知識，我們將會在《Elementor佈局和容器教程》中去實操講解如何使用Elementor的Flexbox容器和Grid容器來建立我們想要的頁面。
對應的是網頁端右側系列教程的 容器&佈局詳解[重點] 章節。但在實操章節之前有兩個章節，分別是：
- PRO版vs. 免費版。這個章節比較了一下PRO版跟免費版的功能，如果你只是想實現靜態內容頁、簡單單頁展示，需求以寫內容為主，使用免費版即可。其實如果想要實現比較好的、專業的介面效果的話，還是建議開PRO版本的，也是為數不多的我建議開付費版本的插件。
- Section轉換成Flexbox容器。現在的新裝Elementor預設啟用Flexbox容器，因此新站用戶無需做任何切換，直接看下一節的容器佈局實操即可。 只有當你在維護舊版Section佈局的頁面，並且希望獲得更可控的對齊與間距時，才需要閱讀本節並按步驟把Section轉為Flexbox容器。完成遷移後，就可以用後文介紹的容器技巧（對齊、Wrap、Gap 等）來優化頁面。