Pricing Table Widget Tutorial

Intro

Premium Pricing Table Widget allows you to create highly customizable and interactive pricing tables with lots of options to style each element included in the pricing table the way you want.

Click here to check Premium Pricing Table Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

NOTE* The number of settings that are available depends on the Display Options settings.

• Icon
• Title
• Price
• Feature List
• Description
• Button
• Ribbon
• Display Options

1. Icon

Select an icon from a list of Font Awesome icons, insert the Lottie animation link or upload an image. It’ll displayed above the title.

2. Title

• Text: Here you can give your pricing table a title.
• HTML Tag: Select a tag that will be used to display the title. Select from H1 to H6, where H1 is the largest and H6 is the smallest. The default is “H3”.

3. Price

• Slashed Price: This is optional as it used to show the original or the old price before the sale. When you add it, you will notice that the number will be crossed out.
• Currency: Edit the currency symbol according to your country. The default is Dollar Sign “$”.
• Price: Enter the price.
• Divider: Enter a divider that is displayed between the price and the duration.
• Duration: Enter the duration of your choice. The default is “m” which refers to month.

4. Feature List

This option adds an icon list and a short description of the main features included in your offer. You can edit a feature list item by clicking on it, or add a new item using the “Add Item” button.
You can remove items by clicking the [X] button, and re-order them by selecting and dragging the item to the position of your choice.

• Text: Enter a short description to represent the feature.
• Icon Type: Select an icon from a list of Font Awesome icons, insert a Lottie animation link or upload a custom image.
• Tooltip: Enable/disable tooltip for this feature.
• Tooltip Text: Enter tooltip description for this feature.
• Icon Color: Pick a color for feature icon.
• Text Color: Pick a color for feature text.
• Alignment: Align the list to the left, center or right.

5. Description

Add your description directly to the text editor. You can use it instead of using the icon list or you can use them both.

6. Button

The button will appear at the bottom of the pricing table. It is recommended that you use it to include a link to your pricing table.

• Text: Add a button text.
• Link Type: Select from a list of existing pages, or enter a custom URL.
• Link Target: Select a link target as you can choose from:
  • Blank: The link will be loaded in a new window.
  • Parent: The link will be loaded in the parent frame-set.
  • Self: The link will be loaded in the same frame as it was clicked.
  • Top: The link will be loaded in the full body of the window.

7. Ribbon

The ribbon is the folded corner at the top of the pricing table where you can include additional information to attract your visitors‘ attention.

• Type: Select ribbon type style: Triangle, Circle, Stripe or Flag.
• Text: Add a text to the badge.
• Size: Adjust the size of the background, select a value between “0 to 300”.
• Position: Select the position of the badge: Right or Left.
• Horizontal Offset: Set the horizontal offset for the ribbon.
• Vertical Offset: Set the vertical offset for the ribbon.

8. Display Options

Enable or disable the following options:

• Icon
• Title
• Price
• Features
• Description
• Button
• Badge

Style

• Icon
• Title
• Price
• Features
• Tooltips
• Description
• Button
• Ribbon
• Box Settings

1. Icon

• Color: Select the icon color.
• Size: Adjust the icon size.
• Background Color: Select the icon’s background color.
• Padding: Adjust the padding using pixels or em. Increasing the padding will make the background larger.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the icon’s inner container:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Increasing the border-radius will add circular corners to the icons inner container. You can adjust the border-radius in pixels, % or em.

Container

The icon also has an outer container block which is displayed in full width behind the icon. This allows you to add distinct sections to your price table, combining different backgrounds and borders.

• Background Type: The available background type options are:
  • Solid Color
  • Gradient
  • Image: Select or upload an image via the Media Library. If an image is selected, the following options become available:
    • Position:
      • Default
      • Top Left
      • Top Center
      • Top Right
      • Center Left
      • Center Center
      • Center Right
      • Bottom Left
      • Bottom Center
      • Bottom Right
      • Custom: Adjust the image’s X and Y positions using pixels, em % or VW.
    • Attachment: Default, Scroll or Fixed.
    • Repeat:
      • Default
      • No-repeat
      • Repeat
      • Repeat-X
      • Repeat-Y
    • Size:
      • Default
      • Auto
      • Cover
      • Contain
      • Custom: Adjust the image width using pixels, em % or VW.
• Border: Select Border Type, Color, Size, and Radius.
• Margin: Margin is the space between the icon’s outer container and the rest of the widget’s content. Adjust the margin using pixels, em or %.
• Padding: Padding is the space between the icon and the outer container. Adjust the padding using pixels, em or %.

2. Title

• Color: Select a color for the title text.
• Typography: Adjust the font settings as you want.
• Background Type: Select between a solid color, a gradient, or a custom image from the Media Library.
• Margin: Margin is the space between the title and the rest of the content. Adjust the margin using pixels, em or %.
• Padding: Padding is the space between the title and its container. Increasing the padding will make the background larger. Adjust the padding using pixels, em or %.

