Advanced Pricing Table

The Advanced Pricing Table Widget in Animation Addons for Elementor is a paid feature. To use this widget, ensure the plugin is installed and activated on your site. You can explore both free and pro widgets using the filtering options, but this specific widget is available only in the pro version.

Introduction

The Advanced Pricing Table Widget in Animation Addons for Elementor lets you create customizable, visually appealing pricing tables that seamlessly match your website’s design.

Key Use Cases for the Advanced Pricing Table Widget:

• Display and compare pricing plans in an organized, visually appealing layout.
• Customize the design to align with your website’s branding.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Advanced Pricing Table Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Advanced Pricing Table Widget in the list.
• Toggle it on to enable the widget.
• The Advanced Pricing Table Widget is now ready to use!

How to Add the Advanced Pricing Table Widget in Elementor:

• Open the page where you want to add the Advanced Pricing Table Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Advanced Pricing Table Widget.”
• Drag the widget to your desired section.

How to Configure Advanced Pricing Table Widget

• In the Elementor panel, search for the “Advanced Pricing Table Widget.”
• Drag and drop the widget into your desired section.
• From the widget settings, add your pricing plans by entering the title, price, features, and button text.
• You can highlight a featured plan and adjust alignment, icons, and labels as needed.
• Use the Style tab to customize colors, typography, spacing, and borders to match your site’s design.

Configuring Advanced Pricing Table Widget : A Step-by-Step Guide

After adding the Advanced Pricing Table Widget to your page, you can customize its settings through the Content, Style, and Advanced tabs.

Content Settings

The Content section of the Advanced Pricing Table Widget includes multiple customization options to help you design an engaging and informative pricing layout. The following settings are available:

1. Pricing Table

• Choose between two styles of pricing table layouts to best match your website’s design.

2. Layout

• Arrange the structure of your table by toggling the visibility of key sections:
  
  • Header & Pricing
  • Feature
  • Button

3. Header

• Customize the top portion of the pricing table:
  
  • Icon: Add an icon to visually represent the plan.
  • Title: Enter the plan name.
  • Title HTML Tag: Define semantic hierarchy (e.g., H2, H3).
  • Subtitle: Include a brief description or subtitle.
    

4. Pricing

• Display and format pricing details:
  
  • Currency Symbol
  • Price and Sale Price
  • Billing Period (per month, per year)
    

5. Feature

• List included features like:
  
  • Title of the feature section
    
  • Custom feature items such as:
    
    • Starter Pack Included
    • Budget Minimization
    • Venue Booking
    • Personal Trainer

6. Button

• Configure your CTA button with the following options:
  
  • Style & Hover Style: Choose button appearances for normal and hover states.
  • Text: Add CTA text (e.g., Get Started)
  • Link: Set a destination URL
  • Icon: Add an icon and define its position, direction, and spacing

7. Ribbon

• Display a visual label (“Popular”, “Best Value”):
  
  • Show Button: Enable or disable the ribbon
  • Title: Enter the ribbon text

Style Settings

The Style section provides detailed control over the visual appearance of each part of the pricing table. It includes six major areas:

1. Pricing Table

• Padding: Adjust internal spacing for the entire pricing table container.

2. Header

• Title: Set color, typography, padding, and alignment.
• Subtitle: Customize color, typography, padding, and alignment.
• Icon: Modify color, size, margin, and alignment.
• Background Type: Choose a background style (solid, gradient, image).
• Border Type: Select border style (solid, dashed, etc.).
• Border Radius: Round the corners.
• Header Top Background: Define a unique background for the top header section.

3. Pricing

• Price Color and Typography
• Currency Symbol Typography
• Vertical Alignment: Align pricing content vertically.
• Period: Customize color and typography.
• Background Color and Padding
• Alignment: Align the pricing section content.

4. Features

• Title: Set color, typography, and margin.
  
• List Items: Customize:
  
  • Text Color and Typography
  • Icon Size
  • Icon Spacing
  • Gap between features
    
• Padding: Adjust spacing within the feature section.
• Border Type and Alignment

5. Button

• Style the call-to-action button using:
  
  • Typography and Icon Size
  • Text Color and Background Type
  • Border Type, Border Radius, and Box Shadow
  • Padding, Alignment, and Margin

6. Ribbon

• Define the look of the label/ribbon:
  
  • Text Color and Typography
  • Background Color
  • Transform (e.g., rotate or skew)
  • Border Radius and Padding

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

You’re all set! The Advanced Pricing Table Widget is now ready to highlight your pricing plans in a clear and attractive way. Need help or have questions? Our support team is just a message away.