回到所有的课程
课程库

色域

颜色字段是一个集合字段,允许您和协作者使用颜色选择器为每个集合项指定颜色。

这个视频的特点是一个旧的UI。更新版本即将发布!
克隆这个项目

颜色域是a集合字段,该字段允许您和您的协作者使用颜色选择器为每个集合项指定颜色。该颜色可用于样式化元素的背景色、文本色和边框色收藏列表或者一个收藏页面

共同使用
  • 风格类别集合,就像博客文章类别一样,所以每个类别都用独特的颜色表示
  • 为每个标签突出显示不同背景色的标签
  • 为标签替换文本颜色
  • 更换边框颜色来突出来自同一类别的项目
在这节课中
  • 创建颜色字段
  • 为字段添加颜色
  • 用色彩场进行设计

创建颜色字段

颜色字段可以添加到新的或现有的集合中。在集合设置中,单击新领域然后选择颜色字段。

为字段添加颜色

既然颜色字段是集合结构的一部分,您和协作者就可以在任何集合项的颜色字段中指定颜色了网页颜色(十六进制,RGBA,或颜色名称),或使用颜色选择器选择一种颜色。

很高兴知道
CMS的颜色选择器不允许创建色板,但是,它允许您和合作者访问您已经在样式面板中创建的色板。这可以让你的客户从他们网站的品牌主题中选择颜色。注意,一旦选择了一种颜色并将其保存为Collection项,它将成为一个静态颜色值,并且不会绑定到任何全局swatch。也就是说,如果你在设计器中更新swatch,它不会受到影响。
您希望您的合作者为特定的集合使用特定的颜色?您可以在颜色字段的帮助文本中添加已保存色板的颜色值或名称,以指导合作者。

用色彩场进行设计

在为集合项设置颜色时,可以将该颜色拉入设计中。收集列表或收集页中的每个元素将提取为每个收集项指定的颜色值。

收集风格设置

控件将颜色值连接到“集合列表”或“集合页”中的元素收集风格设置设置面板(D).您可以选择其中一个或多个选项:

  • 从集合中获取文本颜色
  • 从你的集合中获取背景色
  • 从您的集合中获取边框颜色

您可以通过取消选中选项复选框来删除这些设置中的任何一个连接。

样式文本颜色

如果你想使用Collection的color字段中指定的color值来设置元素的文本颜色:

  1. 选择的元素
  2. 设置面板(D)
  3. 选择获取文本颜色选项
  4. 从字段下拉框中选择颜色字段

任何字体颜色样式当这个设置被选中时,在样式面板中这个元素上的设置将被颜色字段值覆盖。

样式背景颜色

你可以用同样的方法设置一个元素的背景颜色:

  1. 选择的元素
  2. 设置面板(D)
  3. 选择获取背景色选项
  4. 从字段下拉框中选择颜色字段

任何背景颜色样式当这个元素的设置被检查时,在样式面板中这个元素上的设置将被动态地覆盖为颜色字段值。

样式的边界颜色

要从集合中提取元素的边框颜色,首先需要设置边境为你的元素:

  1. 选择的元素
  2. 样式面板(年代)
  3. 风格的边境
  4. 设置面板(D)
  5. 选择获取边框颜色选项
  6. 从字段下拉框中选择颜色字段

在任何时候,您都可以在样式面板中更改边框的样式和宽度。但是,颜色将从连接的颜色字段中提取,它将覆盖样式面板中指定的任何颜色值。

尝试Webflow——它是免费的
Baidu
map