Elementor Pro 教學:2024 最完整實戰指南


在本篇文章中,大叔將帶你深入了解 Elementor Pro 的功能,讓你可以輕鬆地建立出一個精美的網站,無論是個人網站,還是企業的形象網站、百萬電子商務網站,都可以使用 Elementor Pro 來建立。

想當年,炸雞店第一個網站就是用 Elementor 設計的,完成只有一個感覺「也太醜了吧」,之後也換過 Avada 這類的付費主題,確實在外觀上是獲得改善,使用了幾個月,但是 Avada 有幾個問題:

  • 後台操作速度
  • 設計以及修改網頁花太多時間
  • 網站前端的速度也說不上太快

結果我又換回 Elementor 只是這次是付費版 Elementor Pro,後來我才發現,網站長的醜不是工具的問題,是「我的問題」。

總之,轉了一圈換了工具,才發現最美好的東西其實早就在我們身邊,只是我們還沒有能力發掘,既然遲早要用 Elementor Pro ,為什麼不一開始就使用。



Elementor 是什麼?

如果你正在打造自己的 Wordpress 網站,但不想花費大量時間和金錢聘請開發人員,那麼你絕對需要了解 Elementor 這個 WordPress 插件。

Elementor 可以讓你快速而簡單地創建專業而美觀的網站,它的三大特點:

  • 「拖放式 (Drag and Drop)」編輯介面 :簡單易操作,讓任何人都能夠輕鬆設計和編輯網頁。
  • 不需要具備程式設計能力:Elementor 將想得到的功能都設計成元素,直接「拖放」就能使用。
  • 網上最多模板和教學資源支援 :使用 Elementor 模板和範本讓我們站在巨人的肩膀上。你可以在網路上找到任何關於 Elementor 的問題和教學,省下大量解決問題的時間。



此外,在最新的統計中,Elementor 是最受歡迎的 WordPress 網頁編輯工具,例如說:

  • 平均每 10 秒創建一個網站
  • Elementor 是一個開源的平台
  • 自 2016 年推出,至今已擴展到 180 多個國家/地區
  • 超過 5,000,000 次活躍安裝



以下是 Elementor 的一些特點:

  • 優秀的性能:Elementor 能夠快速載入,不會讓你的網站變得緩慢。
  • 大量模板可用:Elementor 提供了豐富的模板庫,涵蓋各種類型的網站,你可以根據自己的需求進行選擇,而且每個模板都可以進行自定義。
  • 無需程式背景:Elementor 的編輯界面簡單易用,讓你可以輕鬆設計和修改網站的外觀和功能,而且不需要任何程式設計知識。
  • 免費和付費版本:Elementor 提供了免費和付費兩個版本,免費版本已經足夠使用,但付費版本可以提供更多功能和模板。
  • 網上大量免費學習資源:Elementor 是最受歡迎的 WordPress 編輯工具,超過 800 萬網站使用,可以在網路上找到大量的學習文章。



Elementor 是基於 WordPress 開放系統下的網頁編輯工具軟體,可以從 Loading Page 到電子商務網站等幾乎所有網頁應用中使用,是大叔最喜歡且常使用的編輯器之一。

Elementor 的強大功能和簡單易用的編輯界面,讓它成為了最受歡迎的 WordPress 編輯工具之一,無論你是新手還是有經驗的網站開發者,都可以輕鬆使用它來打造出美觀而實用的網站。


▼ Elementor 網頁編輯器影片 - 由 Elementor 提供



Elementor Pro 又是什麼?

如果你是剛開始學習 Wordpress 網站設計的新手,我非常推薦你嘗試使用 Elementor Pro 這個工具。Elementor Pro 可以幫助你在自己建立的網站上創建出漂亮的網頁設計,讓你的網站看起來更專業,同時也非常容易使用。

