Organic Farm Share Pricing Table for Divi 5: Three-Box Comparison

Pricing Restaurant Minimal

Compare farm share box sizes at a glance. Clean Divi 5 pricing table layout for organic farms and CSA programs, with three-column feature comparison and a single CTA.

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

The section sits on a single warm linen background (#f3eadc) that runs edge to edge, with 96px of vertical padding on desktop compressing to 64px on tablet and 44px on mobile. All content is constrained to a 1080px group centered in the column, keeping the layout controlled on wide monitors without feeling tight. The typographic hierarchy opens with a 13px DM Sans eyebrow in all-caps and 1px letter-spacing ("Farm share"), followed by a Fraunces serif h2 at 44px with negative 1px letter-spacing and CSS text-wrap: balance for even line breaks across widths. Below it, an 18px DM Sans lead sentence in muted taupe (#675b49) communicates the core promise without competing visually with the headline. The font pairing is doing deliberate work: Fraunces reads as editorial and craft-rooted, DM Sans keeps everything else clean and scannable.

The comparison table is a CSS grid with exactly 4 columns and a 1px gap. Rather than border rules, the grid container uses #dccdb4 (a slightly darker tan) as its background, so the lines between cells are pure background bleed. This avoids any border-collapse quirks and keeps the visual seam paper-thin. The three tier columns (Small / $28, Medium / $42, Large / $64) sit beside a feature-label column. Every cell in the Medium column uses a lighter cream (#fbf6ee) instead of the section parchment (#f3eadc), creating a column-wide highlight without any overlay modules or pseudo-elements. A 12px "Most popular" micro-label appears at the top of that column above the tier name.

Five feature rows run down the grid: seasonal vegetables, fresh fruit (with explicit variety counts per tier: 6, 9, and 12 kinds), eggs from the farm's hens, bread and pastries, and flowers. Confirmed features use native Divi Icon modules (FontAwesome fa-check, 16px, #2e2a22) rather than text characters, so they render sharply at any screen density and scale with the site's icon settings. Absent features use a plain Text module containing a dash rendered in muted taupe, maintaining visual honesty rather than hiding gaps. The progression is legible at a glance: every box includes veg and fruit, Medium adds eggs, and the Large brings in bread, pastries, and flowers.

The section closes with a pill-shaped "Choose a box" button in forest green (#41603a), DM Sans 600, with 16px vertical and 32px horizontal padding. A warm box shadow (8px vertical offset, 24px blur, 18% opacity warm-black) lifts the CTA off the flat table surface, giving the eye a natural stopping point after scanning the comparison rows.

What’s inside

One Divi Section with a flat warm linen background (#f3eadc) and a three-step responsive padding scale: 96px desktop, 64px tablet, 44px mobile
Two-font typographic pairing: Fraunces serif h2 with `text-wrap: balance` and three responsive sizes (44px / 36px / 30px), plus DM Sans for eyebrow, body, and table text
4-column CSS grid comparison table with 1px gap lines rendered via a darker-tan container background (#dccdb4) rather than CSS borders, featuring a column-wide highlight (#fbf6ee) for the Medium tier
Native Divi Icon modules (FontAwesome fa-check, 16px) for confirmed features, with plain Text modules for absent features, across 5 feature rows
Quantified feature cells for fresh fruit (6, 9, and 12 variety counts by tier) that communicate upgrade value without marketing language
Pill-shaped Divi Button in forest green (#41603a) with a warm layered box shadow (8px vertical, 24px blur) providing CTA emphasis below the table

Who it’s for

This layout is a natural fit for CSA farms, farm-share programs, and subscription produce boxes where customers choose between two or three weekly delivery sizes. It also suits meal kit services, specialty grocery delivery, and artisan food boxes where the product mix scales across tiers. Restaurant operators launching a weekly market box or producer-direct program for regulars will appreciate the editorial tone, which reads as handcrafted rather than corporate. Web designers building sites for farm-to-table, organic, or artisan food clients can adapt the palette and row labels quickly without rebuilding the grid structure.

Customization tips

The palette centers on two background hex values applied consistently across all grid cells: #f3eadc for standard cells and #fbf6ee for the highlighted column. Replacing both with any analogous warm pair (or a cool linen and off-white for a dairy or cheese brand) updates the entire table in two global changes. The grid container background (#dccdb4) controls all visible dividing lines in one place. Feature row labels in the left column are plain Text modules and support roughly 20 characters before wrapping awkwardly at the 12px mobile size, so keep them to short noun phrases. Tier names and prices are also standalone Text modules, so adding a fourth column means duplicating the header cell group, adding a matching cell to each feature row, and updating gridColumnCount from 4 to 5 in the grid Group's decoration settings. The button URL and label are the first two things to change before the section goes live: point the button at a sign-up form, a shop page, or a scroll anchor depending on your site's checkout flow.

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 Farm Share Pricing Table for Divi 5: Three-Box Comparison

Does the comparison table stack into a single column on mobile?

No. The grid column count stays at 4 on all breakpoints. Cell padding compresses from 18px/16px to 14px/6px horizontally, and all text sizes drop to 12px. The table remains a side-by-side comparison on phones, though it will be tight on screens narrower than 360px. If you have more than 5 feature rows or longer label text, consider wrapping the grid group in a horizontal-scroll container for very small devices.

Which Divi modules make up the table cells?

Each cell is a Divi Group module containing either a Text module (for row labels, tier names, prices, and dash placeholders) or an Icon module (FontAwesome fa-check, unicode f00c, weight 900, 16px) for confirmed features. No third-party modules or custom code blocks are used anywhere in the layout.

How is the Medium column highlighted without a special Divi overlay or badge module?

Every Group module in the Medium column (the header cell plus all feature row cells) has its background color set to #fbf6ee instead of the standard #f3eadc. The visual column highlight is purely a per-cell background swap, repeated consistently down the column. The 'Most popular' label is a plain 12px Text module inside the column header cell.

Can I add or remove feature rows?

Yes. Each row is four horizontally adjacent Group modules inside the CSS grid. To add a row, duplicate all four cells from an existing row, paste them at the end of the grid group, and update the labels and icons. To remove a row, delete its four cells. Because the grid uses `rowGap: 1px` against the container background, the dividing line between rows appears and disappears automatically as cells are added or removed.

Are there any images or background photos in this section?

No. The section background is a flat hex color (#f3eadc) with no image, gradient, or pattern layer. There are no image modules inside the layout. The visual warmth comes entirely from the color palette and typography choices, which also means the section loads with no image requests.

What should I change first after importing the layout?

Start with the three tier names and price values in the column header cells (the bold 14px and muted 13px Text modules stacked inside each header Group), then update the feature row labels in the left column. Update the button URL and label text next. Leave palette and font adjustments for last since they require touching multiple modules and are easier to review once the actual content is in place.

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.