---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/card'
title: '添加卡片 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:52:59+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-24T13:52:59+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:52:59+0000'
      dateModified: '2026-10-24T13:52:59+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/card'
      articleSection: 营销
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/card'
      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)

您可以获得一个带边框的盒子，含顶部栏和标题，可容纳其他元素，例如文本或按钮。使用卡片将相关内容分组，例如服务、团队简介或价格方案。

## 添加卡片

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

1. 将鼠标悬停在列上，点击其控制栏中的 **+**，或在空页面上点击 **Add Elements**。打开 **Content** 选项卡，点击 **Card**。它落在列的顶部，不打开对话框。
2. 悬停其上，点击其控制栏中的 **More**，选择 **Settings**。输入 **Header**，例如 Investor Relations。
3. 输入卡片 **Title**，例如 Q3 Results Published。
4. 为卡片样式选择 **Type**。此处我们选择 **Primary**。文本会自动变为白色。
5. 点击对话框中的 **Save**。
6. 悬停在卡片上，点击其自身控制栏中的 **+**，而非列的控制栏。空卡片正文中的 **+** 也有效。添加一个 **Button**，因为卡片是容器。按[按钮](/hc/documentation/learn-dxpr-builder/elements/button)中所述设置其标签和链接。然后点击内容区顶部工具栏中的 **Save**，保存页面。

  ## 您会看到的内容

您的顶部栏和标题位于所选颜色的卡片上，按钮在其中。在视频中，Primary 卡片上显示 Investor Relations 和 Q3 Results Published。该按钮是普通的按钮元素，因此您可以单独编辑它并设置样式。保存页面并发布后，访问者即可看到。

## 设置卡片

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

- **Header：**卡片顶部栏中的文本。留空可隐藏该栏。
- **Title：**卡片正文顶部的标题。
- **Type：**卡片颜色：Default、Primary、Secondary、Success、Info、Warning、Danger、Dark 或 Light。除 Default 和 Light 外，其余都使用白色文本。

卡片是容器。可向其正文添加或拖入其他元素，例如文本、图像或按钮。

## 如果您没有看到它

- **Content 选项卡中没有 Card。**您的用户档案隐藏了它。请让管理员勾选 **Card (Bootstrap 4/5)**，它在 **Elements** 下，位于[User Profiles](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) 中。
- **重新加载后它不见了。**页面未保存。请重新添加，点击内容区顶部工具栏中的 **Save**。
- **卡片只显示边框，里面空无一物。**里面还没有元素。悬停在卡片上，点击其控制栏中的 **+**，添加 Text、Image 或 Button。
- **缺少顶部栏。**原因是 **Header** 字段为空。将鼠标悬停在元素上，打开 **More > Settings**，然后输入顶部栏文本。
- **卡片上的文本难以阅读。**大多数 **Type** 选项使用白色文本，在 Warning 等浅色上会变淡。请选择更深的 Type，或 Light。

## 接下来做什么？

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