你是否曾經…
- 花了很多時間挑選一個精美的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與我連繫呦！