[WordPress架站教學 #07] Elementor 視覺化網頁編輯工具|真心推薦,讓網頁設計師更方便,讓站長初心者更專業的內容編輯工具

[WordPress架站教學 #07] Elementor 視覺化網頁編輯工具|真心推薦,讓網頁設計師更方便,讓站長初心者更專業的內容編輯工具

用了Wordpress這麼多年,不得不說,Elementor是我最常用、最快上手、網路上資源數一數二多的視覺化網頁編輯器 。我分享給協作的夥伴或實習中的設計助理朋友們,都會很推薦這套。

WordPress之所以方便,就是因為有數以萬計個外掛,能夠幫我們如虎添翼,增加我們想要的功能。
以往都要工程師、設計師來一個一個從零開發,非常費時又耗工,好處就是可以客製。但如果一些常用的功能,有工程師幫我們做成一個模組,就像樂高那樣,喀的一聲,裝上之後你的系統就多了一個超強功能,超棒的!缺點也是有,畢竟是已做好的掛件,真正的合用度,需要時間來測試,以及靠設計師的經驗,來選擇哪套好用(代表設計師已經有大量的經驗,對掛件很熟悉)。

難易度 傳統客製化網站 WordPress外掛
客製化開發 ,從零開始耗時耗工 ,開發有門檻,需熟悉WP
新增功能方便度 ,需依功能客製開發 ,只需選擇外掛裝上即可
相容性、速度 ,因為是專門開發 不一定,要看每個外掛的狀況
WordPress v.s. 傳統網站
功能性開發簡易度比較表

Elementor 是什麼?

1. 由來

Elementor是由一群從事網站設計的專業人士在2016年建立的Wordpress視覺化內容編輯工具。曾經的他們也是在使用Wordpress製作網站的過程中,感到非常的麻煩且緩慢,因此他們共同開發了這套外掛Plugin,為了簡化和更豐富性地來設計網頁的內容。

曾經的Wordpress在新增各種內容的時候,也需要一定程度的網頁程式技能才能修改更細部的部分。後來才有各種免費或付費的版型出現。每個版型等於是一種設計風格,選擇購買有你想要的功能和樣式的版型安裝使用,來減少開發與設計過程的麻煩。

從那時起,Elementor 的用戶數量在全世界已經增長到200萬,這就證明了它很容易使用。

Elementor有免費和專業兩種版本,免費版足以應付一般內容編輯上的需求。如果你想要頁籤 Tabs、時間欄 Timeline、價格表 Price Table等更進接的功能,則就需要購買專業版,這個我們後續再討論。但不得不真心說購買專業版的 Elementor,勝過購買多個各式各樣的版型,一套 Elementor Pro 變化性豐富,絕對是你最值得的投資 👍🏻 省了時間就是省很多錢

2. Elementor 可以做什麼?

如果不會網站技術的朋友,多半會使用Wix、Weebly這類型的視覺化架站平台工具。正因為這類的平台,提供了視覺化的方式,透過拖拉就可以製作出我們想要的網站。但只要是使用第三方的平台,所有內容均是存在他們的主機上資源也是供他們使用(如果他們要的話),將來想要搬家,又是多一道工。

因此朵兒會建議朋友們,既然想要架站,不妨花一點時間,學習架起自己的網站,Elementor就是幫Wordpress裝上如同Wix、Weebly一樣的小幫手,一樣透過拖拉、視覺可視的狀態下,就可以快速、簡單、方便的完成頁面內容設計。

因此,Elementor必須得裝進Wordpress裡這套系統裡才能用。接下來,就讓我們直接來直接看看他的介面、如何使用吧!

3. 如何使用Elementor?

Elementor是一個編輯器,可以跟幾乎各種佈景主題結合使用。在頁面或是文章中做內容的編輯和排版設計
一樣是透過外掛市場安裝即可,你也可以從官網下載後,自行安裝進外掛資料夾內。

Step 1. Elementor 免費下載和安裝

在右上角搜尋的地方找「elementor」→ Elementor Page Builder 就是我們要的,已經有超過五百萬以上的啟用安裝數。
點選「立刻安裝」,等安裝跑完,點選「啟用」,就OK了。(註:這些可以在「外掛」→「已安裝外掛」中再做啟用及管理)

搜尋Elementor下載

裝好之後,幾乎不需要變更什麼預設設定,就可以開始使用。

Step 2. Elementor 使用介面教學

來到新增文章或頁面的部分,上方選取「使用Elementor編輯」,就會進到編輯界面中了。

 

Elementor的編輯介面,左邊就是可以拖拉使用的小工具區,右邊這個是新增區塊的地方。

 

將左側你想要新增的功能,直接拖拉至右側的區塊內,就會自動新增了。

在藍框最上方的中間是區塊編輯指定區,代表你正要對這整個區塊作編輯,滑鼠右鍵點下去,就會出現功能列。
這個區域,對Elementor來說是一個「段」,之後可以新增很多的段,點選之後,左方出現的編輯設定內容,就是針對這個段可以做的事情。

中間的「」代表指定這個段,左方「+」號就是新增一個段,「×」就是將目前選取的段刪除。

 

我們將「標題」拖至右邊,新增後,可以直接開始編輯內容。右鍵點選「」會出現功能選單列,可以複製、貼上,或把這個段獨立存成版型,其他頁面也可重複使用。

 

一個藍框,就代表一個HTML元素,外面的是,你可以在深色區編輯段的「HTML標籤」的部分,指定它是div, header, footer, main﹍等等的,看你自己的需求,預設就是div。

 

不管在中間的文字區,或是深色區的編輯標題的部分,都可以編輯標題內容,很視覺化

 

編輯完畢之後,從深色小工具區右上的 ,就可以再次回到新增小工具的列表了。

 

若要再次編輯哪個部分,就點選藍框指定區塊右方的「鉛筆」,即可編輯相關內容。

 

Step 3. 關於編輯的特別說明

每一個段,或是任一小工具,在左方的編輯區,大致上都會有「佈局」、「樣式」、「進階」這樣子的控制列。翻翻看,設定都很視覺化,不困難

樣式:會是套用在這整個模組內的,例如:整個標題、文本、按鈕、圖片方框等(小工具區內的任一工具),會使整個小工具的樣式都統一。

  


像文本編輯器會有像Word一樣的編輯器,如果你用樣式指定它整段灰色,但是編輯器內特別指定哪邊變色,


最終成果預覽就會直接呈現在右方。

 

以上就是基本Elementor的使用介紹,是不是非常簡單呢!😎

 

在深色區的小工具內,如果你沒有購買Pro版,就會顯示所有你能用的功能,強烈推薦Elementor Pro版 (看官網更詳細介紹和線上購買),真的會是很值得的投資,省很多事,每個小工具能客製的調整也非常細緻,大家可以玩玩看,接著會再陸續介紹elementor的進階使用。

如果朋友您還有什麼想要先瞭解的,歡迎留言在下方給朵兒喔,也別忘記幫朵兒分享出去幫助更多需要的朋友,祝架站順利。

 

發佈留言