使用Divi 5创建基于间隙的间距系统

一致的间距是一个精美的专业网站的基础。您可以依靠单个系统来使布局在您的网站上保持清洁和平衡，而不是一个一个单个元素管理利润。

借助Divi 5的新设计变量和Flexbox功能，您现在可以直接在Visual Builder中构建一个基于间隙的间距系统，而无需自定义编码。让我们看看！

为什么传统的间距方法不足

利润和填充似乎很简单。在这里添加一些空间，调整那里的填充物。但是这种方法很容易变得凌乱。这是它在实践中的表现：

您在一个文本块上设置了30px的边距。然后，您需要一个按钮周围的空间，因此添加20px。

另一个模块需要呼吸空间，因此您选择40px。目前每个决定都感觉不错，但是您正在建造纸牌屋。

切换到移动设备，一切看起来都可能破坏。那些精心选择的像素值不会翻译。您的间距在台式机上看起来很完美，但在较小的屏幕尺寸上不平衡。因此，您可以创建特定于移动的值，然后创建平板电脑值。

现在，您正在管理三个不同的间距系统。这种分裂方法使您的网站上保持一致的视觉节奏。

差距属性如何使间距变得简单

间隙属性的工作方式不同于传统边缘。您不会单独应用间距。相反，您在父容器上设置了间距规则。容器自动处理所有子元素之间的间距。

启用FlexBox，您将获得两个差距控件：水平和垂直。将水平差距设置为24px，所有子元素之间的空间之间的空间水平为24px。将垂直差距设置为15px，堆叠元素获得15px的垂直空间。

这适用于Flexbox容器中的任何内容。文本模块，图像，按钮，分隔线以及您放入的其他内容都具有相同的一致间距。您无需挖掘单个模块并分别调整其边距；差距属性处理间距数学。

传统方法是随机的间距选择：这里的10px，20px，其他地方40px。这些分散的值会导致不一致，并使很难知道适用哪个间距。 GAP属性通过对所有元素使用一个一致的规则来删除猜测。

这种方法仍然有局限性。您仍然需要记住所使用的每个值，并在需要的任何地方手动应用它。您必须猜测什么值在哪里有效。设置这些值后，改变主意意味着找到每个值并手动更换它，留出错误和不一致的空间。

具有弹性箱和设计变量的基于间隙的间距系统是一种更好的方法。

如何在Divi 5中设置差距系统

构建基于间隙的间距系统听起来很复杂，但是Divi 5使其令人惊讶地简单。您不需要任何编码知识或外部框架。 Visual Builder通过设计变量和Flexbox控件来处理所有内容。从创建间距变量到保存可重复使用的预设，我们将介绍每个步骤。

1。创建间距变量

Divi 5可以使用设计变量将差距值存储在视觉构建器中。您构建一次间距系统，然后应用这些值，在出现flexbox控件的任何位置，不需要自定义CSS功能。

可以在视觉构建器的左侧栏中找到变量管理器。单击该图标，然后打开数字选项卡，其中可以添加间距变量。

在这里，您将创建可以在整个站点而不是硬编码像素的值中使用的值。有几个设计变量可用；我们不会在这篇文章中介绍这些内容，但我们有一个很棒的指南。

从您的基本间距单元开始。大多数设计师以8-12px作为基础工作，但是您可以选择4PX，10PX或任何适合您设计节奏的东西。除了像素外，您还可以在这里使用高级单元。例如，我们从rem开始而不是像素（假设浏览器默认1REM = 16px）：

• GAP XS：0.75REM（仅具有图标和文本的列的紧密关系〜12px）
• 差距S：1.25REM（具有文本块的列的〜20px）
• GAP M：2REM（〜32px用于功能框，服务列）
• GAP L：3REM（主要内容部分，侧边栏布局〜48px）

这些标签不是固定的；您和您的团队可以根据需要重命名。您还可以添加更多差距变量。 REM单元具有浏览器字体设置的规模，因此增加文本大小的访问者会获得比例间距。这可以提高可访问性。

使用夹具制作可扩展的空白

我们也可以使用夹具（）。如果您不知道什么是夹具（），我们将简要解释。但首先，考虑将以下内容添加到数字变量：

• 水平列缝隙：夹具（16px，2vw，32px）（用于卡，功能等之间的水平差距。）
• 垂直柱缝隙：夹具（16px，1.5VW，32px）（用于卡，功能等之间的垂直差距）

Clamp（）是一个安全使用的CSS单元。您给出三个值：最小，首选和最大值。浏览器尝试首选值，但是如果它太小，则使用最小值，如果它太大，则使用最大值。

例如，水平柱间隙：夹具（16px，2vw，32px）。带有屏幕宽度的缝隙缩放（2VW = 2％的视口）。它不会在小屏幕上或大屏幕上的32px以上的16px以下。这使间距保持平衡，而无需断点或媒体查询。

您可以使用任何值。我们选择了这种方法，因为它易于维护，适应更改并产生更一致的结果。

2。在您的各节上启用flexbox布局

默认情况下，新部分使用FlexBox。对于较旧的站点，通过单击设置图标，打开“设计”选项卡，在布局选项卡下选择布局样式，然后选择“ Flex”来转换部分。对您的行和列进行相同的操作。

启用FLEX后，您将获得诸如合理内容的选项，以进行对齐和分配。对齐项目控件可让您设置空间水平耗尽时的项目行为。

在这里，您可以发现差距控件，它们具有单独的水平和垂直滑块，以在一排内的列或模块之间设置间距。

3。使用变量应用差距值

一旦在Divi的变量管理器中设置了差距变量，将它们应用于Flexbox Gap设置，通过动态内容系统将变得简单。导航到您的布局设置，并悬停在水平或垂直间隙字段中的标签上，以揭示动态内容图标。

单击动态内容图标以打开“变量选择”对话框。您保存的差距变量出现在此菜单中。

您可能已经注意到，我们根据使用它们的上下文添加了两组差距。让我们深入了解为什么：

夹具间隙：在弹性列之间

您的夹具间隙将通过Divi的Flexbox设置在“容器”级别上工作。

应用水平列隙[夹具（16px，2vw，32px）]当您并排排列的列时，就像一排的三张服务卡一样。选择后，Divi会自动将其应用于间隙设置。该字段将显示您的变量名称，确认连接。这将在第1列，第2列和第3列之间创建比例的水平间距，当布局方向设置为行。

应用垂直列隙[夹具（16px，1.5vw，32px）]当您的布局方向设置为列时，垂直堆叠项目。当布局方向设置为列时，这将按比例从上到下空间。

当带有行方向包裹到多行的列（例如每行三列排列的六张卡片）时，请应用两个差距。水平差距在每一行中散发物品，而垂直缝隙本身则将行空间。

基本差距：行之内的内容

您的基本差距控制每列内部内容件之间的关系。当标题后面是同一列中的段落和按钮时，请考虑在它们之间使用差距XS（0.75REM）。

如果需要在两个列之间进行显着间距，请考虑使用差距S（1.25REM）对于具有多个文本元素的内容组或GAP L（3REM），尤其是如果将列的布局方向设置为行时。

设计变量优势

设计变量比手动打字值有多个好处。由于标签可以是上下文，因此它们在不记住像素或REM值的情况下保持间距保持一致。

当您更改间距理念时，请在变量管理器中更新变量以更新网站上使用的每个差距。

当团队成员输入不同的值时，此视觉方法还避免了间隔错误。差距变量创建了一种用于间距的通用语言，使布局与您设置的设计标准保持一致。这对于与许多贡献者的大型项目特别有用，或者在客户编辑或添加页面时客户交换后。

4。设置响应差距

手机的水平空间有限。您的三列服务布局在台式机上看起来很棒，但是在360px手机屏幕上变得狭窄而僵硬。

Divi 5为您提供了七个可自定义的断点，可以使用：电话，电话宽，平板电脑，平板电脑宽，桌面，宽屏和超宽。每个断点独立起作用。您可以更改布局方向，交换差距变量，或在移动设备上调整对齐方式，而无需弄乱桌面。这使您可以针对布局需要更改的精确屏幕宽度。

切换到电话断点，然后将布局方向从“行”更改为“列”。清除水平间隙选项，因为您的列垂直堆叠而不是为水平空间而战。

随着视口宽度的变化，基于夹具的垂直间隙会自动缩小并自动增长。在小型手机屏幕上，2VW等于约7px，但夹具不会超过16px。在较大的屏幕上，2VW可能意味着18px，在更大的屏幕上，20px。

随着屏幕尺寸的变化，间距在这些限制之间平稳增长。如果不手动设置不同的值，则您可以在移动设备上获得紧密的间距，并在桌面上进行宽敞的间距。

基本间隙可能仍然需要每个断点的手动调整。 GAP M可能在移动设备上感觉太紧。切换到您的移动断点，然后应用差距L而不是垂直差距选项。

您还可以创建特定于移动的变量，例如“ Gap Mobile S”或“ Gap Mobile L”，并将其应用于手机和平板电脑断点。但是，在大多数情况下，基本基础和夹具差距效果很好。

5。将您的配置保存为预设

您的间隙系统现在运行良好。设计变量使您可以通过与您一起工作的视觉界面进行控制。但是，一遍又一遍地设置Flexbox配置会很快旧。您必须调整布局方向，对齐和包装设置。然后，将差距变量应用于每个新部分。这个过程吃了时间。

选项组预设解决此问题。它存储您完整的FlexBox设置，包括布局方向，对齐，包装，理由以及参考设计变量的水平和垂直间隙。

配置所有Flexbox设置后，将悬停在布局样式面板上。您会看到选项组预设图标。

单击它，然后选择“从当前样式创建预设”。根据布局的作用来命名：“三列网格”，“服务网格”或“卡片显示”。

预设将Flexbox配置传递到任何容器。它不会复制背景颜色，字体或其他视觉样式。

将您的“三列网格”预设应用于任何行。它会自动设置相同的间距，对齐和包装行为。每行或列都可以在使用相同的布局结构时保持其视觉外观。

您花费更少的时间来重新创建已经完善的设置。视觉标识在每个部分中保持独特。结构基础在您的网站上保持一致。您的差距系统保持迅速实现，并且您经过验证的布局模式将有效地重复使用。

每次使用Divi 5获得完美的间距

随着Divi 5的新弹性箱和设计变量，一致的间距变得毫不费力。 GAP控制设备之间的平衡布局，而变量可确保更新在整个网站中都会进行单一更改反映。

您可以获得一个清晰的系统，而不是恒定修复。设置一次间距，将其重复使用，并专注于为访客设计出色的体验。