让编辑器在不打开 CSS 的情况下重新着色小部件是自定义小部件可以做的最有用的事情之一。 色域 在主插件中 小部件生成器 elementor的颜色选择器丢弃到您的小部件面板中, 配有全局颜色和可选的alpha通道。您命名字段, 挑选它所在的位置, 并且它的短代码直接输入您的CSS。
与每个 Widget Builder 字段一样,颜色字段也支持 条件 为面板可见性。其令牌由渲染 Twig-语法模板引擎(即可以让您在 CSS 中的任何位置打印所选颜色), 这两份指南都涵盖了设置和限制。
这是一个样式控制,因此在演示中它属于 风格 tab。field 工作一样,不管你把它放到哪个 tab。不过,它在哪里生活是你的调用,它归结为你想要如何组织自定义小部件的控制。
Color 字段的作用 #
Color字段在您的小部件的选项面板中渲染Elementor的原生颜色选择器,编辑器单击样本,从主题中选择颜色(或全局颜色),并且您的小部件输出该值,无论您将匹配的短代码放置在大多数情况下,这意味着CSS属性喜欢 color, background、或者 border-color.
Elementor 自己的选取器,所以编辑器会得到他们已经知道的控制:样本、眼镜、最近颜色和全局颜色调色板。打开 alpha 通道,他们也可以设置透明度。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget 生成器编辑器中打开的自定义小部件。第一个?从 小部件生成器概述.
如何添加颜色字段 #
在 Widget Builder 编辑器中,找到左侧的字段面板并拖动 颜色 场成一段,由于颜色是造型的选择,因此 风格 tab是自然的家,但是 内容 並 高级 tabs一样接受它,一旦字段就位,它的选项在左侧打开,它的短代码出现在 文档 代码编辑器旁边的侧边栏。
解释了色域选项 #
Color字段选择打开其设置,大多数选项与其他字段匹配,再加上一个特定于颜色的字段。
- 标签: elementor 中选择器上方显示的文本,例如 “文本颜色”。
- 名称: field的唯一标识符,字母、数字、下划线只。这就成了你的短码,所以一个字段被命名
color给你{{color}}. - 描述: 可选的帮助者文本显示在控件下方。
- 阿尔法: turn this on,让挑选器透明,关闭了编辑器只能选择纯色,在需要rgba值的时候启用,就像半透明的覆盖。
- 默认值: 起始颜色作为十六进制值,例如
#FFFFFF。设置这个,这样小部件看起来就完成了,然后再有人触摸它。
常见设置:响应式、动态等 #
低于默认值,您将获得相同的值 常用设置 as 构建器中的每个字段:显示标签、标签块、响应式控制、动态支持、可用前端、分离器和条件如果您想要每个设备不同的颜色,响应式控制在这里非常方便 文本字段文档 详细涵盖其中每一个。
将字段连接到您的代码 #
一个名为的色域 color 产生令牌 {{color}} documentation 侧边栏中。将其作为任何颜色属性的值放入您的 CSS 中。例如, 为英雄文本着色:
CSS编辑器中,你会写一些类似的东西 .hero-content { color: {{color}}; }。当编辑器在 Elementor 中选择颜色时,Master Addons 会将令牌替换为该值,文本会重新着色。相同的令牌适用于 background, border-color(或任何需要颜色的东西),并且可以根据需要以任意数量的规则重复使用它,需要注意的一件事:将令牌保留为整个值,因此 color: {{color}};的,不用引号包裹,或者CSS将不适用。
使用 Elementor 中的颜色控件 #
Elementor 编辑器中将自定义小部件拖到页面上并打开它,在放置字段的选项卡下,颜色控件显示为标准样本,旁边有全局颜色按钮,单击它,选择颜色,小部件更新在画布上。
Editors可以选择一次性颜色或点击globe图标从网站的全局颜色中提取,这使得自定义小部件保留在品牌上,如果打开动态支持,动态标签图标也出现在这里。
常见用例 #
- 文字颜色 对于标题和段落。
- 背景颜色 用于部分、卡片和按钮。
- 边框和强调颜色 绑在品牌调色板上。
- 覆盖色调 使用 alpha 通道实现透明度。
- 悬停状态 与第二个色域配对时。
使用颜色字段的技巧 #
- 将其放置在适合您小部件的地方。 Style 是约定,但该字段在任何选项卡下都有效,因此组织控制对您有意义的方式。
- 仅当您需要透明度时才打开 Alpha。 对于纯色品牌,不要留下它可以让挑选者更简单。
- 设置合理的默认值。 良好的默认值意味着小部件在页面上丢弃时看起来就正确。
- 依靠全球颜色。 鼓励编辑从全局调色板中进行选择,以便小部件在整个网站上保持一致。
- 在引用其短代码之前构建该字段。 该令牌仅在字段位于面板上之后才存在。
常见问题 #
Master Addons Widget Builder 中的颜色字段是什么?
Color字段将Elementor的颜色选择器添加到自定义小部件中,您命名该字段,将其短代码放置在您的CSS中,并且编辑器在Elementor中选择的任何颜色都应用于您的小部件,它支持全局颜色和可选的alpha通道。
如何使用自定义小部件中的 {{color}} 短代码?
添加名为的颜色字段 color者,那么在CSS编辑器中,将令牌用作属性值,如 .hero-content { color: {{color}}; }。主插件将令牌替换为所选颜色,因此小部件会根据编辑器的选择重新着色。
Color字段是否支持透明度?
是在字段的设置中打开 Alpha 选项,Elementor 选取器让编辑器设置透明度,产生 rgba 值,在 Alpha 关闭的情况下,选取器只允许纯色。将其用于覆盖或半透明背景。
我可以将颜色字段放在样式选项卡之外吗?
是颜色字段在内容、样式或高级选项卡下工作,样式是造型控件的通常选择,但你把它放在哪里取决于你想要如何组织自定义小部件的选项。
Color字段可以使用网站的全球颜色吗?
Yes。因为使用了Elementor的原生选择器,编辑器可以点击全局颜色按钮,从主题调色板中进行选择。选择全局颜色可以保持自定义小部件与网站其余品牌一致。
包裹起来 #
Widget Builder 色彩字段将硬编码的颜色变成您自己的自定义小部件内的可编辑选择器。命名它, 选择是否允许 alpha, 设置默认值, 并导线 {{color}} 进入您的 CSS。之后,任何人都可以从 Elementor 中重新为小部件着色,点击时会显示全局颜色和透明度。看看其余的 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