相較於免費版本,Elementor Pro 有三個令人驚豔的特點,讓你的網站更加出眾:

  • 專業元素功能:Elementor Pro 提供了更多的元素設計選項,不僅可以讓你的網站外觀變得更美觀,還能加入許多專業功能,例如「表單」、「動態照片或橫幅」、「定價表」等等。這些功能能夠讓你的網站變得更加豐富和多樣化。我們都喜歡自己建立網站的原因之一就是它的「自由性」,你可以根據自己的需求來調整網站的風格和功能,它可以成為你的個人作品集、旅遊記錄中心,甚至是一個完整的電子商務網站。
  • 更多範本和模板:除了實用的功能外,Elementor Pro 還提供了大量的模板供你選擇,這個模板庫包含各種類型的網站,能夠幫助你在短時間內完成一個美觀的網站。此外,你還可以使用主題構建器來設計和修改「Header」、「Footer」或是文章分類等頁面,你可以掌控任何大小細節;唯一的問題是,你可能會沉迷其中而失去睡眠。
  • 動態內容:Elementor Pro 允許你使用動態內容,例如,通過從 WordPress 的自訂欄位中獲取內容,或是從自定義資料庫中創建動態內容。動態內容是一個非常實用的功能,特別對於那些有大量商品或作品需求的商家來說,你可以像使用 Excel 表格一樣快速新增和修改內容,更加符合業界快速變化的需求。

最後,Elementor Pro 還提供了更多的設計選項,例如可以使用更多字體、顏色和背景圖片來讓網站設計更貼近客戶的需求。而且 Elementor Pro 的低資源消耗保證了網站的順暢運行。

總體來說,Elementor Pro 是一個非常優秀的工具,它可以幫助你快速建立出美觀、易用和專業的網站。如果你是 Elementor 的新手,或者是一個年輕的網站設計師,那麼 Elementor Pro 絕對是你不容錯過的工具!



Elementor Pro 費用價格

目前 Elementor Pro 最便宜的方案是一年 59 美金,只能在一個網站使用;而 EXPERT 方案則可以在最多 25 個網站使用,需要支付 199 美金。

在 2021 年之前,大叔以 199 美金購買了 1000 個網站的許可證。可惜過去的美好時光已經一去不返,當時只需要支付 39 美金就可以擁有一個網站,而最高方案的 1000 個許可證一年的費用為 399 美金。

當然,這與一些經濟因素有關。但基本上,主機服務只會越來越貴。由於升級伺服器,成本也隨之提高,費用也相應上漲。不過,每個單位的效能和功耗也得到了提高。就像 iPhone 越賣越貴,但效能和電池續航力更好了。

因此,Elementor 調整了他們的收費策略,不再低價測試市場,更提高了工作室和公司方案的收費,漲價高達 100%。

個人用戶的影響較小,相對只有 50% 左右漲價。而且還因 Elementor 的功能更強大而受益。Elementor Pro 的「易操作」、「學習速度快」的特點,讓我們可以在最短時間內建立網站,為公司和個人網站提供最佳的線上服務和行銷宣傳功能。

如果看到現在對 Elementor Pro 有興趣的話,可以拉到最後讀者優惠,或是文章 Elementor 是什麼? 為什麼我們選它做為 WordPress 網頁編輯器 ,我們將分享怎麼使用優惠的價格購入 Elementor Pro 喔!


▼ 2023 年 Elementor Pro 費用

Elementor Pro|Name



▼ 2022 年 Black Friday 費用

Elementor Pro|Name



Elementor Pro VS Avada 付費主題

Avada 是大叔第一個付費主題,也是他不再使用的第一個主題。對於一個新手來說,雖然 Avada 功能強大,但它卻非常吃資源,這導致整個主機的速度體驗非常差。

許多網站站主都推薦 Avada 作為 WordPress 的付費主題,但同時也有很多人表示它的速度不佳,且使用起來非常困難。

相反地,Elementor Pro 也是許多站主推薦的選擇,它消耗的主機資源更少,並且具有直觀的「拖放」功能,非常容易上手。總體而言,它的學習難度較低。然而,Elementor Pro 是一個訂閱付費型的外掛,每年大約需要支付 59 美元。對於新手來說,每年花費近 2000 台幣來使用這個網頁編輯器是一個需要仔細思考的決定。。


Elementor Pro|Name




此外,以下表格顯示了 Elementor Pro 和 Avada 之間的比較:

名字Elementor ProAvada
費用USD 59 / YearUSD 69 / 終身
應用Elementor 延伸外掛WordPress 主題
網站數量11
優點速度快、簡單上手動態效果較強,一次付費終身使用
缺點比較貴速度較差、學習時長更久



