Elementor教學-簡單易學的網站設計指南

Elementor編輯器是WordPress受歡迎的外掛，跟Astra主題相容性高，點擊滑鼠拖放區塊，Elementor教學介紹功能、價格及優缺點，可以製成動畫，有支援響應式網頁，打造不同的視覺效果。

延伸閱讀⮕WordPress是什麼?1分鐘帶你看懂-WordPress的特色

1.Elementor是什麼?

Elementor是款頁面編輯器外掛，WordPress最夯的編輯器，快速製作網站頁面，免費版約40種元件，要進階功能需購買Elemeentor Pro，客製排版樣式、頁首及頁尾。

Elementor支援繁體中文，有分為免費和付費的，支援響應式(RWD)，不論是手機、電腦平板皆能使用。

2.Elementor方案

Elementor為免費和付費方案，免費版到後台外掛下載，提供圖片、標題、編輯器、背景、版面排版都可以做到。

更多功能須升級Pro版，能使用作品集、動畫效果、文章排版，客製全站的樣式，假設是一個網站，可以選擇ESSENTIAL 方案是59元美金。

試用過後覺得不適合，官網有提供30天退款服務，在這期間內申請退款

Elementor免費版的元件和模板比較少，進階功能需付費，包含多種元件和模板，支援WooCommerce功能，例如 :網站樣式、動畫效果、區塊模板等。

延伸閱讀⮕WooCommerce組合商品設定-教學實用篇

Checkout Field Editor結帳表單-WooCommerce優化結帳欄位

3.Elementor頁面編輯器好嗎?

一般架設網站要寫許多程式碼，例如 : CSS、HTML，Elementor編輯器讓無程式背景的人也能使用，迅速設計出網站頁面。

延伸閱讀⮕如何架設網站? 自架站教學-用最低成本方式架設個人網站

網站架設費用有哪些? 網頁設計報價分析，最低成本只要2000元?

Elementor提供小工具，例如 : 圖片設定、圖片輪播、彈出視窗、進度條。

延伸閱讀⮕Astra Theme教學-WordPress入門推薦的佈景主題

4.Elementor免費與付費的區別

4-1.Elementor免費版:

免費Elementor下載外掛即可使用，可以基本設定和網站排版，不需過多的設計感，免費Elementor提供約40種的小工具，網站已經夠使用。

Elementor小工具:

• 按鈕: 設定按鈕的樣式
• 影片:把YouTube放在區塊中
• 社群圖示 : 把社群媒體放在ICON
• 文字編輯器: WordPress區塊編輯器
• 圖片相簿: 相簿工具
• 圖片框: 含標題、文字、圖片的工具
• icon圖標: 600以上的icon
• icon框: 和圖片框相似，有些會變圖標
• 客戶推薦 : 客戶評價回饋的內容
• 圖標列表 : 帶有符號的項目清單
• 圖片輪播 : 設定圖片的旋轉或滑動
• 進度條 : 可以設定%的進度條
• 統計工具 : 統計數字和訊息
• Accrodion : 顯示折疊的內容
• 標籤TAB : 顯示不同的項目標籤
• HTML : 安插html碼到頁面中
• 星星評論 : 新增星級的社群
• 警告訊息 : 吸引目標客群的目光
• 短代碼 : 安插到外掛或WordPress的區塊中
• 側邊欄 : 在左邊或右邊新增側邊欄
• 選單瞄點 : 把所有選單連接到瞄點
• 閱讀更多 : 在頁面設定摘錄截止日
• Google地圖 : 把Google地圖崁入
• 分隔線 : 用分隔線來區別版面
• 留白空間 : 隔開元素的空間
• SoundCloud : 在這新增音訊
• 圖片: 設定圖片的大小
• 標題: 新增文章段落的標題

4-2.Elementor Pro付費版:

Elementor Pro為進階功能版，針對全站樣式客製設定，從頁首、頁尾及文章版面，不輸給佈景主題，他們開發了一款Hello theme佈景主題，沒有過多的複雜程式，不會造成網站慢速。

客製化設計:

付費版的功能可以設計整體網站，從頁首、頁尾及文字排版，比佈景主題還厲害的外掛，這款外掛能快速設計想要的風格。

模板頁面和區塊模板:

Elementor裡面有多種的模板和區塊，使用現成範本設計，支援WooCommerce，依照喜好設定購物車。

聯絡表單:

