Elementor 教學 － WordPress 視覺化網站編輯外掛，基本操作及設定介紹

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – Elementor 教學 － WordPress 視覺化網站編輯外掛，基本操作及設定介紹，相信很多新手站長在網站設計的過程中，對於網站內容編輯所使用的建構器 ( Builder ) ，總是需要花費大量的時間與精力去探索使用方式，從網站設計專有術語到英文詞句的理解更是一大難題，在這樣的情況下很容易造成網站進度停滯不前，甚至萌生退意。
而今天要介紹的 WordPress 編輯器 – Elementor 可以很好的解決網站設計操作上的難題，首先  Elementor 編輯器介面是 100% 繁體中文化，在國外出產的網站編輯器具有繁體中文介面的真的是少之又少 ; 第二，全視覺化編輯模式，安裝完 Elementor 外掛之後在每一個可以編輯的 Post 都會出現使用 Elementor 編輯的選項，進入是以預覽模式直接對網頁內容元素來做設計，減少前台與後台來回切換時畫面上的誤差狀況 ; 第三，拖、拉、放的操作模式，如同使用文書軟體般的操作模式，需要增加、刪除、設定網頁內容元素時只需要拖曳、拉動、點選，輕鬆就能完成網頁內容編輯。
當然以上所述優點只是冰山一角，在接下來的文章內容會針對 Elementor 的基本用途與設定做更詳細的介紹，希望可以幫助新手站長們更有效率的完成網頁內容編輯與網站架設，下面是 Elementor 官網介紹影片，可以先行觀看。
(小提醒：鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範！)

Elementor 官方網站：https://elementor.com/

Elementor WordPress 外掛介紹與下載連結
https://tw.wordpress.org/plugins/elementor/

Elementor 介紹 – 官方網站特色與功能簡易說明

第一步：透過上方提供的 Elementor 官網網址進入到以下畫面，在這一小節將介紹 Elementor 特色內容。

第二步：Elementor 是獨立的 WordPress 網站編輯外掛，有別於一些 WordPress 付費主題自帶編輯器的方式，Elementor 在使用上不受網站主題限制，任何的 WordPress 主題都可以使用 Elementor 來建構網站，但要注意的是還是有部份的付費主題與 Elementor 有程式碼上的衝突，會造成 Elementor 無法運行的問題。另外 Elementor 可以編輯任何頁面，無論是文章、頁面、Portfoli、都可以使用 Elementor ，如果說運用熟練了，甚至連 Woocomerce 商品頁、分類頁都可以自訂樣式。

第三步：Elementor 對於網站佈局設計有更多選擇簡易設定方式，無論是盒型、全寬、全版面都能一鍵完成，而網站版面行列間的高度與寬度的設置，更是透過簡單的拖放方式就能夠完成。

第四步：Elementor 對網站頁面欄位的內容具有豐富的選項來支持使用者設計，像是圖片、文字等都可以自定義上、下、置中等位置，而在網頁 RWD 響應式設計上針對不同大小的顯示裝置透過 Padding （內距）與 Margin（外距）的數值調整，就能夠為網頁元素在不同裝置上設計合理的顯示方式，相對於要不斷寫入 CSS 來定義元素屬性，Elementor 更有效率。

第五步：Elementor 版型套用，在筆者使用過的網頁編輯器其實沒有看過類似的功能，Elementor 在編輯畫面中可以直接加入已經製作好的網頁版型或者網頁內容元素，像是以 Grid (格狀)及及 Masonry（砌體）來顯示文章列表，或圖片視差動畫、時間軸樣式等，對於新手而言套用已經設計好的網頁版型，是最快速的學習方式，另外對於想要快速架站的人而言此一功能更是如虎添翼，只需要統一網站主配色、字體並且搜集圖片素材、文案等，挑選版型並更換內容，就能完成網站內容初步建置。

第六步：下圖中是 Elementor 在網頁編輯時可以套用的網頁內容元素，在 Elementor 中名稱為小工具（Widget），各式各樣的網站內容呈現方式能夠自訂編輯，可設定的項目非常詳細，從基本的欄位寬度、高度到文字動畫、懸浮樣式等都能夠客製化，對比起 WordPress 內建編輯器或付費主題的網頁建構器，Elementor 網頁設計的功能更加多元化，且更適合沒有程式背景的架站新手。

Elementor 安裝 – WordPress 網站後台相關設定項目解說

第一步：除了在 Elementor 官方網站填寫聯絡方式下載 zip 壓縮檔安裝，也可以直接在 WordPress 後台安裝外掛選項中直接搜尋安裝。

