How to display pricing plans with Elementor

Write down each plan name, short description, price, billing period, included features and call-to-action link before opening Elementor. Keep the feature wording consistent so visitors can compare cards without interpreting different labels.

Decide whether you need one fixed price per plan or several billing choices such as monthly and yearly. The built-in Price Table widget is suited to fixed plan cards; billing switches require a different layout or an add-on.

Edit the page with Elementor and add a parent Flexbox Container. Set its direction to Row on desktop, then add one child container for each pricing plan. Give the cards equal widths, a consistent gap and matching padding.

In responsive mode, change the parent direction to Column on mobile so the cards stack instead of forcing a horizontal scrollbar. Elementor supports changing container direction, width and order at different breakpoints.

Inside every child container, add a Heading for the plan name, a Text Editor widget for its description, a price heading or text element, a list of features and a Button widget. Add the billing period beside or below the price, such as per month or per year.

Set one clear visual treatment for all cards, then use a contrasting background, border or ribbon only on the recommended plan. Keep button labels and link destinations specific, such as Start free trial or Choose Pro.

If you have Elementor Pro, search the widget panel for Price Table and drag it into each plan container. In the Content tab, fill in the Header, Pricing, Features, Footer and optional Ribbon sections. You can set the title, description, currency symbol, price, sale price, period, feature icons, button link and additional information.

This is the quickest manual route for static pricing plans. It does not automatically switch the same cards between monthly, yearly and one-time values, so do not create three visually similar tables and expect the widget to synchronise them.

Switch between desktop, tablet and mobile views in Elementor and adjust card width, typography, padding and button size at each breakpoint. Check that long plan names do not wrap awkwardly and that all buttons remain visible without excessive scrolling.

If one plan should appear first on mobile, select its container and change its responsive order. If a duplicate desktop or mobile version is hidden, use the element’s responsive visibility controls rather than deleting it. Elementor places these controls in the Advanced tab for classic widgets and containers.

Publish or update the page, then test every button in an incognito window on desktop and mobile. Confirm that the displayed price, billing period, checkout link and included features match the offer. Also check hover states, keyboard focus and the mobile stacking order.

If the editor preview is correct but the live page shows old spacing, missing icons or broken styling, clear your cache and use Elementor’s tools to regenerate its files and data before checking again.

For the fast route when you need interactive monthly, yearly and one-time switches, use Essential Pricing Plan Switcher for Elementor. It is designed for switchable pricing tables and plan comparison layouts, so you can avoid maintaining separate duplicated card sets.