如果你是用WordPress架站，別錯過這款好用Elementor編輯器，不需擔心不會寫程式，新手和設計師也適用這款外掛，操作幾次就能上手，這篇Elementor教學會介紹有哪些功能、價格及優缺點。
Elementor頁面編輯器，跟主題的相容性高，使用拖曳編輯區塊做設計，裡面有提供模板套用，也可以製成動畫，有支援響應式網頁。
延伸閱讀⮕WordPress是什麼?1分鐘帶你看懂-WordPress的特色
1、Elementor是什麼?
Elementor是一款頁面編輯器外掛，是WordPress最夯的編輯器，拖曳式設計，讓你輕鬆建立網站的頁面，免費版提供約40種元件，按需求選擇喜歡的範本，如果要更進階的功能需購買Elemeentor Pro，能客製排版樣式、頁首及頁尾。
Elementor有支援繁體中文，有分為免費和付費的，支援響應式(RWD)，不論是手機、電腦平板都能使用，我很推薦這款外掛。
2、Elementor方案
Elementor為免費和付費方案，免費版在WordPress外掛那邊下載就能用了，提供圖片、標題、編輯器、背景、版面排版都可以做到，一般網站來使用已經足夠。
還要更多的功能，要付費使用Pro版，能使用作品集、動畫效果、文章排版這些功能，可以客製整個網站的樣式，假設是一個網站，可以選擇ESSENTIAL 方案是59元美金。
試用過後覺得不適合，官網有提供30天退款服務，只要在這期間內申請退款，他們都會幫你處理。
Elementor免費版的元件和模板比較少，對網站沒有太大的要求，可以使用免費版，需要更多功能的，要使用付費版，有多種元件和模板，另外有支援WooCommerce功能和進階設定，像是網站樣式、動畫效果、區塊模板等，長久經營可參考「長久方案」，價格很划算。
延伸閱讀⮕WooCommerce組合商品設定-教學實用篇
Checkout Field Editor結帳表單-WooCommerce優化結帳欄位
3、Elementor頁面編輯器好嗎?
跟傳統相比架設網站要寫很多複雜的程式碼，像是CSS、HTML，過程會耗掉時間，這款Elementor編輯器，不會程式也可以使用，拖曳式設計網站圖片、排版、文字大小，新手或設計師都可以使用這款外掛編輯器。
延伸閱讀⮕如何架設網站? 自架站教學-用最低成本方式架設個人網站
網站架設費用有哪些? 網頁設計報價分析，最低成本只要2000元?
台北網頁設計推薦-套版、WordPress、客製化比較分析
網頁設計公司怎麼選?8個挑選注意事項
Elementor裡面還提供一些小工具，例如 : 圖片設定、圖片輪播、彈出視窗、進度條，沒有程式相關背景的人，都可以套用排版。
延伸閱讀⮕Astra Theme教學-WordPress入門推薦的佈景主題
Astra Pro Theme教學-進階功能讓WordPress更專業
4、Elementor免費與付費的區別
4-1、Elementor免費版:
免費版的Elementor下載外掛即可使用，可以做一些簡單的設定和網站基礎的排版，不用擔心不會寫程式，新手也適用。
免費版有多種模板可套用，對初學者很輕易就能上手，含模板區塊，拖曳操作簡單方便，不需過多的設計感，免費Elementor提供約40種的小工具，網站已經夠使用。
Elementor小工具:
- 按鈕: 設定按鈕的樣式
- 影片:把YouTube放在區塊中
- 社群圖示 : 把社群媒體放在ICON
- 文字編輯器: WordPress區塊編輯器
- 圖片相簿: 相簿工具
- 圖片框: 含標題、文字、圖片的工具
- icon圖標: 600以上的icon
- icon框: 和圖片框相似，有些會變圖標
- 客戶推薦 : 客戶評價回饋的內容
- 圖標列表 : 帶有符號的項目清單
- 圖片輪播 : 設定圖片的旋轉或滑動
- 進度條 : 可以設定%的進度條
- 統計工具 : 統計數字和訊息
- Accrodion : 顯示折疊的內容
- 標籤TAB : 顯示不同的項目標籤
- HTML : 安插html碼到頁面中
- 星星評論 : 新增星級的社群
- 警告訊息 : 吸引目標客群的目光
- 短代碼 : 安插到外掛或WordPress的區塊中
- 側邊欄 : 在左邊或右邊新增側邊欄
- 選單瞄點 : 把所有選單連接到瞄點
- 閱讀更多 : 在頁面設定摘錄截止日
- Google地圖 : 把Google地圖崁入
- 分隔線 : 用分隔線來區別版面
- 留白空間 : 隔開元素的空間
- SoundCloud : 在這新增音訊
- 圖片: 設定圖片的大小
- 標題: 新增文章段落的標題
4-2、Elementor Pro付費版:
Elementor Pro為進階功能版，是一款厲害的頁面編輯器，可以針對整個網站樣式做客製化設定，從頁首、頁尾及文章版面，不輸給佈景主題，他們也開發了一款Hello theme佈景主題，整體網站都可以變得簡潔有力，沒有過多的複雜程式，不會造成網站慢速。
客製化設計:
付費版的功能可以設計整體網站，從頁首、頁尾及文字排版，比佈景主題還厲害的外掛，這款外掛能快速設計想要的風格。
模板頁面和區塊模板:
Elementor裡面有多種的模板和區塊，你可以使用現有範本設計網頁，提供多元的範本，還支援WooCommerce，你可依照喜好設定購物車。
聯絡表單:
Pro版的Elementor編輯器有提供一個連絡表單模板，用拖曳來新增欄位，只要在網站的地方都能放置聯絡表單，還能立即預覽畫面，廠商或訪客要聯絡你也很方便。
Elementor Pro 工具:
免費的只能做基本設定，要進階的功能，需升級Elementor Pro可客製整體網站的樣式，未來要接案設計也沒問題，功能很多種，像是網站選單、價格表、圖片框、客戶評價、動畫標題，這些小工具可以讓你製作頁面事半功倍，加深訪客的印象。
頁面切版架構:
這裡有提供預設的版型，選擇想要的版型，接著把內容放在這裡，網頁一下就搞定，是不是很簡單。
WooCommerce小工具:
付費版的Elementor有支援WooCommerce小工具，你能按照喜歡的樣子編排設計，製作一個你的購物網站，設計不一樣的產品頁面。
延伸閱讀⮕架設購物網站教學-打造強大的商店平台，完整指南篇
⮕WooCommerce教學-快速建立購物網站，立即在網路上開店
5、推薦的佈景主題
下方會介紹幾款不錯的佈景主題，讓你快速打造個人網站
5-1、Hello theme主題
這是一款Elementor官網開發的免費佈景主題，網站速度快，可以客製化網站跟Elementor Pro一起使用效果更好，套用裡面的模板可以製作頁首、頁尾、網站頁面設計。
Elementor提供六個版型:
- 預設模板 :一般的模板，含側邊欄
- 全寬頁面 :要隱藏側邊欄時，能選擇100%全寬頁面
- 左邊側邊欄頁面 :在左側的地方增加側邊欄
- 頁面編輯器滿版全寬 :設定會把內容變成全寬
- 內容置中頁面樣式 :可以刪除標題和不用的欄位位置
- Page Builder Blank :可以用來建立登陸頁，這是一個全新的頁面，能用Elementor編輯器來編排
5-2、Astra主題
Astra是一款輕量快速的佈景主題，可建立購物網站、部落格網站、企業網站，程式相容性高，能搭配Elementor、Beaver Builder編輯器使用，網站設計可以用Astra來接案。
Astra (年)方案:
Astra Pro →49美元
Essential Toolkit → 79美元
Business Toolkit → 149美元
終身方案:
Astra Pro → 199美元
Essential Toolkit → 399美元
Business Toolkit → 599美元
5-3、OceanWP主題
OceanWP免費的佈景主題內建有多種範本，不用寫程式也能建立出好看的網站，至今已超過數10萬次下載，在WordPress評價上很受歡迎，不需設定，匯入範本馬上可以使用。
這款主題有支援WooCommerce購物車外掛和多國語言外掛，也有支援Elementor頁面編輯器，建立購物網站開始販售商品。
OceanWP主題方案:
store:1個網站，(年)方案:34美元 / 終身:132美元
Entrepreneur : 3個網站，(年)方案 : 38美元 / 終身 : 155美元
shopping Plus: 10網站，(年)方案: 62美元 / 終身: 249美元
5-4、Jannah主題
Jannah是一款能用來建置部落格網站或新聞網站的佈景主題，提供多元的範本一鍵套用，不用另外再做其他設定，適合想要立即使用的你，支援Elementor外掛編輯器，搭配使用讓網站更強大。
6、Elementor推薦主機
6-1、A2 Hosting
A2 Hosting成立於2001年，創辦人有相關技術背景，主機運作很穩定快速，有4個主機點，分別在密西根州、亞利桑那州、阿姆斯特丹、新加坡，台灣的用戶選擇新加坡，速度比較快，選擇Turbo Boost方案三年方案較划算。
延伸閱讀⮕A2 Hosting教學-高CP值的虛擬主機
6-2、Cloudways
Cloudways是一款VPS和雲端主機，和其他主機不同在於有自己的獨立空間，主機運作和速度、安全都很穩定，架設各種類型的網站都可以，以小時收費，你可以開啟免費試用期3天，有喜歡在購買。
延伸閱讀⮕Cloudways教學-完整教學指南(附教學影片)
⮕WordPress主機優缺點-價格比較
7、Elementor外掛
這裡會列出幾個外掛給參考，依條件選擇適合的外掛，不一定要使用，別安裝太多外掛，會消耗網站資源，讓網站速度變慢
7-1、Anywhere Elementor
這邊你能使用短代碼在一個地方插入Elementor頁面，使用內建模板製作成單個區塊，可以隨時做修改，節省很多時間，Elementor Pro有提供此功能
7-2、Elementor Pack
Element Pack提供285+以上的元素，快速建立你的網站頁面，只要拖曳就能管理網站的內容，不用程式設計，提供一鍵匯入功能，還有支援多國語言，另支援RTL語言。
7-3、Ultimate Addons For Elementor
Astra開發出來的一款外掛，內建有提供多種的小工具和模板，搭配Astra主題更好，主題程式很乾淨速度快，接案設計很適合
延伸閱讀⮕16個接案平台推薦-自由工作者、協槓族接案必看
表單樣式小工具:
設計表單讓你的網站相同，利用Ultimate Addons的Contact Form 7及Caldera Forms不一樣的工具，來製作出吸睛的表單，提高網站成效
WooCommerce小工具:
WooCommerce小工具可用來設計網站購物車及整個網站的瀏覽，使用圖片或是影音來說明你的產品特色，能設定產品分類篩選器，進階的部分也能設定
排序功能表格工具:
Ultimate Addons表格工具功能可匯入CSV文件製作表格，設定想要的排序、樣式，按照項目下去做排序，資料看起來比較完整
選單小工具:
這款能有效幫你建立清楚的選單項目，商品較多的網站，幫助提高轉換率
互動粒子背景:
使用動畫效果增加網站不同的風格，你可以試看看這款
8、Elementor教學-建立網頁
8-1、下載安裝Elementor外掛
登入WordPress在左側有個「外掛」，安裝Elementor外掛程式，有買Pro版能在這統一啟用
8-2、停用預設顏色和禁用字型預設
把Elemeentor的設定，「停用預設顏色」和「禁用預設字型」勾選，讓WordPress主題的顏色、字型一併套用
8-3、進到Elementor編輯頁面
來到「頁面」，會看到下方有個「Elementor頁面編輯」的選項，點下按鈕進行編輯
8-4、用Elementor編輯網頁
進入編輯頁面，新增網站的內容，你能在左側工具欄用拖曳方法來編輯內容或在模板庫選擇想要的版型製作，Elementor分成三個區塊，主要是段、欄、元素，編排網站內容也很簡單。
Elementor新增頁面方法，分為段、欄、區塊內容(稱Section)，第一個建立，接著是內容(稱Columns欄)，放小工具的地方，Section完成之後，下一步選擇欄的類型，拖曳小工具放入資料，預設的版型Elementor會自動幫你調整。
8-5、匯入Elementor模板庫
在「模板庫」裡面你可以使用區塊或頁面匯入模板，大部分是付費板使用，可以依照需求購買
8-6、修改網頁內容
你可以選擇想要修改的項目內容，左側有個小工具，你能設定圖片、內容、間距，沒問題之後，在點選左測按發佈，編輯到這就告一個段落。
8-7、設定頁面的樣式
Elementor頁面佈局有3種樣式，Elementor畫布、Elementor全寬、LandingPage、畫布能用來製作一頁式網頁，全寬能用來做成頁面
延伸閱讀➞一頁式網頁是什麼? 了解一頁式網頁與網站的差別
9、常見問題
9-1、Elementor是什麼?
是一款WordPress外掛編輯器，用簡單的拖曳方式製作網站頁面，不論是新手或設計師，這款外掛能快速建立頁面，超過百萬下載次數，我也很推薦這款外掛。
9-2、Elementor是免費嗎?
Elementor一般程式是免費的，到WordPress後台，在外掛下載啟用就可以，需要進階的功能可參考Pro方案，會比較符合需求。
ESSENTIAL :可建立1個網站，每年49美元
ADVANCED :可建立3個網站，每年99美元
EXPERT :可建立25個網站，每年199美元
9-3、Elementor有什麼功能?
Elementor可以拿來建立整個網站內容，從頁面、頁首及頁尾，這款外掛能用來設計表單、感謝頁面，多種頁面幾乎都能使用Elementor來製作。
9-4、Elementor能用來寫文章嗎?
Elementor功能主要是頁面編輯，若每篇文章都使用會讓主機資源負荷太高，造成網站速度變慢，不建議用Elementor編輯器寫文章。
9-5、Elementor適合的佈景主題?
部落格網站可以選擇Jannah主題，購物網站選擇OceanWP主題，想要多一些客製化的你，參考Astra或OceanWP主題，這兩款適合多種類型的網站。
10、結論
Elementor編輯器很方便，用拖曳方式製作想要的頁面，以及網站的樣式，免費板就有近40個模板套用，修改完可以立即預覽超讚，這款編輯器旁邊有個小工具指示，跟著操作很容易。
