您需要了解的所有设计变量在Divi 5中

设计变量是最新Divi 5 alpha中的最新功能推出。他们为Divi生态系统带来了有效的Web设计方法。它们不仅仅是节省时间的工具，还允许您定义可重复使用的设计元素，例如颜色，字体和尺寸，即在您的网站上立即更新。设计变量对于团队和客户工作特别有力，它们集中了设计控制，并在没有技术知识的情况下简化了范围的更改。

在这篇文章中，我们将提供您需要了解设计变量，工作方式以及如何在Divi 5中应用它们所需的所有信息。无论您是在调整单页或管理多页网站，设计变量都可以简化设计过程并帮助您快速实现凝聚力设计。

Divi 5已准备好在新网站上使用，但我们不建议将现有网站转换为Divi 5。

Divi 5中的设计变量是什么？

正如简要提到的那样，设计变量使您可以定义可重复使用的可自定义设计元素，这些元素可以单击几下在整个网站上应用。通过对变量进行一次调整，每种使用它的使用情况都会立即更新，从而使您免于乏味的手动编辑。

您可以将设计变量与Divi新内置的CSS单元（如Clamp（），Calc（）等人集成在一起。这些CSS单元允许您创建适应不同设备和屏幕尺寸的动态响应式设计。设计变量可帮助您在一个地方管理这些重复的值，并在需要时在全球更新它们。

如果您熟悉Divi，则可以识别全球颜色系统的回声。设计变量采用并改进了该概念，扩展了超出设置全局颜色以包含字体，数字，图像和文本的概念。使用设计变量，您可以将CSS单元的功率组合到将动态字体尺寸设置为夹具（）或使用calc（）来微调间距。

设计变量对Divi 5的基于预设的设计系统确实很有帮助。它们提供了一个简化的框架，用于在按钮，部分或标题等元素上应用一致的样式。变量充当该系统中的构件，使您可以方便地管理设计选择。无论您是为品牌一致性设置颜色还是数字变量，该变量可以随时调整版式，都可以使您能够构建凝聚力和适应性的站点。

设计变量如何工作？

Divi中的设计变量对于您网站的各个方面都有用，包括数字值，颜色，文本，链接，图像等。每个都旨在控制网站的不同方面。关于设计变量的好处是它们是全球，这意味着您将拥有一个更集中的领域来管理和更新整个网站的所有重复变量。

让我们浏览可以添加到网站的设计变量的类型。

1。颜色变量

这些可重复使用的颜色，例如十六进制代码和渐变，使您的品牌保持一致。它们可以分配一级或次要颜色，标题和身体文本颜色等等。

2。字体变量

使用设计变量，您可以超越WordPress主题定制器的局限性。字体变量可让您在全球管理版式，确保一个更新的每个标题或段落匹配。除了标题和身体文本外，您还可以为网站的其他区域创建字体变量，例如证明，报价或您想要分配字体的任何其他文本区域。

3。数字变量

使用变量进行数字有益于指定填充，边缘，边界等。它们使您可以从一个地方控制整个站点的间距。数字可用于指定字体尺寸和边框 - 拉迪乌斯（Border-radius），并与诸如calc（）或clamp（）之类的高级单元结合使用，以优化各种屏幕尺寸的值。

4。图像变量

图像变量非常适合保存您计划多次使用的图像，例如英雄部分中的徽标，背景模式或图像。像其他设计变量一样，将它们指定一次，并在整个网站中所需的任何地方重复使用它们。

5。文本变量

您可以使用文本变量来创建可编辑的文本字符串，例如标语，电话号码或地址，并应用它们，以便更新更易于管理。例如，您可以添加一次营业时间或地址，并且使用它们的每个区域都会立即反映更改。

6。链接变量

链接变量存储您可以在网站上重复使用的URL。它们非常适合管理经常使用的链接，例如社交媒体平台链接，会员链接或“获取报价”按钮。如果您需要更改链接，请进行一次更新，并且每个实例都会自动更新，从而确保没有损坏的链接或手动修复。

使用设计变量的好处

Divi 5中的设计变量不仅是一项新功能 - 它们在用Divi建立网站时会带来真正的优势。您可以更新单个变量，并立即观察在网站上分布的变化，从而在提高效率的同时节省了数小时的重复编辑。它们还可以通过让您重复使用颜色，字体，间距，边框等来帮助您保持统一的外观，从而使设计从上到下保持一致。

使用Calc（）和Clamp（）之类的CSS变量，您可以创建响应迅速的自适应设计，这些设计在任何设备上看起来都很出色，但很少努力。无论您网站的尺寸如何，变量都可以轻松监督您的设计选择，确保您的网站在保持凝聚力和抛光的同时毫不费力地增长。

