Build a pricing table.

Tiered pricing comparison

Learn DXPR BuilderBuild pagesFollow a tutorial

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.

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.

What's next?