Use the 10Web Pricing Table Premium widget to create beautiful and eye catching pricing tables that are sure to get the attention of your visitors. With a multitude of features, you will have the perfect tool under your fingertips to realize your creativity and give your price tables functionality and structure.
The Pricing Table consists of 5 parts.
- Header
- Pricing
- Features
- Footer
- Ribbon
The Content Tab
Header
Title: Add a title to the pricing table.
Description: Write a description for the product.
Pricing
Currency Symbol: Choose the currency type to be displayed.
Price: Customize the price for the product.
Sale: Set the toggle to on and add an original price.
Period: Set the recurring payment intervals.
Features
Insert the features offered in the product by clicking on Add Item. Click on a feature to edit the Text, insert an Icon in front of the text, and set a Color for the icon.
Footer
Button Text: Set the text of the button.
Link: Insert a link for the button. Click on the gear icon to customize the link settings.
Additional Info: Set additional info that will be displayed under the button.
Ribbon
Show: Turn the toggle on if you want to display a ribbon on the pricing table.
Title: Insert the text displayed on the ribbon.
Horizontal Positioning: Choose on which side to display the ribbon.
The Style Tab
Header
Background Color: Customize the background color.
Padding: Customize background padding.
Title Color & Typography: Customize the title color and typographical settings.
Description Color & Typography: Customize the color and typographical settings of the description.
Pricing
Padding: Set the padding relative to the background.
Color & Typography: Customize the color and typography of the price.
Currency Symbol: Set the size, customize and the vertical and horizontal position relative to the price.
Period Color & Typography: Adjust color and typography of period(eg. monthly, weekly).
Features
Padding: Set the padding of the features.
Color & Typography: Customize the color and typography of the features.
Alignment: Option to align features to the left, center, and right.
Width: Set the width of the features.
Divider: Set the toggle on Yes to add a divider for the features.
Color, Weight, & Width: If the divider is enabled, customize the color, the thickness, and the length of the dividers.
Footer
Background Color: Customize the background color of the footer.
Padding: Set the padding of the footer relative to the features.
Button Normal Mode
Size: Choose the size of the button.
Text Color & Typography: Customize the color and typography of the button text.
Background Color: Customize the color of the button.
Border Type: Choose to set a border to the button.
Width: If a border is set, adjust the thickness of the border.
Color: If a border is set, customize the color of the border.
Border Radius: Adjust the border radius for rounded corners.
Padding: Set the padding inside the button.
Button Hover Mode
Text Color: Set the color of button text on hover.
Background Color: Set the color of the button on hover.
Border Color: Set the color of the border on hover.
Hover Animation: Option to add an animation effect on hover.
Additional Info
Color: Set the color of the info text.
Typography: Customize typographical settings of the text.
Margin: Set the margin between the text and the button.
Ribbon
Background Color: Customize the color of the ribbon.
Distance: Adjust the distance of the ribbon relative to the corner.
Text Color & Typography: Customize the color and the typography of the ribbon text.
The Advanced Tab
Set Z-index, conditions, write custom CSS, show or hide in responsive mode and more in the Advanced tab.
Next up: Price List