Elementor 字体和颜色设置详解：如何通过全局样式和自定义 CSS 优化网站设计-光子波动网

在这篇文章中，我们探讨如何通过 Elementor 设置字体和颜色，以确保你的网站保持一致的风格，同时为需要的部分保留灵活性。

Elementor 字体和颜色的默认设置

在 Elementor 中，你可以启用或禁用默认的全局颜色和字体设置。这些设置可以在 Elementor 的“常规”设置中找到，提供了两个主要选项：

禁用默认颜色
禁用默认字体

启用或禁用这些选项可以极大地影响你的设计工作流程。当你禁用这些默认设置时，Elementor 将不再强制应用它的默认颜色或字体，转而使用你在“站点设置”中定义的全局颜色和字体。

这样你可以根据自己网站的需求进行调整，而不会被 Elementor 的预设限制。

何时应该禁用默认颜色和字体

1. 一致性的需求

如果你希望网站的字体和颜色在不同的页面、部分或小部件之间保持一致，禁用默认颜色和字体可能是一个不错的选择。禁用这些选项意味着 Elementor 将使用你预先设置的全局样式。例如，如果你希望网站的所有标题都使用特定的字体，如 Montserrat，只需在站点设置中将其设置为全局字体，当你拖动一个新的标题小部件到页面上时，它会自动应用该字体。

案例：取消选中两个框的效果 假设你将 Montserrat 字体应用为全局字体，当你取消选中这两个框时，任何新添加的文本小部件将自动继承该字体和你设定的全局颜色。这种一致性对于设计和用户体验来说非常重要，确保了网站风格的连贯性。

2. 使用自定义 CSS 的灵活性

如果你更喜欢通过自定义 CSS 来控制网站的样式，取消默认颜色和字体会让事情变得更加灵活。这样做的好处是，Elementor 不会自动应用它的全局样式，这使得你可以完全通过 CSS 来定义页面元素的样式。

然而，如果你禁用默认设置但又不使用自定义 CSS，你可能会发现页面上的文字和颜色看起来并不如预期。因此，禁用默认设置通常适用于希望完全控制样式的用户，尤其是那些熟悉 CSS 的用户。

添加自定义 CSS 的技巧

在使用自定义 CSS 时，有时需要使用 !important 标签来覆盖 Elementor 的默认样式。比如，如果你想通过 CSS 来更改 H1 标题的颜色和字体，可以使用以下代码：

cssCopy code
h1 {
    color: var(--e-global-color-accent) !important;
    font-family: Verdana !important;
}

在这个例子中，如果不添加 !important 标签，你的自定义样式可能不会应用，因为 Elementor 的全局设置具有更高的优先级。

启用或禁用全局颜色和字体的不同效果

1. 全局颜色和字体的应用

当你启用了全局颜色和字体，Elementor 将自动为页面中的所有元素应用全局样式。这对于那些不熟悉 CSS 或希望节省时间的用户来说是非常便利的。例如，如果你在站点设置中选择了某种颜色作为全局配色方案，所有按钮、标题和文本都将自动应用该颜色。这种设置可以确保设计的一致性，并节省大量手动调整的时间。

2. 选中禁用框时的效果

选中禁用框后，Elementor 将不再自动应用任何颜色或字体。此时，你可以完全通过自定义 CSS 来控制网站的样式，而不需要用 !important 标签来覆盖全局设置。例如，以下代码可以应用于 H1 标题：

cssCopy code
h1 {
    color: var(--e-global-color-accent);
    font-family: Verdana;
}

这意味着你的自定义样式将优先于任何全局设置，并且不需要使用 !important 标签来覆盖。

何时应当选中或取消禁用框

根据你的需求和工作流程，你可以选择选中或取消禁用框：

取消选中： 如果你想保持网站设计的一致性可以选中，因为 Elementer 将自动应用全局颜色和字体。这种方法特别适用于那些不希望过多定制网站样式的用户。
选中： 对于那些希望通过自定义 CSS 完全控制网站样式的用户，会让设计更加灵活。在这种情况下，Elementor 将不会应用任何全局样式，而是允许你通过自定义 CSS 进行完全控制。