Elementor Pro 教學 :WordPress 安裝購買+費用下載(功能指南)

Elementor Pro 教學 :WordPress 安裝購買+費用下載(功能指南)

這是一篇「 Elementor Pro 教學 」的進階版指南,如果是 Elementor 免費版教學,請參考這連結。

使用 WordPress 建置網站,頁面編輯器 通常是不可或缺的一環,除非做的是 小型部落格,那可能就不需用到。

除此之外,不論是 品牌官網設計架設購物網站 等 .. 各類型網站,有個好用的頁面編輯器,可以幫助你更快的製作出美觀的網站(省時又省力)。

好囉,我們看一下這次的文章目錄。


1. Elementor 主題是什麼?

Elementor 頁面編輯器
Elementor 頁面編輯器

Elementor 是全球知名的 WordPress 頁面編輯器,全球已經有 500w+ 次外掛下載量,基本上與所有主題兼容。可參考 Elementor 外掛教學

你不需會任何程式基礎,只要用區塊拖曳方式,就能客製化形象網站設計。

有關任何的頁面佈局、新增區塊功能、編輯區塊內容等 ..,都將變得更加簡單。

Elementor 形象教學示範

Elementor 有多種功能區塊,是建置網站的好幫手,當你心中簡單構圖完成,接下來只要拖放區塊,並放置在網頁上即可完成設計。

Elementor 多功能的區塊元素
Elementor 多功能的區塊元素

Elementor 有多種區塊模板和網站樣板,點擊按鈕就可套用,再從中進行修改自己喜歡的設計,可節省大量的建置網站時間。

Elementor 多種網頁佈局,選你所愛

購物網站盛行的時期,或許你想架設購物網站,Elementor 對於 WooCommerce 電商外掛,有良好的支援。

並為此開發了 WooCommerce Builder(購物網站編輯器),除了一般的頁面設計,你也能設計客製化的購物網站頁面。

像是添加購物車按鈕、產品價格、產品圖片和說明、相關產品列表、產品庫存提醒等 .. ,如下圖。

WordPress頁面編輯器 :Elementor 的 WooCommerce Builder 購物網站區塊功能(部分功能)
WooCommerce Builder 購物網站功能區塊(部分功能)

方案評論

Elementor 有免費版方案可使用,如果感覺不錯用且有更多設計上的需求,再升級為進階版即可。完整 Elementor Pro 進階教學

Elementor 進階版,有額外 50 多個專業元素功能、300 多種進階模板、主題編輯器、表單編輯器、彈出式廣告編輯器、WooCommerce Builder(購物網站編輯器)等 ..,有更多功能可以使用。

Elementor 進階版方案,分為個人用、公司用的兩大類型,裡面又有不同的方案,但能使用的功能幾乎都一樣,最大的差別是「 使用的網站數量 」

如果你只有一個網站會使用,只需購買最低的方案即可,依此類推。

產品定價

Elementor 個人用,起手價格是 $ 49 美元 / 年(約 $1,500 台幣 / 年),算是滿平價的費用,可應用在一個網站上,並享用它的全部功能。


2. Elementor Pro 如何購買?

如果你對 Elementor Pro 有興趣,那要如何購買呢?這邊帶大家簡單跑一次流程。

首先,前往 Elementor 方案頁面,如果個人(少數量網站)使用選 Individuals,如果是公司(多數量網站)使用選 Teams。

下圖,我是用個人的基本方案示範(適用一個網站),如果有多個網站需使用,就選擇適合的方案即可,裡面都有標示可供幾個網站使用。

elementor pro 教學 :購買安裝+費用下載
購買安裝+費用下載

填入相關購買資訊,這裡都需填寫英文,地址中翻英可用 中華郵政工具,姓名中翻英可用 外交部工具

elementor pro 教學 :填入購買資訊
elementor pro 教學 :填入購買資訊

最後確認金額,和選擇付款方式,完成後送出即可。

elementor pro 教學 :填入購買資訊
填入購買資訊

接著,可能會引導你設定登入密碼之類的,後面流程就照 Elementor 指示進行操作即可。

完成後前往 Elementor 會員後台,等等會教大家如何下載+安裝 Elementor Pro 外掛。

