【Elementor 教學】打造精美網站 10 個不能錯過的功能
Elementor 是什麼?
如果你正在打造自己的 Wordpress 網站，但不想花費大量時間和金錢聘請開發人員，那麼你絕對需要了解 Elementor 這個 WordPress 插件。
Elementor 可以讓你快速而簡單地創建專業而美觀的網站，它的三大特點：
- 「拖放式 (Drag and Drop)」編輯介面 ：簡單易操作，讓任何人都能夠輕鬆設計和編輯網頁。
- 不需要具備程式設計能力：Elementor 將想得到的功能都設計成元素，直接「拖放」就能使用。
- 網上最多模板和教學資源支援 ：使用 Elementor 模板和範本讓我們站在巨人的肩膀上。你可以在網路上找到任何關於 Elementor 的問題和教學，省下大量解決問題的時間。
此外，在最新的統計中，Elementor 是最受歡迎的 WordPress 網頁編輯工具，例如說：
- 平均每 10 秒創建一個網站
- Elementor 是一個開源的平台
- 自 2016 年推出，至今已擴展到 180 多個國家/地區
- 超過 5,000,000 次活躍安裝
- WordPress 網站 超過 5000 條五星級評論
以下是 Elementor 的一些特點：
- 優秀的性能：Elementor 能夠快速載入，不會讓你的網站變得緩慢。
- 大量模板可用：Elementor 提供了豐富的模板庫，涵蓋各種類型的網站，你可以根據自己的需求進行選擇，而且每個模板都可以進行自定義。
- 無需程式背景：Elementor 的編輯界面簡單易用，讓你可以輕鬆設計和修改網站的外觀和功能，而且不需要任何程式設計知識。
- 免費和付費版本：Elementor 提供了免費和付費兩個版本，免費版本已經足夠使用，但付費版本可以提供更多功能和模板。
- 網上大量免費學習資源：Elementor 是最受歡迎的 WordPress 編輯工具，超過 800 萬網站使用，可以在網路上找到大量的學習文章。
Elementor 是基於 WordPress 開放系統下的網頁編輯工具軟體，可以從 Loading Page 到電子商務網站等幾乎所有網頁應用中使用，是大叔最喜歡且常使用的編輯器之一。
Elementor 的強大功能和簡單易用的編輯界面，讓它成為了最受歡迎的 WordPress 編輯工具之一，無論你是新手還是有經驗的網站開發者，都可以輕鬆使用它來打造出美觀而實用的網站。
▼ Elementor 網頁編輯器影片 - 由 Elementor 提供
Elementor 優點及缺點
優缺點的重要性取決於個人需求和使用情境。對於那些希望快速建立網頁並具備自由度的使用者來說，Elementor 的優點可能更具吸引力。然而，如果需要更多進階功能或對於學習曲線有所顧慮，那麼缺點可能需要考慮。
綜上所述，Elementor 提供了一個直觀且功能豐富的網頁編輯器，可以幫助使用者快速建立專業且美觀的網頁，但同時也需要根據個人需求和情境來評估其優缺點的重要性。
Elementor 作為一個網頁編輯器，具有以下優點和缺點：
優點：
- 使用順暢，即使在一般筆記型電腦上使用，Elementor 也能夠保持流暢的操作速度。
- 網站的載入速度更快，提升了用戶體驗。
- 提供了許多免費的網路教學資源，可以幫助使用者更深入了解 Elementor 的功能和技巧。
- 具有廣泛的第三方外掛支援，可以進一步增強 Elementor 的功能。
缺點：
- Elementor 需要每年付費使用。
- 官方提供的模版數量相對較少，可能會限制一些特定風格或需求的網站設計。
- 有時候可能會出現與其他外掛的衝突，需要進行解決或調整。
為什麼要用 Elementor
我們在 2021 年 1 月開始使用全面改使用 Elementor Pro 網頁編輯器，以及他們的 Hello 主題。因為我們對於網站的速度要求很高，當時使用許多不同的主題，但一直不太滿意，只會拖慢網站的速度而影響使用者的體驗。
為了解決速度的問題，最終我們找到幾個明顯有用的作法：
- 換主機
- 優化圖片
- 使用 Elementor 網頁編輯器
顯然，一切都和錢有關。讓我簡單再說明一下，如果你想要網站要有酷炫的特效、動態效果，那你需要規格較好的主機效能，去支持那些動態內容，當然錢錢從口袋流走的速度也比較快。
對於個人網站、形象網站，或是學生的作品網站而言，每個月要花在網路主機上幾千塊台幣，這不符合經濟效益。所以不如使用輕度網頁編輯器來設計網站，一個月不到一千塊的主機和主題或是編輯器，讓網路事業先存活再求發展，這樣比較健康。
本來想改善速度，結果使用幾個月後，網站有了明顯的成長：
- 排名和點擊曝光也上升
- 停留時間上升
- 整體都提高了
因為網站變快，瀏覽的體驗也提高了，更重要的是在「內容」上可以投入更多的時間。如果你還在為網站設計而煩惱，大叔推薦你可以試試使用 Elementor。
Elementor 費用
目前 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 費用
Elementor 安裝及設定
#1 安裝外掛 - 在 WordPress 控制欄點擊「外掛 → 安裝外掛」
#2 搜尋關鍵字 - 鍵入 Elementor 後搜尋
#3 安裝 Elementor - 找到外掛點擊「立即安裝」
#4 啟用 Elementor - 安裝完成後，啟用外掛
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 安裝後，應該已經為中文版本。
如果在顯示上為英文版的話，應該是 WordPress 的網站介面語言設定為「English」的關係。
到設定上面，更新語言吧，再看看 Elementor 是否已修改為中文版。
影片出現問題，請連絡我Elementor 教學 - 基礎
在基礎版會介紹基本功能，需要特別說明的會再補充。
#1 基礎工具介紹 ( 免費版 )
- Inner Section - 插入多欄位
- Heading - 插入引人注目的標題
- Image - 加入圖片，並設定大小、不透明度和其他設置
- Text Editor - 標準 WordPress 編輯器
- Video - 將 YouTube \ Vimeo \ Dailymotion 添加到設計頁面
- Button - 加入一個按鈕
- Divider - 分隔線
- Spacer - 插入空白間隔
- Google Maps - 加入谷哥的地圖
- Icon - 插入 Icon 圖示 ( Icon 和圖片是不一樣，請使用上注意。)
#2 一般工具介紹 ( 免費版 )
補充說明 -
#1 Google Maps ✅
- Icon
- Image Box
- Icon Box
- Image Carousel
- Spacer
- Tabs
- Accordion
- Toggle
- Progress Bar
- Sound Cloud
- Shortcode
- HTML
- Alert
- Sidebar
- 標題
- 圖像
- 文本編輯器
- 視頻
- 按鈕
- 圖像框
- 感言
- 圖標
- 圖標框
- 社會圖標
- 圖片庫
- 圖像輪播
- 圖標列表
- 計數器
- 進度條
- 標籤
- 手風琴
- 切換
- 星級
- 警報
- HTML
- 短代碼：輕鬆將任何外掛以短代碼的方式插入頁面中。
- 菜單錨
- 閱讀更多Read More
- 邊欄
- 谷歌地圖
- 聲音雲
- 分隔線
- 墊片
- 列
Elementor 教學 10不能錯過的功能
#1 模版
Elementor 的模版在官方網站都有介紹，官網上有個「 Template Library 」有超過 200個組件和主題可以使用。
但只有少部份是免費，但還是是推薦你上官網了解看看，這有助於你理解 Elementor 的功能及應用。
更多內容：【Elementor Template】模板開始打造一個 Landing Page 3分鐘教學
#2 Header 標頭
標頭的設計是簡單但重要的工作，它在頁面最上方的位置，只要開啟就會看到，這可以證明它的重要性。Elementor 提供多種 Header 的模板可供使用，但更重要的是你可輕易的學習和打造一個適合自己的標頭。
並且具有響應式 RWD 設計，因應不同的行動設置大小來自動調整頁面的設定。
更多內容：Elementor Header | 精美的標頭怎麼做? 3 個模版
Elementor 怎麼買才便宜?
#1 尋找促銷活動：黑色星期五
在每年的 11 月的月底，是美國的 Black Friday ，通常我常用的數位工具的軟體，都會有年度大折扣，最高來到 30% off ，簡單來說，黑色星期五對於 Elementor 來說，幾乎是唯一一次的折扣時間，所以如果你要購入便宜的 Elementor Pro 的話，千萬不能錯過這天。
#2 和朋友合購
合購其實十分的聰明，因為最便宜的 ESSENTIAL PLAN ，一個網站 / 年 需要 49 美金，而 ADVANCED PLAN 三個網站 / 年 只需要 99 鎂，相當一個網站只需要 33 鎂，比 ESSENTIAL PLAN 便宜了 34%。
更不用比 EXPERT PLAN 或是 AGENCY PLAN，不過有一點小問題，Elementor 是綁購買的用戶的帳戶，並非一個數位的「許可證」，也就是說，這個人需要一個後台的帳號進入別人的網站後，才能綁「許可證」，如果這個人不是熟人，那可能有一些安全問題，所以推薦選擇信任的人或是朋友一起購買。
#3 使用現金回饋信用卡
由於 Elementor 為國外公司，所以台灣的信用卡的時候，需要額外支付一筆國外刷卡
服務費用，如果你使用「高現金回饋」的信用卡，就可以最大程度抵銷這筆費用。
大叔是使用聯邦的「賴點卡」，國外刷卡 3% 回饋無上限，推薦給大家。
[elementor-template id="27700"]
#4 購買 Elementor 主機 + 編輯器
如果你對網站新手的話，其實選擇 Elementor 主機服務，其實是聰明的作法，每月只要 9.99 美金，主機加上 Elementor Pro 編輯器，細算的話，其實比不少的主機商費用更低，而且綁租一年，其實對於新手來說，是不錯的入門選擇。
而且 Elementor 有提供 30 天的退費政策，不滿意也不用客氣。
#5 加入 mo Studio 工作室的社團
現在加入 mo Studio 的社團的朋友，等於我們的工作夥伴。我們將以不到官網 2 折的折扣，一起學習使用 Elementor Pro。
加入後，Message 給管理員，讓我們告訴你下一步怎麼做。
希望這些提示能幫助您在購買 Elementor 時節省金錢，同時確保您獲得優質的產品和服務。
Elementor 使用心得
大叔目前網站也是使用【Elementor】設計的，如果你對這套工具有什麼問題，都可以在下面留言發問，如果我可以為你服務的話，這是我的榮幸。
讀者優惠
- Elementor Pro 大叔優惠請看 → mo Studio
- Crocoblcok 大叔優惠請看 → mo Studio
- 部落客專屬：用 Notion 打造一個 Wordpress 網站，讓你專心寫，其它問題大叔幫你解決 → mo Studio