使用Elementor製作你的購物網站Header(頁首)與選單 - 電商修煉 MorePower

使用Elementor製作你的購物網站Header(頁首)與選單

Elementor自從推出以來,很快就成為許多人頁面編輯器(Page builder)的第一選擇,因為它輕量、操控與介面簡單,同時對於網頁各面向調整的掌握度都很高,是許多WordPress架站者的福音。

但這篇文章並不是要來歌頌或介紹Elementor,而是要往前一步,教你如何使用Elementor Pro的進階功能「主題建構器」來製作網站的Header(網站頁首),除了一般網站頁首之外,還會更進階到製作「購物網站」的頁首。

看完這篇文能完成的購物網站Header

什麼是網站頁首Header?

這個就是Header

(頁首跟首頁長太像,下面文章開始,我都會稱它為Header)

一個網站通常會分成三大部分,頁首Header、內容Content、跟頁尾Footer;你可以從下圖中清楚的看到是什麼意思,而Header呢,通常就是會讓你置放Logo、選單、搜尋、社交媒體連結的地方。

雖然他叫做Header,但並不一定是在網頁的最上面,有些比較新潮的網站,會將Header置放在左右側,但無論它放在哪裡,內容都不會相差太遠,就是讓用戶能有個快速導覽的區域。

為何要使用Elementor Pro製作Header?

首先,就算不使用Elementor Pro也可以設定Header,每個佈景主題都有設定Header的選項,甚至有些主題很貼心,還會有專門的Header建構器,像是電商修煉所使用的Astra Pro,就有Header建構器,能夠讓你很簡單的製作Header。

為何有簡單的不用,非要用難的呢?

因為使用佈景主題所提供的Header建構器,通常會遇到限制,你必須照著他的遊戲規則走,Astra所提供的Header builder已經算是自由度很高的建構器,但還是會遇到限制;這時候,如果你選擇使用Elementor的主題建構器,你就能把主控權要回來,想放什麼就放什麼,各物件的Margin、Padding也能眼見為憑,調整起來更加方便。

Elementor Pro價格表

如何使用Elementor Pro製作Header

首先,你必須要先升級成Elementor Pro才能使用他主題建構器的功能;可以參考他目前的價格表,如果是單一網站,目前是49美金/年。

步驟一:進入主題建構器

WordPress後台→Template→主題建構器

步驟二:新增一個Header

點選新增→選Header(頂部)→取名(選填)

步驟三:選擇版型

Elementor很貼心,只要你選擇Header,他就會先幫你準備一堆Header的預設版型,我們建議你可以先挑選一個喜歡的排版,這會讓你製作起來比較輕鬆。

挑選方式,你可以先從「Header到底需要哪些資訊」的方向去思考,比如說,需要社交訊號嗎?選單是要露出還是Hamburger標記,考慮完這些之後,再來考量設計,例如Logo是置左還置中,Logo與選單是獨立還是同一欄等等。

步驟四:設計你的Header

這裡你可以完全自由的使用Elementor去設計你的Header,如果需要置放新的資訊,就從左側的小工具選取,要複雜要花俏還是要走極簡風,都任由你自行選擇。我們的經驗是,Header不需要置放太多的訊息,簡單即可,如果太複雜,容易讓用戶混淆,反而傾向不與你的網站互動。

步驟五:確保Header在手機上也運作順利(響應式設計)

現代人用手機上網的頻率大過桌機,所以確保手機瀏覽體驗良好,是一個極為重要的任務;首先,因為可視範圍差距很大,手機跟桌機不太可能共用同一版的Header,最常見的狀況,就是手機版會變成一個Hamburger的標示,來引導用戶開啟選單。

一般來說,如果你使用Elementor Pro的內建版型,他都已經幫你設定好了,你只要做微調整即可,例如下拉選單的背景顏色、文字顏色、文字懸停的顏色等等。

小提醒:如果你發生下圖這樣的狀況,就代表你「欄」的Vertical Align需要改成上方,不然Logo就會一直跟著欄變大變小而改變位置。

也可以將下拉選單設成「全寬」

步驟六:發布並選擇Header顯示位置

點選發佈之後,Elementor會詢問你「想在哪裡顯示這個Header」,所以你必須要設定顯示的條件;對大多數的網站來說,全站的Header都會是同一個,這樣的話你就選擇包含整個網站即可。