Pro版的Elementor編輯器有提供一個連絡表單模板，用拖曳來新增欄位，在網站的地方都能放置聯絡表單，還能立即預覽畫面。

Elementor Pro 工具:

進階功能需升級Elementor Pro，可客製全站樣式，包含網站選單、價格表、圖片框、客戶評價、動畫標題，打造不同的網站風格。

頁面切版架構:

這裡有提供預設的版型，選擇想要的版型，接著把內容放在這裡

付費版的Elementor支援WooCommerce，按照喜歡的樣子編排，製作一個購物網站，設計不同的產品頁面。

延伸閱讀⮕架設購物網站教學-打造強大的商店平台，完整指南篇

WooCommerce教學-快速建立購物網站，立即在網路上開店

5.推薦的佈景主題

下方會介紹幾款不錯的佈景主題，讓你快速打造個人網站

5-1.Hello theme主題

這是一款Elementor官網開發的免費佈景主題，網站速度快，可以客製化網站跟Elementor Pro一起使用效果更好，套用裡面的模板可以製作頁首、頁尾、網站頁面設計。

Elementor提供六個版型:

• 預設模板 :一般的模板，含側邊欄
• 全寬頁面 :要隱藏側邊欄時，能選擇100%全寬頁面
• 左邊側邊欄頁面 :在左側的地方增加側邊欄
• 頁面編輯器滿版全寬 :設定會把內容變成全寬
• 內容置中頁面樣式 :可以刪除標題和不用的欄位位置
• Page Builder Blank :可以用來建立登陸頁，這是一個全新的頁面，能用Elementor編輯器來編排

5-2.Astra主題

Astra是款輕量快速的佈景主題，用於部落格網站、企業網站，程式相容性高，支援Elementor、Beaver Builder編輯器，網站設計可以用Astra來接案。

Astra (年)方案:

Astra Pro →49美元

Essential Toolkit → 79美元

Business Toolkit → 149美元

終身方案:

Astra Pro → 199美元

Essential Toolkit → 399美元

Business Toolkit → 599美元

5-3.OceanWP主題

OceanWP免費的佈景主題內建有多種範本，不用寫程式也能建立出好看的網站，至今已超過數10萬次下載，在WordPress評價上很受歡迎，不需設定，匯入範本馬上可以使用。

這款主題有支援WooCommerce購物車外掛和多國語言外掛，也有支援Elementor頁面編輯器，建立購物網站開始販售商品。

OceanWP主題方案:

store:1個網站，(年)方案:34美元 / 終身:132美元

Entrepreneur : 3個網站，(年)方案 : 38美元 / 終身 : 155美元

shopping Plus: 10網站，(年)方案: 62美元 / 終身: 249美元

5-4.Jannah主題

Jannah是一款能用來建置部落格網站或新聞網站的佈景主題，提供多元的範本一鍵套用，不用另外再做其他設定，適合想要立即使用的你，支援Elementor外掛編輯器，搭配使用讓網站更強大。

6.Elementor推薦主機

6-1.A2 Hosting

A2 Hosting成立於2001年，創辦人有相關技術背景，主機運作很穩定快速，有多個主機點，台灣的用戶選擇新加坡，速度比較快，選擇Pro方案。

延伸閱讀⮕A2 Hosting教學-高CP值的虛擬主機

6-2.Cloudways

Cloudways是一款VPS和雲端主機，和其他主機不同在於有自己的獨立空間，主機運作和速度、安全都很穩定，架設各種類型的網站都可以，以小時收費，你可以開啟免費試用期3天，有喜歡在購買。

延伸閱讀⮕Cloudways教學-完整教學指南(附教學影片)

WordPress主機優缺點-價格比較

7.Elementor外掛

這裡會列出幾個外掛給參考，依條件選擇適合的外掛，不一定要使用，別安裝太多外掛，會消耗網站資源，讓網站速度變慢

7-1.Anywhere Elementor

這邊你能使用短代碼在一個地方插入Elementor頁面，使用內建模板製作成單個區塊，可以隨時做修改，節省很多時間，Elementor Pro有提供此功能

7-2.Elementor Pack

Element Pack提供285+以上的元素，快速建立你的網站頁面，拖放可管理內容，不用程式設計，提供匯入功能，支援多國語言及RTL語言。

7-3.Ultimate Addons For Elementor