Elementor Pro 教學 :Elementor 會員後台
Elementor 會員後台

3. Pro 外掛安裝+憑證連線

登入並前往 Elementor 會員後台,在右上角會有下載 Icon,點擊下載 Elementor Pro 外掛。

Elementor Pro 教學 :Elementor 會員後台
Elementor 會員後台

前往 WordPress 後台,找到外掛 > 安裝外掛 > 上傳外掛,把剛下載的 Elementor Pro 外掛上傳安裝+啟用。

Elementor Pro 教學 :安裝 Elementor Pro 外掛
安裝 Elementor Pro 外掛

前往 Elementor > License,點擊 Connect & Activate,與 Elementor 系統進行串接。

Elementor Pro 教學 :Elementor Pro 系統連線
Elementor Pro 系統連線

輸入帳密登入 Elementor 後台,就會看到你的網域和帳號使用者,進行串接的圖示,點擊 Activate 連線。

Elementor Pro 教學 :進行網站串連
Elementor Pro 教學 :進行網站串連

如果有看到狀態顯示 Active,就代表網站的 Elementor Pro 功能,已經被順利激活了唷:)

Elementor Pro 教學 :Elementor Pro 憑證連線成功
Elementor Pro 憑證連線成功

接下來,我們就能享用 Elementor Pro 強大的能力了。


4. Pro 進階區塊+模板

Elementor Pro 功能解鎖後,有更多的進階區塊+模板,可以直接套用。

Elementor Pro 教學 :點擊模板功能
點擊模板功能

不論是區塊或是頁面類型,有標註 Pro 的都可以使用囉,如果你有多個網站架設需求,這會很有幫助!

Elementor Pro 教學 :Pro 進階區塊樣板
Pro 進階區塊樣板

5. Pro 元素介紹

Elementor Pro 提供多達 50 多種元素功能,基本上想要製作的功能,都可以直接拿來用。

如果加上第三方主題或外掛(有支援 Elementor 的),有些還會提供更多 Elementor 元素可用,簡單來說根本達到無敵境界。

像是 Astra Pro 主題Ultimate Addons for Elementor 外掛,或是 Soledad 主題 內建的 Elementor 擴充,都是相關例子。參考更多 佈景主題推薦

或是搭配 Essential Addons Elementor 外掛,都有提供非常多種元素功能。

下面我會挑選 Elementor Pro 的部分元素,做個簡單翻譯+介紹,那我們開始囉。

Elementor Pro 教學 :Pro 區塊元素一覽
Pro 區塊元素一覽

Posts 列表:可把多個文章 / 頁面 / 商品類型,用列表的方式呈現出來。

能設定顯示樣式、一欄顯示幾個、是否顯示圖片&尺寸、顯示標籤、顯示分頁、文章顯示條件等 ..。

Elementor Pro 教學 :Posts 列表功能
Elementor Pro 教學 :Posts 列表功能

Portfolio 作品集:可製作個人 / 公司作品集,或相關客戶案例。

Elementor Pro 教學 :Portfolio 作品集功能
Elementor Pro 教學 :Portfolio 作品集功能
  • 能設定佈局樣式
  • 作品顯示類型(文章 / 頁面 / 商品)
  • 作品顯示條件(例如,只顯示某分類 / 標籤 / 作者的作品)
  • 作品排序條件(例如,只顯示最近一個禮拜 / 一個月的作品)
  • 是否顯示分類標籤(訪客可點擊某分類標籤,會自動帶出分類下的作品)
  • 更多設定

Gallery 畫廊:跟上一個 Portfolio 作品集功能差不多,但點擊圖片會有圖片放大的輪播功能,滿適合有展示設計作品的需求。

Elementor Pro 教學 :Gallery 畫廊功能
Gallery 畫廊功能

Slides 輪播圖:輪播圖功能,可設定區塊高度、顯示導航、自動輪播、轉場效果、輪播速度、無限輪播等 ..。

Elementor Pro 教學 :Slides 輪播圖功能
Elementor Pro 教學 :Slides 輪播圖功能

Price Table 價格表:如果是提供軟體服務、專案服務等 ..(品項較少),這類型的價格表滿好用的,可更換內容細項、顯示樣式等 ..。

Elementor Pro 教學 :Price Table 價格表功能
Price Table 價格表功能

Elementor Pro 還提供另一種價格顯示元素,就是 Price List 價格清單,滿適合有多項產品類型、服務類型的呈現。

Share Buttons 社群按鈕:新增社群分享功能,可自訂顯示樣式。

Elementor Pro 教學 :
Share Buttons 社群按鈕

Form 表單功能:表單留言功能,有支援多種欄位類型、按鈕樣式設定、訊息送出後相關動作 ..

有關 Form 表單元素,因為網站有很多表單設計都需要用到它,像是聯絡表單、電子報訂閱表單、會員登入 / 註冊表單等 ..,所以我有特別寫一篇 如何製作+設計客製化表單,應該會有效的幫到你。

Elementor Pro 教學 :Forms 表單功能
Forms 表單功能

至於電子報訂閱表單,可搭配 MailChimp 電子報軟體,可以藉由這個平台完美的操作電子報行銷。

還有會員登入 / 註冊表單,常會用到社群快速註冊功能,可參考 Super Socializer 外掛教學,就能啟用此功能。


6. Pro WooCommerce 元素介紹

Elementor 和 WooCommerce 電商外掛 有完美的支持,我在 常見商品類型,有分享多種商品建立方法,可滿足不同商家的需求。

Elementor Pro 有提供多個元素,可用在 WooCommerce 頁面。但要留意的是,在不同的主題或頁面上,不一定會顯示所有的 WooCommerce 元素(有支援才會顯示)。

否則網站不是 架設購物網站,但卻出現 WooCommerce 元素在工具列,那也會有點不太合理。

下面我會挑選幾個 Elementor Pro 的 WooCommerce 元素來分享。

Elementor Pro 教學 :WooCommerce 相關功能
WooCommerce 相關功能

Product Images 商品圖片:支援多張商品圖呈列,可調整邊線或其他樣式。

Product Title 商品標題:設定商品名稱。

Product Content 商品內容:商品內容描述。

Add To Cart 加入購物車:購買按鈕。

我用上面提到的元素,快速設計一個單一商品頁面,實在很方便(下圖)。

Elementor Pro 教學 :單一商品頁面設計
Elementor Pro 教學 :單一商品頁面設計

Products 商品列表:新增商品列表功能。可設定顯示的商品條件,像是用近期商品、特價商品、特色商品、手動指定等 .. 作為顯示的條件。

Elementor Pro 教學 :Products 商品列表功能
Elementor Pro 教學 :Products 商品列表功能

還有許多功能,像是 Product Related 相關商品、WooCommerce Pages 頁面套入等 .. 功能,有興趣都可自行玩玩看:)


7. Theme Builder 主題編輯器

這是 Elementor 很酷的功能之一,可以用它打造自己的客製化網站佈局(網站主題)。

我們知道一個網站的組成,可能是由多個頁面組成,而且一般來說不同頁面的頭部、尾部都長的一樣,但如果我們想要不同頁面,呈現不同的頭部或尾部,那要怎麼做呢?

這個功能就派上用場啦!它能讓你自訂顯示條件,讓你在指定類型 or 指定頁面,顯示指定的頭部或尾部區塊,是不是很方便呢!

至於要如何做呢?下面我示範給大家看。

前往 Templates > 主題建構器,點擊常見的左上角「 新增 」也可以。

但這裡玩點不一樣的,我們試看看 Elementor 新功能,點 Try it now 就能前往 Theme Builder。

Elementor教學 :前往 Theme Builder 編輯器
Elementor教學 :前往 Theme Builder 編輯器

進入後,左手邊可選取想新增的類型,這邊我示範新增頂部 Header,選好之後點右上角的 Add New。

Elementor教學 :選擇新增類型
Elementor教學 :選擇新增類型

然後 Elementor 會自動帶入選擇類型的模板,像是我選 Header 頁首,就出現了很多相關的類型,可選擇自己喜愛的使用(如果打算自己設計,可直接關閉)。

Elementor Pro 教學 :Header 頁首模板
Elementor Pro 教學 :Header 頁首模板

進入後會看到左邊面板,Elementor 自動把頁首相關元素都放在前面了,方便我們選用。

這裡就可以自由設計區塊啦,編輯完成後點 發佈

Elementor Pro 教學 :編輯 Header 頁首區塊
Elementor Pro 教學 :編輯 Header 頁首區塊

發佈後會出現跟之前不太一樣的視窗。

你可以設定剛設計的區塊,想要在哪個頁面顯示(設定顯示條件),完成後儲存就搞定啦。

Elementor教學 :設定區塊顯示條件
Elementor教學 :設定區塊顯示條件

之後在設定的頁面條件,就會出現你剛剛設計的區塊囉!以上就是 Elementor 的 Theme Builder 主題編輯器 簡單介紹:)


8. Popups 彈出式視窗

我們在逛別的網站時,常會看到滑到某個地方,或點擊某個按鈕就跳出視窗,而視窗內容可能是商品或服務的訊息,或是打算蒐集訪客 Email 的欄位,都是滿常看到的!

Elementor Pro 有 Popups 彈出式視窗,功能非常的完整+齊全,下面我會示範如何製作一個彈跳視窗,然後蒐集訪客的 Email,我們開始囉。

Step1:新增 Popup 視窗

前往 Templates > Popups,點擊新增 Popup。

Elementor Pro 教學 :新增 Popups 彈出視窗功能
新增 Popups 彈出視窗功能

Elementor 會自動帶入 Popup 類型,幫版型取個名字,然後確認。

Elementor Pro 教學 :建立 Popups 版型
建立 Popups 版型

選擇喜歡的彈出式視窗模板,然後套用。

Elementor Pro 教學 :選取 Popups 版型
選取 Popups 版型

Step2:調整表單設定

點擊表單欄位,左手邊會顯示可調整項目,可更改標題文字、新增其他欄位等 ..。

Elementor Pro 教學 :Form Fields 表單欄位
Form Fields 表單欄位

切換到 Advanced 進階,設定欄位 ID(可任意取名,系統用來判別欄位用的),ID 務必要填寫,不然無法順利發信。

接著 Shortcode 會自動帶入 ID 的值(除非沒有帶入,再自行填寫)。

Elementor Pro 教學 :Form Fields 表單進階選項
Form Fields 表單進階選項

切換到 Email 選項卡,這是當訪客留言完,信件傳送的相關設定。Elementor 會幫你帶入預設值,你也能自行修改。

Elementor Pro 教學 :Email 欄位設定
Email 欄位設定
  • Message 信件內容:的預設短代碼功能,是 Elementor 會自動帶入所有訪客留言的值(所以剛上面才需要設定欄位 ID 的原因在這),然後傳到你的信箱。
  • Message 信件內容:能自行編輯程式碼內容,欄位支援動態內容顯示。
  • To 收件者:可填入自己的系統信箱。
  • From Email 發信來源:系統預設是網域信箱(可維持預設值,單純顯示用的,沒特別功用)。

「 Additional Options 額外選項 」可客製化顯示訊息,像是表單傳送後的成功訊息等 ..。

Elementor Pro 教學 :Additional Options 額外選項
Additional Options 額外選項

上面都設定完畢後,就點擊發布。

Step3:設定 Popup 顯示條件

Conditions 是設定 Popup 要在哪邊顯示,有像是全網站顯示、指定文章顯示等 ..,有很多條件可運用。

我選擇 Entire Site 全網站通用,點 Next。

Elementor Pro 教學 :Conditions 顯示條件設定
Conditions 顯示條件設定

Triggers 是彈出式視窗的觸發條件,有 On Page Load 到了幾秒就顯示、On Scroll 網頁滑到指定高度百分比就顯示、On Scroll To Element 滑到指定位置就顯示、On Click 點擊就顯示等 ..,多種觸發條件。

下面我用 On Scroll(網頁滑到指定高度百分比就顯示)做示範。

Elementor Pro 教學 :Triggers 觸發條件設定
Elementor Pro 教學 :Triggers 觸發條件設定

