WordPress教學

WordPress網頁編輯器-Elementor

凱瑞

前言

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

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

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

Elementor是什麼?

（圖片來源：Elementor）

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

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

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

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

Elementor主要功能介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

如何利用Elementor設計頁面

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

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

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

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

Elementor Pro主題建構器介紹

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

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

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

Elementor Template範本功能

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

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

這裡會有三個選項

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

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

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

結論：

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

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