使用Divi 5建立设计框架

如果您曾经与Bootstrap这样的CSS框架合作，那么您会明白为什么它如此受欢迎。设计框架为您提供了可重复使用的基础来设计快速，一致的布局，因此每次设计页面时都不会从头开始构建。

尽管大多数框架都依赖于预先编写的类，但他们仍然希望您编写自定义定制的自定义CSS，这对非编码者来说很棘手。这就是Divi 5的不同之处。

它采用视觉优先的方法，用设计变量，选项组预设和元素预设等工具代替CSS。您将获得框架的所有力量，而无需编写一行CSS。在这篇文章中，我们将向您展示如何使用Divi 5在视觉上构建无代码设计框架。

Divi 5已准备好在新网站上使用，但我们不建议迁移现有网站。

Divi 5如何允许您构建一个无代码设计框架

Divi 5从头开始重建，以使所有人都可以访问高级网络设计。无论您的编码水平如何，它都可以在视觉上构建现代的自定义布局。建立设计框架没有什么不同。

订阅我们的YouTube频道

设计变量让您定义全局设计值

设计变量可让您定义可重复的值，例如品牌的颜色，字体，间距等。保存后，您可以在整个网站中重复使用这些值，以使其具有一致的品牌视觉外观。

在Visual Builder内部，以有组织的方式找到变量管理器以定义和存储不同的变量类型（数字，文本，图像，链接，颜色和字体）。

设计变量就像CSS自定义属性的无代码版本，但具有更大的灵活性。例如，您通常会声明CSS变量，例如：root { - primary-color：＃1a73e8; } ，但是使用Divi的设计变量，您只需将颜色保存为主要颜色即可。

在进行更新时，您会看到他们的真正力量。无需浏览您的样式表；只需在变量管理器中修改一次保存的变量值即可更新整个网站的每个实例。他们让您在不遵守几种样式规则的情况下快速可视化您的想法。

另外，您可以将常见重复的内容元素定义为内容变量，例如地址，电子邮件，链接，背景图案等。您不必多次手动插入它们；一键，这些元素出现在您的页面上。例如，保存并使用公司地址作为文本变量。

要应用设计变量，请悬停选项并查找动态内容图标。

了解有关设计变量的所有信息

使用选项组预设保存常见的样式组合

选项组预设可让您保存和重复使用经常使用的设计设置，例如间距，边框，阴影，文本样式和背景，而无需每次重建它们。他们专注于模块中的一组选项组，因此您可以将该部分设置为样式，然后单击任何地方将其应用于任何地方。

例如，假设您始终在所有推荐部分上使用相同的40px填充和10px边距。将这些设置保存为间距预设。添加新的推荐模块时，选择预设，然后完成。

使选项组预设功能强大的原因是，您可以将它们与设计变量混合在一起。如果您的主要颜色被保存为变量，则可以在背景预设中使用它，因此，如果品牌颜色会更改，则整个预设更新。您所有页面上所有页面的背景都会单击更改。

选项组预设不会覆盖整个模块，而仅适用于您选择的样式组。但是，您始终可以使用特定于模块的设置覆盖预设以自定义特定的模块。这使您可以保持布局和内容的独特性，同时仍确保网站上的视觉样式一致。

了解有关选项组预设的所有内容

用元素预设保存完全设计的元素

如果您曾经是Divi用户，那么您已经熟悉元素预设。它们可让您保存模块的所有自定义样式，包括文本，间距，颜色，图标，悬停效果，作为元素预设，因此您可以在任何地方重复使用它而无需从头开始构建。您基本上是创建最使用的模块的即时版本。

这是一个快速的用例：自定义并保存一个平面预设，然后将其应用于其他未风格的Blurbs以快速样式。

这些工具如何在前端html中反映

Divi 5看起来像是一个无代码工具，但实际上是在后台编写干净的结构化代码。当您在视觉上调整设置时，例如选择间距预设或从变量管理器中应用品牌颜色，而不仅仅是造型模块。您还在编写代码。

您做出的每个设计决策都会转化为适当的前端输出。当您专注于设计时，Divi会处理编码部分。

为了向您展示这有多强大，我们将使用传统的CSS框架（如Bootstrap）将Divi 5中的视觉优先工作流进行比较。

第一个引导程序：

在Bootstrap中用代码手动构建设计系统

在我们的示例中，我使用了已安装的底面主题的WordPress设置。

在典型的基于代码的工作流程中，您将首先将您的全局设计值定义为CSS变量。这是我们的：

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

假设我们正在建立一个简单的联系页面布局，并使用触点表格和一个自定义风格的按钮。为了保持所有内容一致和可重复使用，我们将使用Bootstrap的实用程序类和我们自己的CSS变量的混合。

