Pricing Table Module

The pricing module can be used to showcase Pricing quote for the customers depending on the plan that one would offer. In the below article we will explain in detail how we can add styling to each of the elements inside the Pricing module. 

Structure of a Pricing Table

A Pricing Table consists of one or more Pricing Columns, which will be one for each of the pricing plans available. You can add more Columns (plans) by clicking on the Add Column button. To delete or duplicate a column use the option in the menu in the left panel. 

Each Pricing Column has one or more Modules, which are typically the information about the corresponding plan like the Name, Price, features, and button. You can add more information to a plan by clicking on Add Module. There are 5 types of modules that can be added within a column namely - Heading, Text, Icon with Text, Price, and Button. 

Enabling Yearly Pricing 

To set up price variations for Monthly and Yearly plans, navigate to the Style tab of the pricing Table, and enable Yearly Pricing. The contents of Monthly and Yearly plans can be modified, by simply switching the tab on the right panel. Contents like pricing and features can be edited in the right panel directly. 

Editing and Styling a Pricing Column

Each column inside the Pricing Table can be individually customized. To style, a Pricing Column, click on the respective column, and under the Style tab, the option for changing the column background color and the hover color is available. The option for setting Border color and Shadow Color for a column are also included.

Editing a module in the Pricing Column

Contents - The contents of all the modules in the pricing column can be changed in the Right Panel directly. 

NOTE - The button module is an exception. The contents of the button module can be edited only in the Left Panel.

Styling - The color, typography, and other styling parameters of the modules can be edited in the Left panel