網站導覽設計是目前網頁必備的基本元素，本文以WordPress工具為例，教你如何設置選單內容，透過Elementor編輯器設定樣式及手機版面，輕鬆建立你的第1個導航列。
一、新增選單項目
導航列是現代網站的必備元素，因此在WordPress編輯器後台已經內置了相關功能，左邊的索引標籤前往「外觀」中的「選單」，在設定頁面中，左邊是目前網站已經有的內容，主要是頁面，右邊是想要設定的選單，最簡單方法是先設定好選單名稱，在此是「導航列」，然後直接把左邊的頁面按住拖曳到右邊即可。
注意到左邊除了比較常用的頁面之外，也可以設定文章，甚至是任何自訂的網頁網址，包括外部網站連結。另外在右邊已經加入的選單，直接按住拖曳就能調整上下順序，這些在操作上都非常直覺簡單，讀者可以自行嘗試看看。
二、WordPress Menu
接下來要在網站中使用選單，文章範例是要在上方建立導航列，利用Elementor主題建構器中的頂部模板，在左邊的側邊欄元素中找到「網站」裡面的「WordPress Menu」，將它用同樣直覺方式拖曳到頁面容器中，從編輯器預覽和結構視窗可以看到目前頂部的內容很單純，除了作為logo的「網站標誌」之外，就是這裡新增的選單了。
三、網站導航設計
經過上個步驟的操作，在Elementor編輯器已經加入了選單，因此點選「WordPress Menu」之後可以進行編輯，其中最左側是「內容」的部分，主要是可以選擇哪一個選單，在此就是先前第一步驟所建立好的「導航列」。
再仔細看編輯器預覽的最右上角，果然多了導航列，目前是有兩個項目：「商品1」跟「商品2」，這兩個都是贊贊小屋已經建立好的WooCommerce商品頁面，如此完成了網站導航設計。
四、排版樣式顏色
和HTML產生內容素材，CSS進行排版設計一樣，Wordpress網站使用Elementor編輯器也是先有內容再進行排版，
上個步驟設定好了導航列選單，接下來同樣選取這個Elementor小工具，側邊欄切換到中間的「樣式」，以這裡的步驟為例，是將「排版樣式」中的超連結「懸停」時設定「文本顏色」和「指標顏色」。作用為瀏覽網頁瀏覽的時候，滑鼠游標移到某個項目就會改變文字顏色，能夠顯示選取好了的狀態，提昇使用者操作體驗。
五、手機響應式頁面
除了樣式之外，有個務必注意的重點是手機版面的響應式設計，也就是要避免WordPress手機跑版。
由於螢幕寬度比例不同，上個步驟所看到的水平開展導航列，顯然在手機上並沒有辦法很好的呈現出來，還有可能導致整個版面跑掉，因此要特別處理。
使用這個編輯器的好處是簡單，以這裡為例，一般要編寫比較複雜進階的CSS代碼，可是使用這工具的話，右上角切換到手機版面，可以快速進行調整。
此時左邊的Elementor設定功能也會有所變化。例如「手機下拉」跟「切換按鈕」有不同的功能選擇，實際作用應該不難理解，況且只要調整之後，右邊的網頁預覽立即呈現效果，所以可以直接嘗試看看，選擇一個符合自己偏好或覺得合適的風格。
六、網頁實際測試
設定完成並且儲存之後，直接到瀏覽器便可以瞭解實際效果。由於是屬於Elementor版型的頂部，通常在網站中任何一個網頁都會看到這個導覽列。
想進一步測試的話，可以將游標移到其中的「商品1」，果然文字顏色會依照先前第四步驟的設定變成綠色了，表示是選取狀態。
七、商品選單導航
上個步驟點選之後，果然進入設定好的商品頁面，有可以進行結帳的WooCommerce購物車，導航列完全在相同位置，而且一模一樣，就好像固定在那邊不動，這就是所謂的網站頂部(Header)。如此實際操作會比較清楚導航列的作用，在網站的任何一個網頁都能夠快速前往選單中的頁面，再配合網站結構設定良好的話，可以起到很好的導航作用，吸引操作者選取瀏覽這些頁面。
適當的HTML教學範例
本文導航列選單是利用Elementor編輯器完成，從文章一開始的介紹可以知道WordPress(WP)本身內建了選單功能，所以即使沒有使用這款外掛，大部分WP主題都有類似工具，在操作上是同樣簡單方便。
單純用HTML跟CSS的方式設置導航列會比較麻煩，不過概念原理都是一樣的，網站的每個網頁上方要呈現固定內容，而且是以一排工具列顯示能夠點選的超連結，這其實也是很好的HTML自學入門的教學範例，贊贊小屋日後有機會再做這方面的介紹。
贊贊小屋WordPress教學：
WordPress後台教學、WordPress外掛推薦、Elementor教學、Kinsta主機代管、WooCommerce教學。
