如何用Divi 5的设计变量代替静态样式

如果您一次调整颜色，填充或字体一次，那么您可能会意识到可以更慢，容易出错和无聊的手动样式更改。

Divi 5引入了一种更聪明的处理方式。使用设计变量并查找和替换，您可以在布局上更新静态样式，并在几分钟内构建可重复使用的设计系统。让我们看看如何。

Divi 5已准备好在新网站上使用。

什么是“静态样式”？

当您导入Divi布局或使用预设计的部分时，已经设置了所有内容，例如字体，颜色，间距和边界。如果布局不使用预设，您会注意到这些值是在元素级别上应用的。

标题可能具有手动输入的字体大小，按钮可能会使用特定的颜色代码，并且填充或间距可能使用固定的数字。这些直接应用的值称为静态样式。

尽管起初它们看起来无害，但当您想进行更改时，它们可能很快成为一个问题。静态样式的问题是，它们需要更多时间来管理。如果要更改所有按钮的颜色或在各节之间调整间距，则必须手动编辑每个按钮。那是缓慢而令人沮丧的。

现在，想象一下，您正在手动更新完整的网站品牌或使用重复样式的复杂布局工作。许多设计师分享了这一过程的挫败感。但是多年来，没有可靠的方法来解决它。这就是为什么我们在Divi 5中构建了更智能的解决方案的原因。

Divi 5如何使替换静态样式变得容易

我们使用Divi 5的目标之一是使您的设计工作流程更快，重复性降低。为了帮助您，我们添加了两个强大的功能：设计变量，可让您集中样式并查找和替换，从而使您可以在布局中立即更新它们。让我们详细了解它们。

设计变量可让您定义全球样式

使用Divi 5，您最终可以视觉上构建自己的设计框架，并使用它来快速修改品牌样式。

Divi 5现在让您将这些值保存为设计变量，而不是在每个模块上手动应用相同的颜色，字体或间距。这些是可重复使用的值，您可以在整个站点中参考，以使设计更加一致和易于维护。

在Visual Builder内部，变量管理器可让您以六种不同类型的方式创建和组织变量：颜色，字体，数字（例如间距或尺寸），文本，图像和链接。

您可以使用一个清晰的名称（例如部分填充）保存每个变量，因此查找和重复使用更容易。与手动编写CSS变量不同，Divi的界面使您可以直观地管理这些值而无需触摸代码。

应用这些保存变量也很容易。在自定义模块时，转到设置，找到变量管理器图标，然后从列表中选择您的变量。

当需要进行更改时，您会看到真正的优势。假设您想在任何地方更改填充物。您只需在变量管理器中更新一个值，而不是编辑数十个模块，然后在您的网站上更新。

注意在应用设置字段中实时更改的值？这就是全球设计系统的力量。

而且这也不仅限于设计样式。要有效地管理重复的内容，您还可以保存文本，图像和链接，例如地址，电子邮件或公司标语作为内容变量。不再需要复制paste，只需像动态内容一样插入它，并且它将在您的网站上保持一致。

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

查找并替换使您可以从静态样式切换到全局样式

Divi 5的查找和替换功能可让您快速在布局上快速更新样式值，而无需单独编辑每个模块。它旨在帮助您更改静态值，例如颜色，字体，间距或任何其他设置，这些设置仅需单击几下从单个起点重复的部分。

要使用它，请右键单击视觉构建器内部的任何样式字段，或悬停在悬空中，然后单击三个点。您将在下拉列表中看到查找和替换选项。

这打开了一个新的查找并替换面板。在这里，您可以进行所需的更改并批量应用它们。

• （1.）源元素：您要定位的设置（例如，文本，颜色或间距）。打开下拉列表，您会注意到它实际上是层次结构。
• （2.）查找值：要替换的确切值，例如特定字体或颜色代码。
• （3.）替换值：您要应用的新值或变量。
• （4.）在位置找到并替换：选择在何处应用更改。此模块，部分或整个页面。
• （5.）在元素类型中找到并替换：确定更改是否应适用于所有元素或仅特定模块类型。
• （6.）仅替换相同的字段：启用时，仅当设置和值完全匹配时，才会发生替换。

这是它的工作方式。假设您想更改页面上使用的标题字体。我们将使用查找和替换面板，而不是通过模块进行模块。

当您从标题的设置打开它时，源元素是自动选择的，因此您不必总是手动选择它。

（您还可以单击不同的元素，面板选项将自动调整。）

在查找值中，输入要替换的值。就我们的示例而言，这是梅德拉一号，当前应用的字体。在替换值中，选择要应用的新值。让我们选择Aclonica。

然后选择是否要更新整个页面中的所有实例，还是仅更新查找和替换位置中的列，行还是部分。由于我们要针对所有标题模块，因此将查找并替换为元素类型作为所有元素。

就是这样。只需点击查找和替换，并且在几秒钟内更新了20个标题实例。注意身体文本和按钮字体保持不变吗？那是因为他们使用不同的值。这就是系统的精确性。

Divi仅在找到确切匹配的情况下应用更改。这意味着您可以自信地清理静态样式，而不会弄乱不需要更改的设计。但是，设计变量如何适合这里？

他们就像蛋糕上的锦上添花。您还可以在替换值字段中使用设计变量。悬停在它上，单击变量管理器图标，然后插入一个保存的变量。

