在本篇文章中,大叔將帶你深入了解 Elementor Pro 的功能,讓你可以輕鬆地建立出一個精美的網站,無論是個人網站,還是企業的形象網站、百萬電子商務網站,都可以使用 Elementor Pro 來建立。
想當年,炸雞店第一個網站就是用 Elementor 設計的,完成只有一個感覺「也太醜了吧」,之後也換過 Avada 這類的付費主題,確實在外觀上是獲得改善,使用了幾個月,但是 Avada 有幾個問題:
結果我又換回 Elementor 只是這次是付費版 Elementor Pro,後來我才發現,網站長的醜不是工具的問題,是「我的問題」。
總之,轉了一圈換了工具,才發現最美好的東西其實早就在我們身邊,只是我們還沒有能力發掘,既然遲早要用 Elementor Pro ,為什麼不一開始就使用。
Elementor 是什麼?
如果你正在打造自己的網站,但不想花費大量時間和金錢聘請開發人員,那麼你絕對需要了解 Elementor 這個 WordPress 插件。
Elementor 可以讓你快速而簡單地創建專業而美觀的網站,它的三大特點:
此外,在最新的統計中,Elementor 是最受歡迎的 WordPress 編輯,例如說:
以下是 Elementor 的一些特點:
Elementor 是基於 WordPress 開放系統下的網頁編輯工具軟體,可以從 Loading Page 到電子商務網站等幾乎所有網頁應用中使用,是大叔最喜歡且常使用的編輯器之一。
Elementor 的強大功能和簡單易用的編輯界面,讓它成為了最受歡迎的 WordPress 編輯工具之一,無論你是新手還是有經驗的網站開發者,都可以輕鬆使用它來打造出美觀而實用的網站。
Elementor Pro 又是什麼?
如果你是 WordPress 網站設計新手,推薦你使用 Elementor Pro 這個工具。Elementor 可以幫助你在自架網站上創建漂亮的網頁設計,並且非常易於使用。
Elementor Pro 3 個特點
和免費版本相比,它有 3 個漂亮的特點:
最後,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 的「易操作」、「學習速度快」的特點,讓我們可以在最短時間內建立網站,為公司和個人網站提供最佳的線上服務和行銷宣傳功能。
▼ 2022 年 Elementor Pro 費用

▼ 2022 年 Black Friday 費用

如果不喜歡 Elementor Pro 可以退費嗎?
無論你是否喜歡 Elementor Pro 都建議你試用看看,因為 Elementor 提供 30 天免費退費的試用期,一言不合就退費,不囉唆才是好服務。
偷偷告訴你一個秘密,如果在試用後覺得不錯的話,升級的高級方案只需付「差價」。所以從最便宜的一個網站的方案開始嘗試,未來有更多網站需要的話,再升級就好。
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 美金,其實也沒什麼好挑惕。
▼ New 服務 – 雲端主機
Elementor Pro VS Avada 付費主題

Avada 是大叔第一個付費主題,也是第一個選擇不再使用的主題。對於一個新手來說,Avada 雖然功能強大,但太吃資源了,讓整個主機的速度體驗很差。
Avada 是許多網站站主推薦 WordPress 付費主題,但是同時也很多人表示速度不佳,使用的難度很高。
反觀,Elementor Pro 也有許多站主推薦,而且主機的消耗更少,加上「拖放」十分好上手。總觀來看,學習難度較低,但 Elementor Pro 是一款訂閱付費型的外掛,每年大約要付 59 美金,對於新手來說,每年快 2000 台幣的網頁編輯器是一筆需要思考的決定。
我簡單做幾個 Elementor Pro 和 Avada 付費主題的比較,給大家參考:
名字 | Elementor Pro | Avada |
---|---|---|
費用 | USD 59 / Year | USD 69 / 終身 |
應用 | Elementor 延伸外掛 | 安裝 WordPress 主題 |
網站數量 | 1 | 1 |
優點 | 速度快、簡單上手 | 動態效果較強,一次付費終身使用 |
缺點 | 比較貴 | 速度較差、學習時長更久 |
總之,Avada 確實很強大、功能很多,做出來的網站也十分精美,但是網站速度很慢啊! 這是由於新手使用的主機規格,這時候,安裝一個功能強大軟體的結果就是「ㄍㄨㄟ速」,造成使用者在瀏覽網站的時候體驗差,不能說 Avada 不好,只是沒有這麼適合你。
Elementor Pro 下載和安裝
Step 1. 安裝 Elementor Website Builder
使用 Elementor Pro 的網頁編輯器,需要安裝 2 套軟體,Elementor Website Builder 基本版和 Elementor Pro 專業版。
所以先安裝免費的 Elementor Website Builder ,請於後台頁面的點擊「外掛」 → 「安裝外掛」,並在關鍵字搜尋框輸入「elementor」,找到軟體後點擊「立即安裝」,安裝完成後啟動。

Step2. 安裝 Elementor Pro
由於在 WordPress 後台是搜尋不到 Elementor Pro 專業版,所以我們要由 Elementor 官方網站的後台下載,但要先加入會員並完成付費。
就可以在 Elementor 會員頁面右上角找到下載的圖示。

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

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

