--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/colour-and-branding' title: '使用品牌颜色 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:42:23+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 将品牌颜色用于版块、文本和按钮，让每个页面看起来属于同一个网站。DXPR Builder 的每个颜色字段都将主题调色板显示为色板，因此您选用品牌颜色，不用猜代码。示例给版块刷上品牌主色并配白色文字。 该视频跟随下文步骤：用品牌色板给版块上色，并将其文本设为白色。 tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 使用品牌颜色 description: |- 将品牌颜色用于版块、文本和按钮，让每个页面看起来属于同一个网站。DXPR Builder 的每个颜色字段都将主题调色板显示为色板，因此您选用品牌颜色，不用猜代码。示例给版块刷上品牌主色并配白色文字。 该视频跟随下文步骤：用品牌色板给版块上色，并将其文本设为白色。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:42:23+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/colour-and-branding' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/colour-and-branding' description: |- 将品牌颜色用于版块、文本和按钮，让每个页面看起来属于同一个网站。DXPR Builder 的每个颜色字段都将主题调色板显示为色板，因此您选用品牌颜色，不用猜代码。示例给版块刷上品牌主色并配白色文字。 该视频跟随下文步骤：用品牌色板给版块上色，并将其文本设为白色。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 使用品牌颜色. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [让元素随悬停响应](/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects) - [装饰卡片](/zh-hans/hc/documentation/learn-dxpr-builder/design/card-styles) - [用主题 CSS 定制构建器内容样式](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css) 将品牌颜色用于版块、文本和按钮，让每个页面看起来属于同一个网站。DXPR Builder 的每个颜色字段都将主题调色板显示为色板，因此您选用品牌颜色，不用猜代码。示例给版块刷上品牌主色并配白色文字。 该视频跟随下文步骤：用品牌色板给版块上色，并将其文本设为白色。 ## 开始之前 - 品牌颜色存放在主题中。用 DXPR Theme 时，请在 **Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`) 的 **Colors** 面板中设置。 - DXPR Builder 将该调色板前十种不同的颜色显示为色板。 ## 给版块上色 1. 悬停版块，打开 **More** 并选择 **Settings**。 2. 打开 **Style** 面板。 3. 点击 **Background** 的颜色按钮。颜色选择器带着您的色板打开。 4. 点击品牌主色色板。 5. 点击 **Font color** 的颜色按钮并选择白色。 6. 点击 **Save**。段落文本变白；标题保持主题的标题颜色。 7. 要让标题也变白，请打开 **Settings**（其 **Text** 元素的），将其 **Font color** 设为白色（其 **Style** 面板中），并点击 **Save**。 ## 您会看到的内容 版块填上品牌颜色，段落文本和标题变白。同样的色板出现在每个颜色字段中，包括 **Style** 和 **Hover style** 面板，以及 **Start color** 和 **End color**（版块 **Gradient** 背景的）。 要用调色板外的颜色，请在选择器的文本框中输入其代码，例如 `#2196F3`。拖动不透明度滑块得到半透明颜色。**Clear** 清除颜色。 ## 让颜色跟随主题 色板将颜色代码复制到元素中。以后更改主题调色板，该元素保留旧颜色。 要让元素跟随调色板，请改用颜色类。打开元素的 **Settings**，在 **HTML classes** 下选一个色块： | 色块 | 作用 | |---|---| | **Primary background**、**Secondary background** 等 | 主题的 Bootstrap 颜色 | | **Primary text color**、**Secondary text color** 等 | 主题的 Bootstrap 文本颜色 | | **Background color: DXPR Theme primary** | DXPR Theme 的 **Primary** 颜色，附带匹配的文本颜色 | | **Text color: DXPR Theme accent1** | DXPR Theme 的 **Secondary** 颜色，用于文本 | 该 **DXPR Theme** 色块只在启用 DXPR Theme 时出现。 ## 各元素的颜色字段 | 位置 | 装饰对象 | |---|---| | **Style** 面板：**Font color**、**Border color**、**Background** | 元素自己 | | **Hover style** 面板：同样的字段 | 指针停在上面时的元素 | | **Button**：**Type** | 现成的按钮配色方案 | | **Card**：**Type** | 整张卡片的背景和文本 | | **Alert**：**Type** | **Success**、**Info**、**Warning** 或 **Danger** | | **Section**：**Background effects** > **Gradient** | 两种颜色的混合 | ## 可读的颜色 - 文本与背景保持足够对比度。WCAG 2.1 AA 级要求普通文本至少 4.5 比 1。 - 不要只用颜色传递含义；请配上标签或图标。 - 交替使用版块背景（如白色、浅灰和品牌色），让长页面有节奏。 ## 如果您看不到自己的颜色 - **颜色选择器中没有色板。** 您网站的默认主题没有提供调色板。请直接输入颜色代码，或换用带调色板的主题，如 DXPR Theme。 - **更改主题调色板后，元素还是旧颜色。** 色板存放固定的颜色代码。请选用新色板，或换用 **HTML classes** 下跟随调色板的颜色色块。 - **Background 或 Font color 对卡片无效。** **Type** 非 **Default** 的卡片用胜出的主题类定颜色。请先将 **Type** 设为 **Default**。 ## 接下来做什么？ - [让元素随悬停响应](/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects)：访客指向元素时更改颜色。 - [装饰卡片](/zh-hans/hc/documentation/learn-dxpr-builder/design/card-styles)：把颜色用于卡片。 - [自定义 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css)：设置面板覆盖不到的品牌规则。