客服 WixTW

2022年3月13日

《Wix編輯器教學》第2堂課:如何使用網站佈局

更新日期:2月 29

請開啟Youtube設定 > 字幕 > 自動翻譯 > 選擇中文(繁體)

本堂課我們將學習新增網頁、網格線、帶狀圖片、新增和管理欄。

【學習筆記】

  1. 新增網頁

  2. 網格線

  3. 帶狀圖片

  4. 新增和管理欄

點擊選單和網頁 > 新增網頁 > 選擇空白的頁面版型,選定之後你可以編輯該頁面的名稱


 

頁面中的網格線相當重要,我們會建議你將內容儘可能的放置於網格線的範圍內,如果你將物件放置於網格線之外,那該物件很有可能因為瀏覽載具的尺寸不同,以致於被切割或部份無法顯示。透過新增帶狀圖片,你同樣可見到網站格線的範圍。

網格線左右

新增一個方塊於帶狀圖片中,可以自定義它的顏色,並利用右上角的【工具】>【工具列】,在大小(像素)裡可以輸入高度和寬度。

在影片中可見,當我們將方塊放置於帶狀圖片上,並在網站格線的範圍內,點擊右上的瀏覽後,將瀏覽器的螢幕拖曳變窄,在網格線裡的方塊大小並不會被改變。

對著帶狀圖片,點擊版面配置,你可以調整對齊內容。

可管理欄 > 新增欄 > 並可變更你的欄位比例。

這樣的手法適用於一些看似不對稱的設計,但有帶狀圖片的比例輔助支撐。適度的使用欄間距,它會幫助你將兩個欄位等長分離。


 

下一堂課,我們將談到網站選單。