---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab'
title: '在样式面板中改变元素外观 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:51:31+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  一页上一个元素需要独特外观时请用 Style 面板：彩色卡片、淡显标志、活动配色的按钮。修改时每处变化即时显示在页面上。全站共用的样式，如全部按钮的颜色，请改主题。那里改一次，全站更新。
  本视频按下面第一个配方操作：指针到达前将合作方标志淡显。
tags:
  - 'Style your elements'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T13:51:31+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 在样式面板中改变元素外观
      description: |-
        一页上一个元素需要独特外观时请用 Style 面板：彩色卡片、淡显标志、活动配色的按钮。修改时每处变化即时显示在页面上。全站共用的样式，如全部按钮的颜色，请改主题。那里改一次，全站更新。
        本视频按下面第一个配方操作：指针到达前将合作方标志淡显。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:51:31+0000'
      dateModified: '2026-10-24T13:51:31+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/element-settings/style-tab'
      articleSection: 设置元素样式
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab'
      description: |-
        一页上一个元素需要独特外观时请用 Style 面板：彩色卡片、淡显标志、活动配色的按钮。修改时每处变化即时显示在页面上。全站共用的样式，如全部按钮的颜色，请改主题。那里改一次，全站更新。
        本视频按下面第一个配方操作：指针到达前将合作方标志淡显。
      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
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[设置元素样式](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings) # 在样式面板中改变元素外观.

 学习 DXPR Builder搭建页面设置元素样式

   ## 本指南内容

 相关指南

- [在内容后放置颜色或照片](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/background)

一页上一个元素需要独特外观时请用 **Style** 面板：彩色卡片、淡显标志、活动配色的按钮。修改时每处变化即时显示在页面上。全站共用的样式，如全部按钮的颜色，请改主题。那里改一次，全站更新。

本视频按下面第一个配方操作：指针到达前将合作方标志淡显。

  ## Before you start

- 在 DXPR Builder 中打开页面；指向元素即显示带 **More** 的控制栏。刚接触构建器？请参阅[您的第一页](/hc/documentation/learn-dxpr-builder/getting-started/first-page)。
- **Save**（对话框中）将修改保留在编辑器中。内容上方构建器工具栏上的 **Save** 保存页面并显示 "Saved field"。

此处的 **Style** 面板中的设置属于一个元素，保存在该页内容中，不在主题里。明年品牌色变更后，您手动着色的每个元素都保持旧色，直到您去改它。

- **复用样式**：用 **More** > **Save as template** 把排好样式的元素存为模板，或在 **HTML classes** 下给元素共用类。请参阅[用户模板](/zh-hans/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)和[HTML ID 与类](/hc/documentation/learn-dxpr-builder/element-settings/custom-css)。
- **从色板选颜色**（站点显示时）。色板来自主题调色板。色块复制颜色，因此之后调色板变更不会更新它。

## 配方：指针到达前淡显标志

一排合作方标志淡显后看起来更沉稳。本配方调暗一个标志，悬停时恢复。

1. 悬停显示标志的 **Image** 元素，点击 **More**，再点击 **Settings**。
2. 打开 **Style** 面板，将 **Opacity** 拖到 0.5。拖动时标志同步变淡。
3. 打开下方的 **Hover style** 面板，将 **Opacity** 拖到 1。
4. 点击对话框中的 **Save**，再点击工具栏上的 **Save**。
5. 在构建器工具栏打开视图菜单（眼睛图标），选择 **Preview** 并指向标志。它变为全浓度，指针离开后重新变淡。

对该行每个标志重复以上步骤。

## 配方：活动配色的按钮

主题给按钮悬停色。您自己设置的 **Background** 也取代该悬停色，因此两者都要设。

1. 悬停 **Button** 元素，点击 **More**，再点击 **Settings**。
2. 在 **Style** 面板选择 **Background** 和 **Font color**。点击色块，或在颜色字段输入色值，如 #e4002b。
3. 在 **Hover style** 面板选择深色 **Background**。
4. 点击对话框中的 **Save**，再点击工具栏上的 **Save**。
5. 在视图菜单中选择 **Preview** 并指向按钮。它变为深色。

## What you see

对话框打开时，元素显示每处修改。在 **Preview** 中，淡显标志在指针下恢复全浓度，活动按钮变为深色。工具栏上的 **Save** 已保存，因此重新加载后两者保持。

## 各控件的取值

| 控件 | 范围 | 单位 |
|---|---|---|
| **Font color**, **Border color**, **Background** | 任意颜色，可半透明 | 颜色 |
| **Background image** | 媒体库图片或 URL |  |
| **Background style**, **Background position**, **Border style** | 起始项 **Theme defaults** |  |
| **Font size** | 0 到 100 | px |
| **Border radius** | 0 到 100 | px |
| **Opacity** | 0 到 1，步长 0.01 |  |
| **Drop shadow** | 0 到 5 级 |  |
| Box model **Margin** | -200 到 200 | **PX** or **%** |
| Box model **Padding** | 0 到 200 | **PX** or **%** |
| Box model **Border** | 0 到 50 | px |
| Box model width × height | 0 到 2000 | **PX** or **%** |