Elementor Pro 下載和安裝

接下來,我們將一步一步地教大家怎麼安裝 Elementor Pro 以及操作。



Step 1. 安裝 Elementor Website Builder

使用 Elementor Pro 的網頁編輯器,需要安裝 2 套軟體,Elementor Website Builder 基本版和 Elementor Pro 專業版。

請先安裝免費版的 Elementor Website Builder ,請於後台頁面的點擊「外掛」 → 「安裝外掛」,並在關鍵字搜尋框輸入「elementor」,找到軟體後點擊「立即安裝」,安裝完成後啟動。

Elementor Pro|Name



Step2. 安裝 Elementor Pro

由於在 WordPress 後台是搜尋不到 Elementor Pro 專業版,所以我們要由 Elementor 官方網站的後台下載,但要先加入會員並完成付費。

就可以在 Elementor 會員頁面右上角找到下載的圖示。

Elementor Pro|Name



下載後 Elementor Pro 後,請回到在後台的「外掛」頁面找到「安裝外掛」的字樣,點擊「上傳外掛」,選擇剛剛下載的 Elementor Pro。

Elementor Pro|Name



完成後,你應該可以在後台找到兩個 Elementor 的外掛,就像是下圖這樣。

Elementor Pro|Name



Step3. 完成身份驗證

完成安裝後,在已安裝外掛找到 Elementor Pro 的位置,然後點擊 " Connect & Activate "

Elementor Pro|Name



出現連線的圖示,再點擊一下 " Activate "



Elementor Pro|Name



如果沒有問題,應該可以看到這個畫面。

Status:Active ,表示你的帳號已經開啟,可以使用付費版的功能了。

Elementor Pro|Name



Hello 主題安裝

Hello 主題是一個輕量級的 WordPress 主題,專為與 Elementor 網頁編輯器相容而設計。它提供最基本的佈局和功能,以確保你的網站在使用 Elementor 時能夠達到最佳效果。Hello 主題的目標是提供一個快速、輕巧且最佳的基礎,使你能夠更自由地使用 Elementor 建立自己的網站。

WordPress Hello 主題安裝也非常容易,請點擊左側的「外觀 → 佈景主題」,然後在搜尋主題打「Hello」,點擊下載安裝並啟用它。

Elementor Pro|Name



Elementor 簡介

簡要介紹 Elementor 網頁編輯器的內容。我們解釋 Elementor 的基本功能和使用方式,幫助你更快速上手並熟悉操作界面。


#1 元素是什麼?

進到 Elementor 的網頁編輯頁面的時候,在左側我們可以看到「元素」,而元素代表的是各種不同的功能,例如說:

  • 標題
  • 圖片
  • 內容編輯器
  • 按鈕等等


簡單說 Elementor 將過去我們需要透過「寫程式」才能做的網頁功能,將它們打包成一個一個的元素,並代表各種的功能來讓我們方便使用。


Elementor Pro|Name



然後,我們只要使用「Drag and Drop 拖曳」的方式,就可以開始設計精美的網頁。



#2 拖曳式設計:讓網頁設計變得簡單。

Step 1. 新增頁面 & 點擊「使用 Elementor 編輯」

Elementor Pro|Name


Elementor Pro|Name



Step2. 選擇你要的功能拖放到「編輯區」。

將左側的「元素」拖到右側的編輯區,編輯區就會出現「元素」。

Elementor Pro|Name



Step.3 編輯元素

然後我們要針對元素進行「編輯」,主要分為內容、樣式、進階。

  • 內容 - 修改標題文字、影片、圖片等內容。
  • 樣式 - 修改顏色、字體、樣式、陰影等。
  • 進階 - 邊界、邊框、寬度、CSS 等設定
Elementor Pro|Name


Elementor Pro|Name
Elementor Pro|Name



以一個簡單的影片做為教學,我們試著在頁面中新增:

  • 標題、內容、圖片





#3 導覽器:段、欄、元素

在 Elementor 中,「段」(Section)是最高層級的結構,用於劃分網頁的不同區塊。每個「段」可以包含一個或多個「欄」(Column)。「欄」用於將網頁區塊分成不同的列,讓你可以在每個欄中放置不同的「元素」(Element)。


