Banner|客製化網站

如何使用 Elementor Pro 製作客製化的頁首+頁尾(含版型挑選)?

Elementor 很適合用來客製化網頁設計,因為它的功能實在強大!

不論是套用內建的美觀模板,或是使用內建多種元素功能,它都能輕而易舉建構出獨一無二的網頁,因此受到眾多站長喜愛與推薦。

這一篇教學文張要來教大家,使用 Elementor Pro ,建立出特別的頁首與頁尾,打造出一個客製化網站!


1. Elementor 是什麼?

Elementor 頁面編輯器
Elementor 頁面編輯器

Elementor 是全球知名的 WordPress 頁面編輯器,全球已經有 500w+ 次外掛下載量,基本上與所有主題兼容。可參考 Elementor 外掛教學

你不需會任何程式基礎,只要用區塊拖曳方式,就能客製化形象網站設計。

有關任何的頁面佈局、新增區塊功能、編輯區塊內容等 ..,都將變得更加簡單。

Elementor 形象教學示範

Elementor 有多種功能區塊,是建置網站的好幫手,當你心中簡單構圖完成,接下來只要拖放區塊,並放置在網頁上即可完成設計。

Elementor 多功能的區塊元素
Elementor 多功能的區塊元素

Elementor 有多種區塊模板和網站樣板,點擊按鈕就可套用,再從中進行修改自己喜歡的設計,可節省大量的建置網站時間。

Elementor 具備豐富的模版庫

購物網站盛行的時期,或許你想架設購物網站,Elementor 對於 WooCommerce 電商外掛,有良好的支援。

並為此開發了 WooCommerce Builder(購物網站編輯器),除了一般的頁面設計,你也能設計客製化的購物網站頁面。

像是添加購物車按鈕、產品價格、產品圖片和說明、相關產品列表、產品庫存提醒等 .. ,如下圖。

WordPress頁面編輯器 :Elementor 的 WooCommerce Builder 購物網站區塊功能(部分功能)
WooCommerce Builder 購物網站功能區塊(部分功能)

方案評論

Elementor 有免費版方案可使用,如果感覺不錯用且有更多設計上的需求,再升級為進階版即可。完整 Elementor Pro 進階教學

Elementor 進階版,有額外 50 多個專業元素功能、300 多種進階模板、主題編輯器、表單編輯器、彈出式廣告編輯器、WooCommerce Builder(購物網站編輯器)等 ..,有更多功能可以使用。

Elementor 進階版方案,分為個人用、公司用的兩大類型,裡面又有不同的方案,但能使用的功能幾乎都一樣,最大的差別是「 使用的網站數量 」

如果你只有一個網站會使用,只需購買最低的方案即可,依此類推。

產品定價

Elementor 個人用,起手價格是 $ 59 美元 / 年(約 $1,800 台幣 / 年),算是滿平價的費用,可應用在一個網站上,並享用它的全部功能。


2. 如何製作頁首?

我們先從頁首開始教起,之後再到頁尾!

這一章節是要告訴大家,如何簡單、快速地客製化網站的頁首,讓造型整個煥然一新!

原始的頁首外觀示意圖|客製化網站
原始的頁首外觀示意圖

STEP 1. 開啟 Elementor Pro 主題建構器

只要更改網站的頁面外觀,一律都是開啟「使用 Elementor 編輯」中的「主題建構器」,點入後我們就會進入到主題編輯器的後台。

開啟主題建構器|客製化網站
開啟主題建構器

STEP 2. 新增頁首編輯界面

進入主題建構器的後台裡,裡面會有各種頁面的版型(如:頁首、頁尾、文章列表等等)可以編輯,我們在眾多的頁面區塊中,找出「頁首」的造型區塊並新增它,然後就會進入挑選外觀造型的環節。

開啟頁首版型|客製化網站
開啟頁首版型

STEP 3. 挑選頁首樣式

在「區塊」裡,我們挑選出一個喜歡的外觀造型,然後套入使用。

而在挑選造型樣本時,我們可以透過預覽圖知道頁首外觀長怎樣,挑選出一個喜歡的樣式並點擊它,系統就會進行運作,之後就進入到頁面編輯的畫面。

除了挑選樣本外觀這個方式,如果不滿意編輯器裡的樣式,我們可以在「我的版型」,上傳自己喜歡的範本樣式使用。

頁首外觀造型|客製化網站
頁首外觀造型

STEP 4. 編輯頁首

關於頁首的編輯界面,我們可以編輯標題或選項的文字顏色,也能增加圖片美化,調整文字之間的高度與寬度,還可以設定文字的動畫效果。

除此之外,我們可以上下移動頁首在頁面的區塊位置,調整到理想的頁面位置中(一般都置頂在網頁最上方)。

編輯頁首的內容設定|客製化網站
編輯頁首的內容設定

STEP 5. 儲存套用

我們編輯完畢後,就在左下角,選擇「Display Conditions」,之後會進入一個視窗,按下 Add Condition,會出現一個選項,我們選擇「包含(include)」、「整個網頁」,並儲存關閉。

儲存套用新的頁首|客製化網站
儲存套用新的頁首

回到前台觀看,頁首就換上我們剛剛設定的造型(如下圖)。

新的頁首外觀示意圖

以上是編輯頁首的教學,下一章節我們要談如何編輯頁尾,步驟一樣很簡單!


