在本篇文章中，大叔將帶你深入了解 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 做為主要網頁編輯器，如果有其它需求，再找找外掛或是透過自定義的程式碼來解決。
