讀者權益

在閱讀前,請容許大叔聲明幾件事情:這些事情對您可能蠻重要的:

  • 內容中連結可能有參加聯盟計畫,這並不影響您的購買權利。
  • 聯盟計畫和廣告收入都會做為網站經營基金。
  • 而部份收入將捐給流浪動物基金會。(公益捐款明細)
  • 喜歡我的文章的話,請幫我這樣做,點擊下面的拍手圖示。

#17 Elementor Pro 教學:2023 最完整實戰指南

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

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

  • 後台操作速度
  • 設計以及修改網頁花太多時間
  • 網站前端的速度也說不上太快
  • 結果我又換回 Elementor 只是這次是付費版 Elementor Pro,後來我才發現,網站長的醜不是工具的問題,是「我的問題」。

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

    Elementor 是什麼?

    如果你正在打造自己的網站,但不想花費大量時間和金錢聘請開發人員,那麼你絕對需要了解 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 萬網站使用,可以在網路上找到大量的學習文章。
  • " controls="" src='https://elementor.com/marketing/wp-content/uploads/2021/06/02_MainVideo_1066_600_HR201-1.mp4'>


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

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

    Elementor Pro 又是什麼?

    如果你是 WordPress 網站設計新手,推薦你使用 Elementor Pro 這個工具。Elementor 可以幫助你在自架網站上創建漂亮的網頁設計,並且非常易於使用。

    Elementor Pro 3 個特點

    和免費版本相比,它有 3 個漂亮的特點:

  • #1 專業元素功能 – Elementor Pro 提供了更多的元素設計選項,除了讓我們的網站美觀之外,還可以加入許多專業功能,例如說:「表單」、「動態照片或橫幅」、「定價表」等。 這些功能都能讓我們的網站更加豐富和多樣化,大叔喜歡自己架設網站的理由之一就是它是「自由的」,網站的風格和功能都能依我的們的需求來調整。 它可以是個人作品集,也可以是旅遊的記錄中心,也能成為一個電子商場。
  • #2 更多範本和模板 – Elementor Pro 提供實用的功能的同時,還有大量模板可供選擇,豐富的模板庫,涵蓋各種類型的網站,幫助我們使用少少的時間,完成美美的網站。 另外,還可以使用主題構建器,可以計對「Header」、「Footer」或是文章分類等頁面來設計和修改,總之,我們控制著任何大大小小的細節;唯一的問題是,改上癮的你可能會睡眠不足。
  • #3 動態內容 – 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 的「易操作」、「學習速度快」的特點,讓我們可以在最短時間內建立網站,為公司和個人網站提供最佳的線上服務和行銷宣傳功能。

    ▼ 2022 年 Elementor Pro 費用

    Elementor Pro


    ▼ 2022 年 Black Friday 費用

    Elementor Pro

    如果不喜歡 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 付費主題

    Elementor Pro


    Avada 是大叔第一個付費主題,也是第一個選擇不再使用的主題。對於一個新手來說,Avada 雖然功能強大,但太吃資源了,讓整個主機的速度體驗很差。

    Avada 是許多網站站主推薦 WordPress 付費主題,但是同時也很多人表示速度不佳,使用的難度很高。

    反觀,Elementor Pro 也有許多站主推薦,而且主機的消耗更少,加上「拖放」十分好上手。總觀來看,學習難度較低,但 Elementor Pro 是一款訂閱付費型的外掛,每年大約要付 59 美金,對於新手來說,每年快 2000 台幣的網頁編輯器是一筆需要思考的決定。

    我簡單做幾個 Elementor Pro 和 Avada 付費主題的比較,給大家參考:

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


    總之,Avada 確實很強大、功能很多,做出來的網站也十分精美,但是網站速度很慢啊! 這是由於新手使用的主機規格,這時候,安裝一個功能強大軟體的結果就是「ㄍㄨㄟ速」,造成使用者在瀏覽網站的時候體驗差,不能說 Avada 不好,只是沒有這麼適合你。

    Elementor Pro 下載和安裝

    Step 1. 安裝 Elementor Website Builder

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

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

    Elementor Pro

    Step2. 安裝 Elementor Pro

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

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

    Elementor Pro


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

    Elementor Pro


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

    Elementor Pro


    Step3. 完成身份驗證

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

    Elementor Pro

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


    Elementor Pro


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

    Status:Active ,你的帳號已經開啟。

    Elementor Pro


    Elementor 基本操作 & 教學

    元素是什麼?

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

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

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

    Elementor Pro

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

    " controls="" src='https://elementor.com/marketing/wp-content/uploads/2022/01/14_Designer_1064_600_V3-1.mp4'>

    #1 拖曳設計 – 讓網頁設計變得簡單。

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

    Elementor Pro

    Elementor Pro


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

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

    Elementor Pro


    Step.3 編輯元素

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

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

    Elementor Pro
    Elementor Pro


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

  • 標題、內容、圖片
  • " controls="" src='https://lashiblog.com/wp-content/uploads/2023/03/elementor_基本操作.mp4'>

    #2 自訂 CSS

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

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

    Elementor Pro

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

    響應式設計(Responsive Design)是一種網站設計技術,可以使網站在不同的設備上呈現不同的佈局和設計。

    平時,在不能使用電腦的地方,用手機或是平板來上網、查資料,是再正常不過的事情,所以響應式設計,就是讓網站在不同的行動裝置上,都可以呈成出我們希望的視覺效果。

    使用 Elementor Pro 的響應模式,我們可以針對「平板」、「手機」來修改樣式,只要在左側下方找到「響應模式」的圖示,然後點擊。

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

    ▼ 響應模式圖示

    Elementor Pro

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

    Elementor Pro

    #4 框線設定

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

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

    Elementor Pro

    #5 導覽器 – 段、欄、元素

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

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

    Elementor Pro


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

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

    Elementor Pro

    Elementor Pro 功能介紹

    #1 主題編輯器

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

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

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

    目前提供頁面編輯的有:

  • 頁頭 Header
  • 頁尾 Footer
  • 文章頁面 Single Post
  • 網頁頁面 Single Page
  • 分類頁面 Archive
  • 搜尋結果頁面 Search Results
  • 產品頁面 Products Archive
  • 404 頁面

  • Elementor Pro


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

    #2 動態內容

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

    Elementor Pro

    #3 彈出視窗

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

    Step1. 新增「彈出視窗」

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

    Elementor Pro


    Step2. 設計

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

    Elementor Pro


    然後修改內容。

    Elementor Pro


    Step3. 設定顯示

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

    Elementor Pro


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

    Elementor Pro
    Elementor Pro


    Step4. 設定 Triggers & Advanced Rules

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

    Elementor Pro

    Elementor Pro

    整理 & 心得

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

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

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

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

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

    讀者優惠

  • Elementor Pro + Crocoblock 組合包
  • 主機 + Elementor Pro 優惠計畫
  • 「中年大叔的秘密武器,WordPress 網站獲利攻略大揭密!」 – 下一篇給他看下去
  • 全課程9折 (募資課程除外)
    複製優惠碼
    aohahow
    2024/01/01-12/31
    HAHOW 好學校
    不限金額 9 折
    複製優惠碼
    aohahow
    2023-12-31-2024-12-31
    Hahow 好學校

    目錄:
    #17 Elementor Pro 教學:2023 最完整實戰指南

    菈喜大叔 - 減法生活提案

    關於大叔

    文章歡迎轉載,請說明出處。

    相關文章

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *