你是否曾經…
- 花了很多時間挑選一個精美的Wordpress佈景主題,卻怎麼挑都挑不到自己喜歡的外觀設計
- 想讓自己的網站外觀更符合自己所想要的樣子,但苦於不會寫程式而放棄了
- 想要在自己的網站加上特殊功能,卻不知從何下手
其實只要你學會使用Elementor這款超好用的Wordpress視覺化頁面編輯器,這些煩惱就再也不是煩惱了!
這篇Elementor教學,會帶你了解Elementor的操作介面、使用邏輯、基本&進階元素以及其他好用的功能,就算你完全不懂前端程式語言,你也能跟專業網頁設計師一樣,製作出設計感十足又實用的網站!
目錄
Elementor 是什麼
Elementor視覺化頁面編輯器外掛是在2016年推出的,這款外掛推出的初衷是為了要縮短網頁工程師們在開發網站的時間、簡化開發流程,讓製作網站變得更輕鬆。
這款視覺化頁面編輯器在短短的幾年內就達到500萬次的下載數量!
為什麼Elementor這麼受歡迎?
使用Elementor,能透過拖拉的方式,在不用寫任何程式語言的情況下,也能製作出功能強大又美觀的網站。搭配內建的許多功能元素,需要什麼功能就直接將該元素拖拉到自己的網站上,操作起來非常直覺、簡單!
以往要製作網頁,需要寫HTML&CSS來呈現出想要的網站內容及外觀,只有學過程式語言或有工程背景的人才能辦到
現在,不論你是行銷人、業務人員、部落客、醫生、律師、學生,你都能透過Wordpress搭配Elementor輕鬆架出符合自己需求的專業網站!開始在網路上累積自己的影響力,對於生活在這個自媒體時代的我們來說,真是一大福音呀!
Elementor 優缺點分析
優點
- 100% 支援繁體中文
- 不需要會寫程式:
如果你是Wordpress架站新手,不會任何程式語言,Elementor將會是你最得力的架站工具,用拖拉的方式就能輕鬆將腦海中網站的樣貌實際呈現出來 - 加快架站流程:
比起Coding,Elementor提供多種樣板讓你直接套用,再將內容、顏色修改成自己想要的樣子,可以大幅縮短開發網站的時間
- 非常直覺化的操作:
在Elementor的操作介面,你可以很輕易地用滑鼠拖拉需要的網站元素到頁面上,需要什麼就直接放到頁面上,想要網站元素放在網頁的哪個位置一樣都能輕鬆拖拉完成,真的非常直覺好上手!
- 即時預覽模式:
當你在製作或修改網頁的時,你可以即時預覽剛剛加入的網頁元素,在整體頁面呈現的樣子,如果排版有問題,都能立刻回到編輯介面修改
- 可以高度客製化自己的網站:
不論是網站的佈局、外觀樣式,包含頁首、頁尾、側邊欄、內容,你都能透過Elementor提供的50多種元素,設計出自己想要的樣子
- 響應式設計:
Elementor可以讓你調整不同裝置上的排版、樣式,讓你以符合不同裝置的大小設計頁面,不論讀者使用哪一種裝置觀看你的網頁,都能有良好的體驗
- 保留完整修訂紀錄:
在編輯介面的下方,可以看自己修改的歷史紀錄,如果有不小心刪除的區塊都能馬上復原,不用花時間重新製作
- 遇到問題找得到解法:
Elementor已經有超過500萬的下載次數,你遇到的問題,也會有人遇過,所以只要Google搜尋一下就能到解決方案
- 多種擴充外掛:
因為有太多人在使用這一款頁面編輯器,基本上Elementor已經自成一個生態系,有許多不同功能的擴充外掛,可以滿足你各種網站功能的需求
- 可以製作各種類型的網站:
Elementor有很多區塊模板、頁面樣板、網站元素給你使用,作品集網站、形象網站、部落格網站、電商網站(付費版有支援WooCommerce)、新聞媒體網站、活動網站…等,都可以透過它來製作
- 豐富的Demo樣板:
超過300種頁面樣板供你選擇,找出自己喜歡的樣式,再加上不同的網站元素,就能輕鬆製作出功能強大又兼具設計感的網站
- 支援多種佈景主題:
幾乎所有的Wordpress佈景主題都能跟Elementor搭配使用
延伸閱讀:
如果你還找不到適合自己的Wordpress佈景主題
可以參考我寫的這篇Astra主題教學:
Astra主題教學-1款幫你搞定各類型網站的WordPress佈景主題
因為Astra輕量、乾淨簡潔的主題架構,真的非常推薦搭配Elementor一起使用
缺點
- 完整功能需付費:
免費版本不但功能較陽春、樣板較少,有許多實用的功能是沒有包含在內的。
- 佔主機空間:
Elementor是一款大型外掛,佔據較多的主機資源,也因此在選佈景主題時,要選擇較輕量的主題,才不會拖慢了網站的載入速度,進而影響使用者體驗
延伸閱讀:
使用Elementor這種大型外掛,你需要穩固且強大的Wordpress主機,確保網站的載入速度不會被拖慢
Cloudways完整教學:架設WordPress網站的No.1主機!
Elementor 方案介紹
Elementor頁面編輯器有分為免費版本&付費版本
下面我將為你詳細介紹4個版本之間的差異

免費版功能
- 拖拉式編輯器
- 響應式編輯
- 40+種網站基本功能元素
- 30+種基本模板
付費版功能
- 拖拉式編輯器
- 響應式編輯
- 50+種網站進階功能元素
- 300+種進階模板
- 10+種全站模板套件
- 主題建構器
- 表單建構器
- WooCommerce建構器
- 彈出式視窗建構器
- 1年客服支援
- 1年外掛更新
這些功能都會在下面的教學詳細介紹呦!
付費版價格
Elementor只有年費制,沒有買斷方案
這3個付費方案的差別只在於,可以將Elementor使用在多少個網站上
- US$49/年:1 個網站
- US$99/年:3 個網站
- US$199/年:1000 個網站
免費版本的功能相對比較少,除了網站功能元素、模板較少外,像是主題建構器、WooCommerce建構器等需要付費才能使用。
想要真正體會Elementor到底強大在哪裡,真的非常建議直接購買付費版本。或是需要架設一個電商網站,購買付費版本使用WooCommerce建構器,可以幫助你更快速架設出一個功能&美感都兼具的電商網站。
如果你跟我一樣是個WordPress接案工作者,直接購買US$199/年:1000 個網站的方案可以說是最划算,才不用每接一個案子就要另外再花錢購買Elementor。
安裝&啟用Elementor教學
下載 Elementor
前往 WordPress 後台 > 外掛 > 安裝外掛 > 輸入Elementor > 立即安裝 > 啟用

購買 Elementor Pro
記得要先下載Elementor外掛才能使用Elementor Pro呦!
選擇自己需要的方案

填入基本資料付款成功後,先到信箱收確認信
登入帳號 > My Account
點擊 Download ZIP 將檔案下載至電腦桌面

啟用 Elementor (Pro License)
回到 WordPress 後台 > 外掛 > 安裝外掛 > 上傳外掛檔案 > 啟用外掛

接這你會看到後台上方出現這個畫面
點擊 Connect & Activate

Elementor就會自動幫你把網站&你的License連線
點擊 Activate

當你看到這個畫面時,代表你已成功激活你的License了

如果還是有問題可以參考這個安裝Elementor Pro的教學影片
Elementor 基本設定
前往 WordPress後台 > Elementor > 設定
- 內容類型
- 停用預設顏色
- 禁用預設字型
在內容類型的地方選擇你想要用Elementor編輯的選項(開啟權限)
建議 “文章” 不要勾選,編輯文章用Wordpress內建的古騰堡區塊編輯器就好,不然之後文章多了,每篇都用Elementor編輯會拖慢網站整體速度
若勾選 “停用預設顏色&禁用預設字型”,你網站的預設字型&預設顏色會是你佈景主題的預設樣式
Elementor頁面編輯器&佈景主題都有各自一套預設的樣式,可以依照自己的偏好選擇要用哪一套 在設計網站時,每個元素的樣式、字型還是能獨立設定,這邊指的是預設樣式
如果想要知道怎麼設定佈景主題字體&顏色的預設樣式,可以參考我寫的這篇 Astra教學文(章節8.2)

延伸閱讀:
WordPress後台教學:新手使用WordPress的完整攻略
Elementor 操作介面導覽
如何進入Elementor操作介面
Step 1
首先,我們要先新增一個頁面
前往 WordPress 後台 > 頁面 > 新增頁面

Step 2
在右側的地方先設定你要的頁面屬性,共有4個選項

- 預設範本:
呈現你使用的佈景主題的頁面佈局方式 - Elementor 畫布:
呈現一個空白頁,沒有頁首、頁尾、側邊欄,讓你可以很自由地發揮創意,設計出自己要的頁面樣式 - Elementor 全寬:
只保留頁首、頁尾,內容區塊呈現100%全寬 - Theme:
這個選項跟預設範本一樣,會呈現你使用的佈景主題的頁面佈局方式
Step 3
選好頁面屬性後,記得按發佈頁面,並且到Worpress 後台 > 外觀 > 選單將該頁面新增至主選單

若之後有修改頁面屬性,也記得要按右上角的更新呦!
Step 4
點擊 使用Elementor 編輯按鈕,就可以開始使用Elementor設計你的頁面囉!
接著你就會進入到這個畫面

Elementor全局設定
點選左上角的漢堡icon

你會進到這個畫面
接下來會先介紹Site Settings 網站設定跟User Preferences使用者偏好有哪些功能可以使用,Theme Builder主題建構器會放在後面獨立一個章節做介紹

Site Settings 網站設定

在Site Settings 你可以設定網站整體的顏色、字型、排版(標題排版、顏色)、按鈕樣式、圖片、表單欄位、網站Logo、網站名稱、背景顏色、網站寬度、燈箱、加入客製化CSS語法
這邊你所設定好的每一個細節都會成為你的網站預設樣式,當你在設計網站時,若有元素想要呈現特定樣式或顏色,都可以再各別設定
需要特別注意的是,Global Colors &全域字型,如果你有在前面Elementor基本設定中,勾選停用預設顏色&禁用預設字型,你的網站會使用你在佈景主題設定的顏色&字型
若你想用Elementor設定網站字型及顏色,這兩個選項就不要勾選

User Preference 使用者偏好
- UI Theme:
可以選擇Elementor操作介面呈現白底黑字&黑底白字
- Panel Width:
這邊可以調整Elementor操作介面的寬度

Elementor操作介面-底部功能介紹
接下來,我們要來看Elementor底部的功能列表
由左到右分別是:設定、Navigator、修訂紀錄、響應模式、預覽變更、更新按鈕

設定
這邊你可以設定頁面標題、頁面的發佈狀態、精選圖片、頁面佈局(預設值、Elementor畫布、Elementor全寬、Theme)

Navigator 頁面結構導覽
這邊你可以看到整個頁面的結構,每個區塊的結構Navigator都幫你一一列出
有時候當頁面的元素多了,會不方便編輯,你就可以使用Navigator,直接點擊該元素進行修改

修訂紀錄
修訂紀錄會記錄下每個你在設計網站時的動作,如果有不小心誤刪的元素,你可以到修訂紀錄還原,只要點擊該動作,元素就會重新顯示在頁面上,不需要再花時間重新製作

響應模式
用手機瀏覽網頁的比率逐年攀升,RWD響應式網頁設計可以說是非常重要
Elementor的響應模式可以讓你預覽你的頁面在桌機、平板、手機的顯示狀態
有時候平板、手機會有跑版的狀況,要記得在製作完美個頁面時,用響應模式檢查該頁面在不同裝置的排版,這樣能幫助你的網頁有較佳的使用者體驗

桌面的顯示狀態

平板的顯示狀態

手機的顯示狀態

預覽變更
Elementor可以讓你在設計網站的同時,即時的查看該頁面實際在瀏覽器的顯示狀況,有不滿意的地方可以馬上做修改
更新按鈕
記得每次做完修改後,都要按更新按鈕,Elementor才會將修改的內容儲存下來
主要功能介面
Elementor的主要功能介面有3個選項
- 元素
- 全域
- SEO

功能元素
Elementor的元素可以說是網頁設計最重要的一環,你可以依照自己網站需要的功能,將不同的元素拖拉到頁面中,對於不會寫程式的人來說,真的非常方便!
免費版元素

Pro版 元素

主題元素(Pro)

WooCommerce 專用元素(Pro)

Elementor免費版元素教學
如果你想要了解要怎麼運用這些元素來建構自己的網頁的話,可以參考Ferdy Korpershoek的這2個影片,他會手把手的帶你了解每個元素要怎麼使用。
Elementor付費版元素教學
全域
這個區塊是讓你儲存常用元素的地方,這樣你就能在其他頁面,將已經設計好的元素直接拖拉進去,加快網站設計流程。

只要在Widgets(元素)的框框內按右鍵,點擊Save as a Global就能成功將該元素儲存到全域的欄位

SEO
我的Elementor 介面最右邊還有一個SEO欄位,是因為我使用Rank Math這一款SEO外掛,它與Elementor完美整合,讓我可以在使用頁面編輯器時,同時檢查頁面的SEO優化

延伸閱讀:
如果你還沒找到一款適合自己的SEO外掛,可以參考我寫的這篇文章:
Rank Math教學全攻略,1款讓你網站排名飆升的終極SEO外掛
使用Elementor前必須知道的事
在我剛開始接觸Elementor頁面編輯器時,我腦中有非常多種疑問,想要趕快設計出一個美美的網頁,卻不知道要怎麼開始
例如:
- 要如何添加文字內容?
- 要如何置入圖片、影片?
- 要如何修改字型、字體大小、文字顏色?
- 要如何把頁面排版調成我想要的樣子?
- 要如何加入進場動畫效果?
- 為什麼大家都說用Elementor就可以做出很美的網頁?
- 我也想用Elementor做出有質感又實用的網站,要從哪邊著手?
如果你也有類似的疑惑,在進入Elementor教學之前,我想先解釋Elementor頁面組成的結構,這樣可以讓你更快上手Elementor,大幅縮短摸索的時間!
Elementor頁面區塊邏輯
用Elementor製作的頁面都是由3大元素所組成的
分別是
Sceion(區塊) > Column(欄)> Widgets (元素)

當你使用Elementor在設計頁面時,他會讓你選擇Sceion(區塊)架構,如下圖所示。
你可以選擇要在這個Sceion(區塊)裡,放置多少個Column(欄)


當你選擇完你的Section(區塊)架構後,就會呈現如下圖
最外圍以藍色方框呈現的是 Section(區塊)
中間以灰色方框呈現的是Column(欄)
最內層+的區塊就是你放置Widget(元素)的地方

如下圖所示
Sceion(區塊)裡面可以有很多個Column(欄),而Column(欄)裡面又可以有很多個Widgets (元素)

Elementor編輯的3大選項
當我們在使用Elementor編輯頁面的區塊時,你都可以在左側Elementor的操作介面看到3個選項
分別是
- 內容
- 樣式
- 進階
使用不同的Widgets(元素),在這3個選項裡可以修改的東西會些需差異,但邏輯上都是一樣的。
繼續往下看更詳細的教學,你就能了解Elementor背後的設計邏輯

內容
在這個選項裡,你所修改的屬於HTML的範疇
HTML是一種標記語言,它會告訴瀏覽器網頁要怎麼呈現
網頁上的文字、圖片、按鈕…等都是屬於HTML的範疇
想了解更多關於HTML的觀念,可以參考這篇文章
以標題這個Widgets(元素)為例 你可以在內容這個選項,修改標題的文字、連結、尺寸、HTML標籤、位置

樣式
在這個選項裡,你所修改的屬於CSS的範疇
CSS是樣式規則語言,它不會單獨存在,而是用來輔助HTML的呈現方式
也就是說HTML內容的外貌 ex.字體大小、字型、字體顏色、字體粗細..等都是CSS掌管的
想要了解更多關於HTML的觀念,可以參考這篇文章
以標題這個Widgets(元素)為例
在樣式這個選項,可以設定文字的顏色、排版(字體粗細、大小、行高)

進階
在這個選項裡,你所修改的屬於CSS & Javascript的範疇
進階 > 邊界&邊框間距是由CSS掌管

Motion Effects動畫的部分則是屬於Javascript的範疇
Javascript是腳本語言,控制網站上的動畫效果、特效…等
想要了解更多關於HTML的觀念,可以參考這篇文章
以標題這個Widgets(元素)為例
在進階這個選項,你可以調整標題的捲軸特效、滑鼠特效、進場動畫…等。

右鍵功能
Elementor的右鍵功能可以幫助你加快設計頁面的速度
複製 (1)
將整個區塊複製一個一模一樣的,你可以選擇要複製Section(區塊)、Column(欄位)、Widgets(元素)
如下圖所示

複製 (2)
你可以複製區塊的樣式(在樣式選項的所有設定)
貼上樣式
如下圖,我複製 (2)左邊的藍色按鈕
原本右邊按鈕為紅色,當我點擊貼上樣式時,它的顏色就會跟右邊的按扭一樣,這樣就不用重新調整樣式設定了!

區塊編輯小技巧
當你想要編輯
- Section(區塊):點擊白色6點 icon
- Column(欄位):點擊灰色欄位 icon
- Widgets(元素)點擊白色鉛筆 icon
接這就可以開始進行區塊的內容、樣式、進階設定

分析頁面元素
為了讓你更了解如何使用Elementor設計頁面
我將分析我的網站MONICA WEBS的關於頁面
讓你一目了然,一個頁面是由哪些元素組成、如何設計的
你可以點進去看一下整個頁面的樣式,這樣看下面的分析會比較有概念
這個頁面有4個 Section(區塊)

上圖包含的Widgets(元素):
- Section (區塊)x1
- Column(欄)x1
- 標題 x1
- 文本編輯器 x1
- 按鈕 x1
- 背景圖片+背景覆蓋

上圖包含的Widgets(元素):
- Section(區塊 )x1
- Column(欄)x2
- 標題
- 圖片
- 文本編輯器
- 社交網絡服務圖示

上圖包含的Widgets(元素):
- Section 區塊
- Column 欄 x1
- 標題
- Section 區塊 (Inner section)
- Column 欄 x3
- 圖示
- 標題
- 分割線
- 文本編輯器

上圖包含的Widgets(元素):
- Section 區塊
- Column 欄 x3
- 標題
- 表單
後台Templates 版型庫
Saved Templates 已儲存的版型
前往 WordPress 後台 > Templates > Saved Templates
在後台 Saved Templates 的地方,你可以看到你在使用Elementor頁面編輯器時,儲存下的
- 頁面
- Section 區塊(段)
- Widgets 元素(全域小工具)
你可以在這邊新增範本、匯入版型、匯出版型、編輯範本
匯入版型
你在網路上下載別人提供或自己購買的Elementor版型,都可以將它們匯入套用在這個網站上
匯出版型
在這個網站製作出來的版型,你也可以將其匯出,套用在其他網站上

接下來我會教你如何在使用Elementor時,儲存頁面、區塊(段)、元素(全域小工具)
儲存頁面
當你用Elementor製作完一個頁面後,到Elementor操作介面右下方,點擊更新按鈕旁邊的三角形icon,就可以將設計好的頁面儲存成版型

儲存Section區塊(段)
當你在製作頁面時,如果有一個Section 區塊會一直重複使用,就可以將該區塊儲存下來,下次就不用再重新製作一個區塊,可以節省很多時間!
製作完一個區塊後,在區塊白色6個點的icon按下右鍵 > 儲存成版型

儲存Widgets元素(全域工具)
在元素右上角白色鉛筆的icon按下右鍵 > Save as a Global
你就能將該元素儲存成全域小工具了

儲存完成後,你就能在WordPress 後台 > Saved Templates的地方看見剛剛儲存的頁面、區塊(段)、元素(全域小工具)
彈出式視窗(Pro)
用Elementor Pro可以製做出各式各樣的Pop up視窗(Pop up彈出式視窗為付費版功能)
彈出式視窗有很多種功能:訂閱網站電子報、索取免費資源、索取限時優惠卷、公布最新消息…等。
Elementor可以讓你設定要在哪些頁面出現 Pop up、何時出現、觸發條件、顯示規則
趕緊繼續往下看Elementor的Pop up教學吧!
Step 1
前往 WordPress 後台 > Templates > 彈出式視窗 > 新增

Step 2
建立 Pop up版型
填入版型名稱 > 建立版型

Step 3
選擇你要的Pop up 樣式模板
Elementor提供很多不同類型的Pop up模板
你可以依照自己的需求做選擇
設計Pop up樣式跟上面使用Elementor教學是一樣的,這邊就不再重複一次

Step 4
條件設定
選擇Pop up要包含或排除在哪個頁面

Step 5
觸發器設定
這邊你可以選擇Pop up出現的時機
- 載入頁面幾秒後出現
- 滾動到頁面幾%時出現
- 滾動到哪一個元素(Widgets)時出現
這邊要使用CSS語法中的選擇器功能,在進階選項 > 自訂CSS的地方可以設定
- 在頁面點擊 X 次後出現
- 在沒動作 X 秒後出現
- 在瀏覽者要離開網站(關閉視窗)時出現

Step 6
進階規則設定
這邊可以設定 Pop up的顯示規則
- 在瀏覽網頁X次後出現
- 在哪一個Sessions後出現
- 最多顯示次數
- 從哪一個網址進入到你的網站 (或許是你的 FB、IG 粉絲專頁進來時顯示)
- 到達搜尋引勤/外部連結/內部連結時顯示
- 瀏覽者的登入狀況
- 在桌上型電腦/平板電腦/行動裝置上顯示

Theme Builder 主題建構器(Pro)
Theme Builder 主題建構器是一個非常強大的功能,需要購買Elementor Pro才能使用,他可以幫你高度客製化你的網站
你可以客製化網站的
- 頁首排版
- 頁尾排版
- 單篇文章排版
- 單一頁面排版
- 文章列表排版
- 搜尋回應排版
- 404錯誤頁面排版
製作完成後,你還可以設定要在網站的哪個頁面顯示
換句話說,你可以為不同的頁面設計專屬的頁首、頁尾、單篇文章排版…等

Step 1
進入Theme Builder主題建構器
有2種方式
從Elementor操作介面進入

從Wordpress 後台進入
前往 WordPress後台 > Templates > 主題建構器

Step 2
建立版型 開始設計
建立完版型後,你就可以開始使用Elementor提供的樣板設計出自己的頁首、頁尾…等
前面的使用Elementor教學已經介紹過了,這邊就不在重複一次,方式都是一樣的

Step 3
設定顯示狀態
設計完成後,你就可以選擇顯示狀態,來達到高度客製化自己的網站
想要包含、排除在哪個頁面顯示
這邊要依個人需求做調整,這裡就不一步一步介紹囉~

匯入Demo樣板教學
Step 1
進入版型庫介面
當你在使用Elementor設計頁面時,只要點選白色檔案夾的Icon 就可以進入到Elementor的版型庫

Step 2
善用分類找出自己需要的版型
在Elementor版型庫中你可以選擇要套用
- 區塊版型
- 頁面版型
- 我的版型(上面章節提到的Saved Templates)
右上角有PRO icon的是要購買Elementor Pro才能使用的版型

Step 3
插入版型
找到喜歡的版型後,點擊該版型 > 右上角插入
版型就會成功匯入到你正在設計的頁面中,便可以開始進行修改
設計完成後就可以發布頁面囉!
上面已經有詳細的Elementor操作教學,這邊就不再重複一次了

Step 4
收藏常用版型
若有些版型是你很喜歡的、常用的
你可以將滑鼠移至該版型上,右下角的地方會出現一個愛心,點擊後就可以收藏該版型
之後你就可以在我的收藏中,快速找到該版型並且套用

Astra佈景主題+Elementor頁面編輯器
我個人非常推薦Elementor頁面編輯器與Astra佈景主題搭配使用
原因如下
- 檔案輕量:
由於Elementor是一款龐大外掛,會佔據許多主機資源,所以在選擇佈景主題時,要盡量選擇檔案較輕量的佈景主題。相較於其他佈景主題幾MB的大小,Astra主題只有50KB,搭配起來可以減輕拖慢網頁載入速度的問題
- 適用各類型網站:
不論是部落格網站、新聞網站、形象網站、作品集網站、電商購物網站,Astra這1款佈景主題就可以幫你搞定,再搭配Elementor一起使用,你一定能架設出設計感100分又實用的網站
- 一鍵式套版(150+Agency樣板):
只要購買Mini Agency Bundle以上的版本,就能享有150+種網站樣板(包含多種頁面功能的樣版),再加上Elementor提供的樣板,你一定能找到你喜歡的網站風格樣式,加快你設計網站的速度
- 與Elementor相容性高:
Elementor與Astra官方是有合作關係的,他們所設計出來的佈景主題,與Elementor有極高的相容性,不用擔心主題跟外掛之間有衝突問題
- 擁有Elementor擴充外掛:
購買Mini Agency Bundle以上的版本,你就能擁有Astra替Elementor開發的Ultimate Addons for Elementor擴充外掛,裡面有更多的網站元素供你使用,讓Elementor使用起來更加強大!
- 套用在無限個網站上:
Astra主題可以套用在無限個網站上,如果你是Wordpress接案工作者,搭配Elementor Pro (US$199/年:1000 個網站)這個方案,可以大大降低接案成本
點擊最右邊的icon就可以進入Astra的版型庫 Astra除了有單一頁面、單一區塊的樣板,也有提供整個網站(包含多個頁面)的樣板
這些都能加快你設計網站的速度


如果你想更了解Astra主題,可以參考我寫的這篇文章
Astra主題教學-1款幫你搞定各類型網站的WordPress佈景主題
Elementor 擴充外掛
Elementor有非常多的擴充外掛可以選擇,但Elementor本身已經是1款龐大外掛,不建議再安裝過多的擴充外掛,會非常吃主機資源。
我在這邊推薦2款我覺得非常好用且受歡迎的Elementor擴充外掛
Essential Addons for Elementor (EA)
Essential Addons for Elementor是由WPDeveloper開發的一款Elementor擴充外掛。截至2021.02為止已經有超過90萬的下載數,可以說是非常受歡迎的1款外掛。

EA 免費版&付費版
EA有分為免費版及付費版
以下為付費版的價格方案,依照自己的需求選出最合適的方案

功能元素(Widgets)
Essential Addons for Elementor大約有 70+ 種Widgets(元素),補足Elementor缺少的一些網站元素其中有 40+ 種Widgets(元素)是免費版就可以使用的
例如:倒數計時、文章時間軸、文章彙整頁、進階標籤、價位表、行動呼籲…等

開啟 & 關閉元素(Widgets)
由於外掛的功能開啟愈多,就愈占主機空間,關閉你不需要的功能,可以避免網頁載入速度慢的問題
前往 Worpress後台 > Essential Addons > Elements
將用不到的Widgets (元素)關閉後,記得點擊右上方的 “Save Settings”

Essential Addons for Elementor 教學影片
如果你想要學習怎麼使用 EA的網站元素,可以參考 WPDeveloper官方的教學影片,他們為每個網站元素都錄製了簡單明瞭的教學
Ultimate Addons for Elementor

Ultimate Addons for Elementor是由Brianstorm Force(與Astra佈景主題同一間公司)所開發出來的1款Elementor擴充外掛。Elementor與Astra佈景主題缺乏的功能,都可以使用UAE來補足。
UAE有40+ 種Widgets(元素)、100+ 網站樣板、200+ 區塊樣板,可以說是1款非常強大的Elementor擴充外掛!
如果你想更深入了解UAE這款擴充外掛,可以前往他們的官網,只要點擊你想要了解的網站元素,就可以進入到那個元素的詳細介紹頁面

UAE 功能元素(Widgets)


UAE 價格方案
UAE 沒有提供免費版,只有付費版
如果你的佈景主題是使用Astra,購買Astra主題付費版時,只要是購買Mini Agency Bundle以上的版本,都能獲得這UAE款擴充外掛。一年當中,Astra主題都會有多次的優惠活動,在優惠期間入手終身版CP值最高!
如果你使用的是其他佈景主題,你也可以單獨購買 UAE,他的價格和Astra佈景主題一樣有分為年費制&終身買斷制(將上方的圓形按鈕向右滑,就能看到終身買斷的價格)
年費制:$55 USD / 年
買斷制:$249 USD / 一次性收費
看到這個價格,你會發現直接購買Astra主題真的划算許多

開啟 & 關閉元素(Widgets)
你一樣可以前往Wordpress後台,關閉用不到的功能,節省主機資源
前往 WordPress 後台 > 設定 > UAE 點擊Deactivate就可以將該功能關閉

Ultimate Addons for Elementor 教學影片
你可以觀看 Ferdy Korpershoek的 UAE 系列教學,他將每個元素都介紹的非常清楚易懂
Elementor Free vs Pro
功能 | Free | Pro |
拖&放 網頁編輯器 | 有 | 有 |
30個基本元素 | 有 | 有 |
50個進階元素 | 沒有 | 有 |
主題建構器 | 沒有 | 有 |
Pop Up 彈出式視窗 | 沒有 | 有 |
表格建構器 | 沒有 | 有 |
WooCommerce 建構器 | 沒有 | 有 |
動態內容 + 自定義字段 | 沒有 | 有 |
進場動畫 + 滑鼠特效 | 沒有 | 有 |
進階學習
Ferdy Korpershoek
Ferdy 在這個影片會手把手教你如何用Elementor設計網站,涵蓋了很多Widgets(元素)介紹,這個教學影片將近4個小時,但在看完這個影片後,Elementor大致上的功能你也都學會了!非常推薦給想要自學Elementor架站的新手!
Create a Pro Website
這個教學影片只有大約1個半小時,如果你沒有那麼多時間看完上面的影片,可以考慮看Create a Pro Website的這個教學影片。看完後,你對Elementor的操作邏輯會更清楚,再花一點時間自己摸索,很快就能上手Elementor!
結語
在幾年前,要一位完全不懂程式語言的網頁設計門外漢,自己架設出一個兼具美觀及實用的網站,真的是有點困難!但現在有了Elementor頁面編輯器,只要掌握基本的操作邏輯,善用Elementor的多樣化模板,任何人都能設計出心目中理想的網站!
Elementor 頁面編輯器是一款大型外掛,有非常多的功能,也會不斷地推出新功能。在這篇Elementor教學文中,我已經盡量把Elementor的操作邏輯及基礎技巧告訴你,但還是有很多的功能沒有辦法在一篇文章中詳細解說。
不過Elementor有超過500萬人在使用,你有任何問題,只要上網Google一下,90%問題都能找到答案,如果真的找不到解決辦法,也可以直接尋求官方客服協助。而在Youtube上也有Elementor各式功能的手把手教學,想要自學Elementor真的不是一件難事。
希望這篇Elementor教學文有幫助到你,如果有任何問題,歡迎直接點擊網頁右下方的Messenger與我連繫呦!