這篇文章最後更新日期：2024 年 5 月 5 日
作者： Mack Chan
隨著我們使用的電腦螢幕尺寸愈來愈寬廣和解像度提高，網站設計不再局限在小小的空間裡。這次介紹 Astra 佈景主題 全幅寬度 (Full-Width Layout) 設定。
Astra 佈景主題的 版面配置 (Site Layouts) 允許站長將網站的寬度最大化，會佔用整個電腦螢幕的所有可視區域，非常適合藝術、設計、攝影和旅遊等類型的網站。
相關網站連結：
Astra 版面配置 (Layouts) 基礎設定教學
Astra 官方教學 | 全幅寬度 (Full-Width Layout) 是什麼？
快速進入 Astra 內容容器 (Container) 的捷徑：
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [全域] → [內容容器]
你將會學習得到以下知識和技能：
- Astra 全幅寬度 (Full-Width Layout) 是什麼？
- 案例分享：設計師作品集網站
- 案例分享：攝影作品 / 旅遊網站
- 案例分享：時裝 / 昂貴精品網站
- 如何啟用 Astra 全幅寬度 (Full-Width Layout)？
- 全幅寬度 (Full-Width Layout) | 管理介面
Astra 全幅寬度 (Full-Width Layout) 是什麼？
我們以上方圖片 Nike 運動品牌的官方網站為例子，你可以看到網站設計的版面配置，是將 [左方] 和 [右方] 的網頁空間填滿，左上方的 Nike 標誌 (Logo) 會靠在左上方，而右選的 網站選單 (Menu) 則會靠在右上方。
中間放置的廣告橫幅 (Banner) 非常搶眼和吸引目光，這就是全幅寬度 (Full-Width Layout) 吸引人的地方，視覺感觀會非常開揚和廣闊。
重要觀念：
全幅寬度 (Full-Width Layout) 的版面配置非常考驗網站設計師的功能和視覺設計能力，不推薦非設計本課專長的站長使用，失敗率很高。
案例分享：設計師作品集網站
不論是平面設計師或其他類型的設計師，都需要擁有展現自己作品的空間，使用全幅寬度的網站版面配置，盡情展現你的視覺設計和獨特創意，不需要害怕網頁空間不足，現代的 回應式網頁設計 (Responsive Web Design) 會自動重新排版，在流動裝置的表現也非常理想。
案例分享：攝影作品 / 旅遊網站
攝影師或旅遊作家，喜歡到世界各地遊歷，拍攝大量寬廣的照片，常見是大山大景或冰川湖泊等等，使用「全幅寬度」的版面，可能最大化你的專業作品，唯一需要注意是使用過多「大型圖片」會影響網站的載入速度和效能。
案例分享：時裝 / 昂貴精品網站
女性市場需要高度專業和吸引人視覺的商品圖片作為招徠，常見於高級的精品、流行時尚服裝或化妝手飾等等的領域，如果不使用全寬的版面配置，無法突出商品的價值所在，也無法看清商品的細節和重心設計。
如何啟用 Astra 全幅寬度 (Full-Width Layout)？
區域一：
前往 [網站後台] → [Astra]，介面外觀可能會隨版本更新出現略有差異。
區域二：
點擊 [Dashboard / 控制台] 就能進入設定區域。
啟用網站版面配置 (Layouts) 功能
版面配置 (Layouts) 功能在 Astra 佈景主題 (免費版) 可能會有不少 [限制]，但基礎的功能是足夠應付大部分初學者的需要
不同 Astra 佈景主題版本的差異？
Starter Templates 免費版適用：
Astra 佈景主題 (免費版)
Astra Pro 佈景主題 (付費版)
Premium Starter Templates 付費版適用：
Essential Toolkit (付費版)
Business Toolkit (付費版)
如何前往 Astra 版面配置 (Layouts) 設定？
快速進入 Astra 版面配置 (Layouts) 的捷徑常見有 3 個方法，其實都是大同小異，選擇一個最方便自己的即可，條條大路通羅馬。
✅ [ 方法一]：傳統式：
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [版面配置]
✅ [ 方法二]：Astra 專屬控制台：
前往 [網站後台] → [Astra]，[Dashboard / 控制台] → [版面配置]
✅ [ 方法三]：管理工具列：
在最上方的黑色工具列，點擊 [自訂] → [Astra]，[版面配置]
全幅寬度 (Full-Width Layout) | 管理介面
選擇第一個就是全幅寬度 (Full-Width Layout) 設定，全幅寬度是預設的選項，網站內容會填滿整個螢幕，當你啟用之後就會直接套用。
常見問題 FAQ
閱讀完以上教學，你將會學習得到以下知識和技能：
了解 Astra 版面配置 (Layouts) 是什麼？
了解 4 款基礎的網站版面配置 (Site Layouts)
1. 全幅寬度 (Full-Width Layout)
2. 最大寬度 (Max Width Layout)
3. 邊框四周留白 (Padded Layout)
4. 流體版面配置 (Fluid Layout)
了解 3 款容器版面配置 (Container Layouts)
1. 一般寬度 (Normal)
2. 中幅寬度 (Narrow)
3. 全幅寬度 (Full-Width Layout)
如何進入 Astra 版面配置 (Layouts) 的流程？
✅ 快速進入 Astra 版面配置 (Layouts) 的捷徑：
請前往 [網站後台] → [外觀] → [Astra] → [版面配置]
參考資料和引用文獻：
我們提供市場上最新的網站架設
新聞、教學和相關知識，我們不會向用戶
發送垃圾和推廣內容，而你可以隨時「取消訂閱」。
WordPress 學員人數
15,000+ 人 (持續增加之中)
