Pricing Tables

< All Topics

If you are selling products and services through your website, a pricing table is a must. A fancy pricing table with a CTA button can really enhance your sales. Also, you can also specify what products and services you are offering. So you need a pricing table that not only looks nice but really showcases products and services.

Pro tip
Create tab based pricing tables such as Monthly and Annually. The monthly tab will show the monthly pricing tables whereas the yearly tab will show the year pricing options.

How to use the Pricing Table Widget of The Plus Addons For Elementor

The Pricing Table widget comes with 3 different styles to choose from. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Search for the Pricing Table from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Layout

Style

Select any one style from the dropdown. We offer three different styles to choose from.

Change Table layout for the Pricing Table widget.

Title Section

Title Style 
Set the style for the Title of the table. 

Title 
Enter text here to be displayed as Title. 

Sub Title 
Enter text here to be displayed as Sub Title.

Icon Options 

Select Icon
Select the Icon for the table here. We have provided three options for setting up the icon.

Icon – Use any icons from popular font families like FontAwesome or Icons Mind.
Image – Set a custom icon image if you have it. Click to choose the image from your computer.
SVG – Here you can use a pre-built SVG or a Custom Upload. Select any one option to set your desired SVG icon.

Price

Price Style   

Choose any one from the three styles for the pricing table.

Prefix Text  

Enter text here for the prefix of the price i.e. $

Value Of Price   

Enter text here for the value of the price. 

Postfix Text   

Enter Text here for postfix text. I.e. per year, month. 

Previous Price

Display Previous Price

Slide right to display the previous price. 

Prefix Text

Enter text here for the prefix text of the previous price. 

Value Of Price

Enter the Value of the previous price. 

Postfix Text

Enter text here for the postfix text of the previous price. 

Content Description

Content Style 

Choose the style for how the Content will be displayed.

Content List Style 

Choose the style for the Content List. 

List Open Default

Specify how many list items you want to display without using the dropdown. 

Expand Section Title

Enter text here for the expand section button. 

Shrink Section Title

Enter text here for the shrink section button. 

Button

Add Button in Pricing Table widget.

Button 

Slide right to display the button. 

Button Style

Choose the button style for the button. 

Button Text

Enter the button text here. 

Button Link

Enter the link for the button. 

Call to Action

Call To Action(CTA) Text

Enter text here for the CTA. 

Ribbon

Add Ribbon in Pricing Table widget.

Display Ribbon

Slide right to display the Ribbon. 

Ribbon Style

Choose the ribbon style here. 

Ribbon/Pin Text

Enter text here for the Ribbon. 

2. Style

The Style tab is used for customizing the appearance of all the Process/Steps widget components. Let’s understand each of these customization options.

Title Style

Set Typography and Text Color of the Title here.

Previous Price Style

Set the Typography, Price Alignment, and Price color for Previous Price here.

Price Style

Set the Typography, Price Color, and Postfix style options here.

Content Style

Set the Typography, Icon Size, Alignment, Text Color, Icon Color, and other Price style options here.

Content Background Style

Set and Style the Box Border, Border Color, Background Type, and Box Shadow for the Content Background.

Tooltip Options

You will get multiple Tooptip styling and other options here.

Button Style

Set the Padding, Typography, and Text Color of the Button.

Call to Action (CTA)

Set the Typography and Text Color of the CTA.

Ribbon/Pin

Set the Typography, Text Color, Border Radius, and Background for the Ribbon/Pin.

Background Options

Set and Style the Inner Padding, Box Border, Background Hover Animation, and Box Shadow for the Background.

Extra Effects

Set the Scale Zoom for Extra Effects.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View On Scroll View Animation Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?