創建網站設計

設計決定了網頁的整體格式。建立網站設計的方法有很多種——從頭開始，利用預先建置的元件，甚至使用庫中的可重複使用設計。此外，您可以使用樣式配置進一步增強網站的設計。

本指南將涵蓋以下內容：

1. 設計組件
2. 在「樣式」面板中自訂設計
3. 最佳方法

設計組件

當開始設計網站時，您將需要利用設計元件來組織您的創作。有 5 個格式組件 新增面板:

• 部分
• 貯存
• 垂直對齊
• 水平對齊
• 快速堆疊

如果您的目的是從頭開始創建設計， 段 和 貯存 使您能夠建立一個可以包含其他組件的基本結構。

垂直對齊 和 水平對齊 是有益的成分 之內 段和存儲。垂直對齊是採用預先配置的垂直 Flexbox 顯示設定的 div 區塊，而水平對齊是採用預先配置的水平 Flexbox 顯示設定的 div 區塊。這有助於更有效地創建基於 Flexbox 的設計。

對於更立即可用的設計，您可以採用 快速堆疊 成分。 Quick Stack 元件利用 CSS 網格，並由使用預先配置的垂直 Flexbox 顯示設定的 div 區塊組成的單元格組成。將快速堆疊新增至網站時，您可以從 8 個預設中進行選擇，之後您可以根據需要自訂元件及其儲存格。與從單一元件建立設計相比，這簡化了建置過程，並使您能夠更快地建立設計。

此外，如果您喜歡包含元件甚至 CSS 樣式的預建設計，則可以利用庫中的設計。這些可以從我們的 Webflow 市場 或來自入門庫。

我們建議對大多數設計使用 Quick Stack，以簡化您的設計流程。但是，如果您希望使用基本元件建立設計（例如，如果您不希望設計自動使用 Flexbox 或使用 CSS 網格建置），則可以僅使用區段、儲存體和 div 區塊進行設計。

在「樣式」面板中自訂設計

您也可以透過以下方式修改組件的設計 風格面板 > 佈局 部分。在這裡，您可以調整組件的顯示設定（例如，flexbox、網格等），以進一步個性化您的設計。

根據您選擇的顯示設定（例如，區塊、彈性盒、網格、內聯區塊、內聯或無），其他格式選項可能會出現在 佈局 部分。例如，選擇 Flexbox 可讓您確定元件應該水平對齊還是垂直對齊。

最佳方法

最終，您的設計決策由您自行決定 - 我們建議嘗試各種方法來確定您的首選方法！為了獲得更多指導，我們整理了一些有效設計佈局的提示和技巧：

• 使用大多數佈局的快速堆疊元件來啟動您的設計。這個元件用途廣泛且易於應用，一些最常見的顯示設定（例如，flexbox 和 CSS 網格）已經就位
• 當您有跨二維的結構化設計但希望在單元格上設定位置設定或讓內容與其他內容重疊時，請實現網格
• 在父元素上套用 Flexbox 以實現跨 1 維的流暢設計
• 在尋求預先建立的樣式佈局時納入庫設計