fbpx

WordPress教學 4-3網站的佈景設計-主選單NAV

網站的主選單很重要,在英文名稱中為Navigation又稱導航列,在台灣則是稱為主選單,顧名思義就是主要的選單,也是串接網站主要內容的骨幹,通常在網站設計的結構就會以主選單來貫串,而這個單位就是說明Wordpress建立主選單後我們常見的設定。

一、主選單的內容

通常會以頁面為單位設定內容,而設定到選單內容後,需要再把對應的選單設定為主選單才可以,這時才會在網站主選單的部份出現我們所設定的頁面。

設定方式:外觀>選單>選擇對應頁面即可

二、主選單的位置

樣式可分為很多方式,請參考下圖不建議使用浮動,主要是空間會縮小。

設定方式:外觀>自訂>版頁型式>主選單位置

三、其他必外設定

近年行動裝置掘起,因此UI/UX要符合行動裝置,就顯得格外重要,因此這邊建議必要設定的幾個項目,可以讓你的網站體驗更加順暢。

(1)Sticky 貼浮式選單

貼浮式選單,為我們在閱讀網頁時,往下閱讀時主選單會自動隱藏,而在我們滑鼠或滾輪往上稍微滑動一點點即可以自動出現主選單,這個稱為Sticky Navigation

設定方式:外觀>自訂>版頁型式>Sticky Navigation (記得Hide when scrolling down要勾選)

(2)Off canvas Navigation側滑式選單

在生活中,有許多人都是一支手提著包包一支手滑手機,而通常我們慣用手是右手,所以都會使用右手提包包,握公車、捷運的把手,因此左手就會單手操作手機,而單手操作手機時大部份都是使用姆指來控制,因此在這邊我們就要設定在行動裝置時出現左側滑式的選單。

設定方式:外觀>自訂>版頁型式>off canvas Navigation

四、主選單的色彩及背景

設定好了主選單的功能及位置後,接著就是美化樣式了,美化的方式分別可以從幾個地方著手(1)色彩 (2)背景圖片,這些可以變動的設定再與上方三大項進行排列組合,就會有千變萬化的視覺效果,不過因為美化這件事有很大的主觀判斷,老師就不變直接建議了。

設定方式:

(1)色彩部份 外觀>自訂>Colors>Primary Navigation 或 off canvas Navigation

(2)背景圖部份 外觀>自訂>background images>Navigation 系列

綜合以上不同的設定方式,主選單可呈現的方式也會有很多種,隨著不同的網站風格,會有不同的樣式,各位在求新求變的同時,也要記得網站是給人看的,所以使用者介面的友善是首要考量的。

←Wordpress教學 文章列表