1. Home
  2. Docs
  3. Marketing Elements
  4. Pricing Table

Price Table SA Element

Showcase your pricing plans in a flexible and stunning fashion, including elements like ribbons, features, discount and every aspect of the price table. Here in this tutorial, you’re going to learn how to use the Price Table element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Price Table Element

 

»Content

 

Settings

⇒Pricing Style: Set a pricing style from the list to define the style effect for the price table decoration.

⇒List Icon: Show/hide the icon for the feature list within the price table.

⇒Title: Add the price title here.

 

Price

⇒Price: Type the product price.

⇒On Sale: Show/hide the on sale offer on the price table.

⇒Price Currency: Enter the price currency sign.

⇒Currency Placement: Set the currency placement either left or right side of the price.

⇒Price Period (per): Set the price period.

⇒Period Separator: Add a period separator.

 

Feature

Adding the Items:

⇒List Item: Enter the list item of the feature.

⇒List Icon: Add an icon to the list item.

⇒Icon Color: Add a custom color to the feature list icon.

⇒Enable Tooltip? Enable/disable the tooltip and customize the option.

⇒Add Item: Use the ‘+Add Item’ button to add more items to the price table feature list.

 

Footer

⇒Button Icon: Add an icon to the footer call to action button.

⇒Button Text: Add the text to the button.

⇒Link: Enter the call to action button URL here. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.

 

Ribbon

⇒Featured? Add a ribbon to the featured price table item. And then customize the styles of the ribbon.

 


»Style

 

Pricing Table Style

⇒Background Color: Choose the background color for the pricing table.

⇒Padding: Set the padding value for the top, right, bottom and left around the price table for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the price table for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the price table for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the price table for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Content Alignment: Set the alignment of the price table content.

⇒Button Alignment: Set the alignment of the price table footer button.

 

Header

Title Style:

⇒Color: Add a custom color to the title text of your price table.

⇒Line Color: Add a custom color to the line beneath the title.

⇒Typography: Set the typography options for the title.

 

Pricing

⇒Sale Price

→Color: Add a custom color to the sale price text.

→Typography: Set the typography options for the sale price text.

⇒Currency

→Color: Add a custom color to the currency sign.

→Typography: Set the typography options for the currency sign.

→Margin: Set the margin value for the top, right, bottom and left around the price currency for different dimensions. You can link the values together or customize them individually.

⇒Pricing Period

→Color: Add a custom color to the pricing period text.

→Typography: Set the typography options for the pricing period text.

 

Feature

⇒Color: Add a custom color to the feature texts.

⇒Disable Feature Color: Add a custom color to the disable feature texts.

⇒Typography: Set the typography options for the pricing table feature.

 

Tooltip

⇒Background Color: Add a custom background color to the tooltip.

⇒Arrow Background: Add a different custom color to the arrow background.

⇒Color: Add a custom color to the tooltip.

⇒Padding: Set the padding value for the top, right, bottom and left around the tooltip box for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the tooltip box for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the tooltip for different dimensions.

⇒Tooltip Arrow

→Arrow Size: Customize the arrow size of the tooltip box.

 

Button

⇒Padding: Set the padding value for the top, right, bottom and left around the footer button for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the footer button for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the button text.

⇒Text Color: Customize the button text color for Normal & Hover view.

⇒Background Color: Customize the button text background color for Normal & Hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the button for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Price Table Element.


Was this article helpful to you? Yes No

How can we help?