在網頁設計中,可以簡單將畫面分為 段、欄、元素,我們可以將它們視為「外框」、「內層」和「功能」。

反之元素是功能,功能要放在「欄」裡,而欄要放在「段」的下面。而欄是唯一擁有複數欄位的特性。

Elementor Pro|Name



在編輯畫面中,左下方有導覽器,點擊後畫面會出現導覽器的視窗。

在視窗中可以看到「段、欄、元素」。

Elementor Pro|Name



#4 響應模式:如何讓行動裝置呈現不同的效果

響應式設計(Responsive Design)是一種網站設計技術,可以使網站在不同的設備上呈現不同的佈局和設計。因此,響應式設計的目的就是要讓網站在不同的行動裝置上,都能夠呈現出我們期望的視覺效果,讓使用者在任何地方都能夠輕鬆地獲取所需的資訊。

Elementor Pro 提供響應模式設計,讓我們可以針對「平板」、「手機」來修改樣式。怎麼做呢? 只要在左側下方找到「響應模式」的圖示,然後點擊。

右側上方就會出現「電腦」、「平板」、「手機」的圖示,就可以針對不同裝置來調整設計。

▼ 響應模式圖示

Elementor Pro|Name

▼ 選擇電腦、平板或是手機模式

Elementor Pro|Name



其它

自訂 CSS:

如果你需要特殊的外觀風格或是動態設計,可能需要自行修改 CSS,而元素中的「進階」可以幫助我們自訂 CSS 。

新手想學習 CSS 語言的話,推薦你可以先看這堂課: Hohaw - 動畫互動網頁程式入門 (HTML/CSS/JS)【吳哲宇,墨雨設計】


Elementor Pro|Name




框線設定:

框線是指在元素的外圍上呈現出各種不同的線條,例如說:「實線」、「雙實線」或是「虛線」等,一共有 5 種選擇。

框線設定可以由「進階」→「框線」,然後選擇邊線的類型和圓角半徑。


Elementor Pro|Name



Elementor 基礎功能教學


#1 標題



Elementor Pro 功能教學

#1 主題編輯器

Elementor Pro 有一個很好用的功能「主題編輯器」,通過主題編輯器可以修改設計全新的「頁頭 Header」 、「頁尾 Footer」,甚至到網頁和文章的版面。

簡單來說,我們可以新增一個 Header ,讓它顯示在所有網頁上,或是部份我們指定的類別。也能用於精準的行銷上。

例如說,我們的文章有一個分類為「美食」,讓讀者閱讀美食分類的時候,右側欄位顯示美食相關的文章或是廣告,來提高使用者的點擊及停留率。

目前提供頁面編輯的有:

  • 頁頭 Header
  • 頁尾 Footer
  • 文章頁面 Single Post
  • 網頁頁面 Single Page



  • 分類頁面 Archive
  • 搜尋結果頁面 Search Results
  • 產品頁面 Products Archive
  • 404 頁面
Elementor Pro|Name



如果你對主題編輯器的更多功能有興趣的話,可以參考文章「Elementor Header 用主題編輯器打造精美的標頭」。



#2 動態內容

動態內容是一個強大且重要的功能,例如,天氣資訊,我們不太可能隨時「手動」修改天氣的溫度、濕度等,所以動態內容就是使用程式去讀取動態的資料,讓網頁可以呈現最新的資訊和內容。

Elementor Pro|Name



#3 彈出視窗

彈出視窗是指透過頁面上的按鈕或連結等元素,點擊後會彈出一個視窗,通常用於顯示更詳細的內容、填寫表單或進行某些操作。在 Elementor Pro 中,可以透過「Popup Builder」功能設計自己的彈出視窗,並且可以根據不同的觸發條件(例如滑鼠移入、按鈕點擊等)來控制視窗的顯示行為。

Step1. 新增「彈出視窗」

路徑:由範本 → 彈出式視窗 → 新增 → 命名並建立版型

Elementor Pro|Name



Step2. 設計

我們可以由模板選擇喜歡的彈出式視窗,也可以從零自己設計一個。假設我們導入一個模板。

