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/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.

Key Features

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

  • Icon
  • Title
  • Price
  • Icon List
  • Description
  • Button
  • Badge
  • Display Options

1. Icon

Select an icon from a list of Font Awesome icons. The icon is displayed above the title.

Screenshot Shows Font Awesome Icon Option Included in Pricing Table Widget for Elementor
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”.
Screenshot Clarifies Adding a Title to Elementor Pricing Table Widget
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.
Red Arrows Pointing to Currency, Price, Divider, Duration, and How Those Looks on The Pricing Table Widget for Elementor
Control Every Single Element in Elementor’s Pricing Table Widget

4. Icon 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: Select an icon from a list of Font Awesome icons.
  • Alignment: Align the list to the left, center or right.
Red Arrows Referring to The Icon List Option in Premium Pricing Table Widget for Elementor
List the Available Features/Plans Using Icon List Option in Elementor Pricing Table Widget

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.

Screenshot Shows Rich Text Editor as an Option Included in Elementor Pricing Table Widget
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.
Red Arrows Pointing to The Pricing Table Button in Elementor Pricing Table Widget
Make Your Pricing Table Clickable by Enabling Button Option

7. Badge

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

  • 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.
Screenshot Shows Badge Option 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
Screenshot Shows The Display Options Controls Which Included in Elementor Pricing Table Widget
Elementor Pricing Table Widget Displaying Options

Style

  • Icon
  • Title
  • Price
  • Features
  • Description
  • Button
  • Badge
  • 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 %.
Screenshot Showing The Styling Options of Pricing Table Icon and Container in Elementor Pricing Table
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 %.
Screenshot Clarifies Titles Styling Controls Which Included in Elementor Pricing Table Widget
Elementor Pricing Table’s Styling Controls

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 %.
Screenshot Showing The Price Styling Controls Included in Pricing Table Widget for Elementor
Price Styling Options in Elementor Pricing Table Widget
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 %.
Currency Styling Controls in Premium Pricing Table Widget for Elementor
Currency Styling Options in Elementor Pricing Table Widget
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 %.
Screenshot Shows Price, Divider, Duration, and Container Styling Controls in Elementor Pricing Table WIdget
Price Customization Options in Elementor Pricing Table WIdget
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”.
Screenshots Shows Elementor Pricing Table Features' Styling Options
Features Styling Controls in Elementor Pricing Table Widget
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. 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 Options in Elementor Pricing Table Widget
Elementor Pricing Table Description Customization Options

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 %.
Screenshot Showing Button's Styling Controls in Elementor Pricing Table Widget
Elementor Pricing Table Widget Button Styling Options

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.
An Arrow Points at Ribbon's Type in Pricing Table Widget for Elementor
Ribbon’s Type 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.
  • 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 %.
Elementor Pricing Table's Box Styling Settings
Pricing Table Styling Settings

Download Now it's free!

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