/
/
WordPress 網站編輯器 – Elementor 教學
Elementor 教學

WordPress 網站編輯器 – Elementor 教學

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

elementor 02

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

安裝 Elementor

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

使用 Elementor 編輯頁面

elementor 2 3
  1. 至 WordPress 後台 / 頁面
  2. 點擊『 新增頁面 』
elementor 2 4
  1. 輸入頁面標題
  2. 點擊『 使用 Elementor 編輯 』

Elementor 操作介面介紹

elementor 2 5
  1. 左上角收合選單可以調整整站設定、偏好設定以及回到 WordPress 後台
    關於整站設定可以閱讀這篇:最佳化你的 Elementor – Fonts / Color / Section 一次搞定 🙂
  2. 小工具區:可以使用滑鼠拖拉的方式,將其置入工作區
  3. 工作區:網頁的編輯畫面,為編排小工具的地方,點擊『 + 』可以新增一個段;點擊『 資料夾 』圖示可以匯入版型
  4. 設定、導覽器、修訂紀錄、響應模式、預覽變更、發佈
elementor 2 6
  1. 內容:可以調整小工具要顯示的字串或圖片
    樣式:調整色彩、文字樣式等任何與樣式有關的設定
    進階:調整選擇物件的邊界 (Margin) 與邊框間距 (Padding)、動作特效、回應式
  2. 最外側淺藍色的外框為『 段 』,包覆著深灰色的外框為『 欄 』,一個段可以包覆兩個以上的欄

在段內置入背景圖片

elementor 2 7
  1. 點擊淺藍色的外框上緣標籤中間的圖示
  2. 選擇『 樣式 』
  3. 從媒體庫置入圖片,並調整圖片的位置、是否重複、尺寸
    若不曉得如何取得圖片素材,可以參考這篇:如何正確、安全使用免費素材,免費素材網站懶人包 (2021最新) 🙂
elementor 2 8
  1. 選擇『 版面配置 』
  2. 將『 高度 』調整為使適應螢幕,即可製作滿版的背景圖片,或選擇最小高度並給予數值

發佈 Elementor 頁面

elementor 2 9
  1. 點擊『 發佈/更新 』,即可將頁面上線
elementor 2 11
  1. 在 WordPress 前台畫面上方工具欄,點擊『 使用 Elementor 編輯 』即可返回 Elementor 編輯畫面

對網頁設計有興趣嗎?

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

廣告
延伸閱讀
相關標籤:
SHARE
WRITTEN BY
Hend Chen
Hend Chen
嗨,我是 Hend!專長於網頁設計 、UI 設計、品牌設計,熱愛參與社群活動、分享設計新知。我的英文名字取自中文名字發音,發音和手的英文 “hand“ 沒有差異,如果您正面臨網站設計的困擾,我很樂意成為協助您的那雙手!

目錄

Subscribe
Subscription