使用Divi 5设计变量创建尺寸和间距系统

Divi 5为您提供了一种结构化的方法，可以在整个网站上定义，管理和重用尺寸和间隔决策。使用设计变量和预设，您可以创建一个易于维护，调整和复制的可扩展设计系统。

在这篇文章中，我们将向您展示如何在系统中进行思考，并将带您通过构建全面的尺寸和间距系统。

Divi 5已准备好在您创建的任何新站点上使用，但建议您（暂时）迁移现有站点。

为什么使用尺寸和间距系统？

大多数Divi用户都希望在布局，边距和排版方面保持一致性。但是很少有人会尽早定义这些标准。或者，如果您这样做，则可能是通过风格的儿童主题来完成的。现在，您可以：

订阅我们的YouTube频道

1. 定义一个数字变量一次（例如16px或夹具（16px，4vw，48px））
2. 将其分配给模块/元素预设
3. 或选项组预设（例如间距或尺寸）
4. 稍后更新变量，并查看更改反映在网站范围内
5. 整体上使用更少的CSS来缩小页面

在其他站点建设者的情况下，设计人员倾向于大力依靠CSS框架，以应用一致的间距和尺寸，同时使用可以从项目中采用的系统。使用Divi 5，您可以使用Divi的设计变量创建自己的“设计框架”，而无需触摸单个代码。

元素大小，填充和边缘

每个Web元素都有三个组件，影响整体间距和大小：

• 元素大小：由宽度和高度定义的元素的核心内容大小。
• 填充：在元素中添加的空间，增加了其可点击区域和视觉尺寸。
• 边距：在元素之外添加的空间，将其从其他元素推开。

分区元素的实例

通常，这就是您可以期望在Divi中使用填充和利润的方式：

• 部分通常具有顶部和底部填充（不是边距），以在页面内创建垂直间距。
• 行通常从垂直填充物中受益，但否则让内容填充它们。
• 列主要关注用于创建列间隙的边距。
• 模块通常使用底部边缘清楚地分开堆叠元素，但余量的数量取决于视觉分组。

Divi的默认间距值

使用Divi的Web Design的初学者甚至可能没有意识到Divi开箱即用为您做出一些间隔决定。经验丰富的设计师经常将其调整以匹配他们的目标，但是这些默认设备使大多数人都可以快速开始自己的项目。

这些默认值可能会有所帮助，但是设计师通常更喜欢设定自己的间距标准。如果您想查看未设置默认填充的页面的样子，则可以执行此操作：

1. 转到任何元素，在“设计”选项卡下找到“间距”选项组。
2. 打开默认选项组，并将顶部和底部填充设置为0 （零）。
3. 保存默认间距OG预设，以将其应用于每个元素。

如果没有Divi的默认设置，这将向您显示页面的外观。它看起来不会那么好，但是您将开始看到创建自己的设计系统需要做的事情（或者您可以使用Divi的默认设置并在您看到合适的情况下进行更改）。

使用8分间距

8点刻度是一个布局方案，其中使用8的增量构建间距值。因此，您不使用任意值（例如13px或27px），而是坚持诸如8、16、24、32、40、48之类的值。

该系统有帮助：

• 使用一致的尺寸进行垂直和水平节奏保持垂直和水平节奏
• 确保间距堆叠在断点上干净
• 加快决策（选择更少=更快的设计）

您可以根据您的偏好或秤类型使用PX或REM中的比例。例如，当基本字体大小为16px时，16px变为1REM。

页面的模型将您的注意力分组到选择区域，并以垂直间距将访问者推向页面上

垂直间距告诉读者在哪里聚焦。与更紧密的间距聚集在一起的项目自然被视为彼此相关。通过更多空间分开的事物表明了一个新想法。

如何创建尺寸和间距系统

您的尺寸和空间的系统包括两件事：设置变量或代币，这些变量或令牌将在整个设计中使用，并始终在整个站点设计中使用这些变量。这是您可以通过Divi做到这一点的方法。

步骤1：在设计变量管理器中创建数字变量

Divi 5引入了一个可重复使用数值的视觉接口。每个数字变量包括：

1. 一个易于回忆的名称（例如，gap-sm，text-h1），不太长
2. 数字值或函数calc（）或clamp（）
3. CSS单元（PX，REM，％，大众等）

由于具有变量管理器，因此您无需在单独的样式表中编写CSS变量。您可以在设计变量管理器中设置所有这些，然后从视觉构建器中的输入字段中选择它们。