在右上角輸入關鍵字 Elementor 後點選立即安裝並啟用

第二步：安裝完畢後可以在網站後台側邊工具欄找到 Elementor 選項，點擊後可以看到所有項目，首先要介紹的是 Elementor 我的版型，簡單來說這個功能就是為網站在不同的頁面建立統一格式的網頁元素，比如說每一個網頁的標題在字型、顏色、樣式都想要具有一致性，那麼就可以在我的版型中製作好樣板，在接下來每一個網頁只需要將標題樣版放入網頁中即可，以下開始示範如何在 Elementor 中製作樣板。

進入後點選新增 Template。

選擇版型類型，在 Elementor 免費版中只有頁面及段可以供選擇，頁面指的是完整網頁內容，段是單一網頁元素，版型名稱根據用途做易於是別的設定，接者點選建立版型。

筆者新增一個標題網頁元素，接者點選左下角的發表。

第三步：建立好 Elementor 樣板後，筆者示範如何加入剛剛建立的標題樣板，如下圖進入到頁面後在項目選單中點擊使用 Elementor 編輯。

Elementor 在每一個網頁區塊都是以下圖中的形式來做編輯，將滑鼠移到網頁區塊上就會出現藍色邊框以及可設定的項目標籤，在這裡點選標籤中最左邊的加號。

接者出現的設定區域有兩個按鈕，左方紅底加號的按鈕是增加新的網頁架構區塊，右邊的檔案夾按鈕則是可以增加自定義的網站內容元素或網頁範例版型，請點選右側按鈕。

進入後找到我的版型這個頁籤，可以看到剛剛建立的樣板，點擊插入按鈕即可。

以這樣的方式就看在不同網頁間加入同樣格式的網頁元素。

第四步：在頁面列表中直接點選編輯，就會進入到 WordPress 傳統編輯器頁面。

在內容區塊中也有使用 Elementor 編輯的選項，另外像是當前頁面的佈景主題設定也必須在內建編輯器中做操作。

第五步：Elementor 設定項目中可以統一全網站內容的基本樣式，比如像是內容寬度、字型、CSS選擇器、圖片燈箱（lightbox）效果等。

第六步：Elementor 角色管理員，針對不同帳號身份給予是否可使用 Elementor 編輯的權限，如果是多人共同管理此項目才需要做設定。

第七步：Elementor 工具，這個項目的設定內容算比較實用，像是網站搬家後替換網站網址，當 Elementor 更新版本與網站外掛有衝突時可以回復到上一個 Elementor 版本，也可以在網站除錯或內容改版時啟用維護模式，並且可以以透過我的版型功能自訂維護期間訪客所看到的網站樣式等。

第八步：Elementor 系統資訊提供所有網站所使用的程式版本編號，可以協助網站管理員透過查找版本更新內容的方式來為網站除錯。

第九步：Elementor 知識庫，點擊後會導向 Elementor 官方網站說明頁，雖然是全英文介面但輸入想要查詢的關鍵字一樣可以找到相關問題的說明文章，比如說想要找有關標題如何設定，在搜尋框中輸入 title 就會跑出所有的教學文章。

第十步：自訂字型必須要升級到 PRO 版本才能使用，後續推出 Elementor PRO 版本後會做進一步的介紹。

結語：

在這一次的 Elementor 教學 中針對官方頁面及後台設定做簡單的介紹，初步提供一個實用的 WordPress 網站編輯器給各位做參考選用，Elementor 實際上還有很多功能可供運用，以及一些在網頁內容編輯時操作上的小技巧，雖然說 Elementor 非常適合新手架設網站，但如果沒有任何網頁設計相關經驗，即使將所有的網站專用術語都翻譯成繁體中文，還是沒有這麼容易真正理解其應用方式，當然除了觀看教學文章外，建議還是要在網站中多多練習，透過匯入 Elementor 提供的網頁範例樣式來做研究，會對於 Elementor 小工具的使用更加得心應手。
鵠學苑都會在後續做一系列的完整的 Elementor教學，因此請不要忘記在右邊電子報欄位訂閱我們，確保能夠收到最新 WordPress 網頁設計相關教學文章。今天的教學到這裡告一段落了，不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來 鵠學院 就對了！我們下次的教學見～

架站相關文章：

網站架設知識推薦閱讀：

Astra 2.0 更新，超過 40 萬網站架設的 WordPress 主題推薦！
Google 在地商家 新增訊息功能，在 Google 地圖上即時通訊！
HTTPS 、 SSL 是什麼 ？ SSL憑證 對網站來說重要嗎？