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 free plugin installed and activated on your website.
  • Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Elementor Pricing Table Widget
Elementor Pricing Table Widget

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.

Elementor Pricing Table Widget Tutorial
Elementor’s Pricing Table Icon

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”.
Elementor Pricing Table Widget Title
Elementor Pricing Table Widget Title

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.
Elementor Pricing Table Price Options
Elementor Pricing Table Price Options

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.
List the Available Features/Plans Using Icon List Option in Elementor Pricing Table Widget
List the Available Features/Plans Using Icon List Option in Elementor Pricing Table Widget
Elementor Pricing Table Feature Item Tooltips
Feature Item Tooltips in Elementor Pricing Table

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.

Pricing Table Widget for Elementor Description
Use Description Text Instead of Using Icon List or You Can Use It Both in Elementor Pricing Table Widget

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.
Make Your Elementor Pricing Table Widget Clickable by Enabling Button Option in Pricing Table Widget for Elementor
Make Your Pricing Table Clickable by Enabling Button Option

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.
Make Your Most Successful Plan Standout by Adding a Badge in Elementor Pricing Table Widget
Make Your Most Successful Plan Standout by Adding a Badge

8. Display Options

Enable or disable the following options:

  • Icon
  • Title
  • Price
  • Features
  • Description
  • Button
  • Badge
Elementor Pricing Table Widget Displaying Options
Elementor Pricing Table Widget Displaying Options

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 %.
Elementor Pricing Table's Icon Styling Options
Elementor Pricing Table’s Icon Styling Options

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 %.
Elementor Pricing Table's Title Styling Options
Elementor Pricing Table’s Title Styling Options

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 %.
Price Styling Options in Elementor Pricing Table Widget
Price Styling Options in Elementor Pricing Table Widget

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 %.
Features Styling Controls in Elementor Pricing Table Widget
Features Styling Controls in Elementor Pricing Table Widget

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.
Tooltips Styling Controls in Elementor Pricing Table Widget
Tooltips Styling Controls in Elementor Pricing Table Widget

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 %.
Description Styling Controls in Elementor Pricing Table Widget
Description Styling Controls in Elementor Pricing Table Widget

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 %.
Button Styling Controls in Elementor Pricing Table Widget
Button Styling Controls in Elementor Pricing Table Widget

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.
Ribbon's Style in Elementor Pricing Table Widget for Elementor
Ribbon’s Style in Elementor Pricing Table Widget for Elementor

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 %.
Box Settings in Elementor Pricing Table Widget for Elementor
Box Settings in Elementor Pricing Table Widget for Elementor

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.

×