Step3. 完成身份驗證
完成安裝後,在已安裝外掛找到 Elementor Pro 的位置,然後點擊 ” Connect & Activate “

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

如果沒有問題,應該可以看到這個畫面。
Status:Active ,你的帳號已經開啟。

Elementor 基本操作 & 教學
元素是什麼?
進到 Elementor 的網頁編輯頁面的時候,在左側我們可以看到「元素」,而元素代表的是各種不同的功能,例如說:
簡單說 Elementor 將過去我們需要透過「寫程式」才能做的網頁功能,將它們打包成一個一個的元素,並代表各種的功能來讓我們方便使用。

然後,我們只要使用「Drag and Drop 拖曳」的方式,就可以設計精美的網頁。
#1 拖曳設計 – 讓網頁設計變得簡單。
Step 1. 新增頁面 & 點擊「使用 Elementor 編輯」


Step2. 選擇你要的功能拖放到「編輯區」。
將左側的「元素」拖到右側的編輯區,編輯區就會出現「元素」。

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



以一個簡單的影片做為教學,我們試著在頁面中新增:
#2 自訂 CSS
如果你需要特殊的外觀風格或是動態設計,可能需要自行修改 CSS,而元素中的「進階」可以幫助我們自訂 CSS 。
新手想學習 CSS 語言的話,推薦你可以先看這堂課: Hohaw – 動畫互動網頁程式入門 (HTML/CSS/JS)【吳哲宇,墨雨設計】

#3 響應模式 – 如何讓行動裝置呈現不同的效果
響應式設計(Responsive Design)是一種網站設計技術,可以使網站在不同的設備上呈現不同的佈局和設計。
平時,在不能使用電腦的地方,用手機或是平板來上網、查資料,是再正常不過的事情,所以響應式設計,就是讓網站在不同的行動裝置上,都可以呈成出我們希望的視覺效果。
使用 Elementor Pro 的響應模式,我們可以針對「平板」、「手機」來修改樣式,只要在左側下方找到「響應模式」的圖示,然後點擊。
右側上方就會出現「電腦」、「平板」、「手機」的圖示,就可以針對不同裝置來調整設計。
▼ 響應模式圖示

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

#4 框線設定
框線是指在元素的外圍上呈現出各種不同的線條,例如說:「實線」、「雙實線」或是「虛線」等,一共有 5 種選擇。
框線設定可以由「進階」→「框線」,然後選擇邊線的類型和圓角半徑。

#5 導覽器 – 段、欄、元素
在編輯畫面中,左下方有導覽器,點擊後畫面會出現導覽器的視窗。
在視窗中可以看到「段、欄、元素」。

在網頁設計中,可以簡單將畫面分為 段、欄、元素,我們可以將它們視為「外框」、「內層」和「功能」。
反之元素是功能,功能要放在「欄」裡,而欄要放在「段」的下面。而欄是唯一擁有複數欄位的特性。

Elementor Pro 功能介紹
#1 主題編輯器
Elementor Pro 有一個很好用的功能「主題編輯器」,通過主題編輯器可以修改設計全新的「頁頭 Header」 、「頁尾 Footer」,甚至到網頁和文章的版面。
簡單來說,我們可以新增一個 Header ,讓它顯示在所有網頁上,或是部份我們指定的類別。也能用於精準的行銷上。
例如說,我們的文章有一個分類為「美食」,讓讀者閱讀美食分類的時候,右側欄位顯示美食相關的文章或是廣告,來提高使用者的點擊及停留率。
目前提供頁面編輯的有:

如果你對主題編輯器的更多功能有興趣的話,可以參考文章「Elementor Header 用主題編輯器打造精美的標頭」。
#2 動態內容
動態內容是一個強大且重要的功能,例如,天氣資訊,我們不太可能隨時「手動」修改天氣的溫度、濕度等,所以動態內容就是使用程式去讀取動態的資料,讓網頁可以呈現最新的資訊和內容。

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

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

然後修改內容。

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

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


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


整理 & 心得
大叔使用 Elementor Pro 大概 2 年了,使用它也建立不少自己和客戶的網站,我對它的使用心得就是中規中矩,操作簡單好上手是它的優點, 缺乏效果動畫和動態呈現功能是它的短版。
但是對於大多數的個人和企業使用者來說,架網頁設計不是一場設計比賽,而是行銷和曝光的一種手法。所以對 90 % 的使用者來說,已經是足夠使用。
Elementor Pro 比免費版來說,更穩定、好用,是一款實用性的網站設計工具,許多功能都在本內容中說明並教大家怎麼使用了。例如說「主題編輯器」,能夠讓使用者修改頁頭、頁尾、文章頁面等版型。
然而,Elementor Pro 也有一些小缺點,例如缺乏效果動畫和動態呈現功能。這些功能通常需要使用外部的 JavaScript 程式庫或自己編寫程式碼來實現。此外,雖然 Elementor Pro 的功能和模板很多,但對於一些非常特殊的設計需求,可能需要自行修改 CSS 或編寫自定義的程式碼。
總之,我推薦 Elementor Pro 做為主要網頁編輯器,如果有其它需求,再找找外掛或是透過自定義的程式碼來解決。