WordPress架站中，使用佈景主題Astra與外掛頁面編輯器Elementor的搭配，讓整個網站的架設中，同時擁有Astra網站讀取快速的優勢與Elementor頁面設計的靈活，這樣的組合，不僅適合架設購物網站，也非常適合想要架設有設計感的部落格使用。
📖前往了解佈景主題Astra介紹 : Astra 主題的4大特色介紹-適合購物商店與部落格的 WordPress主題
目錄
Elementor是什麼？
Elementor是目前WordPress中最好用的頁面編輯器外掛，可以透過簡單的拖拉區塊，製作出漂亮且有設計感的頁面，讓你的網站更有屬於自己的風格與品味。
Elementor介紹
對大部分初學者而言，能有繁體中文介面是一件很開心的事，而Elementor頁面編輯器具有繁體中文介面，WordPress上的頁面編輯器有很多，但Elementor下載次數超過500萬次，是最熱門的WordPress頁面編輯器。
對於不會程式的使用者，Elementor是全視覺化編輯模式，並可直接預覽在電腦、平板、手機上顯示的樣式，減少前後台轉換的麻煩與視覺上的誤差，而整個操作只需要透過拖拉的方式，就能輕鬆完成網頁設計的編輯，而對畫面編排較沒概念的使用者，也有許多版型能直接套用，幫助快速製作出有設計感的網站。
我為什麼會使用Elementor?
我最一開始使用的佈景主題是Soledad，它的好處是能讓我完全不需要去煩惱部落格的版型樣式，就能擁有一個簡潔的部落格網站，只需要將心思放在專心產出文章內容。
但當使用一段時間，你開始會對自己的網站有更高的期待與想法，想要能按造自己的想法規劃網站頁面與排版，這時就會發現心有餘而力不足，因為受佈景主題限制，很多想法都無法完成，因此開始上網尋找相關資訊，發現了Elementor能解決所有我在頁面設計上的問題。
使用Elementor能創建任何類型的網站
不管你是要建立部落格、線上商店、餐廳網站、公司形象網站，使用強打的Elementor工具，都能架設你想要的網站。
能使用Elementor WooCommerce Builder設計線上商店
每個想擁有自己線上商店的使用者，都會想要設計獨一無二的頁面，來呈現自己的商品，就好比實體店面，會希望有符合自己品牌風格且獨特性的裝潢，而透過WooCommerce Builder的專業功能，能設計出簡潔且有質感的商品頁面，來呈現商品的價值，透過簡單的購物流程，讓訪客有好的購物流程與體驗。
↓ ↓ ↓使用Elementor WooCommerce Builder設計你的專屬線上商店↓ ↓ ↓
有許多Elementor相關的facebook的社團能尋求協助
有許多官網製作的影片教學(很頻繁的在更新，可以常常學到許多有趣的新功能)
影片是英文字幕，但是可以透過設定更改成中文，步驟如下開啟字幕(c) > 設定 > 字幕 > 自動翻譯 > 中文(繁體)
可以先試用免費版本，想要更多功能再購買專業版
我自己一開始也是使用免費版本，使用了一段時間後，操作上越來越上手，開始想要讓網站有更多功能，才決定購買專業版使用，如果你只是想要做一些頁面的設計，免費版本就夠使用了，但如果你想讓網站看起來更專業，想要有自己的設計風格，那就真的非常推薦購買Elementor的專業版使用。(有購買30天內退款保證)
↓ ↓ ↓前往了解更多Elementor功能內容↓ ↓ ↓
Elementor教學
Elementor安裝
step 1
前往 外掛 > 安裝外掛 > 搜尋Elementor > 安裝後並啟用
如果是使用免費版，那就已經完成安裝了，如果是購買Elementor Pro，可前往步驟二操作。
step 2
前往購買Elementor Pro，點選 價錢 > 插入，再選擇適合的計畫。
貼心提醒 : Elementor Pro是Elementor的擴充，所以記得一定要先安裝免費版的Elementor。
step 3
付款成功後前往信箱收信，登入後前往 我的帳戶，點擊 下載插件。
step 4
前往 外掛 > 安裝外掛 > 上傳外掛 > 選擇剛下載的.zip文件 >點擊 立即安裝
step 5
複製註冊碼 > 前往 Elementor > 許可證將註冊碼貼上 > 點擊 啟用
恭喜你完成Elementor Pro安裝!!
影片教學
Elementor教學 編輯畫面介紹與教學
step 1
頁面 > 新增頁面 > 輸入標題，點擊 使用Elenentor編輯
step 2
Ⓐ : 元素/小元件 設計頁面、文章的各種不同功能的小元件
Ⓑ : 內容區域 可以在這個區域架構你的網站排版，透過拖拉的方式，將Ⓐ拖拉到Ⓑ
Ⓒ : 設置列表 有設定、圖層、復原紀錄、響應模式、預覽變更、儲存草稿、版型、發佈等功能。
step 3
以製作一個CTA按鈕做示範，將Ⓐ區按鈕透過拖拉方式到Ⓑ區。
step 4
在內容的區域可以調整顯示的文字、連結的網址、對齊方式、按鈕尺寸、圖示等。
step 5
在樣式的區域可以調整按鈕大小、按鈕字體的顏色、背景顏色、陰影、邊線、邊線圓角、懸停等功能。
step 6
在進階的區域可以調整內距、外距、進場特效、背景、邊線、自訂CSS樣式等功能。
step 7
點擊 編輯段，在樣式的區域有一個我最喜歡也很常用的功能形狀分隔線，裡面有各種類型可以選擇，可以調整段的上下樣式，讓整個排版更為生動活潑。
↓ ↓ ↓馬上購買Elementor ，讓網站更豐富↓ ↓ ↓
Elementor教學 匯入頁面範例版型(加快你的網站製作)
step 1
匯入範例版型前要先去Elementor官網註冊帳號，前往Elementor官網
點擊 My Account
step 2
創立帳號點擊 Create an Account
step 3
註冊完帳號後進入Elementor編輯器，點擊 新增版型
step 4
選擇喜歡的版型點擊 插入
大多數的版型都需要升級到PRO版本，但也是有些不錯的免費版型，可以再評估是否免費版本就夠使用。前往購買Elemen Pro。
step 5
版型就會匯入，就可以很輕鬆的修改想要調整的地方，可以節省許多設計與排版的時間，也可以將多個版型做組合，將喜歡的區域留著不喜歡的刪除，再自己做些微調，就能創作出自己喜歡的風格版型。
只要點擊▴再點擊 儲存成版型 ，就能將自己設計的版型儲存，用在需要重複使用的頁面。
step 6
輸入 版型名稱，點擊 儲存 就可以將自己設計的版型儲存下來，下次想使用只要選擇版型插入即可。
↓ ↓ ↓馬上購買Elementor ，讓設計網站更簡單↓ ↓ ↓
Elementor教學 主題建構器 (Theme Builder)
主題建構器是許多人購買Elementor Pro的原因，因為你可以整個網站只做一次的設置，就能套用到整個網站，相當的方便。
版型有 : 頁面、段、全域小工具、彈出式視窗、頂部、底部、單頁、文章列表，安裝了WooCommerce後，會出現單一商品、商品檔案，讓架設線上商店更方便。
step 1
這次以頂部(header)作為教學示範
選擇 Templates > 主題建構器 > 新增
step 2
版型類型選擇 頂部，為版型命名後點擊 建立版型
step 3
選擇喜歡的版型後點擊 插入，我會以框框的範例做示範，可以先選擇跟我相同的版型做練習，學會修改每個不同位置的設定後，再選擇自己喜歡的版型做修改，會更清楚每個設定是在哪裡調整。
step 4
編輯網站標誌 點選 樣式 > 寬度 調整LOGO大小
step 5
編輯導航選單 內容 > 選單 選擇自己的主選單
step 6
編輯社交網路服務圖示 在內容選項內可以選擇要顯示的社交網路服務圖示，如果有使用Email記得在連結前面加上mailto:，訪客才能直接寄信給你，在樣式選項內可以調整社交網路服務圖示的顏色、大小、懸停顯示、邊線等樣式。
step 7
樣式設定完後，點選 ▴ 再點擊 顯示條件
step 8
點擊 新增條件
step 9
選擇 整個網路 點擊 儲存&關閉，剛剛的頂部(header)設計，就套用在整個網站了。
↓ ↓ ↓馬上購買Elementor ，設計更具特色的網站↓ ↓ ↓
📖建議閱讀 : Elementor Pro 有哪些功能?值得花錢升級專業版嗎?!專業版功能介紹懶人包，完整攻略!!
結語
Elementer有很多功能可以使用沒辦法一個一個示範，但可以訂閱官網製作的YouTube頻道，能讓Elementor的功能發揮到最大。
但是Elementor雖然好用，但不建議寫文章使用，因為會使網站負荷太大，拖累整個網站，在主題的選擇上也要注意主題是否與Elementor相容，避免花更多心力在處理衝突上，Astra主題加上Elementor頁面編輯器，是我目前架站使用的搭配，在網站速度與網頁設計上，都能符合我的需求，不管架設線上商店或是部落格都很適合，如果你也想設計獨特的網站，可以好好體驗看看。
📖你可能感興趣 : Astra 主題的4大特色介紹-適合購物商店與部落格的 WordPress主題