这将您的样式链接到全球可重复使用的系统，该系统更容易更新更容易，更有效。这正是我们将使用设计变量替换所有静态值的方式，以使未来的网站更容易更新。

了解有关查找和替换的所有内容

这两个功能（以及更多功能）都可以在Divi 5中提供。建造者已被重新构想，以提供更快的性能，更智能的工作流程和更多的控制。老实说，阅读它们令人兴奋，但是当您自己体验这些功能时，您会注意到真正的变化。

如何用保存变量替换静态样式

现在您知道我们将使用什么工具了，是时候看到它们正在行动了。

为了使您完成整个过程，我以派店登陆页面布局为例。该布局的设计细节（例如字体，颜色和间距）被用作静态样式。传统的方式要求您按模块自定义IT模块。但是在本教程中，我们将使用刚刚涵盖的工作流程逐步替换它们。

但是，在您潜水之前，请花一点时间扫描布局以获取图案。寻找重复的样式，例如跨按钮使用的相同颜色，标题中相似的字体大小，部分之间的一致间距或相同的边框设置。这些重复值是设计变量的最佳候选人，尤其是如果您以后可能会更改它们。

1。保存设计变量

在分析了Pie Shop布局之后，我已经确定了一些在页面上始终出现的值，并希望用我的首选样式更新它们。其中包括：

• 行边框宽度
• 按钮填充
• 标题文字
• 正文
• 身体文字颜色

现在，它们被用作静态样式。因此，我不会将它们转换为设计变量，而不是手动重复相同的设置。这为我提供了一个简单，可重复使用的框架，只需单击几下即可更新页面样式。

让我们从行上的边框宽度开始。要创建和保存变量，请打开变量管理器并选择类型。对于行的边框宽度，我将选择数字变量。接下来，命名您的变量并为其分配一个值。单击保存变量。

保存后，该变量就可以单击重复使用。它将显示可以设置边框宽度的任何地方。我将遵循相同的过程，以获取标题文本，字体，文本颜色和按钮填充。这些保存的变量现在构成了我布局设计语言的基础。你也一样。

这样，如果您决定在以后调整按钮间距或更改字体，则无需一个一个一个一个一个。只需更新变量，其余的就会自行更新。

2。使用查找并替换将静态样式切换到变量

准备好我们的设计变量后，下一步是使用查找和替换替换整个布局的静态值。让我们从按钮填充开始。

目前，每个按钮都使用手动输入的填充：顶部和底部的6px，左右的1Px。为了带来一致性并使更新变得更容易，我创建了两个变量：

• button-t =顶部和底部填充的12px。
• button-l =左右填充的32px。

要应用这些，我将打开任何按钮的设置，转到设计>间距>填充，右键单击填充值，然后从选项中选择查找和替换。

在查找和替换面板中，我将用来自变量管理器的保存变量替换现有的静态值。

单击查找并替换后，整个页面上的所有五个按钮实例都会立即更新以使用新的填充值。

您可以按照我们之前确定的任何其他静态样式遵循相同的步骤。使用查找并替换与保存的变量交换每个人，最终您将获得与全局设计系统完全连接的布局。

3。将您的首选样式转换为预设（可选）

对于本文的范围，此步骤是可选的，但这是扩展您的设计系统的有力方法。

用变量替换静态样式后，您可以将这些模块保存为选项组预设。例如，将边框宽度的保存变量分配给行之后，我将该行保存为行边框预设。

在预设中使用变量意味着您的设计系统的任何将来的更新，例如更改变量的值，都会使用该预设在所有模块中自动反映所有模块。无需重新申请或手动更新任何内容。

因此，我们不仅只需单击几下即可使用新品牌更新整个页面，而且还创建了一个灵活的系统，使未来更新更快，更轻松且完全连接。它如何在真正的布局中起作用？是时候看到行动了。

更新您的页面样式比以往任何时候都容易

我们从静态样式转换为设计变量的原因很简单：它们使更新更加容易。有了设计变量，编辑布局变得非常简单。

如果您想更改网站上的标题字体，则无需一个一个一个一个一个。只需打开变量管理器，更新您之前保存的字体值，并且更改适用于任何变量所使用的地方。

如果您使用设计变量，您的选项组预设也将自动更新。这可以使您的样式保持连接，因此您不必在不同的模块或页面上重复相同的编辑。

当我早些时候定制馅饼商店布局时，我没有手动调整每个按钮或标题。我只是编辑了保存的变量。我前面定义的字体，填充和颜色自动在整个页面上应用。布局遵循我已经构建的系统。

当然，在一个模块中调整填充或更改颜色并不难。但是，当您在整个网站上更新数十种样式时，差异很大。它不仅更快，而且更清洁，更可靠，而且容易出错。

这是切换到变量的真正价值：您的整个设计变得易于管理。当您的客户要求下个月的品牌更改时？您将在他们喝咖啡之前就完成。

通过查找和替换使散装简化

您不必每次设计时都必须从头开始。有了Divi 5的系统，更新就不像是一件琐事，而是向前迈出的简单一步。

此工作流不仅在设置过程中有用。这就是使未来更新更容易的原因。无论您的客户是否要求使用新字体，还是要测试其他品牌颜色，您都可以进行一次更改，并看到它在任何地方反映。

Divi 5旨在支持真实的人设计网站。而现在，您的设计系统可以与您的想法一样灵活。