Soft Podcast Hosting Pricing Section for Divi 5: Two-Plan Highlight

Pricing SaaS Minimal

Clean two-plan pricing layout for podcast hosting SaaS. Features a free Starter tier and a $19/mo Pro plan with unlimited uploads, ad insertion, and custom domain. 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 is structured as a single white-background section with 104px vertical padding, split into an asymmetric two-column row. The left column occupies 8/24 of the available width and acts as the editorial anchor: an uppercase 13px Figtree eyebrow in slate #596083 opens the hierarchy, followed by a Plus Jakarta Sans h2 headline at 40px with -1px letter-spacing for optical tightening, and a single 17px Figtree sentence that frames both plans before the visitor even reads a card. The right column (16/24) carries the pricing cards inside a native Divi Group configured as a CSS grid with a 24px column gap — giving the plans roughly two-thirds of the row while the editorial copy holds the left third without competing for attention.

Both cards share identical internal architecture but use material contrast to establish hierarchy without a badge or highlight ribbon. The Starter card sits on a #f5f6ff lavender fill with a 1px #e0e3f5 border and dark #1e2140 type throughout. The Pro card inverts that relationship: a solid #1e2140 navy fill with #f5f6ff text and icons at every level. Inside each card the structure is the same — a Figtree uppercase tier label at 13px, a Plus Jakarta Sans h3 plan name at 28px, a standalone 56px Bold price with -1px letter-spacing, a 15px billing note, a 2px top-border separator produced by a nested Group's border property, five Icon+Text feature rows each pairing a 15px FontAwesome checkmark with 16px Figtree copy, and a full-width CTA button at the base. The mirrored build makes the tiers instantly scannable: a visitor's eye traces the same structural slots in both cards and compares content, not layout.

Responsive behavior is explicitly specified at three breakpoints in the JSON. The outer row uses flexWrap: nowrap on desktop, wrap on tablet, and column-direction on phone, so the left copy stacks cleanly above the cards on smaller screens. The card grid drops from two columns to one on phone. Section padding steps from 104px to 72px to 48px; card internal padding moves from 44px/40px to 36px/32px to 32px/24px; price type scales from 56px to 48px to 40px. No manual override is needed — every breakpoint value is baked into the JSON you import.

The palette — near-white lavender #f5f6ff, muted slate #596083, and navy #1e2140 — deliberately sidesteps the electric-blue SaaS default. The cool, restrained tone fits podcast and audio-creator brands where the product voice leans editorial and approachable. The white section background keeps both cards visually foregrounded, and the 16px border-radius on each softens the geometry enough that the solid-navy Pro card reads inviting rather than imposing.

What’s inside

Two-column CSS grid card layout built entirely with a native Divi 5 Group module — no third-party add-ons required
Asymmetric 8/24 + 16/24 flex column split with explicit responsive collapse: columns wrap to full width on tablet, stack vertically on phone
Starter card: #f5f6ff lavender fill, 1px #e0e3f5 hairline border, five Icon+Text feature rows, and a ghost 'Start free' Button module
Pro card: #1e2140 navy fill with fully inverted #f5f6ff text, icons, and a solid light 'Go Pro' Button — identical structure, opposite palette
56px Plus Jakarta Sans Bold price typography with -1px letter-spacing, scaling responsively to 48px on tablet and 40px on phone
2px top-border separator inside each card produced by a nested Group's border property — no extra divider module needed
Section vertical padding steps down across three explicit breakpoints (104px → 72px → 48px), and card padding mirrors that rhythm (44px/40px → 32px/24px)
Both cards use 16px border-radius applied uniformly via the radius object, matching the 12px radius on each CTA Button for a consistent corner language

Who it’s for

This section is a direct fit for podcast hosting platforms, audio SaaS tools, and creator-economy products that need to present a no-credit-card free tier alongside a paid upgrade. It works equally well for solo podcasters building their own hosting site with Divi, agencies building for podcast network clients, and SaaS founders in adjacent spaces — newsletter platforms, audio learning apps, gated community tools — whose pricing follows a freemium pattern. The restrained palette and 'start free, grow when ready' framing also translate cleanly to coaching, education, or membership platforms that gate premium content behind a paid plan.

Customization tips

The fastest global retheme is replacing the two palette anchors. Swap #1e2140 (the navy) and #f5f6ff (the near-white lavender) with your own dark and light brand tones — both values appear in card backgrounds, all text modules, all icon color settings, and every border token, so two find-and-replace passes cover the whole section. Keep the Starter card light-filled and the Pro card dark-filled for the material contrast to read correctly; inverting that relationship flattens the visual hierarchy.

For copy, each feature row holds a single-line Text module at 16px Figtree inside 40px horizontal card padding. Lines beyond roughly 28 characters may wrap, which is fine but changes the card height — keep feature items short and parallel. The price is a standalone Text module (not a Heading), so you can replace '$0' or '$19' with any currency symbol, number, or billing interval string without touching typography properties. If you need a third plan, increase the card grid's gridColumnCount from 2 to 3 inside the Group's layout settings and reduce card padding slightly to maintain breathing room.

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 Podcast Hosting Pricing Section for Divi 5: Two-Plan Highlight

How do the cards collapse on smaller screens?

The outer row wraps its left and right columns to full width (24/24) on tablet, and the card grid inside the right column switches from gridColumnCount: 2 to 1 on phone. Cards then stack vertically, padding steps down to 32px top/bottom and 24px sides, and price type scales from 56px to 40px — all specified as explicit breakpoint values in the JSON, so no extra CSS is needed.

Does this layout require any plugins beyond Divi 5?

No. Every element uses modules that ship with Divi 5: Section, Row, Column, Group, Heading, Text, Icon, and Button. The two-column card grid is achieved through the Group module's native layout properties (display: grid, gridColumnCount: 2), not a third-party add-on.

What creates the visual difference between the two plan cards — is there a 'recommended' label?

There is no badge or label. The hierarchy is communicated entirely through material contrast: the Starter card uses a light #f5f6ff fill with a hairline border, while the Pro card uses a solid #1e2140 navy fill. The inverted weight of the dark card makes it read as the primary option without additional markup.

What should I edit first after importing?

Start with the two price Text modules ('$0' and '$19') and the five feature-row Text modules inside each card — those carry your actual product details. The h2 headline and billing-note strings are the next edits. Font families and the color palette can stay untouched if your brand sits in a similar cool-neutral register.

Does the section include any images or background media?

No. The layout is text-and-color only — no image modules, background images, or video embeds. The solid navy Pro card provides the visual weight that imagery might otherwise supply, and the absence of media keeps page load fast, which matters for a pricing section that sits near the conversion point.

Can I add more features to a card without breaking the layout?

Yes. Each feature list is a flex-column Group with rowGap: 12px — duplicate any Icon+Text Group inside it and the card height grows naturally. The two cards are independent Groups inside the CSS grid, so adding rows to one does not force the other to match height unless you add an align-items: stretch to the outer grid container.

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.