搜尋
Close this search box.

【Header】模版設計

索引
全文

前言

Header,就是網站最上方「選單」的那一整個區塊,這個區塊中一般會有「Logo主選單」,必要的話可以加上標語、或其它內容。

一般套版主題的「自訂」可以讓你調整Header區的樣式,但若套版的自訂設定無法滿足你,就可以用Elementor自行做設計。

說明

先設計出一組電腦版Header,再微調響應式手機瀏覽時是否僅靠微調就能適當呈現,若不行,則須另再設計另一組手機版專用的「Header」,然後讓電腦版Header與手機版Header做自動切換出現。

(1)基本型Header 僅製作一組電腦版Header並直接用電腦版會狀態來微調手機版的呈現樣式。  
(2)稍複雜型的Header 製作一組電腦版Header + 一組手機版Header,各別呈現。 一般平版裝置因也有一定的寬度,故可以延用電腦版的Header,不須另設計。
(3)較複雜型的Header 一組電腦版Header + 一組手機版Header(搭配Popup彈出視窗功能) 一般是要複雜功能的網站才用此方式

 

如果尚未有Logo,可以先用「網站名稱」當成文字Logo,未來再另自行設計Logo,不會設計則可使用「標小智」去產生Logo。

 

實作

1、從「Theme Builder」新增「Header」

Theme Builder,又稱「主題建構器」(有些翻譯會這樣翻),如下圖,按新增後選擇「Header(頂部)」,並命名。

一定要選「Header(頂部)」喔,不然會對應錯誤。

2、進行電腦版Header設計

一般是切兩個左右區塊(也可以上下垂直區塊),一個區塊置入Logo圖或網站名稱,一個區塊置入主選單,若有其它設計想法,可以再加入其它元素進來,也可以把整個header區塊做不同大小區塊的切版 。

設計提示:

  1. 切割區塊,區塊間距(Gap)調成0。
  2. ★每個容器都調成「全寬」。
  3. 拖拉使用Site Logo、WordPress Menu兩個元素(如果沒有Logo可以改放網站標題)。
  4. 容器所有元素的內距、外距都歸0後,再視需求給新的值。
  5. 整個頁首Header可以設成「永遠固定上方」(最外層容器/進階/動作特效)。

3、進行響應式預覽(平板、手機)

一般平版的狀態可以延用電腦版,但手機瀏覽時因左右寬度較窄,須特別做響應式調整,若電腦版的Header的版型過度複雜而導致在手機版時無法完整呈現或區塊會撐過大過長,就得另設計一組版型結構較為簡單的Head給手機版專用。

預覽手機版的方式 :

  • 在Elementor中直接預覽。

  • 在瀏覽器中用開發人員模式做預覽。(按F12或按右鍵/檢查/點裝置模擬)

4、有二組Header時須設定「回應式」

如果電腦版與手機版的Header是各自設計的,那就須把這2組的header的最外層容器,各別都做一下「回應式」的設定,以達成在電腦或手機時不會兩組一起出現,讓它只出現一組。

5、套用全站

設計好了之後,就可以把此模版套給全站,套用後全站的Header選單區,就會以你所設計的為主,佈景主題所給的Header選單區的樣式就會完全被取代掉。

6、Header再度編輯的進入方式

Header要做二度修改,有二個方式可以進入編輯介面。

(1)從網站前台進入

在首頁或有套用該模版的頁面,滑鼠移至「Elementor編輯」(不要點擊下去),滑鼠移上方即可看到該頁面有套用到的模版,如下圖,

即可點擊「Heder_01(頂部)」,進入編輯介面。

 

(2)從網站後台進入

從後台的「範本/Theme Builder / Switch to table view 」,即可找到header的名稱,即可點擊進入編輯。

Ps : 未來,任何模版的再度編輯,都是按照以上方式進入編輯。

結論

以上是一個較基本Header的作法,Header的設計也可以很有巧思,可以多觀察不同網站,比較參考一下他們都怎樣去設計的。

另若一些特別頁面不想套用Header,可以把該頁的佈局改成「畫布」,即可讓該頁的Header消失。

有問題嗎?歡迎於下方發問

發佈留言

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

下一首

Line的不良影響

我個人並不很喜歡用Line,因當我一句訊息回覆後,馬上對方又一句回來,如此往返下去則半小時、一小時就過去了,我無法專心工作,除非是正式諮詢或安排會議的討論,才適合這種模式

有時候對方的問題很多很雜,一傳就是十幾封訊息,這就是訊息轟詐了,我就不知從何回起,我就會只回最後一封的訊息。

有時候對方的問題很多還加上數張截圖,因Line無法條列式呈現,我也無法增加腦力去判斷哪張圖要對應哪則訊息,所以我就會只回最後一封的訊息。

另我不喜歡私人Line被直接來電,因我常常在國道開車需要導航,有時因加班在補眠,這些都會不良干擾。

不是正式會議的討論階段,請您用Email,Email可以條列方式呈現多則問題與截圖,也可以讓我先已讀後再慢慢思考怎樣回覆,避免我自己不小心已讀不回造成對方不佳的感受。🙏 - Wiktionary, the free dictionary

哈囉,在加Line好友之前請先確認一下幾點 :

1、若您是上課的學員或讀者,請直接用Email發問或在該篇文章留言發問,盡量不要直接加Line發問,因我平常很忙,無法守在Line前與您一句一句訊息對答,若每一期 + 每個學員都加Line課後詢問,我短時間內回不完這麼多訊息也會回得很慢喔 ,請見諒。(用Email發問,我會仔細條列說明,你會得到更完整的圖文回覆,甚至還會附上小影片解說。)
Email : [email protected]

2、若是網站外包詢價相關,您再加Line,因我可能需要與您語音會議或遠端連線。

3、補充說明 : Line的不良影響

以上。

目前線上有 1 個使用者: 0 個成員0 個訪客1 個檢索機器人

線上同時最多使用者人數為 91 個使用者,發生於 2024-01-1423:41

1 個檢索機器人 正在線上

#1 – CCBot 於 2024-04-1707:48
架站勤拿手 » 【Header】模版設計 | 架站勤拿手 [網址]