WordPress 網站編輯器 – Elementor 教學

Elementor 是 WordPress 頁面編輯器外掛 (Page Builder) 之一，目前已超過 500 萬次的下載安裝數，Elementor 最大的特色在於我們只要透過滑鼠拖拉元素，在不需要寫任何程式碼的情況下，就可以完成一個所見即所得的網站，簡單且容易上手。

利益揭露：文章中的連結可能為推廣連結，透過此連結購買產品或服務，我將得到廠商的推廣獎金；但不論是直接或間接購買，皆無需負擔額外的費用。

安裝 Elementor

1. 至 WordPress 後台 / 外掛
2. 點擊『 安裝外掛 』
3. 搜尋『 Elementor 』
4. 點擊 Elementor Website Builder 右上角按鈕『 立即安裝 』後，點擊『 啟用 』

使用 Elementor 編輯頁面

1. 至 WordPress 後台 / 頁面
2. 點擊『 新增頁面 』

1. 輸入頁面標題
2. 點擊『 使用 Elementor 編輯 』

Elementor 操作介面介紹

1. 左上角收合選單可以調整整站設定、偏好設定以及回到 WordPress 後台
   關於整站設定可以閱讀這篇：最佳化你的 Elementor – Fonts / Color / Section 一次搞定 🙂
2. 小工具區：可以使用滑鼠拖拉的方式，將其置入工作區
3. 工作區：網頁的編輯畫面，為編排小工具的地方，點擊『 + 』可以新增一個段；點擊『 資料夾 』圖示可以匯入版型
4. 設定、導覽器、修訂紀錄、響應模式、預覽變更、發佈

1. 內容：可以調整小工具要顯示的字串或圖片
   樣式：調整色彩、文字樣式等任何與樣式有關的設定
   進階：調整選擇物件的邊界 (Margin) 與邊框間距 (Padding)、動作特效、回應式
2. 最外側淺藍色的外框為『 段 』，包覆著深灰色的外框為『 欄 』，一個段可以包覆兩個以上的欄
   
   

在段內置入背景圖片

1. 點擊淺藍色的外框上緣標籤中間的圖示
2. 選擇『 樣式 』
3. 從媒體庫置入圖片，並調整圖片的位置、是否重複、尺寸
   若不曉得如何取得圖片素材，可以參考這篇：如何正確、安全使用免費素材，免費素材網站懶人包 (2021最新) 🙂
   

1. 選擇『 版面配置 』
2. 將『 高度 』調整為使適應螢幕，即可製作滿版的背景圖片，或選擇最小高度並給予數值

發佈 Elementor 頁面

1. 點擊『 發佈/更新 』，即可將頁面上線

1. 在 WordPress 前台畫面上方工具欄，點擊『 使用 Elementor 編輯 』即可返回 Elementor 編輯畫面

對網頁設計有興趣嗎？

Hend Design 提供網站一對一線上教學，適合新手、接案者，想要製作形象網站或部落格等網站，從零到有，教會您製作完整的網站 🙂