Soft Newsletter Platform Pricing Section for Divi 5: Three-Tier Plans

Pricing SaaS Minimal

A clean three-tier pricing section for newsletter and email SaaS platforms. Free, mid, and enterprise plans with feature lists and CTAs. Built for 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

The layout opens with a centered header block: a small uppercase h4 label in Figtree at 13px with 1px letter-spacing sets the context as "Pricing," then an h2 in Plus Jakarta Sans at 44px (weight 700, -1px tracking, textWrap: balance) delivers the headline, capped at 720px wide so the line breaks stay intentional on any screen. A supporting paragraph sits inside its own 640px-wide centered container, giving each typographic layer its own breathing room without resorting to arbitrary margins.

Below the header, three equal columns sit in a 24px-gap flex row with alignItems: stretch so all cards reach the same height regardless of feature-list length. Each card carries 32px padding on all sides, a 16px border-radius, and a 1px #e0e3f5 border. The middle card breaks the pattern deliberately: its background is #4f46e5 indigo with all text and icons switching to white, a white-background "Most popular" badge pinned in the top-left corner, and a white-filled CTA button -- the only solid-fill button in the set.

Feature lists sit below a 1px hairline divider inside each card, built from row-direction Divi Groups pairing a 15px Font Awesome checkmark icon with a Figtree 16px text module. Using flexGrow and flexShrink on this group pushes the CTA button to the card's bottom edge regardless of how many feature lines are present, keeping the buttons optically aligned across all three columns.

On tablet the row switches to flexWrap: wrap so cards reflow into a 2+1 arrangement; on phone flexDirection: column stacks them vertically, and section padding steps down from 104px to 72px to 48px. Card widths shift from 8_24 to 24_24 at both breakpoints, so each card takes the full container width with no horizontal scrolling.

What’s inside

Three-column pricing row built with native Divi 5 Column modules, equal height via `alignItems: stretch` and a 24px column gap
Per-card feature lists using Icon + Text module pairs inside row-direction Groups, with a 1px hairline divider separating them from the price block
Flex-grow feature-list group that pushes each card's CTA button to the bottom edge, keeping all three buttons optically aligned
Middle "Publisher" card with an indigo `#4f46e5` background, white typography, semi-transparent divider, and a white solid-fill CTA for visual hierarchy
Inline "Most popular" badge inside a white rounded pill (Figtree 12px, uppercase, weight 600) built from a Group + Text module -- no images involved
Two-row layout: a centered headline block (with `h4` eyebrow + `h2` + subtext in constrained-width Groups) above the card row
Responsive step-down section padding: 104px desktop, 72px tablet, 48px phone, with card widths going full-bleed at tablet and phone breakpoints

Who it’s for

This section fits any SaaS or creator-economy product that bills by usage volume and needs to communicate a clear free-to-paid upgrade path. Newsletter platforms, email marketing tools, content management SaaS, course platforms, and community tools are the most direct matches. It also works for any indie maker or media company building a Beehiiv or Substack competitor who wants the pricing to feel calm and considered rather than aggressive. The three-tier naming convention (Writer, Publisher, Network) is already audience-appropriate for publishing SaaS but the labels swap in under a minute.

Customization tips

The two font families -- Plus Jakarta Sans for headings and price figures, Figtree for body and labels -- are both free on Google Fonts and already wired into the JSON. To shift the whole palette, update #4f46e5 (indigo) on the middle column's background and its border, then swap #e0e3f5 on the card borders and dividers to a tint of your new accent. The section background #f5f6ff is a 4% tint of the same indigo; matching it to your brand keeps the composition coherent.

Plan for plan names up to about 12 characters before the h3 wraps on mobile. Price figures are plain Text modules (not a dedicated price module), so update them like any text block. Each feature list accepts 3--5 items comfortably before the card height grows noticeably; beyond 6 items, reduce the rowGap on the feature Group from 12px to 8px. CTA button labels are set with capitalization: none, so sentence-case copy like "Try 14 days free" reads as intended without any override.

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 Soft Newsletter Platform Pricing Section for Divi 5: Three-Tier Plans

How does the layout stay the same height across all three cards?

Each card column uses Divi 5's flex layout with `flexDirection: column`. The feature-list Group inside each card has `flexGrow` and `flexShrink` enabled, which means it expands to fill available vertical space. This pushes the CTA button to the card's bottom edge regardless of how many feature lines are in that card.

What modules make up the "Most popular" badge on the middle card?

It's a Divi Group module with a white background, 12px border-radius, and 6px/12px padding, containing a single Text module styled at 12px Figtree uppercase. No image or icon is involved, so the badge text is fully editable and the pill shape is controlled by the Group's border-radius setting.

How do the three cards stack on mobile?

On phone breakpoint the row's `flexDirection` switches to `column` and each card's width becomes `24_24` (full container width). Section padding also steps down to 48px top and bottom. The cards stack in source order: Writer, then Publisher (the featured card), then Network.

Are the checkmark icons image files or icon font characters?

They are native Divi 5 Icon modules using Font Awesome (unicode `f00c`, weight 900) at 15px. No image files are involved. On the two white cards they are `#1e2140` dark navy; on the indigo middle card they switch to `#ffffff`. You can swap them for any Font Awesome icon by editing the unicode value inside the Icon module.

What is the minimum recommended copy length for the feature list items?

The existing items range from two words ("Basic stats") to five words ("Automations and segments"). Staying under roughly 30 characters per item keeps the icon and text on one line at all breakpoints. Longer items will wrap, which increases card height and can break the equal-height alignment unless all three cards wrap by the same amount.

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.