使用Divi 5中的设计变量的实际示例

现在，我们已经涵盖了设计变量的基础知识，让我们看一下如何整合整个网站创建的变量。

示例1：响应式排版

使用Divi 5中设计变量的最有效方法之一是clamp（）定义文本大小。您可以为H1标签设置设计变量，例如26px，5vw，90px。夹具（）函数将值设置在定义的范围内，从而使其对于响应式排版非常有用。它需要三个参数：最小值，首选值和最大值。

在这种情况下，最小值为26px - 无论屏幕有多小，文本都不会缩小此大小以下。首选值为5VW（视口宽度），或屏幕宽度的5％。最后，无论视口有多大，90px代表文本的最大尺寸。

示例2：一致的边界

使用Divi 5中使用设计变量的另一种有效方法是在设计元素之间定义边界。假设您需要行，列，图像和其他设计元素具有一致的10px边框半径。您可以使用变量轻松定义此。只需创建一个具有10px值的数字变量即可。您可以使用Divi 5的动态内容图标将其应用于任何模块，行或部分。

示例3：品牌一致性

设计变量可以为您的网站创造一种凝聚感，从而使您保持紧密的烙印。例如，您可以制作带有主要和次要颜色的全球调色板，设置字体以匹配您的品牌，然后将它们分配到网站的标题，按钮，段落和其他元素，以使外观抛光。

示例4：内容更新

使用设计变量的另一种方法是为可重复使用的文本创建变量。例如，您可以为工作时间设置文本变量，例如星期一至周五上午9点至下午5点。从那里，您可以将其应用于页脚和联系页面。当您的工作时间更改时，您只需更新一次变量即可。

另外，您可以将图像变量用于季节性英雄背景，从下雪的场景转换为以春季为主题的图像。如果您想在室内页面标头或召唤功能模块中使用此图像，则只需更改一次图像即可。

开始设计变量

使用设计变量，您可以为网站的几乎每个部分创建全球样式。为了解释该概念，我们将创建两个数字变量：一个用于边界半径，另一个用于标准文本大小，然后向您展示如何应用它们。

开始设计变量很容易。启用视觉构建器，然后单击变量管理器图标。

在“变量管理器”设置打开的情况下，单击“数字”选项卡以将其展开。

单击+添加全局数字按钮以启动变量设置。

首先，我们将为边界设置一个数字值，您可以在任何模块，列，行或部分上使用该数值。从“高级单元”下拉菜单中选择PX 。

分配一个名称（例如边框半径），并将值分配为15 。

最后，通过单击“保存变量”按钮来保存变量。

在Divi 5中应用设计变量

创建变量后，您可以在整个网站中将它们应用于任何地方。例如，选择一个按钮模块，导航到“设计”选项卡，然后选择按钮的边框设置。

在边界半径设置中的顶部和右边界半径场之间悬停，以揭示动态内容图标。

将出现一个对话框，揭示您为边框半径创建的设计变量。单击它将变量应用于按钮模块。

相同的边框半径设计变量可以应用于网站的其他内容区域，例如列边框。

为响应版本创建变量

如前所述，您可以使用clamp（）函数创建设计变量，用于响应式版式。使用相同的数字选项卡为H1标题创建一个新的全局数字。从下拉列表中选择夹具，将H1添加为标题，然后输入26px，5VW，82px以进行该值。保存更改。

要应用变量，请单击布局中的第一个H1标题模块，导航到“设计”选项卡，然后找到标题文本H1文本大小字段。

将悬停在磁场上方稍微悬停以揭示动态内容图标。出现对话框时，选择您创建的用于应用它的H1变量。

您的文本将使用变量中指定的新字体大小进行更新。如果您需要调整尺寸，只需返回全局变量图标，将变量修改为您的喜好，然后应用更改。每个使用H1设计变量的标题都会自动更新，从而使整个站点的更改更加容易，更快。

使用设计变量解锁设计潜力

Divi 5中的设计变量改善了您构建网站的方式，将效率，一致性和创意自由融合为一个功能。他们使用响应式排版，即时更新和可扩展的设计系统简化您的工作流程 - 使您可以在更少的时间内创建更智能的网站。无论您是Divi用户多年还是第一次发现它，设计变量都可以以最少的精力将您的项目提升到新的高度。

下载最新的Divi 5 alpha并探索可能的方法。尝试设计变量，看看它们如何改变您的工作方式。你有想法要分享吗？将它们放在下面的评论中！

Divi 5已准备好在新网站上使用，但我们不建议将现有网站转换为Divi 5。