The Digi Pricing Table widget allows you to create high-conversion pricing plans with customizable icons, titles, and feature lists. It is designed to help users quickly compare different service levels or product packages.

Content Settings #

This section defines the core data and identity of the individual pricing plan.

• Featured: Toggle this to No or Yes to highlight a specific plan as the “Best Value” or “Recommended” option.
• Use Table Icon?: Choose whether to display a visual icon at the top of the pricing table.
• Set Icon: If enabled, select or upload a custom icon to represent the specific plan (e.g., a basic vs. premium icon).
• Title: Enter the name of the pricing plan (e.g., Basic Plan).
• Price: Set the numerical value for the plan (e.g., 49).
• Currency Symbol: Specify the currency used for the price (e.g., $).
• Period: Define the billing cycle for the plan (e.g., / month).
• Description: Provide a summary or tagline for the plan to guide user expectations.

Features #

Manage the list of benefits or services included in the pricing plan.

• Features List: Displays a list of all active feature items.
• Feature Item Settings: Click an individual item to customize its specific properties:
  • Feature Text: Enter the specific benefit (e.g., 1 Pages/Screens).
  • Use Icon?: Toggle whether a checkmark or custom icon appears next to this feature.
  • Icon Type: Select the style of the icon, such as Check (Default) or Cross (Disabled).
  • Use Elementor Icon?: Choose to use a standard library icon instead of the default.
• Add Item: Use this button to append new features to the list.

Content Tab: Button #

Configure the call-to-action button that appears at the bottom of the table.

• Button Text: Enter the text for the button label, such as Choose Plan.
• Link: Paste the destination URL (e.g., a checkout or contact page) where users will be sent.

Style Tab: Price Table #

Customize the overall container and icon aesthetics for the pricing plan.

• Background Color: Select the primary background color for the pricing table container.
• Border Type: Choose a border style, such as Solid.
• Border Width: Set the thickness for each side (e.g., 1px all around).
• Border Color: Define the color of the table’s outline.
• Border Radius: Control the roundness of the table corners (e.g., 16px).
• Box Shadow: Click the pencil icon to apply a shadow effect for added depth.
• Padding: Adjust the internal spacing between the table border and the content.

Icon Style:

• Icon Size: Use the slider to set the dimensions of the table icon (e.g., 24px).
• Color: Choose a specific color for the icon to match your brand.

Style Tab: Content Style #

The Content Style section allows for precise typographic and color control over the primary text elements within each pricing plan. Each sub-section provides independent Color and Typography settings to ensure a clear visual hierarchy.

Title:

• Color: Set the specific text color for the name of the pricing plan.
• Typography: Access full font controls (family, size, weight) to style the title.

Description:

• Color: Select the color for the plan’s summary or tagline.
• Typography: Customize the font style for the description text.

Price:

• Color: Define the color of the numerical price value to make it stand out.
• Typography: Adjust the font settings specifically for the price display.

Period:

• Color: Choose the color for the billing cycle text (e.g., “/ month”).
• Typography: Style the font for the period to complement the price.

Style Tab: Features Styles #

The Features Styles section provides visual controls for the list of benefits included in your pricing plan. You can independently style the text for active features and disabled items.

• Typography: Access global font controls (family, size, weight) to set the appearance of the feature list text.
• Color: Select a specific text color for the features based on the selected state.
• Space Between: Use the slider to adjust the vertical spacing between each feature item in the list (currently set to 10px).
• Border Type: Choose a border style to separate feature items, with Default being the standard selection.

Style Tab: Button Style #

The Button Style section provides tools to customize the call-to-action button at the bottom of the pricing table, with separate controls for Normal and Hover states.

• Typography: Click the pencil icon to set the font family, size, weight, and other text properties for the button label.
• Text Color: Define the specific color of the text displayed on the button.
• Background Color: Select the background fill color for the button container.
• Border Type: Choose a border style, such as Default, to outline the button.
• Border Radius: Set the roundness of the button corners by entering pixel values for Top, Right, Bottom, and Left.
• Padding: Adjust the internal spacing between the button text and its borders to control the button’s size.

Style Tab: Featured Label #

The Featured Label section allows you to design the badge used to highlight a specific pricing plan, such as “Recommended” or “Best Value”. These settings are active when the Featured toggle is enabled in the Content tab.

• Typography: Use the pencil icon to customize the font family, size, weight, and style for the label text.
• Text Color: Select a specific color for the label’s text to ensure it stands out against the background.
• Background Color: Define the fill color for the label badge.
• Padding: Adjust the internal spacing (Top, Right, Bottom, Left) to control the size and breathing room of the label.
• Border Radius: Round the corners of the label by entering specific pixel values.
• Label Outside?: Toggle this to No (default) or Yes to determine if the label sits inside the pricing table container or is positioned outside the main border.

It is important to note that the Digi Pricing Table is a single widget designed to represent one pricing plan. To create a standard comparative pricing layout, you should add three separate widgets into three side-by-side containers to achieve the best visual result.