3. Price

Slashed Price

• Color: Select a text color for the slashed price.
• Typography: Adjust font settings.
• Margin: Adjust the margin using pixels, em or %.

Currency

• Color: Select a text color for the slashed price.
• Typography: Adjust currency font settings.
• Vertical Align: Depending on the currency, you may want to align the symbol to the top or bottom. You can also unset the option to align it with the rest of the text.
• Margin: Adjust the margin using pixels, em or %.

Price, Divider, and Duration

The price, divider and duration settings are identical.

• Color: Select a color.
• Typography: Customize your font.
• Margin: Adjust the margin using pixels, em or %.

Container

• Background Type: Select between a solid color, a gradient, or an image from the Media Library.
• Margin: Margin is the space between the different sections of the widget. Adjust the margin using pixels, em or %.
• Padding: Padding is the space between the content and the edge of the container. Increasing the padding will increase the background sizes. Adjust the padding using pixels, em or %.

4. Features

Text

• Color: Select a text color for the items list.
• Typography: Customize features’ font.

Icon

• Color: Select a color for the icons.
• Size: Adjust the icon size. Select a value from “0 – 100”.
• Spacing: Adjust the space between the icon and the text. Select a value between 0 to 100.
• Vertical Spacing: Adjust the vertical spacing between the list items. Select a value between “0 to 100”.

Container

You can also style the block container behind the list.

• Background Type: Select between a solid color, gradient colors, or upload a custom image to the Media Library.
• Border: Select Border Type, Color, Size, and Radius.
• Margin: Margin is the space between the container and the rest of the widget content. Adjust the margin using pixels, em or %.
• Padding: Padding is the space between the list item and the edge of the container. Increasing the padding will make the background larger. Adjust the padding in pixels, em or %.

5. Tooltips

• Alignment: Algin tooltips text left, center and right.
• Width: Set tooltip width.
• Color: Pick a color for tooltips text.
• Typography: Adjust tooltips text font settings.
• Background Color: Pick tooltips a background color.
• Border Color: Set tooltips border color.

6. Description

• Color: Select a color for the description text.
• Typography.
• Background Type: Select a solid color, gradient, or image from the Media Library.
• Margin: Adjust the margin using pixels, em or %.
• Padding: Adjust the padding in pixels, em or %.

6. Button

• Color: Select a color for the button text.
• Hover Text Color: Select a color that will be used for the text when the user hovers over the button.
• Typography: Adjust font settings.

Select whether to style the normal or the hover state.

Background Type: The available background type options are:

• Solid Color
• Gradient
• Image: Select or upload an image via the Media Library. If an image is selected, the following options become available:
  • Position:
    • Default
    • Top Left
    • Top Center
    • Top Right
    • Center Left
    • Center Center
    • Center Right
    • Bottom Left
    • Bottom Center
    • Bottom Right
    • Custom: Adjust the image’s X and Y positions using pixels, em % or VW.
  • Attachment:
    • Default
    • Scroll
    • Fixed
  • Repeat:
    • Default
    • No-repeat
    • Repeat
    • Repeat-X
    • Repeat-Y
  • Size:
    • Default
    • Auto
    • Cover
    • Contain
    • Custom: Adjust the image width using pixels, em % or vw.

• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the button:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Increasing the border-radius will add circular corners to the button. You can adjust the border-radius in pixels, % or em.
• Shadow: Add a shadow around the container. Select the color and the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position: Outline or Inset
• Margin: Margin is the space between the button and the rest of the content as well as the space between the button and the edge of the widget container. Adjust the margin using pixels, em or %.
• Padding: Padding is the space between the button text and the edge of the button. Increasing or decreasing the padding will change the size of the button. Adjust the padding using pixels, em or %.

7. Ribbon

• Type: Select type of Pricing Table Ribbon, there are four types available:
  • Triangle
  • Circle
  • Stripe
  • Flag
• Text: Select a text color for the Ribbon.
• Typography.
• Vertical Distance: You can use this option to move the text away from its original position inside the badge, depending on the badge size. Select a value between 1 to 200.
• Horizontal Distance: You can use this option to move the text away from its original position inside the badge, depending on the badge size. Select a value between 1 to 170.
• Background Color: Select a background color and opacity for the badge.

8. Box Settings

The box settings styles are controlling the outer box that holds all the widget content. Choose whether to style the normal or hover state.

• Background Type: Select a color, gradient, or image from the Media Library.
• Border: Select Border Type, Color, Size, and Radius.
• Advanced Border Radius: Apply custom radius values for Elementor Pricing table widget box. Get the radius value from here.
• Border Radius: Insert border radius values.
• Shadow: Add a shadow around the container. Select the color and choose from the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position: Outline or Inset
• Margin: Margin is the space between the widget and the rest of the page content. Adjust the margin using pixels, em or %.
• Padding: Padding is the space between the widget’s content and the edge of the box. Note that increasing the padding will not change the position of the badge. Adjust the padding using pixels, em or %.