Organic Community Garden Pricing Section for Divi 5: Two-Plan Highlight

Pricing Nonprofit Minimal

A clean two-plan pricing section for community gardens and nonprofit growing programs. Features half-plot and full-plot tiers with seasonal pricing, warm earth tones, and clear feature lists. Ready to import into Divi 5.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Click to view the full page

Overview

This pricing section uses a deliberate asymmetry to do the selling for you. The layout is a two-column row: a narrower left column (8/24 flex units on desktop) holds the section headline in Fraunces at 40px with a -1px letter-spacing and a warm parchment body copy, while the wider right column (16/24 flex units) carries the two plan cards side by side in a CSS grid at 24px gaps. That column weight imbalance is intentional — the cards are the conversion moment, and they get two-thirds of the horizontal space.

The two cards are visually opposite on purpose. The Starter card sits on #f3eadc, a warm off-white, with dark earth text (#2e2a22) and a 28px radius border that gives it an organic, non-corporate softness. A subtle rgba(34,26,16,0.18) box shadow lifts it just enough off the background without competing with the content. The Full Plot card inverts the palette entirely: #2e2a22 background with the cream #f3eadc used for all text and the CTA button fill, signalling the recommended tier without a badge interrupting the layout — instead a small all-caps "Our favourite" label in DM Sans at 13px does the nudge quietly at the top of the card.

Price typography leans on Fraunces at 56px / 700 weight with -1px tracking, scaling to 48px on tablet and 40px on mobile — large enough to anchor each card without requiring a separate price row. Below each price, a 2px solid rule (color-matched to each card's text) separates the price block from the feature list. Each feature is a flex row pairing a Font Awesome checkmark icon (15px, ) with a 16px DM Sans line at 1.5em height, with align-items: flex-start so longer feature lines wrap without the icon drifting.

On tablet the row switches to flexWrap: wrap, stacking the intro column above the card grid. On phone, both the outer row and the inner card grid collapse to a single column (flexDirection: column / gridColumnCount: 1), so cards read full-width and the intro copy leads naturally into the plan comparison. Section padding steps down from 96px desktop to 64px tablet to 44px phone to keep proportions tight at every breakpoint.

What’s inside

Two-column section row with intentional 8/24 + 16/24 flex-unit split, placing editorial weight on the plan cards
Two Divi Group modules styled as plan cards — one on warm cream `#f3eadc`, one on dark earth `#2e2a22` — using 28px border radius and matched box shadows
Price display in Fraunces at 56px/700 weight with responsive scaling (48px tablet, 40px phone) built directly into Text modules
Feature lists built from paired Icon + Text Group rows, using Font Awesome checkmarks (`fa-check`) that flip color per card to maintain legibility on both backgrounds
A 2px solid divider rule separating the price block from each feature list, color-matched to each card's text palette
Two Button modules with pill shape (999px radius) — the Starter CTA is ghost/transparent, the Full Plot CTA uses the cream fill for a clear visual hierarchy
CSS grid inner container for the two cards (`gridColumnCount: 2`, 24px gap) collapsing to single-column on phone
Full three-breakpoint responsive padding on the section (96/64/44px) and on each card (44/36/32px desktop/tablet/phone)

Who it’s for

This section fits any community-oriented nonprofit or membership organization that offers tiered access to a shared resource — community gardens, allotments, maker spaces, co-working plots, or tool libraries. It also works for small environmental nonprofits running seasonal programs, urban farming initiatives, or CSA box schemes where two plan sizes cover the membership range. The warm earth palette and organic card shapes will feel at home on sites for wellness centers, retreat programs, or cooperative farms that want a pricing section that reads as inviting rather than transactional.

Customization tips

The palette lives in two places: the section background (#fbf6ee), the Starter card background (#f3eadc), and the Featured card background (#2e2a22). Swap all three in your Divi preset to shift the entire section — a cool sage green on the featured card reads just as well as the dark earth. The headline typeface is Fraunces (a variable serif); DM Sans handles all UI text. Both are Google Fonts loaded by Divi, so no manual enqueuing is needed. For copy length: the section headline is set to textWrap: balance and works best at one short line (under 50 characters); the body subhead below it suits one sentence. Each feature line is built for 3–5 words — longer strings wrap and push the card taller, which is fine, but keep both cards at the same feature count to maintain card height parity on desktop.

How to install this layout

Download the layout JSON file from this page.
Open the target page in the Divi 5 builder.
Open the portability panel (up/down arrows icon) and choose the Import tab.
Upload the JSON. Tick “replace existing content” only for full-page imports.
Check the page at desktop and mobile widths, then swap in your copy and images.

Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.

Questions about Organic Community Garden Pricing Section for Divi 5: Two-Plan Highlight

How do the two cards stay the same height if one plan has more features?

The feature list group inside each card uses `flexGrow` and `flexShrink` sizing, so it stretches to fill available vertical space. If you add a feature to one card, the divider rule shifts down and the card grows naturally. To keep the cards visually balanced, aim for the same number of feature rows in each.

Which modules make up each plan card?

Each card is a Divi Group module containing: a Text module for the plan label (all-caps, 13px), a Heading module for the plan name (h3, Fraunces 28px), a Text module for the price (Fraunces 56px), a Text module for the billing cadence, a nested Group for the feature list (containing Icon + Text row Groups), and a Button module at the bottom.

Does the section use any background images or photography?

No. Every visual element is color-only — flat background colors on the section and on each card. There are no image modules, no background image fields, and no Blob dependencies. Swapping colors is the only asset change needed.

What should I edit first after importing?

Start with the price figures and plan names inside each card's Text and Heading modules — those are the highest-visibility elements. Then update the feature list Text modules to match your actual inclusions. Last, update the two Button link URLs to point to your sign-up or checkout page.

How does the layout behave on mobile?

On phone, the outer section row switches to a vertical column so the intro copy appears above the cards. The two-column card grid also collapses to a single column, so Starter stacks above Full Plot. Each card's internal padding steps down to 32px top/bottom and 24px left/right, keeping text readable without feeling cramped.

Which Divi version does this layout need?

Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.

Can I use this layout on client websites?

Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.