The Pricing Table element helps you showcase tuition plans, program packages, and service tiers in a clean, professional layout. Choose from multiple display options, apply flexible pricing models, and add conversion-focused details like discount badges and previous-price strikethroughs. With clear calls-to-action and mobile-ready behavior, this element helps prospective families compare options and enroll quickly.
What is the Pricing Table element?
The Pricing Table element lets you present one or more tuition plans or program options in a clean, comparable layout. It supports multiple display modes—grid, carousel, classic table, and comparison table—along with several pricing models and configurable actions so you can tailor the experience to your programs, page design, and audience.
Where it's available: Landing pages, enrollment sites, and blogs in Enrollio.
Key Benefits of the Pricing Table Element
Understanding these benefits helps you decide when and how to use the element for maximum impact on conversions and clarity.
- Layout flexibility: Choose Grid, Carousel, Classic Table, or Comparison Table to match your content and page goal
- Clear plan comparison: Use horizontal scrolling, arrows, and sticky head column (Comparison mode) to keep features readable
- Multiple pricing models: Communicate one-time, recurring, tiered, or variable pricing without workarounds
- Conversion cues: Add previous price (strikethrough), discount badges, and captions that highlight special offers
- Action control: Point buttons to URLs, open popups, jump to sections, download files, or disable actions
- Brand consistency: Customize colors, spacing, and column gaps to blend with your site design
- Mobile readiness: Columns adapt for smaller screens while preserving comparison clarity
How to Set Up the Pricing Table Element
This quick setup flow reduces build time and keeps pricing consistent across your enrollment pages.
- Navigate to the Page Builder: In the left-hand menu, click Sites and open your chosen landing page or enrollment site
- Edit the page: Click the blue Edit button to launch the page builder
- Add the element: Drag Pricing Table from the Elements panel onto the canvas
- Choose a layout: Select Grid, Carousel, Classic, or Comparison from the right settings panel
- Configure content: Set up pricing, features, and buttons for each plan
- Style the table: Adjust colors, spacing, and typography to match your brand
- Preview and publish: Use Desktop/Mobile preview to confirm responsiveness, then Save and Publish
Dynamic Layout Modes
Selecting the right layout helps families understand differences between programs and speeds up decision-making.
Grid Mode
Clean, card-based layout for side-by-side comparison. Perfect for displaying 3-4 tuition tiers or program options.
- Column gap: 0–100 px
- Columns per row: up to 5
- Best for simple program comparisons
Carousel Mode
Slide-based presentation with optional auto-advance. Great for featuring plans one at a time or conserving vertical space.
- Columns per slide: 1–5
- Auto-advance interval with pause on hover
- Infinite loop option
- Fade or Slide animation
Classic Table Mode
Traditional table layout for wide, detailed comparisons. Ideal for long feature lists that need more horizontal space.
- Horizontal scroll with arrow controls
- Best for comprehensive program details
Comparison Table Mode
Deep, column-heavy comparisons where context matters. Perfect for comparing multiple programs with extensive feature lists.
- Sticky head column remains visible while scrolling
- Horizontal scroll with arrow controls
- Best for detailed program comparisons
Pricing Models & Formatting
Choosing the right pricing model clarifies cost expectations and avoids surprises, which increases trust and enrollments.
| Pricing Model | Description |
|---|---|
| Fixed Price | One-time payment (e.g., registration fee) |
| Subscription | Recurring tuition with periods: daily, weekly, monthly, yearly |
| Price From | Display "Starting at" pricing for variable programs |
| Price Range | Show min-max for customizable programs |
| Per Unit | Price by child, hour, day, week, etc. |
| Free | Highlight complimentary offerings (optionally show previous price) |
| Custom | Enter custom pricing text for unique situations |
Feature Lists
Clear, scannable feature lists help families recognize what's included and compare programs quickly.
- Add, reorder, or remove features for each plan
- Group related items (e.g., "Meals Included," "Extended Hours," "Field Trips")
- Keep phrasing consistent across plans for easy comparison
- For long lists, use Classic or Comparison layouts to leverage horizontal navigation
Smart Pricing Features
Visual pricing cues guide attention and make offers feel time-sensitive or valuable without adding confusion.
Previous Price Display
Show strikethrough pricing to highlight discounts or promotional rates. Perfect for early bird specials or limited-time offers.
Discount Text Badges
Add eye-catching badges to emphasize promotions like "Save 20%" or "First Month Free."
Optional Pricing Captions
Include billing notes, tax information, or disclaimers below the price (e.g., "Includes meals and supplies" or "Billed monthly").
Buttons & Actions
The call-to-action is where comparisons turn into enrollments. Configure actions that match your enrollment strategy.
Action Types
- Open URL: Link to external pages or internal enrollment forms
- Open Popup: Launch a specific popup (great for quick inquiry forms)
- Step/Anchor Navigation: Jump to a section on the same page
- No action: Useful for teaser plans or coming-soon programs
Button Content
- Custom text: Use clear, action-oriented labels like "Enroll Now," "Schedule Tour," or "Join Waitlist"
- Optional caption: Add supporting text below the button (e.g., "No registration fee")
- Show/Hide controls: Toggle button and caption visibility as needed
Appearance & Styling
Styling ensures the Pricing Table blends with your brand while remaining readable and accessible.
- Adjust colors, typography, spacing, borders, and column gaps (0–100 px)
- Maintain adequate contrast for text, badges, and buttons
- Keep card padding consistent to prevent visual jumpiness between plans
- Match your center's brand colors and fonts for consistency
Mobile & Responsiveness
Optimizing for small screens preserves readability and ensures families can still compare plans and take action without friction.
- Multi-column layouts may collapse to fewer columns on mobile for legibility
- Classic/Comparison layouts retain horizontal scroll with arrows when content exceeds screen width
- Sticky head column remains visible in Comparison mode to keep plan names in context
- Preview both Desktop and Mobile views and adjust spacing/typography as needed
Frequently Asked Questions
Where can I use the Pricing Table?
You can use it in landing pages, enrollment sites, and blogs throughout Enrollio.
How many columns can I show at once?
Grid supports up to 5 columns per row; Carousel supports 1–5 columns per slide.
Can I show old vs. new pricing?
Yes. Enable Previous price (strikethrough) and optionally add a Discount badge to highlight your promotion.
Can a plan button open a popup for enrollment or inquiries?
Yes. Set the action to Open Popup and choose the popup you created for that page.
What happens on mobile?
Columns may collapse to fit smaller screens, and table layouts allow horizontal scroll with arrows. In Comparison mode, the sticky head column remains visible for context.
Which pricing models are included?
Fixed, Subscription (daily, weekly, monthly, yearly), Price From, Price Range, Per Unit, Free, and Custom.
Can I hide buttons or captions?
Yes. Use Show/Hide controls in the Button settings to toggle visibility.
What's the best layout for comparing infant, toddler, and preschool programs?
For 3 programs with moderate feature lists, Grid mode works great. If you have extensive details to compare, use Comparison Table mode with the sticky head column.
Comments
Please sign in to leave a comment.