如何使用Divi 5创建颜色系统

随机颜色选择很少导致凝聚力设计。如果您要专业地构建网站，则需要有意的系统。您可以使用颜色管理和设计变量在Divi 5中构建真实的颜色系统。这些是您直接在Visual编辑器中设置的颜色，可以在任何颜色字段中访问，并提供许多其他便利（我们将在下面向您展示）。

这篇文章将向您展示如何在Divi 5中设置灵活的可扩展颜色系统。

什么是颜色系统？

颜色系统基本上是在您的网站上始终使用的预先计划的颜色调色板。它有助于所有有意地样式而不是随机扔在一起。对于一个好的系统，您通常需要：

• 原色：主要品牌颜色。
• 次要颜色：支持和对比主要。
• 文字颜色：清晰可读的标题和段落。
• 口音：警报，通知和其他重要内容的其他颜色（可选）。
• 背景颜色：通常是中性或微妙的色彩。

60-30-10规则适用于Web设计中的颜色。通常，中性颜色（如截面背景和负空间）将用于60％的设计，30％的原色以及其余10％的次级/口音颜色。

如何选择网站颜色

品牌颜色和网站上使用的颜色并不是要轻易采取的决定。创建有目的的调色板取决于设计师的技能，颜色心理学，行业和品牌差异化。但是，一旦拥有基本颜色和品牌资产（例如徽标变化），就可以开始创建设计系统。

如果您的设计资源有限，则可以执行一些快速任务来为您的网站构建做准备。首先，粗略地阅读色彩心理学。寻找您要传达的品牌价值观（信任，年轻，创新等），并尝试根据这些价值观匹配颜色。然后，查看一些您认为适合自己品牌价值的家庭认可的品牌。他们使用什么颜色？他们如何在网站，广告和社交帖子中使用它们？

您的公司价值甚至可能取决于您所做的工作类型。锁匠和水管工必须可靠，因此蓝色是传达这一点的好方法。金融规划师和园丁从事增长和可持续性（在各自的领域），因此格林在那里是一个很好的锚点。花农，育儿中心和餐馆可以依靠红色和黄色，将能量和活力与品牌联系起来。一旦有了一般的想法，请使用诸如Coolors之类的东西来创建一个简单的调色板。

在Divi 5中构建您的颜色系统

Divi 5带有设计变量管理器，这是处理全球颜色的最简单方法。在其中，您有四种预分配的全球颜色，供您开箱即用。他们是：

1. 原色
2. 次要颜色
3. 标题文字颜色
4. 身体文字颜色

步骤1：将基本颜色定义为变量

在Divi的左侧边栏中，打开设计变量管理器。找到颜色部分，您应该看到这四个不同的默认值。

这四个标签无法删除，但是您可以选择要设置的颜色。除这四个外，您还可以通过单击“添加全局颜色”按钮来添加任意多的颜色。继续并输入颜色生成器的颜色的十六进制值。

这些变量在Divi的Visual Builder中随处可见，这非常方便。但是请确保保存它们！

步骤2：创建带有HSL颜色的阴影和色调

使用Divi的HSL过滤器，我们可以创建色调（颜色的较轻版本）和阴影（颜色的较深版本）。对于这个项目，我们只会为主要和次要颜色做出变化。您可以使用调色板生成器来创建这些颜色变化。

这里的第一步是创建另一种全局颜色。但是，与其粘贴十六进制值，不如选择现有颜色来创建变体（阴影和色调）。

现在，我们需要将过滤器应用于该基本颜色以创建变体。单击“颜色芯片”，然后选择“过滤颜色”，或单击“新的相对颜色变量”的颜色色板。

为您的每种颜色变化执行此操作。确保给出您的颜色变化名称并保存。

例如，由于主要颜色相当深，我们可以添加一些较轻的色调和几个深色的阴影。当我们将颜色系统应用于页面设计时，这应该给我很多选择。

重复上述步骤的次要和/或重音颜色。创建这些变体时，请始终选择一种基本颜色，然后在其顶部应用过滤器。这样，如果您改变了原色，这些变化将效仿。

用Divi应用您的颜色

您的变量现在存在。是时候使用它们了。我们将从空白的Divi页面开始，然后依次朝着设计精美的布局工作。

步骤1。创建页面的线框

您可以从线框而不是空白页开始，这可以帮助您更好地了解颜色系统。一旦了解页面的一般结构和流程，就可以开始做出设计选择。您也可以使用Divi的许多预制布局包或入门网站之一。他们是否已经定义了颜色都没关系。我们可以轻松更改这些。

在此示例中，我们选择修改咨询布局包并使用其主页布局。如果您做类似的事情，则可以导入预设。但是，您将需要编辑这些预设中的颜色。为了简单起见，我们将直接在模块/元素级别修改样式。

步骤2。版式和颜色

默认情况下，Divi使用您的全球标题和身体文本颜色，使您的文本清洁和可读。您总是可以通过更改模块或预设上的文本颜色来覆盖这些预定的颜色选择，但是您不必经常这样做。

请注意，模块中的标题颜色如何不设置。 Divi自动为您为标题和正文文本分配了全局颜色。当然，您可以通过选择其他颜色来覆盖它。

您可以自定义链接可以使它们更明显并吸引点击的颜色。

您可能还有其他要样式的文本，还有其他模块（除标题和文本模块外）。诸如联系表，倒计时计时器和博客模块之类的模块都可能需要独特地应用颜色。

步骤3。造型按钮

默认情况下，Divi的按钮很简单，并且采用您的主要颜色。但是，如果您想要不同的事情，您就不会被迫做出这个决定。打开模块的设置面板，导航到“设计”选项卡，然后选择按钮。在按钮设置下，启用“使用自定义样式进行按钮”。将您的背景设置为您选择的全局颜色，并将按钮文本视为可读的颜色，例如白色。

如果您在页面上有两个按钮或多个按钮，则可以使用辅助颜色或其他口音为辅助按钮样式创建一个单独的按钮预设。

用色调和/或阴影创建悬停状态

悬停状态增加了互动和目的感。使用悬停样式的早期色调和阴影。在按钮上实现很明显，但也可以在其他地方巧妙地使用。

单击背景颜色选项旁边的光标图标以启用悬停状态。设置悬停背景颜色。当用户悬停在按钮上时，它在视觉上响应，自然引导互动。

步骤4。用颜色预设和梯度创建部分

Divi中的部分默认情况下具有透明的背景。这意味着如果保持不定，它们通常会显示为白色。您可以通过根据您的主要颜色之一的色调创建中性颜色变化来添加一些阴谋。

这种背景颜色接近黑色，但具有与主颜色相同的基本色调，使其具有微妙的“主题”凝聚力。

您还可以使用颜色变体尝试梯度。这里的诀窍是不要使用太多的颜色组合。您需要基于颜色配对和层次结构的纪律严明的设计。

此时提醒您。您想将这些颜色配对和决策中的大多数保存到预设中（选项组或元素预设）。一旦通过预设创建并实现了设计中的设计变量，就可以使用设计系统更快地创建后续页面。这也确保了您在整个网站中使用一致的设计模式。

而且，如果您以后确定颜色略有关闭，则可以调整基本颜色的HSL值，并且该颜色的所有实例（以及所有基于该颜色相对创建的颜色）都会为您而变化。

包装您的Divi 5颜色系统

周到的颜色系统是网络设计中最简单的胜利之一，Divi 5为您提供了使其适合您的工具。只需几个步骤，您就可以：

• 将您的核心品牌颜色定义为可重复使用的设计变量
• 用HSL滤波器将它们扩展到有用的阴影和色调中
• 在文本，按钮，表单和部分中始终如一地应用它们
• 将您的选择保存为预设，以便每个新页面都遵循相同的规则

收益大于美学。纯色系统可创造清晰度，指导访客采取行动，并使您的品牌在网站的每个角落都具有凝聚力。而且由于Divi中的所有内容都是可变驱动的，因此对基本颜色的一种调整可以立即在整个站点中闪烁。这意味着更少的修补和更有信心，即您的设计随着扩展而融合在一起。