使用指南/编辑您的网站/使用样式更改站点的颜色

使用样式更改站点的颜色

您选择的颜色是站点设计的重要组成部分。本指南将向您介绍如何管理站点的调色板。

视频概览

找到颜色设置

如果您的站点使用的是支持站点编辑器的主题,则您可以使用“样式”来更改站点的颜色。请查看仪表盘中的“外观”,快速查看您的站点是否支持使用站点编辑器。如果您在此处看到“编辑器”,则可以按照以下步骤更改您站点的颜色:

  1. 仪表盘中,转到“外观 → 编辑器”。
  2. 点击左侧的“样式”,或选择此处所示的“样式”图标。图标看起来像一个黑白圆圈。
  3. 选择“颜色”。
  4. 选择“调色板”以选择您站点的默认颜色,或从站点上的以下元素中进行选择:
    • 文本
    • 背景
    • 链接
    • 说明文字
    • 按钮
    • 标题

本指南的剩余部分将更详细地解释每一项元素。

箭头指向站点编辑器中的“样式”按钮。

定义调色板

站点的调色板可设置整个站点使用的默认颜色。尽管您仍然可以控制特定元素的颜色,但定义您的调色板可以确保站点始终保持一致的配色方案。

您可以在此处编辑“主题”、“默认”和“自定义”颜色:

  • 主题:主题设计者在创建主题时设置的颜色,用于整个主题的设计。
  • 默认:编辑页面和文章时,区块颜色设置中显示的颜色。
  • 自定义:定义并命名您要在调色板中使用的其他颜色。

主题颜色

要更新“主题”颜色,请按照以下说明执行操作:

  1. 点击“调色板”下方框中的任意位置。
站点编辑器中的调色板。
  1. 点击“主题”旁边的三个点,然后选择“显示详情”,展开调色板中的颜色区域列表。
  2. 每个主题都定义了自己的颜色区域。在示例中,我们可以选择“主色”、“副色”、“前景色”、“背景色”或“第三色”来编辑该颜色:
在站点编辑器中编辑调色板。
更新站点编辑器的“样式”板块中的“主题”和“默认”颜色的步骤
  1. 使用弹出的颜色选择器选择您想要的颜色。
  2. 点击“完成”,设置您所选的颜色。
  3. 点击右上角的“保存”,保存您的更改。

自定义颜色

您还可以为站点的调色板添加多种“自定义”颜色。这些自定义颜色将保存并可供您从区块的颜色设置中进行选择。

要添加自定义颜色,请按照以下补充步骤操作:

  1. 在“自定义”下点击“+”按钮。
  2. 从颜色选择器中选择颜色,或输入 HEX、RGB 或 HSL 颜色值。
  3. 点击颜色的名称(默认为“颜色 1”),然后为新颜色输入名称。
  4. 点击“完成”。

下面是这些步骤的视频演示:

自定义元素的颜色

在位于“调色板”右下角的颜色设置中,您会看到编辑站点各个元素颜色的选项。这些元素包括:

  • 文本:选择一种颜色,用于站点上的所有常规基础文本,不包括链接、说明文字、按钮文本或标题。
  • 背景:选择纯色或渐变色作为站点的背景。如需了解更多信息,请参阅我们的自定义您站点的背景指南。
  • 链接:选择一种颜色,用于您站点上的所有链接。在这里,您可以选择所有链接显示的“默认”颜色,以及有人将光标悬停在链接上时显示的“悬停”颜色:
使用区块编辑器为链接设置自定义“默认”颜色和“悬停”颜色。
  • 说明文字:选择图片区块说明文字中使用的文本颜色。
  • 按钮:设置用于按钮区块的颜色。您可以选择文本颜色,并为按钮的背景设置纯色或渐变色。
    • 目前不支持控制按钮的悬停颜色。您可以使用 CSS 代码来为按钮应用悬停颜色。
  • 标题:为站点上的所有“标题”区块设置一种颜色。您可以选择文本颜色,并为标题的背景设置纯色或渐变色。
    • 要为每个标题级别( H1 到 H6 )选择不同的颜色,请点击“颜色”旁边的三个点,展开选项,然后点击相应的标题级别。标题级别旁边会显示一个复选标记,然后您可以关闭这些选项,访问该标题级别的颜色设置。

如果您只想覆盖某个特定文本(而不是所有元素)的颜色,则可以在特定文章页面中的个别区块颜色设置中设置不同的颜色。

Copied to clipboard!