WordPress網頁編輯器-Elementor

前言

回想凱瑞很久以前剛接觸網頁設計的時候,用的軟體是Adobe Dreamweaver,雖然當時的軟體,已經有視覺化的介面,可是還是必須懂一些網頁語法,像是html + CSS,甚至當時流行的動態效果,要借助Flash (一款已經被淘汰的動畫軟體 )才能做的出來。

後來隨著時代的演進,html5的出來,網頁的動態效果變得更多元,於是設計網頁的軟體,變得偏向利用寫code的組成,當時如果設計師要切版,就會變得蠻痛苦的,於是開始有前端這個職位,來專門處理網頁的切版以及一些語法的建構。

而當時iphone開始流行,UIUX開始被重視,於是凱瑞就轉戰到UIUX的領域,慢慢的網頁設計那塊就生疏掉了,沒想到這次接觸Wordpress架站,才發覺技術進步得真快,可以利用這種網頁編輯器,只需要拖拉排版,還可以設定CSS跟RWD,甚至一些動態效果,全部不需要動到工程師,就可以快速的把網頁給設計好,對於網頁設計師甚至從來沒有接觸過網頁設計的人,真的是一大福音。

Elementor是什麼?

Elementor是什麼?

(圖片來源:Elementor

當我們在用Wordpress寫文章時,會是利用內建的古騰堡Gutenberg編輯器,來做文章的排版,大部分的情況都已經適用。

但是如果是要做一些比較複雜的頁面的時候,尤其是形象頁面,Gutenberg就比較不是這麼夠力,這時候我們就需要利用到另外的編輯器,來設計出自己想要的頁面。

而Elementor就是大多數人推薦的WordPress第三方編輯器,全球已經有600w+次的外掛下載量,而且可以跟所有的主題相容。

基本上,我們設計網頁,主要就是排版、元素的建構、顏色字體設定、動態的效果,這些Elementor都可以輕易幫你達成,尤其Elementor裡面內建許多的網頁元素,以往那些需要工程師幫忙寫程式才能做出來功能區塊,都已經幫你先做好,使用者只需要拖拉到頁面上,就可以完成頁面的構成,大大降低了網頁設計的難度。

Elementor主要功能介紹

要安裝Elementor只需要到Wordpress外掛區尋找,按下安裝即可。
之後我們就會在左邊的選單,看到跟Elementor相關的選項,這邊需要先設定哪些內容類型可以由Elementor編輯,再來是勾選停用預設顏色跟禁用預設字型,因為這兩個部分,已經由佈景主題先幫你設定好了,所以不用再讓Elementor來設定。

Elementor主要功能介紹

當我們新增頁面選擇用Elementor編輯時,就會在左半邊看到Elementor的介面,這邊有幾個需要注意的地方。

網站設定
這邊可以設定網站相關的樣式,不過,由於大部分我們會是交由佈景主題來設定,所以這邊就可以忽略,不用再點進去一一的設定,避免搞混。

Elementor主要功能介紹

元素模組
我們可以從Elementor看到提供的網頁元素,只需要點選拖拉到頁面上,就會產生。

元素會提供三個介面去做設定:
內容:
這邊通常就是編輯元素的內容,如果是文字就是編輯文字,如果是照片就是選取照片…等等,每個元素不盡相同

樣式:
這邊針對元素進行樣式的調整,包括:大小、顏色、 陰影..等等,一些基本的樣式

進階:
這邊會針對元素進行版面的配置,主要最常會用到邊界(padding)以及邊框間距(magrin),可四邊一起調整,也可以按下右邊的鎖解除,然後進行個別的調整,再來就是一些動效的設定,建議使用者多多點選使用看看,會比較熟悉。

Elementor主要功能介紹

其他設定
我們可以從Elementor主面板的最下方的操縱區,來做一些其他的設定。

文章主圖:
這邊可設定文章的主圖以及標題,主圖設定好後,會出現在文章的列表頁

導覽器開啟:
當我們在編輯網頁的時候,常常會搞混各個元素的排列,這時候,就非常需要開啟導覽器,來檢視各個元素,甚至有一些元素在編輯頁面選取不到的時候,可以利用導覽器來選取,類似Photoshop的圖層功能

修訂紀錄:
編輯網頁時,也是常常需要使用到的功能,Elementor並沒有提供可以一直按Ctrl+Z的回復,我們可以利用這面板來回復上一次的動作

RWD Review:
非常好用的功能,提供電腦、平板、手機,三種常用的設備介面,不需要再透過其他的瀏覽器,就可以讓你看到其他設備上,網頁會如何呈現。

另外,我們也可以在介面上,設定開關元素要出現在哪個設備上,在設計網頁上,更佳的靈活。

 

Elementor主要功能介紹

如何利用Elementor設計頁面

首先掌握好網頁架構,網頁架構是用一個個方框所組成,只要了解彼此之間的關係,就可以排出大致上的網頁架構,而Elementor裏面,也先幫你把粗略的框架給設定好,只要拖拉,就可以在畫面中產生,當大致排好網頁架構後,就可以把元素拖拉進去,之後再針對顏色以及元素彼此間的位置進行調整。

如何利用Elementor設計頁面

段ROW 就是橫的框架,然後裡面可以塞欄位,欄位裡面可以塞物件,就是這樣一層一層把頁面所架構出來,這裡要注意的是,欄裡面還可以塞內部段,然後內部段裡面可以再塞欄位跟元素進去,這樣在設計網頁時,又多了許多的彈性。

如何利用Elementor設計頁面_編輯排版架構

再來就是要注意元素彼此之間的關係,通常會透過內距Padding&外距Margin來做調整

如何利用Elementor設計頁面_編輯排版架構

掌握好這些基本知識,我們就可以很快的把整個網頁的大架構所拼湊出來,之後再將需要的元素所拉進來,再做個別的調整。

Elementor Pro主題建構器介紹

我們利用Elementor免費版本,已經可以符合大部分的網頁設計需求,但是還是有些地方我們是無法編輯到,像是:頂部的Menu區塊,底部的網站相關資訊區塊,還有文章列表首頁,甚至是WooCommerce的相關頁面。

以往這些區塊,都會利用佈景主題來設定,但是只能有初略的變化,而如果利用Elementor Pro所提供的主題建構器的話,就可以接管佈景主題的設定,我們就可以更自由的設計這些區塊,變成我們想要的樣子。

Elementor Pro另外還提供50多種網頁元素、300多個模板,可以讓你在設計網頁時,發揮更大的空間。

Elementor Pro主題建構器介紹

Elementor Template範本功能

如果不想要從無到有建立網頁的話,Elementor還提供了許多Template讓你套用,可先套用了,再去做修改,套用方式有分為區塊、頁面、我的版型。

首先,先使用Elementor 編輯頁面,點選資料夾,就能叫出套用模板介面出來。

這裡會有三個選項

區塊:
代表頁面的其中一部分,可以在上方選擇分類,會出現相對應的區塊,例如:About、文章列表….等等。

Elementor Template範本功能

頁面:
有分為免費版以及付費版,通常付費版的版型會有更多的選擇,不過還是要看你的需求,通常是套用過後,還是要去花時間修改成自己想要的,畢竟這些都是國外的Template,換成中文字時,一定會需要再做調整。

Elementor Template範本功能

的版型:
可以將你設計好的頁面,存成自己的版型,下次要做類似的頁面時,只要再匯入就好。
別人也可以將他的版型設定下載為json檔,你也可以利用這功能,匯入進來,完成頁面的設計。

Elementor Template範本功能

結論:

利用Elementor編輯器來設計網頁,真的是比以往方便許多,只要上手之後,會覺得有這工具真好,市面上還有許多類似的編輯器,像是:WPBakery Page Builder、Thrive Architect…等等。

然而,這些編輯器都還是會有一段學習曲線,因為功能上的強大,有許多元素需要去摸索設定,並不是只要拖拉放置就會讓網頁有最佳的效果。

再來就是說,網頁設計不只是學會軟體使用就好,還是考驗者設計者的美感,以及內容上的呈現,那才是網頁設計的主軸,大家千萬別忽略這一點囉。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關文章

UIUX設計師如何因應AI人工智慧的到來

UIUX設計師如何因應AI人工智慧的到來?

在這個快節奏的工作環境裡,UIUX設計師每天都得應對各式各樣的事情,像是處理設計截止日期、應付不斷變化的用戶需求,還有跟上科技的飛速更新。

但是,隨著人工智慧技術的蓬勃發展,我們似乎正站在一個轉捩點:AI的興起即將徹底改變UIUX設計的工作方式和流程。

閱讀全文 »
Adobe firefly Image 3

Adobe Firefly Image 3 : AI創意新境界

AI生成進展飛速,Adobe 在今年四月底 Adobe Max 2024大會上宣佈推出 Firefly Image 3, 這是Adobe自己開發的第三代圖像引擎,生成的能力相比半年前推出的 Firefly Image 2 有了明顯的提升,就讓我們來看看Firefly Image 3有哪些新的特點

閱讀全文 »