哈囉 ! 我是凱莉，是一個懂程式但是不寫程式的網頁設計師，今天就來和大家介紹一個很適合新手做網頁，內建模板也非常豐富的網頁編輯器Elementor，和大家分享，如何不用寫程式，也能快速的做一個自己的網站或部落格的神奇網頁編輯器。
目錄
Elementor是一種網頁內容編輯器，不管你會不會寫程式，都可以讓你做出自己想要的網頁，對於新手來說，利用拖拉區塊的方式讓使用者可以快速建立內容並且排版畫面，在編輯的時候圖中右半邊就是即時預覽模式，也可以輕鬆瀏覽編輯完的樣子；Elementor擁有超過500萬下載次數，是大多數Wordpress使用者會去選擇的網頁編輯器，如果你是新手的話可以先試試看官方免費版，如果需要更多變化來製作網頁的話再使用專業版本Elementor Pro
Elementor免費版 V.S Pro版本大比較
這邊是Elementor的最基本的拖拉區塊，最常用到的區塊都在這裡，也是免費版本會有的功能
專業版本裡面會多了許多比較彈性又簡便的功能，這些功能也會讓你的網頁看起來比較豐富
Elementor Pro-設計功能比較
| 【設計】 | Elementor免費版 | Elementor Pro付費版 |
|---|---|---|
| 自適應網頁設計(RWD) | ✅ | ✅ |
| 模版＆區塊 | 🔺 | ✅(300+個) |
| 自定義字體和Adobe TypeKit | 🔺 | ✅ |
| 動畫特效(Motion Effects & Mouse Effects) | 🔺 | ✅ |
| 滑梯slide和跑馬燈效果 | 🔺 | ✅ |
| 自定義CSS | 🔺 | ✅ |
| 滾動效果 | 🔺 | ✅ |
| 動畫標題 | 🔺 | ✅ |
| 翻蓋盒 | 🔺 | ✅ |
Elementor Pro-線上行銷(marketing)功能比較
| 【線上行銷】 | Elementor免費版 | Elementor Pro付費版 |
|---|---|---|
| Landing Page登陸頁面 | ✅ | ✅ |
| Popup彈出窗口 | 🔺 | ✅ |
| 固定物件位置（Sticky Elements） | 🔺 | ✅ |
| 社交按鈕 | 🔺 | ✅ |
| 社交證明小部件 | 🔺 | ✅ |
| 行動呼籲小部件（Call To Action） | 🔺 | ✅ |
| 表單小部件 | 🔺 | ✅ |
| 倒數計時器 | 🔺 | ✅ |
| 動作連結(Action Links) | 🔺 | ✅ |
| 燈箱效果（Lightbox） | 🔺 | ✅ |
Elementor Pro-主題建構(theme builder)功能比較
| 【主題製作器】 | Elementor免費版 | Elementor Pro付費版 |
|---|---|---|
| 主題元素 | 🔺 | ✅ |
| 設定不同模板顯示條件 | 🔺 | ✅ |
| 頁首和頁尾(Header And Footer) | 🔺 | ✅ |
| 固定頁首（Sticky Header） | 🔺 | ✅ |
| 404頁 | 🔺 | ✅ |
| 單一頁面（Single Post） | 🔺 | ✅ |
| 存檔頁面（Archive Page） | 🔺 | ✅ |
| 使用者編輯權限管理(Role Manager) | 🔺 | ✅ |
Elementor Pro-動態內容(Dynamic Content)比較
| 【動態內容】 | Elementor免費版 | Elementor Pro付費版 |
|---|---|---|
| 動態參數 | 🔺 | ✅ |
| 自定義動態內容組合(ex產品數據) | 🔺 | ✅ |
Elementor Pro-電子商務(WooCommerce)功能比較
| 【電子商務】 | Elementor免費版 | Elementor Pro付費版 |
|---|---|---|
| 價格小部件 | 🔺 | ✅ |
| 產品存檔模版(Product Archive Template) | 🔺 | ✅ |
| 單一產品模板(Single Product Template) | 🔺 | ✅ |
| WooCommerce產品小部件 | 🔺 | ✅ |
| WooCommerce分類小部件 | 🔺 | ✅ |
| WooCommerce模版和區塊 | 🔺 | ✅ |
Elementor Pro-表單(Form)功能比較
| 【表單】 | Elementor免費版 | Elementor Pro付費版 |
|---|---|---|
| 聯絡表單 | 🔺 | ✅ |
| 訂閱表單 | 🔺 | ✅ |
| 登入表單 | 🔺 | ✅ |
| 提交表單後重新定向 | 🔺 | ✅ |
| 確認郵件 | 🔺 | ✅ |
| 電子郵件 HTML / 純文字 | 🔺 | ✅ |
| 自定義通知 | 🔺 | ✅ |
| 自定義表單欄位 | 🔺 | ✅ |
| 上傳檔案 | 🔺 | ✅ |
| 提交驗證(使用條款/授權批准等) | 🔺 | ✅ |
| 垃圾郵件保護 | 🔺 | ✅ |
Elementor Pro-整合方式(Integrations)比較
| 【整合方式】 | Elementor免費版 | Elementor Pro付費版 |
|---|---|---|
| MailChimp | 🔺 | ✅ |
| Zapier | 🔺 | ✅ |
| ReCAPTCHA | 🔺 | ✅ |
| ActiveCampaign | 🔺 | ✅ |
| ConvertKit | 🔺 | ✅ |
| Campaign Monitor | 🔺 | ✅ |
| HubSpot | 🔺 | ✅ |
| DonReach | 🔺 | ✅ |
| GetResponse | 🔺 | ✅ |
| Slack | 🔺 | ✅ |
| Discord | 🔺 | ✅ |
| Adobe TypeKit | 🔺 | ✅ |
| Facebook SDK | 🔺 | ✅ |
| MailerLite | 🔺 | ✅ |
| Honeypot | 🔺 | ✅ |
Elementor的6大特色
- 學習快速好上手
- 及時預覽模式
- 許多擴充元件，甚至也可以自行開發元件使用
- 拖、拉的操作方式，輕鬆完成網頁編輯
- 豐富免費的demo頁面，可直接匯入使用
- 有中文介面，是少數有中文介面的編輯器
凱莉的使用心得
我有用過Oxygen網頁編輯器，也用過Beaver Builder；凱莉的這個Wordpress101部落格全部都是用Elementor做的，使用上這三個網頁編輯器都非常的好用，可以針對不一樣的需求來去決定你要甚麼樣的網頁編輯器。
對我來說Elementor網頁編輯器可以很快就上手，而文字編輯的地方可以再利用寫程式碼的方式做一些特別的規劃，例如 : 圖中紅色框框內，你想要這段文字一半是黑色一半是紅色，就可以利用<span style=” “>這樣的程式語法來寫。只要你懂html程式碼就可以簡單地去更改。
Elementor安裝教學
總結
Elementor的模板的種類集非常多樣化，妳可以使用免費模板來製作網站，也可以製作自己的模板來銷售，用Elementor可以製作出客製化的網頁介面，還有漂亮的UI介面可以讓你不費心的把網站設計好，是一個很實用的網頁編輯器。
小編補充：Elementor真的很方便！不用會寫程式就可以製作出自己想要的網站，大部分的人都會使用Elementor，用過後還是會覺得Elementor是最好用網頁編輯器