---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/panel'
title: '添加面板 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:53:03+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  您可以获得一个带边框的盒子，含彩色标题栏，可将相关内容放在一起，例如开放时间或通知。当页面的某个区块需要自己的标题和边框时使用它。

  添加面板
  登录后打开您的页面：将鼠标悬停在内容区上即会出现构建器控件。您的第一页介绍基础操作。
tags:
  - Marketing
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加面板
      description: |-
        您可以获得一个带边框的盒子，含彩色标题栏，可将相关内容放在一起，例如开放时间或通知。当页面的某个区块需要自己的标题和边框时使用它。

        添加面板
        登录后打开您的页面：将鼠标悬停在内容区上即会出现构建器控件。您的第一页介绍基础操作。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:53:03+0000'
      dateModified: '2026-10-24T17:19:22+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/elements/panel'
      articleSection: 营销
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/panel'
      description: |-
        您可以获得一个带边框的盒子，含彩色标题栏，可将相关内容放在一起，例如开放时间或通知。当页面的某个区块需要自己的标题和边框时使用它。

        添加面板
        登录后打开您的页面：将鼠标悬停在内容区上即会出现构建器控件。您的第一页介绍基础操作。
      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/elements) /[营销](/zh-hans/hc/documentation/learn-dxpr-builder/elements/marketing) # 添加面板.

 学习 DXPR Builder搭建页面添加内容营销

   ## 本指南内容

 相关指南

- [在样式面板中改变元素外观](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

您可以获得一个带边框的盒子，含彩色标题栏，可将相关内容放在一起，例如开放时间或通知。当页面的某个区块需要自己的标题和边框时使用它。

## 添加面板

登录后打开您的页面：将鼠标悬停在内容区上即会出现构建器控件。[您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)介绍基础操作。

1. 将鼠标悬停在列上，点击其控制栏中的 **+**，或在空页面上点击 **Add Elements**。打开 **Content** 选项卡，点击 **Panel**。它落在列的顶部，不打开对话框。
2. 悬停在面板上，点击其控制栏中的 **More**，选择 **Settings**。输入 **Title**。
3. 为颜色选择 **Type**：DXPR、Default、Primary、Success、Info、Warning 或 Danger。此处我们选择 **Primary**。
4. 点击对话框中的 **Save**。
5. 点击面板正文内的 **+**，从 **Content** 选项卡添加一个 **Button**。文本元素也有效，例如用于开放时间。然后点击内容区顶部工具栏中的 **Save**，保存页面。

  ## 您会看到的内容

您的标题位于彩色标题栏中，按钮位于其下面板正文中。该按钮是独立的元素，因此您可以单独编辑它并设置样式。在视频中，标题为 Citizen Services Opening Hours 的 Primary 面板包含一个预订按钮。保存页面并发布后，访问者即可看到。

## 设置面板

将鼠标悬停在元素上，在其控制栏中打开 **More > Settings**。选项：

- **Title：**标题栏中的文本。留空则面板没有标题栏。
- **Type：**边框和标题栏的颜色，取自您的主题：Default、Primary、Success、Info、Warning 或 Danger。DXPR（默认值）则是深色盒子配浅色文本。

面板是容器。可向其正文添加或拖入文本、图像、图标或按钮。

## 如果您没有看到它

- **Content 选项卡中没有 Panel。**您的用户档案隐藏了它。请让管理员勾选 **Panel (Bootstrap 3)**，它在 **Elements** 下，位于[User Profiles](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) 中。
- **重新加载后它不见了。**页面未保存。请重新添加，点击内容区顶部工具栏中的 **Save**。
- **添加面板时没有打开设置对话框。**面板直接放入，不带对话框。将鼠标悬停在元素上，打开 **More > Settings** 以设置其标题和类型。
- **面板只显示标题栏，下面空无一物。**里面还没有添加元素。点击面板正文中的 **+**，添加 Text 或 Button。
- **缺少标题栏。**原因是 **Title** 字段为空。将鼠标悬停在元素上，打开 **More > Settings**，然后输入标题。

## 接下来做什么？

[样式选项卡](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)，更改面板的间距和背景。