Adding a comparison table

The Comparison Table element sets features side by side across plans, products or tiers. Each column is one plan and each row is one feature. Every cell holds a tick, a cross or text you type.

Considerations

• A table holds two to four columns.
• On phones the table splits into one card per column. Change this under Mobile layout in the Design tab.
• Headers, prices and cell values are text you type. They do not come from your products.

Add the element

1. Open the page in the page builder.
2. In the toolbox on the far left, click Elements.
3. Find Comparison Table in the Basic group, or search for it.
4. Drag it onto the canvas and drop it where you want it. The settings panel opens on Editing Comparison Table.

Fill in the columns and rows

1. With the element selected, open the Content tab.
2. Under Columns, each column has its own block, named Column 1, Column 2 and so on. Fill in Header, Badge (optional) and Price / sub-line (optional).
3. Turn on Highlighted (recommended) on the column you want to stand out.
4. Turn on Show CTA button to add a button, then fill in Button text and Button link.
5. Click + Add column to add another, or Remove to delete one.
6. Under Rows (features), type the feature name. For each column, click Tick, Cross or Text, then type a value if you picked Text.
7. Click + Add row for the next feature. The arrows reorder rows.

Content settings

• Header: the column name, such as a plan name.
• Badge (optional): a small pill above the header, such as Most popular.
• Price / sub-line (optional): a line under the header, such as £29/mo.
• Highlighted (recommended): gives the column a coloured top border and tinted background.
• Show CTA button: adds a button under the header, with Button text, Button link and Open in new tab.
• Rows (features): the feature name, then one cell per column.

Design settings

Open the Design tab to change the look. The groups are Typography, Header, Cells, Highlight, Cell Borders, Row Striping, Button Style, Behaviour, Border and Spacing.

Related guides

• Adding a table
• Adding a pricing table
• Adding and arranging elements
• Using the element settings panel