首页>文档>Astra教程>Astra 全球调色板

此组别内的文章

需要支持?

如果通过文档没办法解决您的问题,请提交工单获取我们的支持!

Astra 全球调色板

全局调色板功能允许您设置一个或多个调色板。这样,您就可以从一个地方控制整个网站的颜色。此外,您只需切换到另一个调色板即可更改整个网站的颜色。

自 3.7.0 版起,Astra 主题提供全局调色板功能。您可以在外观 > 自定义 > 全局 > 颜色下找到这些设置。

Astra 全球调色板-HEIWP-外贸建站

设置调色板

有三个调色板可用,每个调色板总共包含九种颜色。这些颜色在调色板中是相连的。这意味着,当您在调色板之间切换时,颜色将被替换为当前激活的调色板中的匹配颜色。

例如,假设“颜色 1”在调色板 1 中设置为蓝色,在调色板 2 中设置为绿色。从调色板 1 切换到调色板 2 将使与“颜色 1”相关的所有设置从蓝色更改为绿色。

让我们开始编辑调色板,按照以下步骤操作:

步骤 1 – 单击三个可用调色板之一开始编辑。这将显示可用的颜色槽;

步骤 2 – 您可以通过单击颜色槽来设置每种颜色。这将打开颜色选择器。

步骤 3——选择您想要应用于此插槽的颜色;

步骤4-以同样的方法,您可以设置所有其他颜色;

步骤 5 – 单击“发布”按钮保存更改。

您可以对三个调色板中的每一个重复这些步骤。

此外,Astra 主题是首批为 Gutenberg 调色板实现 theme.json 的默认主题之一,因此调色板颜色也可以通过这种方式编辑。

笔记:

虽然 theme.json 启用了模板编辑器,但由于该功能仍在开发中,因此我们已禁用它,直到WordPress 5.9推出。

链接全局颜色

每种调色板颜色都可用于您网站上的任何颜色设置。您只需将全局调色板颜色链接到您的设置即可。

让我们向您展示如何链接全局颜色。在此示例中,我们将链接按钮颜色:

步骤 1 – 假设标题中有一个按钮。要将其背景颜色与全局颜色链接起来,只需编辑设置并从全局调色板中选择所需的颜色。单击调色板中的任何颜色都会将其链接到当前颜色。

第 2 步 – 现在,如果您导航至“外观”>“自定义”>“全局”>“颜色”并尝试更改您在上一步中链接的颜色,您将观察到链接的颜色会自动更改。

步骤 3 – 单击“发布”按钮保存更改。

虽然您设置了全局调色板,但您仍然可以像以前一样使用静态颜色进行定制器中的任何颜色设置。

请记住,将任何颜色设置更改为其他静态颜色将断开这些设置的调色板颜色。这意味着调色板颜色将不再自动应用于这些设置。

要再次使用这些选项的调色板颜色,您需要再次链接它们。

在调色板之间切换

现在您已将所有颜色设置链接到全局颜色,您可以在三个调色板之间切换以彻底改变您的网站的外观。

您只需要激活另一个全局调色板,整个网站上的所有颜色都将被与该调色板匹配的颜色集替换:

假设我们将“调色板 1”中的“颜色 1”设置为橙色。在“调色板 2”中,“颜色 1”设置为紫色。这意味着,当我们的调色板 1 处于活动状态时,链接到“颜色 1”的所有网站元素都是橙色。切换到“调色板 2”将自动将所有这些元素更改为紫色。

让我们在示例中向您展示我们如何做到这一点:

步骤 1 – 导航到全局调色板选项(外观 > 自定义 > 全局 > 颜色);

第 2 步 – 单击“调色板 1”以激活并将“颜色 1”设置为橙色;

步骤3 – 单击“调色板2”并将“颜色7”设置为紫色;

步骤 4 – 导航至外观 > 自定义 > 全局 > 按钮

步骤 5 – 在这里,单击“边框颜色”并将其链接到“颜色 1”。当调色板 1 处于活动状态时,这将使按钮边框变为白色橙色,而当您切换到调色板 2 时,则变为紫色。

第 6 步 – 单击“发布”按钮保存更改。

这样,您只需单击一下即可轻松切换所有网站颜色。例如,这样,您可以在大多数时间使用标准网站调色板,并在特殊场合切换到剩余的两个调色板。因此,您只需单击一下即可调整整个网站,以适应新年假期、情人节、冬季或夏季等。

为您的内容提供全局调色板

Global Color Palette 与 Gutenberg 和 Elementor 兼容。

您的活动调色板颜色将随页面构建器颜色选项一起提供,只需设置调色板颜色并将其用于您的内容即可。查看:

古腾堡区块:

Astra 全球调色板-HEIWP-外贸建站

Elementor 小部件:

Astra 全球调色板-HEIWP-外贸建站

与定制器选项一样,这些颜色将根据您的调色板选择进行调整。因此,当您更改调色板时,您的内容颜色也会相应更改。

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
搜索