Elementor頁面編輯器常用工具

Published by ellis on

Current Status
Not Enrolled
Price
Free
Get Started

Elementor 頁面編輯器常用工具

Elementor為WordPress網站編輯的外掛工具,透過學習Elementor頁面編輯器中常用元素,拖拉元素來設定版型,更可匯入範例版型並編輯版型位置與樣式,快速完成網站設計。

簡介-學習基礎觀念:

  • 每一個「段」,可編輯「佈局」、「樣式」、「進階」3個功能。
  • 每一個「元素」,可編輯元件本身的「內容」、「樣式」、「進階」3個功能。
  • 佈局:主要可以調整段的寬度、高度以及結構欄位。
  • 內容:主要可以編輯元素內容,包括元素上文字、對齊、連結等。
  • 樣式:主要可以調整背景、圖示顏色與文字顏色等;亦可依照所選的元件編輯顏色及大小。
  • 進階:主要為調整段間內距與外距的距離。

如何開始使用?
進入Elementor畫布介面:從WordPress登入之後,於Wordpress>頁面>新增頁面>使用Elementor編輯,即可進入Elementor編輯頁面。
Step 1.如下圖,點選「設定」→將頁面佈局下拉調整為「Elementor畫布」。
Step 2.畫面顯示Elementor編輯畫布介面。

設定畫布
設定→將頁面佈局下拉調整為「Elementor畫布」
點選「+」可新增段
顯示Elementor畫布介面

進入畫布佈局後,點選「+」可新增段;畫面將顯示選擇架構亦即選擇欄位。

點選「+」可新增段

點選「+」新增段後,畫面將顯示「選擇架構」。
選擇架構,可依照需求選擇一欄、平均兩欄等架構,則畫布上新增所選欄架構。

點選「+」,顯示「選擇你的架構」

範例:新增段,並選擇兩欄一列,並將元素(標題)拖拉至欄內。

Pv6AaPnvuD
影片說明

點選右手邊新增版型符號,將顯示Elementor所提供的版型庫,可以選擇範例版型並插入版型於畫布上。

點選新增版型,選擇範例版型插入。

點選新增版型後,由Elementor所提供版型庫,將提供套用「區塊」、「頁面」、「我的版型」。
「區塊」為特定一部分區塊設計,而非整個頁面;
「頁面」為套用整頁設計,可透過編輯稍微調整內容;
「我的版型」將您所設計的區塊儲存做為版型,可於日後套用使用。

版型庫所提供範例版型。

插入版型後,若Elementor編輯畫布介面跳回預設值與原本不同,可以點選設定,於一般設定中將頁面佈局,調回Elementor畫布即可恢復為畫布介面。
Elementor的設計皆響應桌上型電腦、平板及手機,若想查看畫面可快速預覽不須離開介面。

快速預覽介面

※點選「編輯段」,左側會出現編輯段可以編輯「佈局」、「樣式」、「進階」。
佈局:主要可以調整整段寬度、高度以及結構欄位。
樣式:主要可以調整整段背景、形狀分隔線、編輯顏色及大小等。
進階:主要為調整整段間內距與外距的距離。

※點選「編輯標題(元件)」(點擊元件本身,範例為標題元件),左側面板會出現編輯標題(元件),可以編輯「內容」、「樣式」、「進階」。
內容:主要可直接編輯元件內容,包括文字(標題名稱)、對齊等。
樣式:主要可以調整元素背景、圖示顏色與文字顏色等,依照所選的元件編輯顏色及大小。
進階:主要為調整元素欄內距與外距的距離。

Kt8TU6j55P
點選段及點選標題(元件)影片。

點選左側下方「修訂紀錄」,於編輯頁面時,可透過修訂紀錄所記錄的動作,並根據所選修訂動作還原。

點選「修訂紀錄」按鈕

關於Elementor下載亦或其他詳情資訊可參考Elementor官方網站: https://elementor.com/
亦可透過官方網站>Help center,了解Elementor頁面編輯器如何使用以及所提供之功效: https://elementor.com/getting-started/

Categories: