---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/pricing-table'
title: '构建价格表 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:25:21+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里构建价格表：三个并排方案，每面板有价格、功能列表和全宽按钮，中间方案高亮。用于价格页或产品页内。围绕它的完整产品页，请遵循 构建产品页面。
  本视频为报告工具构建三个方案。
tags:
  - 'Volg een tutorial'
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: |-
        这里构建价格表：三个并排方案，每面板有价格、功能列表和全宽按钮，中间方案高亮。用于价格页或产品页内。围绕它的完整产品页，请遵循 构建产品页面。
        本视频为报告工具构建三个方案。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:25:21+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/tutorials/pricing-table'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/pricing-table'
      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
---
[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) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 构建价格表.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [构建产品页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/product-page)
- [Card](/hc/documentation/learn-dxpr-builder/elements/card)
- [Panel](/hc/documentation/learn-dxpr-builder/elements/panel)

这里构建价格表：三个并排方案，每面板有价格、功能列表和全宽按钮，中间方案高亮。用于价格页或产品页内。围绕它的完整产品页，请遵循 [构建产品页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/product-page)。

本视频为报告工具构建三个方案。

  ## 开始之前

- 您的角色有 **Edit with DXPR Builder** 权限。
- 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**.
- 新元素落在容器顶部，因此每个面板中按钮在价格之前放入。

## 第 1 步：添加版块和列

1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。
2. 悬停版块并打开 **More** > **Settings**。在以下位置的下方 **HTML classes** 选择 **Align text center**。打开 **Style** 面板，选择浅灰色 **Background** 并点击 **Save**.
3. 点击 **+** 在版块上并选择 **Row**；它带有两个等宽列。
4. 点击行的网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**.

## 第 2 步：构建第一个方案

1. 点击 **+** 在第一列中并选择 **面板** 从 **Content** 选项卡。
2. 悬停面板并打开 **More** > **Settings**。设置 **Title** 为 "Starter"，保持 **Type**：**DXPR** 并点击 **Save**.
3. 点击 **+** 在面板上并选择 **Button**。设置 **Title** 为 "Choose plan"， **Link** 为 `/signup` 和 **Type** 为 **Primary**。打开 **Block button** 以便它填满列，然后点击 **Save**.
4. 点击 **+** 在面板上再次并选择 **Text**；它落在按钮上方。输入价格为 **Heading 2**，逐行添加功能并点击 **Save**。

## 第 3 步：构建其他方案

1. 在第二列为 “Professional” 重复第 2 步。在面板的 **Style** 面板选择紫色 **Background**，并设置按钮的 **Type** 为 **Success**，以便方案脱颖而出。
2. 在第三列为 “Enterprise” 重复第 2 步，价格为 “Custom pricing”。

**提示**

中间列吸引目光。将最想卖的方案放那里。

## 第 4 步：添加标题

1. 点击 **+** 在版块上并选择 **Text**；它落在行上方。
2. 输入 "Choose your plan" 为 **Heading 2**，添加一行如 "Simple monthly pricing. Cancel any time." 并点击 **Save**.

## 第 5 步：保存并预览

1. 点击 **Save** 在页面构建器工具栏上。
2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview**.

## 进一步了解

视频中未展示：

- **四个方案**：选择 **1/4 + 1/4 + 1/4 + 1/4** 预设并构建第四列。
- **Most popular badge**：在高亮面板顶部添加一个 **Text** 元素，将 "Most popular" 加粗。
- **包年和包月**：在行上方添加一行 **Text**，例如 "Monthly \| Annual (save 20%)"。该行是静态的；实时切换需要 **HTML** 元素加您自己的脚本。
- **功能对勾**：在每个功能行前粘贴对勾，或添加一个 **Icon** 列表上方的元素。

## 您会看到的内容

"Choose your plan" 居中位于灰带上三个方案上方。每个面板在标题栏显示其名称、价格、三个功能和全宽 **Choose plan** 按钮。中间方案紫色突出，配绿色按钮。

## 如果您看不到如图所示的方案

- **面板打开时没有设置对话框。** 面板空白打开，无对话框。悬停面板并打开 **More** > **Settings** 以设置其 **Title**.
- **Primary 等面板 Type 不显示颜色。** 您的主题不设置该面板类型的样式。保持 **Type**：**DXPR** 并选择一个 **Background** 在面板的 **Style** 面板，如第 3 步所示。
- **按钮仅与其文本等宽。** **Block button** 关闭。打开每个按钮的设置并打开它。
- **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [产品页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/product-page) 用于带功能和价格的完整页面
- [卡片元素](/hc/documentation/learn-dxpr-builder/elements/card) 用于另一种卡片样式
- [面板元素](/hc/documentation/learn-dxpr-builder/elements/panel) 用于每个面板设置