The Pricing Table V1 widget allows you to create and display structured, multi-column pricing plans for your products or services. It is ideal for clearly comparing different tiers and encouraging conversions.

Price Tables: #

Add and configure each pricing plan you want to offer. Add Items: Click ‘Add Item‘ to create a new pricing plan. For each plan, configure:

• Featured Plan: A toggle to highlight a specific plan (e.g., Premium) to draw user attention.
• Title: Enter the name of the pricing tier (e.g., Basic).
• Currency: Specify the currency symbol or code (e.g., $TWD).
• Price: Input the numerical cost value (e.g., 500).
• Period: Define the billing frequency (e.g., / day).
• Features: A text area to list plan benefits. Enter each feature on a new line to format the list.
• Button Text: Customize the call-to-action label (e.g., Choose plan).
• Button Link: Set the destination URL for the plan’s action button.
• Background Color: Select a solid background color for the individual plan card.
• Background Gradient Color: Enable and choose a secondary color to create a gradient effect for the plan background.

Style Tab #

The Style tab offers detailed control over the appearance of every element within the pricing tables, enabling perfect brand alignment.

Style Tab: Style #

Control the overall layout and container aesthetics for the pricing table grid.

• Space Between: Use the slider to adjust the horizontal spacing between the different pricing cards (currently set to 0).
• Border Radius: Define the degree of rounding for the cards’ corners.
• Box Shadow: Click the pencil icon to apply depth to the cards through shadow effects.

Title: Style the name of each pricing plan (e.g., BASIC, PREMIUM).

• Color: Set the text color.
• Typography: Control the font family, size, weight, text transform, and letter spacing.

Price: Style the price figure itself.

• Color: Set the color of the price.
• Typography: Control the font properties of the price, often making it larger and bolder.
• Currency Typography: Style the currency symbol separately from the price, allowing for perfect sizing and positioning.
• Period Typography: Style the billing period text (e.g., /mo) separately.

Features: Style the list of features.

• Color: Set the color of the feature text.
• Typography: Control the font properties for the list.
• Padding: Adjust the spacing around the feature list.
• Border Type, Width & Color: Add dividers or borders between feature items.

Button: Style the call-to-action button for each plan.

• Text Color: Set the button text color.
• Background Color: Select the gradient background color for the button.
• Typography: Control the font properties for the button.
• Border Radius: Control the roundness of the button corners (e.g., 50px).
• Padding: Adjust the spacing around the button.

Common Use Cases #

• Service Packages: Clearly display tiers of service packages (e.g., Basic, Pro, Enterprise).
• SaaS Subscription Plans: Show monthly and yearly subscription options.
• Product Tiers: Compare different versions of a product with varying features.
• Highlighted Recommended Plan: Use the styling options to make the most popular plan stand out with a different border, shadow, or background color.