输入值超出范围会被截到最近的限值。盒模型及其锁定见[间距](/hc/documentation/learn-dxpr-builder/element-settings/spacing)页。

## 设置的行为

### 主题默认值

空颜色、0 位滑杆、**Theme defaults** 列表和显示 "-" 的盒模型边含义相同。DXPR Builder 什么都不写，由主题决定。因此 **Opacity** 为 0 不隐藏元素，**Font size** 为 0 保持主题字号。要回到主题样式，请在颜色选择器点击 **Clear**、把滑杆移到 0，或重新选择 **Theme defaults**。

### 设置落在哪里

除 **Drop shadow** 外，每个 **Style** 设置都存为元素的内联样式。内联样式优先于普通主题 CSS。仍有两者优先：标有 `!important` 的主题规则，以及 **HTML classes** 下同样带 `!important` 的 Bootstrap 实用类。

在某些元素上，设置作用于内部部件。**Button** 上美化按钮本身，**Image** 上美化图片，**Link** 上美化链接，**Map** 上美化地图框。

### 所有屏幕尺寸

样式设置没有断点。64 px 内边距在手机上也是 64 px。百分比值随页面宽度伸缩。各屏幕尺寸不同值请用响应式类，如[HTML ID 与类](/hc/documentation/learn-dxpr-builder/element-settings/custom-css)页所示。

### 不透明度淡化内部一切

**Opacity** 作用于整个元素，淡化盒子、边框、文本及其内部一切。要在实色文本后放半透明盒子，请保持 **Opacity** 为 0，改选半透明 **Background** 颜色：颜色选择器有专用的不透明度滑杆。

### 悬停样式

**Hover style** 是 **Style** 下方的独立面板，控件相同，自带盒模型。其值在指针悬停元素时生效。与 **Style** 值不同，它们本身标有 `!important`，因此优先于您的 **Style** 值、**HTML classes** 下的实用类和大多数主题规则。

只有 **Drop shadow** 渐显，用时 0.15 秒。其他悬停变化即时切换，除非主题给它们加动画。Bootstrap 按钮颜色渐变用时 0.15 秒。

手机和平板没有指针。那里的访客点击后才看到悬停样式，因此不要把必要信息放在其中。

### 有自己设置的元素

有些元素对同一事项有自己的设置。自己的设置优先，**Style** 控件无效。

| 元素 | Style 中忽略 | 改用 |
|---|---|---|
| 环形计数器 | **Background**、**Font size**、宽 × 高 | **General** 中的 **Background color** 和 **Dimension**，**Circle content** 中的 **Font size** |
| 进度条 | **Background**、宽 × 高 | **General** 中的 **Back color**、**Front color** 和 **Bar height** |
| 分隔线 | **Background**, width | **General** 中的 **Color** 和 **Length** |
| 数字计数器 | **Font size** | **General** 中的 **Font size** |
| 图像 | 宽 × 高 | **General** 中的 **Image width** 和 **Image height** |
| 地图 | 宽 × 高 | **General** 中的 **Map width** 和 **Map height** |
| 跑马灯 | 宽 × 高 | **General** 中的 **Image width** 和 **Height** |
| 视频、本地视频 | width | **General** 中的 **Video width** |
| 定位图层 | 宽 × 高 | **General** 中的 **Width** 和 **Height** |

## If you don't see your change

- **关闭对话框后修改消失。** 您用 **Cancel**、关闭图标或 Escape 键关闭，设置被还原。请重新修改并点击对话框中的 **Save**。
- **重新加载后修改丢失。** **Save**（对话框中）只保留在编辑器中。离开页面前请点击工具栏上的 **Save**。
- **主题样式不变。** **HTML classes** 下的 Bootstrap 实用类或带 `!important` 的主题规则优先。请打开 **General** 面板移除类芯片，例如 **Primary background**，或向网站管理员询问主题规则。
- **某个控件完全无效。** 有些元素对同一事项有自己的设置。请参阅[有自己设置的元素](#elements-with-their-own-settings)。
- **按钮悬停不再变色。** 您的 **Background** 取代了主题悬停色。请也在 **Hover style** 面板中设置 **Background**。
- **文本随盒子一起变淡。** **Opacity** 淡化整个元素。请设回 0，改用半透明 **Background** 颜色。
- **Opacity 为 0 不隐藏元素。** 0 表示 **Theme defaults**。请改在 **HTML classes** 下添加 **Hide element (d-none)** 类。

## What's next?

- [背景](/hc/documentation/learn-dxpr-builder/element-settings/background)：在标题后放照片并保持标题可读。