设计系统使 Web 创建者能够通过建立一组通用设计标准和元素来保持整个站点的一致性。当站点很大或创建者团队可能同时在站点上工作时，这尤其有用。该设计系统可能采用书面文档的形式，其中可能包括颜色和排版样式指南、要在网站范围内使用的常用图标或图像列表，以及将形成一致和连贯网站的其他品牌元素。然后，设计师和内容创建者可以在设计页面、编写内容等时参考设计系统指南。
但即使是这种类型的设计系统也有其局限性。Web 创建者必须不断地在指南和他们正在做的工作之间来回切换，一次一个地调整每个元素。
创建者在向页面添加简单标题时可能会想到的一个常见想法：“H3 标题的十六进制值又是多少？它是什么字体粗细？500？不，我认为这是 H2 标题，400 是 H3 标题，不是吗？” 然后，创建者四处寻找物理或在线文件夹中的样式指南，找到样式信息，并开始更改颜色和字体粗细的过程。将此过程乘以站点上的标题数量，然后将所有其他元素添加到该过程中，它很快就会成为一个一致但耗时的设计过程。
有更好的方式来使用设计系统 #
一个内置到网络创建产品本身的设计系统是一个巨大的飞跃，从仅仅参考书面指南。想象一下，我们的网络创建者从项目开始就将整个设计系统构建到 Elementor 中。如果一个元素需要指定为标准品牌组合的颜色和版式的特定组合，并且该组合是在编辑元素时选择的简单的一键式选项，那么这将比以前节省大量时间手册指南参考过程。
同样重要——未来全站范围内的变化 #
现在以引用设计系统指南的旧方式想象，公司正在进行全面的品牌改造，更改整个网站的每种颜色、字体系列、字体粗细等是 Web 创建者的工作。这可能是一项艰巨的任务，并且在此过程中可能会遗漏许多元素，从而在各处奇怪的地方造成奇怪的、不连贯的设计。
然而，由于网站设计产品本身内置了设计系统，这种更改实际上可能需要几分钟时间。Elementor 可以轻松地在一个地方进行更改，并将该更改反映在整个站点中。Elementor 的主题样式选项和全局颜色和排版的结合体现了这种设计系统方法。
FAQ #
问：我很困惑。Theme Style 和 Design System 的 Global Colors / Globlal Fonts 有什么区别 ？不要同时控制颜色和排版跨站点？
A : 虽然 主题样式 和 全局颜色和排版 是相关的，但它们确实有不同的功能。 Theme Style 为 <H1>、<body>、<label> 等 HTML 标签设置后备样式定义。它们不是 Elementor 特定的，但尽可能通用。这是站点的基线设置，如果没有设置特定的元素定义，它仅作为后备起作用。
全局颜色和全局字体是 使用 CSS 变量的附加样式层。该图层位于 主题样式 图层的顶部并具有优先权。它为您的整个站点的设计系统提供了构建块。分配四个预定义全局设置的颜色和版式，并根据需要添加任何其他全局颜色和版式设置，并为每个设置命名。对于您在 Elementor 中使用的任何元素，您可以从全局设计系统中快速选择一个预定义设置。
将来，只需对全局设置进行一项更改，就会影响您站点上的所有实例。如果 Elementor 内部或 Elementor 外部的任何元素没有分配给它的全局设置，那么它将默认为 Theme Style中定义的设置。如您所见， 主题样式 和 设计系统的 全局颜色和全局字体 都是非常需要的功能，因此请务必注意两者。
问：这有助于澄清问题，但你能给我举个具体的例子吗？
答：当然！编辑任何 Elementor 页面并将 H2 标题的颜色及其版式设置为您之前通过 Site Settings > Design System > Global Colors and Global Fonts分配的全局辅助样式。现在，对该页面上的任何其他元素以及所有页面执行相同的操作，您希望具有相同的颜色或文本样式。希望您的按钮与您的 H2 标题具有相同的颜色？太好了，只需为每个按钮选择辅助颜色。
现在，使用其他预定义的全局设置之一将 H3 标题设置为不同的颜色和文本样式。假设您创建了一个名为 Complementary 的新全局设置。希望您的某些列背景具有相同的颜色？好的，将您创建的 Complementary 全局颜色设置也分配给这些列背景。
根据需要对任何其他元素执行此操作。
将来，如果您决定更改网站的颜色或字体设置之一，您只需执行一次，就可以准确地知道哪些元素会在您的网站中受到影响。只需对全局设置进行一次简单更改，使用该特定设置的每个元素都会立即在您的站点中更改。
问：好的，我明白了，这真的很酷但是我有一些页面没有使用 Elementor 编辑？他们的标题、按钮和列背景呢？他们将继承什么风格？
答：这就是您的 主题风格 设置发挥作用的地方。即使这些页面不是 Elementor 编辑的页面， 您在 Elementor 的 全局设置中设置的主题样式 仍然可以控制。这些页面上的元素仍将继承您在 主题样式中设置的样式， 因为它们尚未分配任何 全局颜色 或 全局字体 样式。通过这种方式，Elementor 能够控制您整个网站的样式，即使在未使用 Elementor 编辑的页面上也是如此！
注意：如果你有任何元素没有在 Design System > Global Colors 或 Global Fonts 或 Theme Style中设置样式，那么该元素的样式将继承自主题或浏览器，或来自其他未知来源，例如可能设置元素样式的插件。所以为了完全控制，不要在 Theme Style中留下任何空白。在那里设置所有可能的选项，这样您就知道您的设置将成为不受 设计系统的 全局颜色或全局字体 选项控制的任何设置的默认后备。
