---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/pricing-table'
title: 'Build a pricing table | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Tiered pricing comparison'
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Build a pricing table'
      description: 'Tiered pricing comparison'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/tutorials/pricing-table'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/pricing-table'
      description: 'Tiered pricing comparison'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Build a pricing table.

Tiered pricing comparison

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Product page](/hc/documentation/learn-dxpr-builder/tutorials/product-page)
- [Card](/hc/documentation/learn-dxpr-builder/elements/card)
- [Panel](/hc/documentation/learn-dxpr-builder/elements/panel)

Here you build a pricing table: three plans side by side, each a panel with a price, a feature list and a full-width button, and the middle plan highlighted. Use it on a pricing page or inside a product page. For the full product page around it, follow [Build a product page](/hc/documentation/learn-dxpr-builder/tutorials/product-page).

The video builds three plans for a reporting tool.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**.
- New elements land at the top of their container, so in each panel the button goes in before the price.

## Step 1: add the section and the columns

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab.
2. Hover the section and open **More** > **Settings**. Under **HTML classes** pick **Align text center**. Open the **Style** panel, pick a light grey **Background** and click **Save**.
3. Click **+** on the section and pick **Row**; it arrives with two equal columns.
4. Click the row's grid icon (**Column layout**), pick the **1/3 + 1/3 + 1/3** preset and click **Save**.

## Step 2: build the first plan

1. Click **+** in the first column and pick **Panel** from the **Content** tab.
2. Hover the panel and open **More** > **Settings**. Set the **Title** to "Starter", keep the **Type** on **DXPR** and click **Save**.
3. Click **+** on the panel and pick **Button**. Set **Title** to "Choose plan", **Link** to `/signup` and **Type** to **Primary**. Switch on **Block button** so it fills the column, then click **Save**.
4. Click **+** on the panel again and pick **Text**; it lands above the button. Type the price as **Heading 2**, add the features one per line and click **Save**.

## Step 3: build the other plans

1. Repeat Step 2 in the second column for "Professional". In the panel's **Style** panel pick the purple **Background**, and set the button's **Type** to **Success**, so the plan stands out.
2. Repeat Step 2 in the third column for "Enterprise", with "Custom pricing" as the price.

**Tip**

The middle column draws the eye. Put the plan you most want to sell there.

## Step 4: add the heading

1. Click **+** on the section and pick **Text**; it lands above the row.
2. Type "Choose your plan" as **Heading 2**, add one line such as "Simple monthly pricing. Cancel any time." and click **Save**.

## Step 5: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**) and choose **Preview**.

## Go further

Not shown in the video:

- **Four plans**: pick the **1/4 + 1/4 + 1/4 + 1/4** preset instead and build a fourth column.
- **Most popular badge**: add a **Text** element at the top of the highlighted panel with "Most popular" in bold.
- **Annual and monthly**: add a **Text** line above the row such as "Monthly \| Annual (save 20%)". The line is static; a live switch needs the **HTML** element with your own script.
- **Feature ticks**: paste a check mark before each feature line, or add an **Icon** element above the list.

## What you see

"Choose your plan" sits centred above three plans on a grey band. Each panel shows its name in the title bar, the price, three features and a full-width **Choose plan** button. The middle plan stands out in purple with a green button.

## If you don't see the plans as shown

- **A panel opens without a settings dialog.** Panels open empty, without a dialog. Hover the panel and open **More** > **Settings** to set its **Title**.
- **A panel Type such as Primary shows no colour.** Your theme does not style that panel type. Keep **Type** on **DXPR** and pick a **Background** in the panel's **Style** panel, as in Step 3.
- **The buttons are only as wide as their text.** **Block button** is off. Open each button's settings and switch it on.
- **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## What's next?

- [Product page](/hc/documentation/learn-dxpr-builder/tutorials/product-page) for a full page with features and pricing
- [Card element](/hc/documentation/learn-dxpr-builder/elements/card) for another card style
- [Panel element](/hc/documentation/learn-dxpr-builder/elements/panel) for every panel setting