WordPress架站最推薦 Elementor，想要架站卻不會程式語法？無論你是新手架站還是斜槓自學架站，一看完這篇 Elementor教學 就能學會！我們提供 Elementor免費教學、Elementor小工具、Elementor中文教學、Elementor Pro 費用，用最短時間讓你架設屬於你的品牌形象網站！
如果你正在學習用WordPress架站，我們推薦必看：
Elementor是什麼？
Elementor 是全球最有名的 WordPress 網站編輯器，其網站數量超過 1,000萬，對於完全不懂程式語法的使用者，都能透過拖放套件、使用範本就能快速設計網站，像是客製化形象網站、WooCommerce 電商購物網站都非常友善支援。
選擇 Elementor 頁面編輯器來架設網站，是新手架站的最佳選擇！
Elementor費用方案
Elementor 分為基礎版與進階版，我們建議直上 Elementor Pro 解鎖全功能，享受最完善的架站體驗！
兩者差別，進階版的小部件遠多於基礎版，以及可客製化功能更多，爾後我們會出教學一一講解，讓你們對於 Elementor 小部件更熟悉。
至於 Elementor方案分為四種，如果使用30天內使用不滿意，即可全額申請退費，完全沒有任何風險。
基本計劃
每年 59 美元 (每年約 $1,800 台幣) 攤提每月 150 台幣，經濟實惠的小資價格，可應用任何一個網站上，並享用全部功能。
高級計劃
每年 99 美元 (每年約 $3,036 台幣) 攤提每月 253 台幣，可應用 3 個網站上，並享用全部功能。
專家計劃
每年 199 美元 (每年約 $6,100 台幣) 攤提每月 508 台幣，可應用 25 個網站上，並享用全部功能。
機構計劃
每年 399 美元 (每年約 $12,200 台幣) 攤提每月 1,017 台幣，可應用 1,000 個網站上，並享用全部功能。
Elementor安裝教學
我們透過進入網站後台點選「外掛 」→「安裝外掛」就會看到外掛精選頁面。
緊接右上關鍵字搜尋框打上「Elementor」就會跑出第一個 Elementor Website Builder (啟用安裝數：5 百萬以上)，點下立即安裝就可以啟用 Elementor 基礎版。
Elementor基本觀念
我們不贅述過多的形容詞，想了解更多可以參考其他大神文章！
成功安裝並啟用 Elementor 之後，在 WordPress 網站後台的「文章、頁面」都可以使用 Elementor 編輯。
- 通常在做形象網站會優先建立所需頁面，並不會使用到文章。
- 我們使用 Elementor 編輯器來做形象網站的每一個頁面。
- 文章使用 Elementor模板「範本 」→「主題建構器」→「Single Post」
使用編輯器建立頁面
以頁面為例，進入網站後台點選「頁面 」→「新增頁面」或「全部頁面」都可以開新頁面即可。
進到新增頁面，請在右側邊欄的狀態摘要「範本」→ 將預設範本改為「Elementor 全寬」。
確認修改範本後，請點選新增頁面上方「使用 Elementor 編輯」
確認進去該 Elementor 編輯器頁面，可以開始拖曳小部件進行設計。
編輯器區塊邏輯架構
當你進到頁面編輯器，必須先了解編輯器的架構，才能夠把你小部件放到對應的地方，我們區塊邏輯分為以下幾個元素。
- 段：層級最大，包含整個「欄位、內部段、小部件」，新增段落由上至下排列。
- 欄：層級第二，位於段內，包含「內部段、小部件」，新增欄位由左至右排列。
- 內部段：層級第三，位於欄內，包含「小部件」，內部段欄位由左至右排列。
- 小部件：位於「欄位、內部段」內自由擺放，依照使用者需求拖放該區域。
Elementor基本設定
我們分享經常使用的設定給你們，讓你們進入熟悉 Elementor 能夠更快速，並不是只拖拉小部件，有了這些設定讓你們使用編輯器設計網站更有效率。
選擇可使用編輯器內容類型
安裝好 Elementor，進到 WordPress 網站後台的「Elementor」→ 「設定」→ 「一般」→ 勾選「頁面」。
主要依照個人使用到編輯器的需求而定，若有安裝像是 Crocoblock外掛，否則只有頁面會用到。
啟用上傳 SVG 檔案
安裝好 Elementor，進到 WordPress 網站後台的「Elementor」→ 「設定」→ 「進階」→ 啟用「啟用未過濾的檔案上傳」。
通常製作網站都會上傳小圖示，圖片類型其中含有 SVG 檔案類型。
使用者偏好設定
在頁面編輯器內，左側元素欄位的左上漢堡選單，點擊出現設定與 NAVIGATE FROM PAGE。
看到設定請點選「使用者偏好設定」
在使用者偏好設定開啟「編輯處理」切換是
編輯處理通常用於指標移動到段、欄、內部段、小部件上都會出現編輯選項，原先預設滑鼠右鍵編輯。
Elementor網站設定
在編輯器內的網站設定最常用到 「Global Colors、全域字型、排版樣式、版面配置、自訂CSS」，這些通常會在製作網站前會先設定，利用製作時，直接選擇即可。
調整預設內容寬度
通常網站預設為 1200px，進到編輯器內的網站設定的「版面配置」→ 「Content Width」調整為 1200。
設定全域字型、顏色
可在此將全站常用到的顏色、字型設定進去，自訂網站風格是方便統一點選及修改。
進到編輯器內的網站設定的「Global Colors、全域字型」
設定文章標題樣式
通常用於文章套版內的標題：H1、H2、H3、H4、H5、連結、主體文字
進到編輯器內的網站設定的「排版樣式」
Elementor小工具教學
最好用的 Elementor 小工具又稱 Elementor 小部件，分為基本版 (Basic Widgets) 與專業版 (Pro Widgets)，因應不同主題及電商 (WooCommerce) 皆提供專屬的 Elementor小工具，滿足您在架站的各種設計需求。
Elementor基本小工具
Elementor免費基本可以使用的小工具，就可以架出專業網站，主要可以使用[一般]與[基本]小工具，若不想升級專業版，推薦安裝支援延伸的小工具外掛像是 Qi Addons For Elementor，這有免費與專業版小工具可以搭配使用。
如果想了解 Elementor 基本小工具，我們推薦必看：
基本
- 《Elementor小工具教學：Google地圖》
- 《Elementor小工具教學：圖片》
- 《Elementor小工具教學：內部段》
- 《Elementor小工具教學：標題》
- 《Elementor小工具教學：內容編輯器》
- 《Elementor小工具教學：影音》
- 《Elementor小工具教學：按鈕》
- 《Elementor小工具教學：分隔線》
- 《Elementor小工具教學：空白間隔》
- 《Elementor小工具教學：圖示》
一般
- 《Elementor小工具教學：圖示方框》
- 《Elementor小工具教學：圖片方框》
- 《Elementor小工具教學：星等》
Elementor專業小工具
Elementor Pro費用完全超值，可以用的專業小工具更多樣化，讓架設網站的設計更加多元，可以使用[專業]小工具以外，我更推薦搭配 Crocoblock 做使用，利用動態標籤延伸更多客製化做法，依個人需求來升級吧！
如果想了解 Elementor 專業小工具，我們推薦必看：
專業版
- 《Elementor小工具教學：文章》
- 《Elementor小工具教學：作品集》
- 《Elementor小工具教學：藝廊》
- 《Elementor小工具教學：分隔線》
- 《Elementor小工具教學：空白間隔》
- 《Elementor小工具教學：圖示》
主題元素
通常會用在 Elementor範本模板上，像是 header、footer、404頁面、文章列表、文章內頁等，任何需要自定義的地方，同樣搭配 Crocoblock 有更多延伸應用。
- 《Elementor小工具教學：文章標題》
- 《Elementor小工具教學：文章摘要》
- 《Elementor小工具教學：特色圖片》
- 《Elementor小工具教學：目錄》
- 《Elementor小工具教學：作者方框》
- 《Elementor小工具教學：文章評論》
- 《Elementor小工具教學：文章導覽》
- 《Elementor小工具教學：文章資訊》
Elementor主題推薦
最適合 Elementor 的官方標配主題 Hello Elementor！
這款佈景主題本身就是一個輕量化的空殼，透過 Elementor Pro 可以讓你自由發揮設計網站，各種兼容性都非常好，完全符合 Elementor 規範。
其實有許多佈景主題都很適合搭配 Elementor 來做使用，像是 Astra、GeneratePress、Kadence 都是很多人用的 WordPress 主題，依照個人使用習慣來架設網站即可，沒有標準答案。
Elementor範本教學
想要使用預先設計好的範本，可以節省製作時間，對於「不熟練的使用者、沒有設計想法的你」，不需要重頭來，你可以使用範本的內容及排版完成頁面。
Elementor 本身提供超過 30 種以上的範本，若搭配其他佈景主題可選擇更多範本，那範本怎麼使用呢？請參考以下步驟。
我們透過進入該你正在編輯器頁面點選「新增版型 」
「挑選模板」→ 綠色按鈕「插入」
按下插入後， 出現彈跳視窗點下「套用」就可以完成套用範本並進行內容排版編輯。
