Two-Tier Elementor Pricing Section Template

This Elementor pricing section template puts two plans side by side, with a light Basic card and a raised dark Bulk Buyer card that marks the featured tier. Pricing Two Tiers with Emphasized Tier is a free, responsive block shared as a JSON file and built only with native Elementor widgets.

What's Inside the Block

• A centered header with a small green label, a large headline, and a supporting paragraph limited to 42 rem wide.
• A light Basic card at $29/month with a four-item checklist and an outlined button.
• A dark Bulk Buyer card (#101828) at $99/month with a soft shadow, a six-item checklist, and a solid emerald button.
• A two-column grid. The dark card is taller and sits above its neighbor, so it reads as the featured plan.
• Inter font on a soft mint gradient. On tablet and mobile the cards stack in one column.

Tip: Emphasize only one plan. The dark background, shadow, and filled button all point to Bulk Buyer, so keep the other card quiet. To feature the Basic plan instead, swap the background, text, and button colors between the two cards. Replace both # button links with real checkout or contact pages.

Requirements

• A recent version of Elementor with Flexbox Container and Grid Container available.
• No Elementor Pro required.
• The Inter font available on your site (otherwise a fallback font is used).
• The check icons are loaded from an external SVG address (Heroicons on GitHub), so the checklists need an internet connection to show them.

Note: The small "Pricing" label uses the H2 tag, while the large headline is a paragraph, and the plan names are H3. If you want the headline to be your section's H2, switch the two HTML tags in the Content tab. The plan prices and descriptions are placeholders, so replace them with your real offer. Back up your page before importing a template into an existing layout.

Download Elementor Template (JSON)

Widgets Used

Element	Purpose	Pro?
Flexbox Container	Section wrapper, header group, plan cards, and price rows	No
Grid Container	Two-column plan layout that becomes one column on tablet and mobile	No
Heading	Label, headline, supporting text, plan names, prices, and plan descriptions (11 in total)	No
Icon List	Feature checklist in each plan (2 lists)	No
Button	Call to action in each plan (2 buttons)	No

Frequently Asked Questions

How do I import this Elementor JSON template?

First, download the JSON file using the button above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.

Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.

How do I change the plan names, prices, and features?

Click a plan name, a price, or a description and type the new text. The price and the "/month" label are two separate Heading widgets, so you can change the currency or the billing period without touching the number. For the checklists, select an Icon List widget and edit its items in the Content tab. Each button's destination is set in its Link field and points to # until you change it.

How do I add or remove a feature in a plan?

Select the Icon List widget in that card. In the Content tab, add a new item with the add button, or delete one with the trash icon. The card grows or shrinks with its content, and the grid keeps the cards vertically centered, so the taller dark card still stands out.

How do I add a third plan?

Duplicate one of the cards inside the grid container, then set the container's Columns value to 3 in its Layout settings. The grid is 56 rem wide, so you may want to widen it, and you should check the tablet and mobile views, where the layout is set to one column.

How do I make the other plan the featured one?

Select the Basic card and the Bulk Buyer card in turn and swap their background color, text colors, icon colors, and button styles. Move the box shadow and the Z-Index value from the dark card to the new featured card. Keep the rounded corner settings in mind, because the Basic card has square corners on the side that touches its neighbor.

Why do the cards stack on tablet and mobile?

The grid has two columns on desktop and one column on tablet and mobile, because two cards side by side get too narrow on small screens. On tablet, the Basic card keeps rounded top corners so it joins the dark card below it. On mobile, a 1.5 rem gap separates the cards and every corner is rounded.

Where should I place this pricing section?

Place it after the content that explains what you offer, such as features or testimonials, and before your FAQ or a final call to action. Visitors then see the plans once they know what the product does.

Do I need Elementor Pro?

No. The block only uses native Heading, Icon List, and Button widgets inside Flexbox and Grid containers.

Why won't the file import?

Make sure the file has a .json extension and hasn't been unzipped or edited. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.

Why do the Flexbox or Grid settings look different or missing?

Update Elementor to the latest version. On older versions, the Flexbox Container and Grid Container features may need to be enabled first in Elementor's feature settings.

Why does the font look different?

The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.

Looking for more pricing sections? Browse all Elementor pricing section templates, or see every free block in Elementor Templates.