以下是一组完整的数字变量，以匹配8点设计系统。您不必使用它，但它可以使您了解可能的事情。

这就是将其填写在变量管理器中的样子。

请注意，这些间距值将在Divi 5的即将到来的Flexbox功能中有所帮助

步骤2：计划您的8分间距系统

您的页面通常包含重复的元素模式。寻找常见组或群集，例如：

• 标题，段落，按钮
• 小标题，大标题，段落
• 图标，段落
• 包含多个元素的卡片

借助您最初的线框（或占位符设计），您将有机会创建潜在的模式。您还将创建不适合您必须决定如何处理的模式的东西。但这都是设计的一部分。

您可以在无花果上或直接创建带有占位符元素的线框页面来执行此操作。只需将所有您可以布置在页面上的所有内容即可。您可以使用称为“测量所有内容”的镀铬扩展名，以帮助您在开始调整这些方面（首先使用Divi的默认间距）可视化间距。

要使用扩展名，请从Chrome扩展工具栏中激活它。然后单击您感兴趣的页面上的元素，将工具集中在该元素上。从那里开始，将鼠标移动以测量当前选择的元素和其他元素之间的各个方面。

步骤3：将数字变量分配给选项组预设

使用页面的线框设置和设计变量，您可以开始对页面进行间距和尺寸相关的更改。您可以首先从内容组开始。让我们专注于英雄部分中的标题，段落和按钮。

带有占位符内容和字体/字体尺寸的线框

请注意，在这一点上，您需要已经设置了排版的初稿。这包括字体，字体尺寸和线高/字母间距。没有这个，一旦建立印刷系统，您很可能会重新平衡所有尺寸。

排版大小选项的示例设置为数字变量

现在，我们想评估设计中正在应用什么默认间距。为此，您可以在帖子中查看图表，并将其与我们在英雄部分中所做的事情进行比较。显然，有一个（＃1）和两个行（＃2和＃3）。现在，我们将默认行顶/底部填充设置为零。

接下来，我们有两个部分间距的选项：我们可以将填充物设置为零并稍后弄清楚，否则我们可以在默认元素预设中设置一些初步的顶部和底部填充，以使各节看起来像这样：

• 桌面：顶部和底部填充设置为Space-XXXL
• 平板电脑：顶部和底部填充设置为Space-XXL
• 手机：顶部和底部填充设置为Space-XL

但是，您要做的完全取决于您和最终设置的间距设计变量（如果您愿意将其作为自己的默认设置）。我们现在拥有的（默认行填充设置为零和自定义部分填充）：

步骤4：模块间距

接下来要做的是在各节/行中的模块之间的间距上工作。关键是选择一种将间距应用于模块的一致方法。

您有选项，您可以通过多种方式将间距拆分：

• 将间距应用于边缘顶
• 将间距应用于边距底部
• 在边距和边缘底之间均匀地施加间距

重要的是要记住，默认情况下，许多模块都具有余量底部，因此我建议您在设置间距范式时开始使用该约定，然后从那里开始。对于初学者，您可以将顶部/底部边缘设置为零，以查看模块之间的间距如何，而没有默认的默认设置。

在本节中，我们将0PX应用于余量顶部和底部，以查看所有这些模块，而无需默认间距

现在，我们可以开始将间距设计变量分配给这些模块的边距底部，以创建间距系统。我们将从标题和身体文字开始。

当您开始使用模块间距看到模式时，您可能需要将这些间距选择添加到默认元素预设中。并且由于您需要为偏差的元素创建间距规则，因此可以创建自定义元素预设。新元素将从那里使用默认预设，但是您可以快速为各种情况选择自定义元素预设。

您将如何使用Divi 5进行尺寸和间距？

创建一个间距和尺寸系统，您很满意，归结为练习基本面并倾向于手头的工具。 Divi 5正在为WordPress网站创建事实上的设计系统。它具有很大的灵活性的最佳位置，但是很容易缠绕您的头。

如果您从未考虑过创建设计系统，则Divi允许您从设计变量和预设级别考虑它，而不仅仅是在单个模块或元素级别上。这可以帮助您比以往任何时候都更快地将基本设计决策应用于元素。

您会尝试8点系统，还是计划其他计划？另外，这是您第一次考虑Divi的默认间距吗？它使设计具有Divi Automatic的设计，但是对于专业设计师而言，您可能需要更改其中的一些默认设置以实现您的像素完美视野。

Divi 5已准备好在您创建的任何新站点上使用。