Elementor系列之一:Elementor編輯器基本使用邏輯

WordPress網站由主題及外掛構成。有些主題雖然具有特定的功能,但是外觀架構不一定符合使用者對UI/UX的需求。針對這個問題,Elementor編輯器提供了很好的視覺化解決方案,使網站開發者及設計師能夠毫無限制的設計自己喜歡的頁面版型,以視覺化的方式建立,並結合延伸外掛,拓展內容豐富度,甚至建立頂部(header)及底部(footer)版型取代主題預設樣式,突破主題天生的限制。

透過這一系列的文章,FirstHatch一起孵將從基本的使用邏輯開始介紹,並深入到Elementor編輯器的設定及操作、平板版及手機版的調整,最後說明如何取代主題預設頂部及底部,完全客製化自己的網站。

Elementor編輯器基本邏輯

Elementor編輯器的基本邏輯是使用段(section)、欄(column)及元素(element)。在段的裡面,可以存在水平關係的欄位,而在欄位中則存在上下關係的元素。一般在編輯頁面時,利用段和欄來完成頁面框架,再利用元素完成頁面內容。

Elementor的頁面編輯區可以分為兩個區塊,左邊的Elementor元素區(elements)及右邊的頁面區。在右邊的頁面區將段和欄建立好後,將左邊元素區中的元素透過拖曳的方式拉到右邊的頁面區,即可像堆積木一般把頁面建立出來。

Elementor系列之一:Elementor編輯器基本使用邏輯 1

在Elementor元素區中,預設為基本元素(Basic elements)、一般元素(General elements)、WordPress元素(WordPress elements)等三大類。若有另外安裝其他Elementor延伸外掛的話,則會出現其他元素。

Elementor系列之一:Elementor編輯器基本使用邏輯 2

在頁面區中,按下【新增段(Add new section)】,並選擇適合的欄位數量,即完成段的框架設定。需要注意的是,不同欄位間是水平關係,因此在不同欄位的堆疊的元素也是水平關係。在同一個欄位中堆疊的元素則是上下關係。另外,元素區中有Inner section元素,可以在欄中創造新的欄位,如此便可以在欄中實現水平存在的元素。

最後,每個段及欄都可以編輯佈局(Layout)、樣式(Style)、進階(Advanced)。每個元素都可以編輯內容(Content)、樣式(Style)、進階(Advanced)。透過這些編輯區,能夠進行非常細緻的調整,例如:文字大小(font-size)、粗細(font-weight)、字距(letter-spacing)、內距(padding)、外距(margin)、位置(position)等等,族繁不及備載。因此,能夠創造獨一無二的頁面。

分享至:

發佈留言