Skip to content

Build a pricing table

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?

Something wrong or missing on this page? Report it or edit the page.