创建网站设计

设计决定了网页的总体格式。构建网站设计的方法有很多种——从头开始、利用预建的组件，甚至使用库中的可重复使用的设计。此外，您还可以使用样式配置进一步增强网站的设计。

本指南将涵盖以下内容：

1. 设计组件
2. 在样式面板中自定义设计
3. 最佳方法

设计组件

在开始设计网站时，您需要利用设计组件来组织您的创作。网站中有 5 种格式组件 添加面板:

• 部分
• 贮存
• 垂直对齐
• 水平对齐
• 快速堆叠

如果你打算从头开始设计， 段 和 贮存 使您能够建立一个可包含附加组件的基本结构。

垂直对齐 和 水平对齐 是值得纳入的有益组成部分 之内 段和存储。垂直对齐是使用预配置的垂直弹性框显示设置的 div 块，而水平对齐是使用预配置的水平弹性框显示设置的 div 块。这有助于更有效地创建基于弹性框的设计。

对于更立即可用的设计，您可以使用 快速堆叠 组件。Quick Stack 组件使用 CSS 网格，由使用预配置垂直弹性框显示设置的 div 块组成的单元格组成。将 Quick Stack 添加到您的网站时，您可以从 8 个预设中进行选择，然后可以根据需要自定义组件及其单元格。这简化了构建过程，使您能够比从单个组件构建设计更快地构建设计。

此外，如果您更喜欢包含组件甚至 CSS 样式的预建设计，则可以利用库中的设计。这些可以从我们的 Webflow 市场 或来自入门库。

我们建议对大多数设计使用快速堆叠，以简化您的设计流程。但是，如果您希望使用基本组件构建设计（例如，如果您不希望设计自动使用弹性框或使用 CSS 网格进行结构化），您可以只使用段、存储和 div 块进行设计。

在样式面板中自定义设计

您还可以通过以下方式修改组件的设计 样式面板 > 布局 部分。在这里，您可以调整组件的显示设置（例如，弹性框、网格等），以进一步个性化您的设计。

根据您选择的显示设置（例如，块、弹性框、网格、内联块、内联或无），其他格式选项可能会出现在 布局 部分。例如，选择 flexbox 可以让你确定组件是水平对齐还是垂直对齐。

最佳方法

最终，您的设计决定权在您手中 — 我们建议您尝试各种方法来确定您喜欢的方法！为了获得更多指导，我们整理了一些高效设计布局的技巧和窍门：

• 使用 Quick Stack 组件来设计大多数布局。此组件用途广泛且易于应用，已包含一些最常见的显示设置（例如 flexbox 和 CSS 网格）
• 当你在二维空间中有结构化设计，但希望设置单元格的位置或让内容与其他内容重叠时，可以实现网格
• 在父元素上应用 flexbox，实现跨一维的流体设计
• 在寻求预建的、样式化的布局时，融入图书馆设计