MO STORIES
Elementor 入門教學 :如何新增第一個 Elementor 頁面
這篇教學文章將幫助初學者學會如何使用 Elementor 來創建第一個網頁,從安裝和啟用插件開始,解釋基本元素及其功能,並指導如何插入模板和修改元素,讓你輕鬆上手網頁設計,解決對於使用 Elementor 的不安與困惑。

在安裝主題和 Elementor 之後,我們就可以使用 Elementor 為我們設計第一個頁面。
在之前的文章,我們大量的討論過如何建立 WordPress 網站,以及使用 SEO 策略建立流量。接下來,如果你想要讓你的網站更具吸引力,看起來更專業的話,我們需要會一點「網頁設計」。
網站設計就像是店面的實體裝潢,例如,進入咖啡廳,迎面而來的是白色牆面和綠色植物,乾淨透亮的落地窗,門口旁邊種著綠色植物,讓空間充滿了生氣和活力,還沒喝咖啡就吸了芬多精。
如果停留下來的人都是為了你內容的重點,而 Elementor 是用來吸引流量的亮點。
本文章我們會解釋 Elementor 的基本功能和使用方式,幫助你更快速上手並熟悉操作界面。
如何新增第一個 Elementor 頁面
Step1. 新增頁面
在後台找到頁面,點擊一下「新增頁面」。
進入頁面後,我們可以在上方找到「使用 Elementor 編輯」。

Step2. 介面操作
從上面的選擇功能為:
-
主功能

-
新增元素

-
網站設定

-
結構

Step3. 新增元素到頁面
使用拖曳式的設計,將元素移動到頁面編輯器。
▼ Elementor 網頁編輯器影片 – 由 Elementor 提供
▼ 頁面編輯器

如何將 Elementor Template 插入頁面
如何修改元素?
Elementor 新手使用教學
如果你是第一次使用 Elementor 的朋友,大叔將說明如何安裝和啟用 Elementor ,並解釋什麼是元素,和實例教你怎麼使用。
如何安裝和啟用 Elementor
Step1. 搜尋 Elementor
進入 WordPress 後台頁面,鼠標移動到「外掛」,再點擊一下「安裝外掛」。

Step2. 安裝 Elementor
進入外掛頁面後,在右側的搜尋框打上關鍵字「Elementor」,就可以找到「Elementor Website Builder。
點擊「立即安裝」並啟動它,即可。

Step3. 在後台找到 Elementor

什麼是元素?
進到 Elementor 的網頁編輯頁面的時候,在左側我們可以看到「元素」,而元素代表的是各種不同的功能,例如說:
- 標題
- 圖片
- 內容編輯器
- 按鈕等等
簡單說 Elementor 將過去我們需要透過「寫程式」才能做的網頁功能,將它們打包成一個一個的元素,並代表各種的功能來讓我們方便使用。

然後,我們只要使用「Drag and Drop 拖曳式設計」,就可以開始設計精美的網頁。
Elementor 基本元素與小工具介紹
元素是什麼?
導覽器:段、欄、元素是什麼?
基本元素介紹
專業版元素介紹
Link In Bio 元素
看完教學覺得 WordPress 還是太麻煩?
瘦桑與 MO design studio 同步提供專業的網站升級服務:
前 5 名諮詢客戶享免費效能報告

關於作者 | 10+ 經驗
MO 編輯
WordPress 效能優化專家 / MO Design Studio 共同創辦人
關注設計 × 工程的平衡協作,擅長以簡潔語言說故事。專門幫已有網站的品牌做速度升級。相信好網站不用重做,只需要正確的優化。
延伸閱讀

SEO 搜尋引擎優化完整教學指南 (2026 最新版):從 0 到 1 打造高流量網站
2026 SEO 不再只是關鍵字。這篇萬字指南帶你從技術 SEO、內容行銷到最新的 AEO (AI 引擎優化) 與 GEO 策略,掌握未來十年的流量密碼。

關鍵字規劃與研究工具推薦:2026 實戰指南
關鍵字研究是 SEO 的第一步。這篇帶你使用 Ahrefs、SEMrush、Perplexity 等工具,找出高價值的目標關鍵字。

頁面 SEO (On-Page) 優化清單:10 個關鍵檢查項目
頁面 SEO 是你最能掌控的優化項目。這份清單涵蓋標題、Meta、內部連結等核心要素,照著做就能提升排名。
訂閱 MO Stories
獲得最新的網頁設計趨勢、Headless CMS 技術洞察與數位變現策略。