其實設定頁尾的步驟跟頁首一模一樣,但我們這邊再詳細說明一次!

原始的頁尾外觀示意圖|客製化網站
原始的頁尾外觀示意圖

STEP 1. 開啟 Elementor Pro 主題建構器

這步驟跟頁首一樣,開啟主題建構器,只要做任何的頁面或是網頁區塊,都是從主題建構器打開,進入後台。

STEP 2. 新增頁尾編輯界面

在多個頁面版型裡,我們選擇頁尾的的造型區塊,這步驟跟上一章節相同,只不過我們要進行頁尾的編輯流程。

開啟頁尾版型|客製化網站
開啟頁尾版型

STEP 3. 挑選頁尾樣式

在「區塊」裡,我們挑選出一個喜歡的外觀造型,並套用到頁尾;除了挑選樣本外觀這個做法,如果想要造型更具有個人特色,我們可以自行上傳喜歡的樣式。

套用外觀後,接著進行修改頁尾設定的流程!

頁尾外觀造型|客製化網站
頁尾外觀造型

STEP 4. 編輯頁尾

在頁尾的編輯界面,我們除了編輯頁尾的聯絡資訊內容,可以修改選項的文字顏色,調整文字大小、文字之間的高度與寬度,還能設定文字的動畫效果。

而且我們可以增加許多「社群分享按鈕」,透過它們有效幫助我們宣傳網站!

編輯頁尾的內容設定|客製化網站
編輯頁尾的內容設定

STEP 5. 儲存套用

這步驟跟上一章節相同,我們編輯完畢後,在左下角選擇「Display Conditions」,會進入一個視窗畫面,按下 Add Condition,會出現一個選項,我們選擇「包含(include)」、「整個網頁」,並儲存關閉。

回到前台觀看,頁尾就換上新的外觀造型(如下圖)。

新的頁尾外觀示意圖|客製化網站
新的頁尾外觀示意圖

以上就是頁尾的製作步驟,不論是頁首還是頁尾,只要透過頁面專門的版型就能做出來,這就是 Elementor Pro 的優勢,對於新手的站長來說,不需要學會程式碼,就可以建立出頁面的外觀。


4. 如何移除或更換頁首/頁尾?

既然說到了製作頁首頁尾,當然會有替換或移除版型的時候,假設日後想更換新的樣式,或是將樣式刪除,該怎麼做呢?

替換(取消)樣式 STEP:

我們到主題建構器的後台,裡面會有編輯的介面,我們可以發現左上角有個「綠色標記」,那個是版面使用中的狀態,只需要把綠色標記變成「灰色標記」,讓它變成非使用中的狀態。

再將新的版型設定成綠色標記就完成,頁面就換上新的版型,讓我們來看操作步驟吧!

綠色標記(套用中)|客製化網站
綠色標記(使用中)

至於說要如何把「綠色標記」變成「灰色標記」呢?

首先,我們點選要設定的頁面版型,左下角會有一個編輯連結,並點擊它。

點選編輯的連結|客製化網站
點選編輯的連結

進入編輯連結裡面,會有一個欄位項目,它是展示頁面版型的位置(如:整個頁面),我們只要把欄位選項按下「X」取消,再按右下角存檔。

取消版型使用|客製化網站
取消版型使用

綠色標記就變成灰色標記,代表該版型是「未使用的狀態」,頁面區塊就不會展示在網頁上,這樣就完成了!

灰色標記(未使用)

之後我們再把想使用的頁面版型進行設定,左上角出現「綠色標記」,代表成功使用了!

刪除樣式 STEP:

如果有不喜歡的頁面版型樣式,想刪除它,該怎麼刪除呢?

我們點選要刪除的頁面版型,在欄位的右邊會有 3 個點的標記,點開會出現編輯選項,裡面有一個叫做「Trash」的垃圾桶圖標,那個就是刪除選項。

刪除版型步驟|客製化網站
刪除版型步驟

點擊刪除後,版型就會永久被移除在編輯介面了!

使用 Elementor Pro 建立客製化頁首頁尾的教學,介紹到這裡!

不曉得看完文章後,有沒有覺得其實很簡單,沒有想像中這麼複雜!如果對於 Elementor Pro 教學 還有興趣的話,可以閱讀相關教學文章,進階學習。


常見問題

我要如何上傳自訂版型?

首先,在 Elementor 版型庫裡右上會有一個上傳的圖標,點選後將自訂範本檔案匯入。

之後在我的版型裡面就會看到上傳的檔案,選擇要用的檔案後,按下插入,最後按下右上的存檔圖標,就換成新的版型樣式。

如何判斷頁面主題是否支援 Elementor?

只要任一種主題有符合 WordPress 開發原則,Elementor 都可以用,所以通常主題商都會在官網或行銷文案上,特別標註「有支援 Elementor」,可以根據這方式選擇。

推薦哪些主題是對 Elementor 有良好支援

上述有提到,只要符合「WordPress 開發原則」的主題,Elementor 都可以用,但若是選出最為推薦的,我會推薦使用「Astra 主題」。

因為它是多功能輕量級主題,裡面內建許多主風格樣板,可以用來 建造 Blog 企業形象網頁購物平台賣場 ,這些多元類型的網站。

可以滿足多數站長的使用需求,若有興趣推薦參考 Astra Theme 教學


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 90 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組電子書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站:WordPress 架站 x SEO 優化技巧,一站式學習!

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

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

返回頂端