【WordPress教學】步驟5|頁面編輯器Elementor教學 (圖文+影片解說)

【WordPress教學】步驟5|頁面編輯器Elementor教學 (圖文講解)

你想架一個自己的網站嗎?

不管是想要寫部落格、經營個人品牌、架設形象網站,都可以透過【WordPress教學】的系列文章,這是專門寫給不懂程式的 WordPress 新手的教學,我會帶你只花必要的時間和金錢,架出一個高質感的網站。(ps. 此教學不適合購物車網站喔!)

【WordPress 架站教學】系列文章總共有 7 篇,如下:

在教學裡我會用最簡單的方式來講解每個步驟,只要跟著教學走,就能架出自己的專屬網站囉! Let’s go~~


第 5 步驟是 Elementor 教學,也是我很喜歡的部分!這裡我會以圖文來講解 Elementor 編輯器的邏輯,讓你快速掌握 Elementor 重點。

Elementor是什麼?

Page Builder (網頁編輯器),顧名思義就是讓你來製作「頁面」用的工具,而 Elementor 是 WordPress 人氣非常高的頁面編輯器,跟各大佈景主題都能相容,而且非常容易操作,只要拖拉 element (物件) ,即可編輯區塊。

編輯文字、圖片的時候,你也可以立即看到改變,使用起來非常直覺! 我自己也是 Elementor 的愛好者!

你可以用 Elementor 從零開始製作網頁,也可以套用它內建的美麗模板,還能做出很多酷酷的動畫效果!

Elementor Pro 的主題建構器(付費版) 還可以客製化你的頁首、頁尾、文章列表等等,比佈景主題有更多客製化的空間。

可以參考官方網站的介紹影片,直接拖拉給你看有多簡單~

好啦,優點說了這麼多,我們就開始實作,讓你直接體驗看看囉! 下面的教學用的是 Elementor 免費版,你可以等熟悉了以後再決定要不要買 Elementor Pro 付費版。

Elementor Pro 一個網站是 US$ 49 /年 ($1,500 台幣),可以享用所有的付費功能,算是很實惠的價格,如果大家有興趣,之後我再寫 Elementor Pro 的教學。

也提醒你,Elementor 是頁面編輯器,拿來製作頁面用的,不是寫文章喔。還記得我們在 步驟3 學過怎麼編輯文章嗎? 如果你忘記「文章」和「頁面」有什麼不同,請先看下面這一篇:

▍延伸閱讀:WordPress 如何新增文章? 注意事項、編輯文章教學

Elementor面板導覽

登入 WordPress 後台後,有兩個方式可以進到 Elementor 的編輯頁面。

第一個方法:

在瀏覽的那個頁面,會看到上面有 [ 使用Elementor 編輯] 的字樣,點進去以後,就可以編輯這個頁面。

第二個方法:

在 [頁面] 列表中,點擊 [使用Elementor 編輯] 也能進到編輯畫面~

進入後,就會看到 Elementor 的編輯面板啦!

編輯面板分為兩邊,如下圖所示:

  • 左邊:功能物件,免費版就有很多物件可以使用
  • 右邊:預覽頁面,可以立即看到更改後的樣貌

編輯方式很簡單,就是把左邊的物件,直接滑鼠拖拉到右邊就可以了。

Elementor免費版物件列表

你可能會很好奇,那免費版到底有哪些物件可以使用呢?其實免費版就提供 32 個囉!

我列在下面,每個你都可以玩玩看~

而如果是付費版,點選那個物件以後,右上角就會寫「PRO」字樣。

修改圖片文字

如果要編輯右邊的預覽頁面,就直接點選你想要修改的區塊,左邊就會出現對應的編輯區。

比如說,想換下圖這段文字,就點選該段文字,在左邊就可以直接編輯文字、加入超連結、調整尺寸、對齊方式…等等。

如果想換這張圖片,就直接點選該張圖片,在左邊就可以更換圖片、修改尺寸、對齊方式、填寫標題、置入超連結…等等。

Elementor編輯器架構

在開始新增一塊空白區域以前,我們需要先了解一下 Elementor 編輯器的架構,分成 3個層次,如下圖所示:

  • 段 (raw)
  • 欄 (column)
  • 物件 (element)

一個頁面可以分成好幾個「段」,一個段裡面又可以分割成好幾個「欄」,而欄的裡面就是我們拉左邊的「物件」進去放的地方。

左邊還有一個物件叫做「內部段」,內部段裡面又可以再分成好幾「欄」,讓你的設計排版可以更精細!

新增段、欄、物件

如果想要新增一個「段」(空白區域),就在段的上面按下 [ + ] (新增 段),就會在上面新增一個「段」出來。

接著,他會問你要幾個「欄」,這選了之後也可以再改。

這裡示範,我選了 3 欄,如下。

接著,我們實際從左邊拉「物件」進去~

按下左上角的 [九宮格] 圖示,下面就會跑出各種物件。

直接滑鼠拖拉過去就可以了。

這裡示範一下,我在第1欄放了 [標題] ,第2欄放了 [圖片],第3欄放了 [按鈕]。

如果不要該物件,就直接滑鼠右鍵按 [刪除] 就可以囉!

編輯完記得要按下 [更新] 喔!

到這邊為止,就是基本的功能啦! 下面的全站設定你可能用不到,但我還是簡單介紹一下囉~

全站設定

Elementor 也有全站設定的功能,先點選左上角的 [三條線] 符號,就會看到一些設定項目。

首先,我們到 [網站設定],調整這裡面的設定就會影響整個網站,我簡單介紹一下,細節就留給你自己探索囉~

這是 [網站設定] 裡可以全站設定的項目列表。

另外,也提醒一下,如果你發現設定了全站顏色、字型等,卻都沒有變化,那是因為 Elementor 的 [停用預設顏色] 和 [禁用預設字型] 這兩項是打勾的,所以網站會依你的佈景主題設定為主。

你可以到 WordPress 後台檢查一下,如下:

  • 停用預設顏色: 選擇此選項關閉 Elementor 的全域顏色設定,Elementor 會使用佈景主題的配色。
  • 禁用預設字型:選擇此選項將關閉 Elementor 的全域字型,Elementor 會使用您佈景主題的字型。

一般來說,建議這兩個都打勾,這樣全站的設定一律交給 Astra 佈景主題就好了,才不會佈景主題 & 頁面編輯器都要接管,網站設定會錯亂。

修改文字內容&樣式(影片)

附上教學影片,這支影片的內容著重在文字的修改上: 比如顏色、字重、行距、超連結等等, 其實修改其他物件的方法也大同小異,可以自己玩玩看~

如果還不熟悉 Elementor 的話,建議大家也可以先開空白頁面來試試看, 熟悉了以後,再到你要修改的頁面上做更動囉。

安妮結語

以上就是 Elementor 的基礎教學啦!要把網站做得漂亮,關鍵就是要花時間熟悉 Elementor,接下來的時間就留給你慢慢探索~

課程默默到尾聲囉,你的網站也越來越完整了。下一課,我們要購買網址,然後網站就能上線啦!

我們就下篇教學見囉~ 掰掰~


【WordPress 架站教學】系列文章總共有 7 篇,如下:

5 2 votes
Article Rating
Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Zoe

謝謝安妮邏輯清晰的完整教學,幫助我順利架好個人網站了!

相關文章

Scroll to Top