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.
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.
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.
Select any one style from the dropdown. We offer three different styles to choose from.
Set the style for the Title of the table.
Enter text here to be displayed as Title.
Enter text here to be displayed as Sub Title.
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.
Choose any one from the three styles for the pricing table.
Enter text here for the prefix of the price i.e. $
Value Of Price
Enter text here for the value of the price.
Enter Text here for postfix text. I.e. per year, month.
Display Previous Price
Slide right to display the previous price.
Enter text here for the prefix text of the previous price.
Value Of Price
Enter the Value of the previous price.
Enter text here for the postfix text of the previous price.
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.
Slide right to display the button.
Choose the button style for the button.
Enter the button text here.
Enter the link for the button.
Call to Action
Call To Action(CTA) Text
Enter text here for the CTA.
Slide right to display the Ribbon.
Choose the ribbon style here.
Enter text here for the Ribbon.
The Style tab is used for customizing the appearance of all the Process/Steps widget components. Let’s understand each of these customization options.
Set Typography and Text Color of the Title here.
Previous Price Style
Set the Typography, Price Alignment, and Price color for Previous Price here.
Set the Typography, Price Color, and Postfix style options here.
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.
You will get multiple Tooptip styling and other options here.
Set the Padding, Typography, and Text Color of the Button.
Call to Action (CTA)
Set the Typography and Text Color of the CTA.
Set the Typography, Text Color, Border Radius, and Background for the Ribbon/Pin.
Set and Style the Inner Padding, Box Border, Background Hover Animation, and Box Shadow for the Background.
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