WordPress教學 4-2網站的佈景設計-頁首header

網站/網頁的頁首,在前一篇章節已有說過了,是在網站的上方的內容,通常不會隨著頁面而改變,所有頁面的頁首都是固定的,而上面放置的內容通常是logo、網站名稱及標題,而設定的樣式通常是寬度、高度、位置、背景及顏色。

這邊在我們使用generate press來做設定,先到外觀>佈景>generate press 把所有功能全開.

 

接著就要開始設計head了,首先要準備好以下內容的東西

(1)logo

(2)網站名稱

(3)背景

(4)Slogon

頁首內容建立:

準備好我們就來放置內容,首先到外觀>自訂>網站識別

 

把網站的名稱、標題(slogon)及logo放上,請參考下圖:

 

接著我們要設定其他部份了,也就是樣式的部份如:寬度、高度、位置、背景及顏色

頁首寬度、高度的設定:

頁首寬度full(兩旁不會有空白,不過因為背景是白的,所比較看不出來)

頁首寬度 contained(兩旁會有空白)

 

而細部的頁首設定如圖所示,這邊依據大多數用戶的習慣,建議頁首對齊靠左、寬度full、內嵌contained,而Mobile Header也要開啟,同時設定上Logo,Sticky也要開啟.

 

Mobile的logo通常就不用包含文字,盡量簡單一點,因為在手機的畫面比較小,通常放比較簡單的logo會比較容易認人識別;再Sticky的部份,就是讓你的頁首像是懸浮貼紙的方式,呈現在手機版的畫面上,這樣就不用一直往上滑才看得到網站的logo及標題了。

 

頁首背景及顏色的設定:

頁首的顏色包含網站抬頭、標題、連結、背景文字

而這邊在顏色的設定,有兩個部份(1)色彩  (2)透明度,這樣的搭配在多層重疊上會有不錯的效果。

先至外觀>自訂>colors>header 

 

頁首的背景圖片設定包含圖片檔案、是否重複、位置、背景的寬度

這邊建議設定:不要重複、Cover or 100% width、fixed、Position可以做位置的微調(不建議)

以上是頁首簡單的設定,原則上可以符合90%以上的用戶需求,其他更細部的設定方式,可以留言給我們,我們再另外製做補充教材。

←Wordpress教學 文章列表

 

Leave a Comment

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

Scroll to Top