Create beautiful tables to display the prices for your products using the page designer. You can include more than one pricing table in the same module and customize the pricing and features of the element.
Insert a new module in the page designer. You can scroll down to find the Pricing Tables module, or directly search it using the top bar to type it.
Content settings
Use the Content setting to control what appears in your module.
Add new pricing table
Here you can add a table to your module. Click on the gray plus button to add new pricing tables. It’s also possible to repeat one of the tables by clicking on the duplicate icon on the table’s title.
Select the settings of a table title to control its specific content and design.
For the content you can insert:
- Title: the title of the pricing option.
- Subtitle: it will show below the title.
- Currency: choose the desired currency symbol.
- Per: if the price is based on a subscription referring to a period of time, select it here (ex: monthly).
- Price: enter the product’s price.
- Button text: type the text for a CTA button that you can add.
- Content: write the list of features included with the product or excluded from it, one feature per line. Start the line with “+” for an included feature or with “-” for an excluded one.
- Link: define a URL for your CTA button and define where the new window will open. You can also define a link to open when people click on the module.
- Background: select a background color, gradient, image or video for this table.
The individual table design settings include the following options:
- Layout: feature a table to make it stand out from the other tables.
- Excluded item: define a color for features from the list that the product doesn’t include.
- Text: customize the appearance of the text.
- Title text: customize the appearance of the title.
- Body text: customize the appearance of the body content.
- Currency and Frequency text: customize the appearance of this text.
- Button: customize the appearance of the button.
- Spacing: adjust the padding.
- Border: define your border style.
- Box shadow: enable shadow for the table.
- Filters: adjust the tone filters.
You can also apply custom CSS to your table, choose the button’s rel attribute, and control the transitions of the hover animation, using the advanced settings.
Elements
The features in the pricing tables are displayed as bullets by default. You can remove the bullets here.
Link
If you want that the element opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Background
Add a background color, gradient, image or video to your module.
Admin label
You can modify the module’s label for easier identification.
Design settings
Layout
Apply a background color for your featured products. These tables are highlighted in the row, which makes them stand out against the others.
Bullet
Choose the color of the CTA button. You can define a different one for buttons included in featured tables.
Text
Customize the text design.
Title Text
Customize the appearance of the title.
Body Text
Adjust the appearance of the body text.
Subheader Text
Customize the appearance of the subheader text.
Currency & Frequency Text
Customize the appearance of the currency and frequency text.
Price Text
Customize the appearance of the price text.
Button
Customize the appearance of the CTA button.
Sizing
Adjust the width of the module.
Spacing
Customize margins and padding sizes.
Border
Define the border’s corner, style, color, and width.
Box Shadow
Here you can enable box shadow.
Filters
Adjust the hue of the module as a whole.
Animation
Give an animation style to the module, like fading or sliding when it appears.
Advanced settings
Using this tab you are able to insert CSS code, select device visibility, and manage transitions. The Attributes options let you set the value of your link’s rel attribute, which is the relationship between the current document and the linked one.
Check this guide to know more about how to use these settings.
Use Case
Let’s create a module displaying three different price plans for a weekly meal delivery service.
Table 1
Title: Menu 1
Subtitle: Ideal for a light lunch!
Currency: $
Per: weekly
Price: 30
Button Text: Get it now!
Content:
+Soup
+Salad
+Snack
-Drink
-Dessert
Background: light blue
Body text: black
Excluded item: light gray
Table 2
Title: Menu 2
Subtitle: Our best seller option!
Currency: $
Per: weekly
Price: 50
Button Text: Get it now!
Content:
+Soup
+Salad
+Main meal
+Drink
-Dessert
Background: light green
Body text: black
Excluded item: light gray
Layout: make this table featured
Table 3
Title: Menu 3
Subtitle: For the foodies out there!
Currency: $
Per: weekly
Price: 60
Button Text: Get it now!
Content:
+Soup
+Salad
+Main meal
+Drink
+Dessert
Background: light pink
Body text: black
Excluded item: light gray
And this is how it looks: