The Price Table widget helps you create customizable pricing tables to showcase plans or packages with features, pricing, and descriptions, making it easy for visitors to compare and choose. Adjust layouts, colors, fonts, and more to match your site’s style.
Additional use cases
- Display subscription plans for a software service.
- List different membership levels for a gym or fitness center.
- Showcase pricing options for a photography package.
- Present pricing tiers for a web hosting service.
- Highlight pricing options for online courses or educational programs.
Adding Price Table widget
- Add the Price Table widget by finding it on the widgets panel and dragging it to the page canvas.
- In the Content tab, you’ll find five sections: Header, Pricing, Features, Footer, and Ribbon, each with its own set of customization settings. Below you will find a detailed description of the settings and how to configure them.
Content tab
Header
- Title: Enter the title of the price plan.
- Description: Add a brief description of the pricing plan.
- Title HTML Tag: Set the Header’s Title tag, choosing from H2 – H6.
Pricing
- Currency Symbol: Select the currency symbol.
- Price: Set the exact pricing of your product or service, including cents.
- Currency Format: Choose the thousands separator format.
- Sale: Display the original price with a strikethrough and the new sale price.
- Period: Enter the period of time for each payment.
Features
- List Item: A list of all the features you are offering.
- Drag and drop them to change their order.
- Click on the Add Item button to add another item to the list.
- To duplicate or delete items, click on the item’s Duplicate or Delete icon.
- Click on each item to customize their content and settings.
- Text: Enter the description of the feature.
- Icon: Select an icon to represent the feature.
- Icon Color: Choose a color for the icon.
Footer
- Button Text: Specify the text to display on the button.
- Link: Enter the URL the button should link to. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.
- Additional Info: Include a line of additional info below the button.
Ribbon
- Show: Show or hide a corner ribbon.
- Title: Enter the text to be displayed on the ribbon.
- Horizontal Position: Choose the position of the ribbon: Left or right.
Style tab
Header
- Background Color: Select the background color for the header area.
- Padding: Adjust the padding of the header area.
-
Title
Color: Set the color of the main title text.
Typography: Define the typography options for the main title, including font style, size, weight, and more.
-
Description
Color: Set the color of the subtitle text.
Typography: Define the typography options for the subtitle, such as font style, size, weight, and more.
Pricing
- Background Color: Choose a background color for the pricing area.
- Padding: Adjust the padding of the pricing area.
- Color: Customize the color of the price text.
- Typography: Set the typography options for the price text, including font style, size, weight, and more.
-
Currency Symbol
Size: Change the size of the currency symbol.
Position: Determine whether the currency symbol appears to the left or right of the price.
Vertical Position: Specify the vertical alignment of the currency symbol. -
Fractional Part
Size: Adjust the size of the fractional part.
Vertical Position: Determine the vertical alignment of the fractional part. -
Period
Color: Set the color of the period text.
Typography: Define the typography options for the period text.
Position: Specify whether the period text appears below or beside the price.
Features
- Background Color: Select the background color for the features list.
- Padding: Adjust the padding of the features list.
- Color: Customize the color of the text within the features list.
- Typography: Set the typography options for the text within the features list, including font style, size, weight, and more.
- Alignment: Align the text within the features list to the right, left, or center.
- Width: Adjust the width of the features list.
-
Divider
Color: Set the color of the divider.
Weight: Adjust the thickness or weight of the divider.
Width: Specify the width of the divider.
Gap: Set the distance between the divider line and the features list content.
Footer
- Background Color: Choose a background color for the footer area of the pricing table.
- Padding: Adjust the padding of the footer area to control the space between the content and the edges of the footer.
- Button: This section provides options for customizing the appearance of the button within the footer.
- Size: Choose from button sizes, from extra small to extra large.
-
Normal
Text Color: Set the color of the button text.
Typography: Set the font style, size, and other typography options for the button text.
Background Type: Choose the background type for the button.
Color: Choose button color.
Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved.
Border Radius: Set the border radius of the button to control corner roundness.
Text Padding: Set the distance between the button text and the border. -
Hover
Text Color: Set the color of the button text when hovered over by the mouse cursor.
Background Type: Choose the background type for the button on hover.
Color: Set the background color of the button on hover.
Border Color: Specify the color of the button border on hover.
Animation: Add animation effects to the button when hovered over. -
Additional Info
Color: Choose the color of the additional info text.
Typography: Set the font style, size, and other typography options for the additional info.
Margin: Adjust the space around the additional info text.
Ribbon
- Background Color: Choose the background color for the ribbon.
- Distance: Use a slider to control the distance between the ribbon and the corner of the pricing table.
- Text Color: Set the color of the text displayed on the ribbon.
- Typography: Customize the font style, size, and other typography options for the text displayed on the ribbon.
- Box Shadow: Add a box shadow effect to the ribbon.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.