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: