In a row of three plans, the one you want people to pick should be the one their eye lands on first. Making that card slightly bigger than its neighbours does it without any extra colour or copy.
Scale Zoom in the Pricing Table widget from The Plus Addons for Elementor scales a single card up or down.
To check the complete feature overview documentation of The Plus Addons for Elementor Pricing Table widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — the Pricing Table widget is in the free The Plus Addons for Elementor. Layout Style 2 and Style 3, tooltips, the Show More link, the call-to-action text, Lottie button icons and ribbon Styles 2 and 3 need Pro.
- Widget to enable: Pricing Table, switched on under The Plus Addons > Widgets.
- One widget is one plan: the widget renders a single pricing card. For a three-column pricing section, put three Pricing Table widgets side by side in one container.
- You need more than one card: the effect is a comparison, so build the row of plans first and then scale one of them.
How to Scale One Plan
- Put your Pricing Table widgets side by side in one container.
- Select the widget for the plan you want to stand out.
- Go to Style > Extra Effects.
- Drag Scale Zoom above 1. Around 1.1 to 1.15 is enough to read as bigger without breaking the row.
- Switch to the tablet and mobile views and set a value for each if you need one.
The Result
On a published page the scaled plan stands out from the two beside it:
How It Behaves
- The slider runs from 0.6 to 1.8 in steps of 0.05, and the default is 1. Values below 1 shrink the card.
- It scales the card inside the widget. The widget’s own box keeps its original size, so the row does not reflow — three cards measured 295×401 px each whether the middle one was scaled or not.
- Because the box does not grow, an enlarged card can overlap or sit under its neighbours.
- It is a responsive control, so you can scale on desktop and leave tablet and mobile at 1.
- With card layout Style 3 the scale is applied to the top part of the card rather than the whole card.
- The setting is in the free plugin — it is not a Pro feature.
Keep the Scaled Card on Top
Scaling does not change stacking order. Every Pricing Table renders at z-index: auto, so a card scaled past its neighbours can be drawn underneath them. Give the scaled widget a higher Z-Index under Advanced > Advanced — 2 is enough — and it will overlap cleanly.
Limitations
- The widget box does not grow with the card, so a large value pushes the card over its neighbours or outside the container, where it can be clipped.
- Stacking is not handled for you: without a manual z-index the scaled card can end up behind the next one.
- Scaling enlarges the text along with the card, so at high values the type looks blown up rather than redesigned. For a bigger difference, change the padding and font sizes as well.
- There is no hover-only version of the effect and no transition setting — the card is simply drawn at the scale you set.
- The effect is per widget, so in a row of three you set it on the one card you want to lift.
Troubleshooting
The scaled card is partly hidden behind the next one
Raise the widget’s Z-Index under Advanced > Advanced to 2 or more.
The card is cut off at the edge of the container
The widget box has not grown, so the enlarged card is spilling out. Add horizontal padding to the container, or lower the value.
Nothing happens when I drag the slider
Check you are on the right device view, and that you are editing the widget you meant to — each card is its own widget with its own Scale Zoom.
The row of cards jumps about on mobile
Set Scale Zoom back to 1 in the mobile view. Stacked cards gain nothing from being scaled.
