Elementorのフォントと色の設定を解説：グローバルスタイルとカスタムCSSでウェブサイトのデザインを最適化する方法

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

Elementor 字体和颜色的默认设置

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

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

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

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

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

1. 一致性的需求

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

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

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

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

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

添加自定义 CSS 的技巧

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

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

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

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

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

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

2. 选中禁用框时的效果

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

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

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

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

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

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

采用混合方法设置

取消选中字体设置，而保留颜色设置。这样，我可以确保全局字体（如 Montserrat）自动应用于整个网站，同时通过自定义 CSS 来控制特定元素的颜色。这种方法能够确保设计的一致性，同时允许我在需要时进行进一步的定制。

对于颜色设置，勾选禁用选项，尤其是希望为特定元素应用独特的配色方案时。

使用自定义全局颜色和字体的技巧

为了在 Elementor 中更好地管理字体和颜色，你还可以考虑创建自定义的全局颜色和字体集合。这样可以确保所有页面和小部件在添加时自动继承你预定义的样式，同时也使未来的样式更新更加简便。

步骤：创建自定义全局样式

1. 在站点设置中找到“全局颜色「そして全局字体「オプション

2. 自定义你的配色方案和字体样式，将它们保存为全局样式。

3. 当你在页面上添加新元素时，所有小部件将自动继承这些全局设置。

通过这样的设置，你不仅能够节省时间，还能够确保网站风格的一致性。

結論

Elementor 的字体和颜色设置都能为你提供丰富的设计选项。关键在于找到最适合你工作流程的设置：

• 一致性设计： 取消选中默认颜色和字体有助于确保整个网站的风格统一。
• 灵活设计： 选中两个框能够让你在使用自定义 CSS 时拥有完全的控制权，而无需担心全局设置的干扰。