首先，我们使用Bootstrap的内置表单类添加自定义代码，以处理布局和输入样式。

然后，我们为样式按钮添加代码。在这里，我们将Bootstrap实用程序类与我们的自定义CSS变量相结合，用于背景，边界半径和阴影。这使我们可以完全控制外观和感觉。如果我们想进行更改，我们可以更新我们的变量。

如您所见，这是很棒而高效的，但是一切都是手动构建的。我们定义了变量，应用了类，并独自编写了整个代码。这是一个简单的布局，想象使用这种方法构建复杂页面！

现在，让我们使用Divi 5构建同一页面而无需编码。

用Divi 5在视觉上重新创建同一页面

我们首先定义成为网站范围设计系统一部分的全球设计变量。首先，您转到变量管理器>颜色。然后，为主颜色（＃E91E63）编写十六进制代码并保存。

同样，您还可以为边界半径{6px}和间距保存数字变量。接下来，我添加联系表单模块，然后将提交按钮自定义为我的首选样式：

现在，我将这些按钮设置保存为按钮预设，供以后使用。

如果我添加另一个按钮并选择按钮预设，请查看会发生什么？它会自动进行样式。

要应用选项组预设，请悬停在设置上并查找设置图标。

另外，您是否注意到我们如何一次单击将多个自定义样式应用于按钮而不触摸一行代码？这就是我们说您在视觉上保存设计偏好时的意思。这是为了构建的工作流程Divi 5。它是快速，一致且完全视觉的。

幕后发生的事情是神奇的。 Divi不仅盲目地堆叠样式。您应用的每个设计变量，预设和设置都均构成在前端呈现的干净，高效的代码中。

上述分区设计的页面的页面源显示，就像CSS变量一样，主要颜色保存在根部分中：

在前端，您的选项组预设将自动保存并输出为针对适当类的清洁CSS （.ET_PB_BUTTON，.ET_PB_CONTACT_SUBMIT）。

这两个页面看起来都一样，但是它们的构建和维护方式是完全不同的。

在Bootstrap中，我们从其公用事业类中受益，但仍然必须编写代码。但是使用Divi 5，我们仅通过使用其功能强大的功能（例如设计变量和选项组预设）就达到了相同的结果而没有触摸代码线。

每次更改都单击几下，没有矛盾的风险，但前端代码仍然保持清洁。 Divi以结构化的可重复使用格式存储您的样式，而不会添加不必要的标记或内联样式。

如何使用Divi 5构建设计框架

Divi 5为您提供了构建可扩展设计系统的所有工具，但是就像在传统开发中一样，您使用这些工具的顺序很重要。让我们浏览步骤，更重要的是，了解原因：

1。定义您的全局设计变量

在设计页面之前，请先定义全局设计变量。这些是您整个网站将依靠的核心价值，例如您的颜色，字体，尺寸，间距单元等。一旦定义了网站的构建块，您就可以在任何地方重复使用它们，以保持所有内容一致，清洁和易于管理。

在Divi 5中，您有变量管理器来创建和组织它们。

这是突出显示的变量类型的作用：

• 颜色：保存品牌的主要，次要和重音颜色，因此您不必键入十六进制代码或匹配阴影。保存您的颜色变量，然后单击一次。
• 字体：定义用于标题，正文或证明的确切字体。每次创建H2时，就不会重新选择Poppins大胆，而是将其保存为字体变量。您将能够轻松地在模块上重复使用相同的样式。
• 数字：存储您的首选设计值，例如卡片的8px边框半径或图像模块的32px填充，作为数字变量。您还可以在数字变量内使用高级单元来进行动态设计。

设置了核心变量后，您构建的每个预设和页面都将依赖于它们。而且，如果您的设计方向以后更改（例如，您想调整基本间距） ，则只需要在一个地方更新变量即可。

正确定义设计变量后，无需狩猎和修改每个实例。只需在变量管理器本身中更改一个值即可。

2。保存全球经常性内容

使用变量管理器，您还可以保存内容值，例如链接，文本和图像，这些链接，文本和图像经常在您的网站上重复。通常，您每次都会复制并粘贴这些值，但是Divi 5可以使它们定义一次并在任何地方重复使用它们。

这对于保存社交媒体链接，公司的联系方式以及其他需要手动添加的重复内容特别有用。

您可以通过其余三个变量保存内容：

• 文字：假设您的公司地址出现在页脚，联系人页面和主页的英雄部分中。将其另存为文本变量，然后在您希望地址出现的任何地方选择它。
• 链接：将URL保存到您的关于页面，产品集，社交资料或条款和条件作为链接变量的条款和条件。
• 图像：如果您在多个页面上使用品牌徽标或背景图像，请将其作为图像变量。想象一下，点击跨模板上替换占位符图像！

