How to Use the Pricing Table Element

What Is the Pricing Table Element?

The Pricing Table element allows you to display one or more pricing plans, packages, or service tiers in a structured and visually appealing format. It supports various layout modes, flexible pricing models, and customizable features to help visitors compare options and make informed decisions. You can use this element in Funnels, Websites, Blogs, and the E-Commerce Store builders within your CRM.

Key Benefits

Using the Pricing Table element offers several advantages for presenting your offers clearly and driving conversions:

• Layout Flexibility: Choose from Grid, Carousel, Classic Table, or Comparison Table layouts to suit your content and goals.
• Clear Plan Comparison: Features like horizontal scrolling, arrow controls, and sticky headers (in Comparison mode) keep information accessible.
• Multiple Pricing Models: Support one-time payments, recurring subscriptions, tiered pricing, and more without extra setup.
• Conversion Cues: Add strikethrough pricing for discounts, promotional badges, and captions to highlight value.
• Action Control: Configure buttons to open URLs, launch popups, navigate to page sections, download files, or remain inactive.
• Brand Consistency: Customize colors, spacing, and column gaps to match your site’s design.
• Mobile Readiness: The element adapts responsively to smaller screens while maintaining clarity.

How to Set Up the Pricing Table Element

Follow these steps to add and configure a Pricing Table on your page:

1. Navigate to the Page Builder from your sub-account dashboard by selecting Sites and opening your desired funnel or website.
2. Click the Edit button to launch the page editor.
3. Drag the Pricing Table element from the Elements panel onto your canvas.
4. In the settings panel, choose a layout mode: Grid, Carousel, Classic, or Comparison.
5. Configure the layout details, including pricing, feature lists, buttons, and styling options.
6. Use the preview options to check how the table appears on desktop and mobile devices, then save and publish your page.

Dynamic Layout Modes

Selecting the appropriate layout mode helps visitors understand and compare plans efficiently:

• Grid Mode: Displays plans as side-by-side cards with adjustable column gaps and up to five columns per row.
• Carousel Mode: Presents plans in a sliding format with options for auto-advancement, pause on hover, and infinite looping.
• Classic Table Mode: Uses a traditional table structure ideal for detailed feature comparisons, with horizontal scrolling controls.
• Comparison Table Mode: Designed for in-depth comparisons, this mode includes a sticky header column and horizontal navigation.

Tip: Use Grid for simple tiered plans, Carousel to save vertical space, and Classic or Comparison modes for extensive feature lists.

Pricing Models and Formatting

The Pricing Table supports multiple pricing structures to communicate costs clearly:

• Fixed Price: For one-time payments.
• Subscription: Recurring billing with daily, weekly, monthly, or yearly periods.
• Price From: Displays "Starting at" pricing for variable services.
• Price Range: Shows minimum and maximum prices for customizable offerings.
• Per Unit: Pricing by item, hour, day, seat, or other units.
• Free: Highlights complimentary plans, optionally with a previous price shown.
• Custom: Enter custom text for unique pricing scenarios.

Feature Lists

Create scannable, organized feature lists for each plan to facilitate quick comparisons:

• Add, reorder, or remove features per column.
• Group related items and maintain consistent phrasing across plans.
• For long lists, use Classic or Comparison layouts to leverage horizontal navigation.

Smart Pricing Features

Enhance your pricing display with visual cues that emphasize value and urgency:

• Show a previous price with strikethrough to highlight discounts.
• Add discount badges or promotional text.
• Include optional captions for billing notes, taxes, or disclaimers.

Buttons and Actions

Configure call-to-action buttons to guide visitors toward conversion:

• Set actions to open URLs, launch popups, navigate to page sections, download files, or have no action.
• Customize button text with clear, action-oriented labels like "Start Free Trial".
• Add optional captions below buttons for additional context.
• Control visibility of buttons and captions as needed.

Appearance and Styling

Customize the look of your Pricing Table to align with your brand:

• Adjust colors, typography, spacing, borders, and column gaps (0–100 pixels).
• Ensure sufficient contrast for text, badges, and buttons for readability.
• Maintain consistent padding between plan cards to avoid visual disruptions.

Mobile and Responsiveness

The Pricing Table element automatically adapts to mobile devices, preserving layout clarity and functionality. Use the preview mode to test how your table appears on different screen sizes and make adjustments as needed to ensure optimal user experience.