Elementor Pro|Name


然後修改內容。



Elementor Pro|Name



Step3. 設定顯示

完成設計後,我們要設定彈出式視窗要顯示在什麼地方。請點擊圖片紅框的位置,找到「display conditions」,然後點擊。

Elementor Pro|Name



點擊「Conditions」→「add conditons」可以選擇包含「整個網站」,我們也可以單獨選擇「文章列表」或是使用單頁。

Elementor Pro|Name
Elementor Pro|Name




Step4. 設定 Triggers & Advanced Rules

再來需要做一點進階設定,設定觸動彈出視窗的動作,像是:「在頁面載入時」、「點擊」等。還有一些 Advanced Rules 細項設定,像是「最多顯示 x 次」、「在設備上顯示」。

Elementor Pro|Name


Elementor Pro|Name



常見問題

#1 如果不喜歡 Elementor Pro 可以退費嗎?

無論你是否喜歡 Elementor Pro 都建議你試用看看,因為 Elementor 提供 30 天免費退費的試用期,一言不合就退費,不囉唆才是好服務。

偷偷告訴你一個秘密,如果在試用後覺得不錯的話,升級的高級方案只需付「差價」。所以從最便宜的一個網站的方案開始嘗試,未來有更多網站需要的話,再升級就好。




#2 Elementor Pro 值不值的買?

Elementor Pro 在大叔使用第 2 個月,對於 Elementor 我有一些改觀,過去用過 Elementor Free 雖然操作好上手,但是常常當機,所以購買前 Elementor Pro 是有一點擔心,但是大叔還是個直男,直男就是給他刷下去就對了,頭也不回的男人才帥氣。

在使用幾個月後,不但系統穩定,而且速度快,做為一個靜態的個人網站和企業的形象網站,其實都很夠用。

所以大叔推薦給打算使用 WordPress 網站做「部落格」、「企業形象網站」的朋友。

← 如果你對「便宜」 Elementor Pro 有興趣的話,可以 IG 連絡大叔。

再來,如果你想要設計一個 WordPress 網站,做為「電商」、「動態網站」使用的話,也就是要很多酷酷的動畫之類的,那也可以使用 Elementor Pro,但建議你選擇 4 核心 8 GB 以上的主機。

Elementor Pro 不但功能很多,還很實用,而介面簡單上手好學習,也提供 300 多種設計模版 ( 300+ Designer Made Templates )

大叔想找的是在短時間,完成我想要的功能而「外觀夠用」就好,所以我選 Elementor Pro。

最近 Elementor 也推出雲端主機的服務,主機 + Elementor 編輯器 + 主題 每個「年」只要 99 美金起,CP 值蠻高,但速度就…沒用過,不過一個月不到 10 美金,其實也沒什麼好挑惕。




大叔心得 &整理

使用 Elementor Pro 大概 3 年了,使用它也建立不少自己和客戶的網站,我對它的使用心得就是中規中矩,操作簡單好上手是它的優點, 缺乏效果動畫和動態呈現功能是它的短版。

但是對於大多數的個人和企業使用者來說,架網頁設計不是一場設計比賽,而是行銷和曝光的一種手法。所以對 90 % 的使用者來說,已經是足夠使用。

Elementor Pro 比免費版來說,更穩定、好用,是一款實用性的網站設計工具,許多功能都在本內容中說明並教大家怎麼使用了。例如說「主題編輯器」,能夠讓使用者修改頁頭、頁尾、文章頁面等版型。

然而,Elementor Pro 也有一些小缺點,例如缺乏效果動畫和動態呈現功能。這些功能通常需要使用外部的 JavaScript 程式庫或自己編寫程式碼來實現。此外,雖然 Elementor Pro 的功能和模板很多,但對於一些非常特殊的設計需求,可能需要自行修改 CSS 或編寫自定義的程式碼。

總之,我推薦 Elementor Pro 做為主要網頁編輯器,如果有其它需求,再找找外掛或是透過自定義的程式碼來解決。



讀者優惠

  • Elementor Pro 大叔優惠請看 → mo Studio
  • 部落客專屬:用 Notion 打造一個 Wordpress 網站,讓你專心寫,其它問題大叔幫你解決 → mo Studio