10Web Help Center

Hi, how can we help?

Pricing Table

Follow
Copy article URL

in this article

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

in this article