Astra開發出來的一款外掛，內建有提供多種的小工具和模板，搭配Astra主題更好，主題程式很乾淨速度快，接案設計很適合

延伸閱讀⮕16個接案平台推薦-自由工作者、協槓族接案必看

表單樣式小工具:

設計表單讓你的網站相同，利用Ultimate Addons的Contact Form 7及Caldera Forms不一樣的工具，來製作出吸睛的表單，提高網站成效

WooCommerce小工具:

WooCommerce小工具可用來設計網站購物車及整個網站的瀏覽，使用圖片或是影音來說明你的產品特色，能設定產品分類篩選器，進階的部分也能設定

排序功能表格工具:

Ultimate Addons表格工具功能可匯入CSV文件製作表格，設定想要的排序、樣式，按照項目下去做排序，資料看起來比較完整

選單小工具:

這款能有效幫你建立清楚的選單項目，商品較多的網站，幫助提高轉換率

互動粒子背景:

使用動畫效果增加網站不同的風格，你可以試看看這款

8.Elementor教學-建立網頁

8-1.下載安裝Elementor外掛

登入WordPress在左側有個「外掛」，安裝Elementor外掛程式，Pro版在這統一啟用

8-2.停用預設顏色和禁用字型預設

把Elemeentor的設定，「停用預設顏色」和「禁用預設字型」勾選，讓WordPress主題的顏色、字型一併套用

8-3.進到Elementor編輯頁面

來到「頁面」，會看到下方有個「Elementor頁面編輯」的選項，點下按鈕進行編輯

8-4.用Elementor編輯網頁

進入編輯頁面，新增網站的內容，你能在左側工具欄用拖曳方法來編輯內容或在模板庫選擇想要的版型製作，Elementor分成三個區塊，主要是段、欄、元素，編排網站內容也很簡單。

Elementor新增頁面方法，分為段、欄、區塊內容(稱Section)，第一個建立，接著是內容(稱Columns欄)，放小工具的地方，Section完成之後，下一步選擇欄的類型，拖曳小工具放入資料，預設的版型Elementor會自動幫你調整。

8-5.匯入Elementor模板庫

在「模板庫」裡面你可以使用區塊或頁面匯入模板，大部分是付費板使用，可以依照需求購買

8-6.修改網頁內容

你可以選擇想要修改的項目內容，左側有個小工具，你能設定圖片、內容、間距，沒問題之後，在點選左測按發佈，編輯到這就告一個段落。

8-7.設定頁面的樣式

Elementor頁面佈局有3種樣式，Elementor畫布、Elementor全寬、LandingPage、畫布能用來製作一頁式網頁，全寬能用來做成頁面

延伸閱讀➞一頁式網頁是什麼? 了解一頁式網頁與網站的差別

9.常見問題

9-1.Elementor是什麼?

是一款WordPress外掛編輯器，用簡單的拖曳方式製作網站頁面，不論是新手或設計師，這款外掛能快速建立頁面，超過百萬下載次數，我也很推薦這款外掛。

9-2.Elementor是免費嗎?

Elementor一般程式是免費的，到WordPress後台，在外掛下載啟用就可以，需要進階的功能可參考Pro方案，會比較符合需求。

ESSENTIAL :可建立1個網站，每年49美元

ADVANCED :可建立3個網站，每年99美元

EXPERT :可建立25個網站，每年199美元

9-3.Elementor有什麼功能?

Elementor可以拿來建立整個網站內容，從頁面、頁首及頁尾，這款外掛能用來設計表單、感謝頁面，多種頁面幾乎都能使用Elementor來製作。

9-4.Elementor能用來寫文章嗎?

Elementor功能主要是頁面編輯，若每篇文章都使用會讓主機資源負荷太高，造成網站速度變慢，不建議用Elementor編輯器寫文章。

延伸閱讀➡︎如何建立WordPress文章-區塊編輯器教學

9-5.Elementor適合的佈景主題?

部落格網站可以選擇Jannah主題，購物網站選擇OceanWP主題，想要多一些客製化的你，參考Astra或OceanWP主題，這兩款適合多種類型的網站。

10.結論

Elementor編輯器很方便，快速製作網站頁面，免費近40個模板，修改完可以立即預覽，編輯器旁邊有個小工具指示。

需要架設預約網站，參考這篇如何使用Amelia外掛建立預約系統網站

如果有網站架設需求，我們提供套版和半客製方案，一起聊聊你的需求。

追蹤我的IG