Advanced Rules 是進階規則設定,有 Show after X page views 瀏覽幾個頁面就顯示、Show up to X times 總共出現幾次等 ..。

這裡我不開啟功能,如果有需要你也能使用,確認後送出。

Elementor Pro 教學 :Advanced Rules 進階規則設定
Advanced Rules 進階規則設定

Step4:前台測試成果

好囉,接著前往網站前台,並把滾動頁面超過一半的高度,就會看到漂亮的彈出式視窗出現啦,就能蒐集訪客的資訊了。

Popup 彈出式視窗出現啦!
Popup 彈出式視窗出現啦!

以上就是 Elementor Pro 的 Popup 彈出式視窗的簡單示範,不知道大家有沒有學會呢:)


9. 自訂程式碼 / 字型 / 圖示

Elementor Pro 有自訂程式碼(Custom Code)、自訂字體(Custom Fonts)、自訂圖示(Custom Icons)功能,可滿足客製化需求,我挑選其中一個做分享。

Custom Code 自訂程式碼 是我覺得 Elementor Pro 滿佛心的小功能,因為之前嵌入 GA 分析碼、FB 像素等 ..,都還需額外安裝外掛嵌入。

這功能可讓你為不同程式碼片段,分開取名方便管理,還能設定在指定頁面才會執行。

下面示範嵌入 GA 追蹤碼(如果你有其他的代碼,也可以這樣處理),我們開始囉!

使用 Custom Code 自訂程式碼功能
使用 Custom Code 自訂程式碼功能

Location 是程式碼的放置位置,有 head 放置頁首、body start 內容開始、body end 內容尾部可選擇,有關 GA 碼我就放置頁首。

Priority 是權重排序,因為一個網站可能會有多個嵌入碼,數字越小排序越前面。

輸入要嵌入的程式碼
輸入要嵌入的程式碼

點擊發布,會出現顯示條件設定,這裡我用 Entire Site 全網站都執行,確認後送出。

Elementor Pro 教學 :設定顯示條件
設定顯示條件

備註:如果使用的螢幕比較小,右下角的儲存&發布按鈕,可能會在視窗之外,只要把瀏覽器百分比縮小就可以正常點擊了。(因為我用 13 吋螢幕操作,一度找不到送出按鈕QQ)

恭喜你,這樣程式碼就嵌入成功囉!

Elementor Pro 教學 :程式碼嵌入成功
程式碼嵌入成功

常見問題

如果購買一年的許可證,但沒有繼續續約,我的網站還能繼續工作嗎?


當然可以。你現有的項目將保持不變,但將無法繼續訪問 Elementor Pro 進階功能,等於就是回到免費版的使用資格。

Elementor Pro 方案購買完,如果打算升級方案,有辦法做到嗎?


可以的。Elementor 會員後台隨時都能讓你升級方案,或是延長使用時間。

我可以使用 Elementor Pro 幫客戶架設網站嗎?


可以的。Elementor 當初在建立軟體時,就考慮了團隊運作的模式,如果你有多個客戶需服務,也可購買 STUDIO(能架設 100 個網站)或 AGENCY 方案(能架設 1000 個網站)。

除了 Elementor 之外,還有推薦的優質頁面編輯器嗎?


有的。WordPress 頁面編輯器 領域,是一個很競爭的市場,有許多專業團隊都相繼投入開發。

除了 Elementor 以外,使用 Divi 也是熱門的選擇,因為購買 Divi 不光只有頁面編輯器能用,還包含 Elegant Themes 公司開發的 Extra(佈景主題)、Bloom(電子報行銷)、Monarch(社群工具)等 ..,都能同時使用。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

3 thoughts on “Elementor Pro 教學 :WordPress 安裝購買+費用下載(功能指南)”

  1. 請問: Elementor Pro 與購買了 ASTRA ESSENTIAL BUNDLE 裡面Ultimate Addons for Elementor
    究竟是差別在哪邊不是很懂?

    1. 嗨,Ultimate Addons for Elementor 主要是針對 Elementor 做一些元素功能的擴展。

      至於 Elementor Pro 不光是只多了可用元素,還包括其他功能,這篇文章大致上都有介紹到~

Leave a Comment

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

回到頂端