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

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

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

以下是 Elementor 的一些特點：

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

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

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

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

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

總體來說，Elementor Pro 是一個非常優秀的工具，它可以幫助你快速建立出美觀、易用和專業的網站。如果你是 Elementor 的新手，或者是一個年輕的網站設計師，那麼 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 費用

▼ 2022 年 Black Friday 費用

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

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

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

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

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 Pro 或是購買便宜( 50% off )的專業版的話，請上我的工作室網站(MO-Studio)或是直接跟我連絡(IG)。

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

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

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

標題

圖片

內容編輯器

按鈕等等

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

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

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

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

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

Step.3 編輯元素

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

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

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

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

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

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

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

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

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

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

▼ 響應模式圖示

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

自訂 CSS：

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

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

框線設定：

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

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

#1 標題

#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 次」、「在設備上顯示」。

#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 美金，其實也沒什麼好挑惕。