如果你希望某些頁面不要出現這個Header,就新增一個條件,並選擇排除→單頁→頁面→(選擇你不想顯示Header的頁面)

按下儲存之後就大功告成囉!

使用Elementor Pro製作購物網站專屬Header

一般網站與購物網站的Header有哪些差異?

購物網站的Header通常會多加入幾個重要的元素

  • 購物車
  • 會員登入/註冊
  • 商品搜尋

以下就是我們製作完成的兩種版本購物網站Header,一種是簡約版,另一種功能較豐富。

通用版購物網站Header
完整版購物網站Header
購物網站Header手機版

製作購物網站Header的必裝外掛清單

外掛清單:

Elementor/Elementor Pro

購買Elementor Pro才能使用主題建構器來建構網站Header,無法使用免費版來製作(也無法使用範本)

而基本版Elementor是必備的,他能幫助你用即見即所得的方式,輕鬆編輯Header。

Jet blocks

Crocoblock算是Elementor的擴充第三方廠商,他開發了很多功能不同的外掛,能夠讓Elementor發揮更強大的作用;Jet blocks就是其中之一的外掛,他的主要功能就是在製作Header、Footer時,補足Elementor不夠的功能,像是會員登入、註冊等等。

Jet Menu

會使用Jet Menu,是因為他的手機版選單客製化功能較多,但這不是每個人都必須安裝的外掛。

Login/Signup Popup

Login/Signup Popup這個外掛的主要功能,就是把登入/註冊頁改成Popup的形式呈現。

Popup的最大優點,就是不用再跳轉到其他頁面,用戶的整體使用體驗會更好,而且這外掛的免費版就非常好用,所以建議大家可以額外加裝。

購物網站Header設定

安裝外掛

請將上述提到之外掛安裝並啟用。

在主題建構器中新增一個Header

如果這一步驟有問題,請參考第一部分「如何使用Elementor Pro製作Header」

建立Header

新增一個四個欄的段,四個欄是因為我們要放四個元素;Logo選單Menu購物車會員登入/註冊

置放元素

這四個便是我們會置放進Header的元素,完成品如下,每一個物件可能都須在elementor的樣式中微調,這邊不細講;完成圖給你們參考。

Login/Signup Popup 短碼置放

文本編輯器是用來放「短碼」的,Login/Signup Popup有提供短碼讓架站者可以輕鬆置放;不使用Shortcode使用文本編輯器的原因是文本編輯器可以有置右的功能。

Login/Signup Popup的短碼可至Login/Signup Popup->Setting->info裡面找到。

我們使用的短碼參考:

後台看起來就會是這樣怪怪的,別擔心

短碼解析

這裡比較複雜一點,如果有問題請在留言區詢問

購物網站手機版Header設定

手機版我們會獨立來製作另一個版型。

建立手機版Header

新增一個五個欄的段,五個欄是因為我們要放五個元素;Logo搜尋選單Menu購物車會員登入/註冊

置放元素

這五個便是我們會置放進Header的元素,完成品如下,每一個物件可能都須在elementor的樣式中微調,這邊不細講;完成圖給你們參考。跟桌機版不同的地方有三個,JetBlocks的Search、JetBlocks的Auth Links跟Jet Menu的Hamburger Menu

完成圖

Auth Links調整

這是會員登入登出的功能,因為在手機上並不需要Popup,所以我們就直接使用它原有的功能即可。

設置上,只要打開Login Link跟Registered Link即可;如果Page url照著我們下圖設定,未登出的用戶,點擊後就會進到會員頁,而已登出的用戶點擊後,會進到他的訂單頁面。(這些你都可以根據你的喜好調整)

Jet Menu的Hamburger Menu調整

完成樣
他有很多細項可以調整,如果你希望手機選單豐富一些,他可以在選單的上下方加入任何Template,製作Template的方法就是去主題建構器->Saved Templates->新增,存檔之後便可以加入Template囉。

電商修煉好康

如果有報名我們Wp網站課程的學員,可以直接跟我們索取Header的套版,我們準備了通用版完整版兩種版型,只要匯入即可使用唷。

下列的外掛全部都要安裝完成,套版才能發揮作用喔。

匯入後,也可參考上面文章的設定去調整細節。

相關文章

訂閱
通知關於
guest
0 回覆
Inline Feedbacks
View all comments

接收修煉筆記!

每天都比昨天的自己更強