MO STORIES

Elementor 入門教學 :如何新增第一個 Elementor 頁面

2025年11月8日1 MIN READ

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

Elementor 入門教學 :如何新增第一個 Elementor 頁面
Cover Visual

在安裝主題和 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 同步提供專業的網站升級服務:

速度升級
讓 LCP < 2.5s,降低跳出率
流量升級
精準診斷核心關鍵字佈局
獲取專家診斷

前 5 名諮詢客戶享免費效能報告

MO 編輯

關於作者 | 10+ 經驗

MO 編輯

WordPress 效能優化專家 / MO Design Studio 共同創辦人

關注設計 × 工程的平衡協作,擅長以簡潔語言說故事。專門幫已有網站的品牌做速度升級。相信好網站不用重做,只需要正確的優化。

WordPress 優化SEO 策略Headless CMS效能稽核

延伸閱讀

Newsletter

訂閱 MO Stories

獲得最新的網頁設計趨勢、Headless CMS 技術洞察與數位變現策略。

我們尊重隱私,絕不發送垃圾郵件。可隨時取消訂閱。

MO DESIGN STUDIO

我們專注品牌網站設計、行銷著陸頁與整合式 CMS 流程,協助團隊打造有感的線上體驗。

返回部落格
Elementor 入門教學 :如何新增第一個 Elementor 頁面 | MO Stories | So桑 x mo studio