Elementor教學以實際的具體範例,介紹如何利用這個簡單方便的工具,可以快速在WordPress網站進行網頁設計,有很多小工具和所見即所得預覽畫面,連新手小白也會。

一、Elementor是什麼?

Elementor是什麼?它是一款專為WordPress設計的視覺化頁面編輯器,透過簡單的拖放操作,輕鬆打造專業具有設計感的網站。最棒的是,簡單操作即可,全程不需要寫任何程式碼,所見即所得,對初學者也非常友善。

Elementor提供豐富的小工具(Widgets),像是文字編輯器、圖片、按鈕、影片、圖示、分隔線與進度條等,能自由組合呈現。同時,它也支援多樣的欄位佈局,從單欄、雙欄到多欄結構都能隨心搭配。只要將小工具拖曳到欄位中,便能即時編輯內容、樣式與外觀,讓每一頁都能展現出獨一無二的風格。

二、Elementor費用

Elementor費用分成很多階段,每個階段各有特定的操作功能和預設使用者,並且其實有最基本的免費版本,在此介紹如下:

Elementor免費

免費版的 Elementor 就像一個溫暖的起點,任何人都可以輕鬆上手。你可以建立無限制的網站,使用拖放編輯器、登陸頁建構器和 Hello 主題,還能套用浮動列模板與聯絡按鈕。它完全免費,不需要程式碼就能操作,響應式設計讓網站在手機和平板上也美觀呈現,對個人作品集或小型展示網站來說,已經足夠靈活又實用,快速就能完成心中的網站構想。

Elementor pro費用

Elementor費用提供更多專業功能和升級選擇,從基礎版到進階個人版,價格分別為每月 $4.99 到 $6.99美金,有多網站企業經營需求的話,還會到每月 $8.25 到 $16.99美金。相比免費版,將擁有更多小工具和模板、主題建構器、動態內容、表單建構器,以及彈出視窗、電商功能和自訂程式碼等進階工具。這些功能讓網站更完整、互動性更高,也方便建立專業品牌或電商平台,提升效率與設計自由度。

以下列表說明個人免費版和付費版的功能差異,具體情況可能因為時間而有所差異,請以官方網站為準:(Elementor) Pick the Plan That’s Right for You

功能 免費版 基礎版 進階版
價格 $0/月 $4.99/月 $6.99/月
適用網站數 🌱 無限制 1 1
技術支援
小工具數量 32 57 86
模板數量 📄 基本模板 10 20
主題建構器
動態內容
表單建構器
彈出視窗建構器
自訂程式碼 / CSS
電商功能
協作筆記
響應式設計
拖放編輯器
登陸頁建構器
Hello 主題
浮動列模板
聯絡按鈕
二、Elementor費用

三、Elementor下載

Elementor下載和一般的軟體工具不同,在WordPress控制台直接搜尋安裝即可,下列分三個步驟說明完整流程。這是在開始打造網站的第一步,從安裝外掛、選擇主題,到建立第一個頁面,這些動作看似簡單,卻決定了網站的穩定與風格。只要設定完善,就能為後續設計打下完美基礎。

步驟 1:安裝 Elementor 外掛

  1. 登入 WordPress 後台(您的網站網址/wp-admin
  2. 前往 外掛 > 安裝外掛
  3. 搜尋欄輸入「Elementor
  4. 找到「Elementor Website Builder
  5. 點擊「安裝」→「啟用

步驟 2:選擇相容佈景主題

建議使用輕量級主題,讓 Elementor 完全掌控設計:

推薦主題:

💡 為什麼選輕量主題? 這些主題不會加入過多預設設計,避免與 Elementor 衝突,讓網站載入更快。


步驟 3:建立第一個頁面

  1. WordPress 後台 → 頁面 > 新增頁面
  2. 輸入頁面標題(如「首頁」、「關於我們」)
  3. 點擊「使用 Elementor 編輯」按鈕
  4. 開始拖曳元件建立頁面!
三、Elementor下載

四、Elementor教學

贊贊小屋以實際案例介紹如何設定操作,提供一系列Elementor教學文章。


贊贊小屋WordPress教學

WordPress後台教學WordPress外掛推薦Elementor教學Kinsta主機代管WooCommerce教學

WordPress教學:教你如何輕鬆架設1個電商網站