Facebook Community

10Web Help Center

Hi, how can we help?

Articles in this section

See more

Pricing Table

  • Updated
Follow

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

1.png

The Content Tab

Header 

Title: Add a title to the pricing table.

Description: Write a description for the product.  

2.png

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. 

3.png

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.

5.png

6.png

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.

8.png

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.

10.png

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).

4.png

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.

7.png

Footer

Background Color: Customize the background color of the footer.

Padding: Set the padding of the footer relative to the features.

9.png

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

Related articles