Pricing Card

Pricing Card Widget Guide

The Pricing Card widget lets you show your pricing plans in a neat and clear way. It’s useful for listing different packages, services, or offers so visitors can compare and choose what suits them best.

1. Start with a Template

What you’ll see:

• Layouts like Three-Column Plan, Single Pricing Box, or Side-by-Side Comparison

• A Continue with this template button

What to do:

• Click a layout to see a preview

• Select the one you like and click Continue to start editing

2. Use the Editing Tabs

After selecting a layout, use these three tabs:

• Content – Add plan details and features

• Style – Change how the cards look

• Settings – Adjust how they work on the page

3. Customize the Cards

Content Tab

Add your plan information:

• Plan Name – Give each plan a title (e.g., Basic, Standard, Premium)

• Price – Add cost and payment details

• Features – List what’s included in each plan

• Button Text – Add action text like “Select” or “Start Now”

• Badge – Mark a plan as featured (optional)

Use this section to clearly show what’s included in each option.

Style Tab

Adjust the look to match your page:

• Card Layout – Set how many pricing cards are in a row

• Font & Color – Choose styles that fit your design

• Spacing – Add space between cards and inside them

• Hover Effect – Add a simple animation when users move their cursor

• Borders & Shadow – Change edges and background depth

This helps your pricing section look clean and well-organized.

Settings Tab

Set how the widget behaves:

• Responsive Design – Make sure it looks good on any screen

• Display Options – Choose when and where to show the cards

• Animation – Add basic motion if needed

• Custom Code – Add extra changes if you want (optional)

These options help control how the widget works on your site.

Helpful Tips

• Use the Content tab to enter plan info

• Use the Style tab to match the layout to your page

• Use the Settings tab to adjust how it shows

• Click Save when you’re done editing