Divi 5可让您将文本，链接和图像视为可重复使用的构件。这些内容变量可能会感觉很小，但会极大地影响速度，准确性和长期维护。您可以节省时间，减少错误，并保持网站持续更新。

3。创建并保存核心样式，并使用选项组预设

设计变量到位后，您的下一步就是使用选项组预设来定义网站的核心样式模式。将常用的设计设置保存为预设，并在任何模块上重复使用它们。

这是充分利用选项组预设的方法：

1。保存预设

首先为您最常使用的设置保存预设，例如边框半径，背景颜色或间距。假设我始终使用40px顶部填充物和10px底部边距进行推荐，因此我将这些值作为间距预设保存。

我可以立即将该间隔应用于我的推荐（如果需要的话，以及其他模块） 。对于您始终如一地重复使用的每个设置组，请执行此操作：边框，框阴影，按钮背景等，以便在构建页面时可以重复使用它们。

2。将设计变量与预设相结合

接下来，通过将设计变量与选项组预设相结合来增强框架。假设您将6px边框半径作为数字变量保存，并在创建选项组预设时使用它。如果以后更改变量，则您的预设还将自动在整个站点上进行更新。

同样，您可以使用夹具（）值来创建流体版式以进行响应式文本。将其保存在H1预设中，并始终将其应用于整个布局的标题。这种预设和变量的组合是您的视觉框架真正开始变成模块化，可扩展且易于维护的地方。

您还可以将选项组预设保存为默认设备，这意味着样式也将自动应用于新模块。在公共预设中应用默认值，这样您甚至不必每次选择预设。

4。创建元素预设

元素预设完成您的设计框架。保存首选样式作为预设后，您还应该将模块样式作为元素预设保存。

这对于您经常使用的模块特别有用，例如CTA，推荐，Blurb和接触表格。例如，如果您使用品牌颜色，柔和的阴影和特定的填充设计了一个CTA按钮，则可以将整个设计保存为称为主灯的预设。稍后，一键即时将其应用于任何新按钮。

将元素预设设置为默认

您还可以将任何元素预设为默认设置，因此该类型的每个新模块都会自动遵循保存的设计样式。保存上面的主灯按钮预设为默认情况，您会看到新按钮继承其样式：

默认会加快您的工作流程，并且您仍然可以在需要时覆盖它们。但是在大多数情况下，具有明确定义的预设会减少重复的工作并消除设计猜测。将这三个功能组合在一起，您将遵循一个基于预设的设计框架，该框架使网站构建完全无编码。

根据您的设计框架设计新页面

现在，我保存了所有喜欢的设计变量，选项组预设和元素预设，让我们测试我们的框架。

构建新页面已成为更快，更轻松的体验。我不需要从头开始或手动重新启动每个模块。我需要的一切都已经设置了。

如您所见，我仅在几下单击了多个设计更改。是的，我导入了预制的Divi布局，但是我将其保存的框架安装到了几秒钟。

与其选择字体，调整间距或手动调整颜色，我只是应用了保存的预设。按钮设计，文本尺寸，背景样式和图像边界都遵循了我之前构建的框架设置。

手动将这些样式应用于一个模块可能没什么大不了的。但是，当您自定义整个页面时，差异很明显。您可以注意到我进行了所有这些更改的便捷性和速度。这是创建设计框架的真正好处：它可以加快您的工作流程而不牺牲质量或一致性。

最好的部分是进行更新。如果我的全局价值观发生了变化，我只需要通过变量管理器修改保存的设计变量即可。我还可以通过单击小型设置图标来修改我的选项组和元素预设。

这是Power Divi 5带给您的。它使您可以创建，保存和自定义整个设计框架，而无需触摸一行代码。

视觉构建无代码设计框架

创建设计框架不再仅适用于开发人员。使用正确的工具，即使您以前从未触摸过代码，任何人都可以做到。正如您在这篇文章中所看到的那样，创建自己的设计系统的几个明智的步骤。如何？通过使用Divi 5。

Divi 5为您提供了使它实现的工具

Divi 5可以处理复杂性，并通过其高级功能为您提供完全控制。您可以更快地构建，保持一致并进行全局更新，而不会离开视觉构建器。酷，对吧？但这只是冰山一角，我们才刚刚开始！

我们有更多令人惊叹的功能排队以供发布，我们等不及您尝试它们。立即下载公共Alpha，并在不进行编码限制的情况下构建自己的设计框架。

Divi 5已准备好在新网站上使用，但我们不建议迁移现有网站。