使用Divi 5的设计变量管理重复的内容

如果有一件事减慢网站的建设，它正在处理重复的内容 - 地址，联系方式，按钮链接或您的公司任务。重复内容对于一致性是必要的，但可以手动管理很乏味。

Divi 5的设计变量有助于解决此问题。现在，您可以插入和更新重复的元素，例如文本，链接，图像，字体和颜色，而不是复制和粘贴相同的内容。在这篇文章中，我们将专门关注您网站上可能拥有的重复内容的类型，以及如何使用Divi 5的设计变量简化它。让我们开始！

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

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

Divi 5中的设计变量是可重复使用的值，您可以定义一次，并单击几下在网站上应用。您还可以在变量管理器内部编辑定义的变量，以自动更新每个实例（其中显示）。您可以创建不同类型的变量，从文本字符串到字体，数字等。

变量管理器可让您在每种类型下创建，姓名和保存变量，从而使它们更易于找到。要将变量应用于您的设计，请将悬停在设置选项上以找到动态内容图标，并将出现保存的变量。

这种小的更改可以通过巧妙地使用和管理重复的内容元素来帮助您优化Web设计过程。

设计变量的类型

Divi 5可让您为六种不同类型的设计变量定义。每个人都有不同的目的：

• 文本变量：可重复使用的纯文本字符串。您可以定义文本变量，例如公司名称，电话号码，标签线，按钮副本等。
• 字体变量：使一致的排版更容易。例如，定义标题（H1至H6）和身体文本的字体系列。
• 数字变量：标准化尺寸，例如填充，边距和线高。例如，在所有部分中定义并应用填充 - 修订设置。
• 颜色变量：现代，升级的全球颜色版本，用于范围内的一致性。
• 链接变量：定义经常使用的URL，例如社交链接，按钮或法律页面。
• 图像变量：保存常见图像，例如您的公司徽标，背景图案，产品图像等，以轻松重复使用它们。

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

如何创建和使用设计变量

我们正在从头开始建造Divi 5，即使对于初学者来说，也可以访问网页设计。每个功能都易于使用，设计变量也没有什么不同。让我们快速介绍设置设计变量所涉及的实用步骤。

创建一个新变量

在Divi Builder内部，通过单击DataStack图标（构建器工具栏中的三层图标）来访问变量管理器。

将弹出一个窗口，其中包括上述六个变量类型。选择要创建的一个。对于我们的示例，我们将向您展示如何将我的公司地址作为全局文本变量保存，因此我们将选择文本变量选项。

单击添加全局字符串以添加新的文本变量。

在这里，我们将命名并添加与该文本变量值关联的文本字符串。首先，命名您的文本变量，然后分配一个字符串值。

将适当的字符串值分配给给定名称后，单击“保存变量”以保存文本变量。确保字符串的名称是唯一的。

就是这样！您已经创建了一个全局文本变量，该变量现在将在您的所有网站页面上可用。让我们看看应用此变量有多容易。

应用变量

假设我想更改页脚部分中的地址。

要应用文本变量，请单击要修改的元素 - 在我们的情况下，地址。由于是文本变量，请转到“设置”面板中的内容，然后悬停在身体​​上以找到动态内容图标。

单击后，所有保存的变量（在文本变量的情况下进行全局字符串）将出现在列表的顶部。

我们将地址保存为地址。要应用地址变量，请单击它。

就是这样。将我的公司地址保存为文本变量，我只需单击几下即可轻松将其插入任何页面。

网站上重复内容的常见类型

为了让您了解设计变量可能的可能性，我们已经汇总了您不再需要每次手动创建或复制/粘贴的所有重复内容元素的列表。

请注意，这些只是内容元素（文本，图像和链接变量类型的示例很好），但是使用其他设计变量，您也可以节省常见的重复设置（例如字体样式和颜色），这使您的工作变得更加容易。

现实用例：设计变量简化了重复的内容

我们还收集了一些实际示例，以说明Divi 5中的每个设计变量如何通过消除重复的内容更新来简化您的工作流程。

1。销售期间更新按钮副本

更新按钮副本，产品标题，描述等，现在已成为只能编辑一次以反映范围内更改的任务。假设我在在线商店上进行了黑色星期五销售，我想在每个主页按钮上显示30％的折扣。

我可以使用文本变量轻松地进行一次编辑。我已经创建并保存了一个名为“按钮”（30％折扣）的文本变量（30％的折扣）（30％折扣!! ），因此我们只需要将其应用于所有按钮即可反映副本。

最好的部分是，当销售结束时，您只需要一次更新文本变量的值，所有按钮将自动切换回他们的原始副本。

您可以为您的公司地址，联系方式，标签线等创建类似的文本变量，您将更频繁地使用。另一个示例是将客户端证明作为文本字符串保存，并在定价页面，触点表格下方或靠近服务按钮等关键领域重复使用它们。这将巧妙地建立信任并帮助访客更快地做出决定。

2。将主题颜色扩展到所有按钮

假设您想在黑色星期五销售期间将所有网站按钮颜色更改为黑色。由于您保存的所有按钮都从网站按钮颜色变量继承了颜色，因此您需要做的就是将颜色更改为黑色，所有按钮都会反映黑色星期五的精神。

请注意，如果您暂时更改主要或次要颜色（如上面的示例中），则应将原始颜色的十六进制代码保留在某个地方，以便您始终通过再次更改值来恢复它们。

3。管理排版的全球价值

添加新的标题或文本模块时，您不必重复相同的排版设置。与其通过文本大小设置手动调整每个标题，不如将您的首选值分配一次并在需要的任何地方重复使用。您可以为从H1到H6的每个标题级别定义全局字体尺寸，并仅一键单击在网站上应用它们。您还可以轻松地使用元素或选项组预设内部的设计变量。

这是一个巨大的节省时间，尤其是在使用大型页面或更新样式（例如间距，边框宽度或不同部分的图像比率）时。您可以立即应用一致的值，以保持设计清洁有效，而不是单独调整每个元素。

4。节省和管理全局字体更有效

为标题，车身和特定部分保存并重用全球字体。您可以将不同的字体分配给各节，例如类别页面或着陆页，以匹配音调。

例如，您可能会在博客类别页面上使用强大的衬线字体，例如“意见”或“社论”，从而使他们具有更严肃的印刷品，同时使用清洁，现代的Sans-Serif用于产品或降落页面，以保持光线和转换为中心。您可能还需要使用其他字体进行推荐或内联标语。添加多个字体变量，清楚地标记它们，并在无手动更新的情况下将其应用于网站。

5。保存您的背景图案以快速访问

您可以单击几下将背景图案作为图像变量保存为图像变量，并将其应用于部分，行和模块背景。

同样，保存公司徽标，产品图像，个人照片（如果您正在建立个人品牌），英雄图像等，则可以在需要时单击一键访问它，从而非常容易访问它们。

6。立即添加购买链接

保存键URL，例如购买链接，联系页面或隐私策略作为链接变量，并单击单击将其应用于按钮或文本。每次都不再复制。这对于在多个页面或模板上出现的常用链接特别有用。

设计变量在Divi 5的基于预设的设计系统中起着关键作用，尤其是在有效地管理重复内容时。您可以将变量定义一次并在任何地方重复使用，而不是重新涂上相同的样式或在页面上粘贴确切的文本。结合预设，设计变量变得更加有用。

这不仅可以加快您的工作流程，而且可以确保您的网站一致性。无论是字体大小的数字变量还是用于联系信息的文本变量，设计变量都可以在全球范围内更新重复的内容而无需浏览每个模块。

有效使用设计变量的最佳实践

为了充分利用设计变量，请在您的网站设计过程的早期阶段开始包括它们。这里有一些可以帮助您的技巧：

1。开始小

如果您从设计变量开始，请先从您知道您经常重复使用的必需品开始，例如徽标，全局字体，颜色，字体尺寸或按钮填充。首先设置这些可以为您提供一致的基础。然后，随着设计的发展，根据需要在更多变量上分层。

2。遵循明确的命名约定

当您添加更多变量时，即使存在类别，也很容易开始将一个变量与另一个变量混淆。这就是为什么明确的命名约定至关重要的原因。避免使用Text1或促销等模糊标签。相反，使用Company_name ， main_cta或footer_disclaimer （例如Company_name）等描述性名称保持井井有条并节省时间。

3。在网站页面之前更新变量

如果您要推出网站范围内的报价或更新品牌，则需要单独修改主要元素。不。首先调整变量。然后，扫描您的页面以确认所有内容的同步。它只需要一个更新；追捕每个按钮或部分是不必要的。

4。不要过度使用，要战略性

虽然很容易将每个文本变成一个变量，但会很快变得压倒性，尤其是如果您不以上下文命名变量。因此，注意模式，例如在多个地方使用的短语或线条。并仅将其转换为变量。如果一个短语仅出现一次，则可以保持原样。

设计变量简化了内容管理

手动管理重复的内容，例如在几十页上更新相同的标语或通话行动，这是网页设计师工作的繁琐部分。复制，粘贴，仔细检查 - 很容易错过某些东西，甚至更容易感到沮丧。不再。

使用设计变量，您可以集中内容设置。更改变量一次，每个实例都会立即更新。不再需要重复的编辑或版本不匹配 - 只需更快的更新，更清洁的工作流和头痛较少即可。

下载最新的Divi 5 Alpha

设计变量现在可以在Divi 5 alpha中使用，可以在这里简化您的工作流程。您可以从单个源中控制重复的内容和样式，从全局字体和颜色到链接和文本变量。设置您的基本元素，将它们跨部分应用，然后一次更新所有内容。无论是完善客户端项目还是重建网站，此功能都可以帮助您更快地移动错误。

准备尝试吗？下载Divi 5 alpha，然后开始尝试设计变量。定义字体，重复使用按钮标签或巧妙地设置全局样式。而且，不要忘记与Divi团队分享您的反馈 - 我们正在牢记您。

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