Organic Yoga Studio Pricing Section for Divi 5: Three-Tier Memberships

Pricing Fitness Minimal

A clean, minimal Divi 5 pricing section for yoga studios. Three membership tiers (drop-in, monthly, yearly) with warm earthy tones, feature lists, and clear CTAs. Ready to import.

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 opens with a two-row layout inside a Divi 5 Section set to a warm linen background (#f3eadc) with 96px vertical padding on desktop, stepping down to 64px on tablet and 44px on phone. The first row is a single full-width column holding a centered header sequence: an uppercase DM Sans eyebrow at 13px with 1px letter spacing, an H2 in Fraunces at 44px with -1px letter-spacing and textWrap: balance to prevent awkward line breaks at mid-sentence widths, and a one-line subtitle in DM Sans at 18px. Both text groups are constrained to 720px and 640px max-widths via nested Group modules and centered with the Group alignment setting, so the copy column stays comfortable at wide viewports without a horizontal scan.

The three pricing columns sit in a 1/3 + 1/3 + 1/3 flex row with 24px column and row gap, and alignItems: stretch so every card grows to the height of the tallest. The outer two cards (Drop-in and Yearly) share a cream #fbf6ee fill with a 1px warm-sand border (#dccdb4), while the center Monthly card inverts to a deep forest green (#41603a) with white type throughout. A small "Most popular" badge on the green card is built from a nested Group with a cream background, 12px radius, and a Text module in uppercase DM Sans at 12px. All three cards carry identical 28px corner radii, 32px internal padding, and a matching box-shadow (8px vertical, 24px blur, rgba(34,26,16,0.18)), so the visual hierarchy comes entirely from color contrast rather than competing structural signals.

Inside each card, the name, tagline, and price are grouped in a flex column with 10px row gap. The price is a baseline-aligned row pairing a Fraunces numeral at 44px (40px tablet, 36px phone) with a smaller DM Sans period label, keeping the number dominant without a separate currency token. Below a thin horizontal divider (1px warm-sand on the light cards, 1px rgba(255,255,255,0.4) on the green card) sits the feature list: each item is its own row Group holding a Font Awesome checkmark icon at 15px and a DM Sans Text module at 16px with 1.5em line height. The feature-list Group carries flexGrow and flexShrink sizing so it fills available vertical space and pins the CTA Button to the bottom of every card regardless of how many features are listed.

On mobile every card switches to full-width (24/24) and the three-column row becomes a stacked vertical column. The H2 scales from 44px to 30px across three explicit breakpoints. No images, background gradients, or decorative elements appear anywhere, so the section carries near-zero asset weight and renders cleanly without module dependencies beyond Section, Row, Column, Group, Heading, Text, Icon, and Button.

What’s inside

Three Divi 5 Column modules in a 1/3 + 1/3 + 1/3 flex row with `alignItems: stretch` so all cards share the same height regardless of feature count
Center Monthly card uses a deep forest green (`#41603a`) fill with white type and a cream "Most popular" badge built from a nested Group and Text module
Per-card feature lists built from individual Icon + Text row Groups using Font Awesome checkmarks at 15px, baseline-aligned with 12px column gap
Fraunces serif for plan names (22px) and price numerals (44px) paired with DM Sans for taglines, feature copy, and CTA labels
Pill-shaped Divi 5 Button modules with 999px border-radius, 16px top/bottom and 32px left/right padding, and a coordinated box-shadow on every card
Responsive breakpoints: cards wrap to full width on tablet and stack vertically on phone; section padding steps from 96px down to 44px
Centered header row with a 720px-constrained H2 using `textWrap: balance` and a 640px-constrained subtitle, both aligned via Group module settings

Who it’s for

This layout is a direct fit for yoga studios, Pilates rooms, barre studios, and movement-based wellness centers that sell tiered memberships alongside casual drop-in classes. It also works well for boutique fitness brands, swim schools, martial arts dojos, mindfulness centers, and any health or wellness business where a three-option pricing model needs to address the occasional visitor, the regular practitioner, and the long-term committed member in one view. The organic palette and serif/sans pairing lean toward an upmarket, holistic positioning, making it a strong match for studios that want their site to feel as considered as their brand.

Customization tips

The color scheme pivots on four values: the linen section background (#f3eadc), the cream card fill (#fbf6ee), the warm-sand border (#dccdb4), and the featured-card green (#41603a). Replacing the green with a deep navy, terracotta, or charcoal completely shifts the section's mood without touching any other module. Both font families are set per-module, so swapping Fraunces for Playfair Display or Lora and DM Sans for Inter or Outfit updates every heading and body line consistently. Keep price strings short (3 to 5 characters including the dollar sign) so the 44px Fraunces numeral does not overflow the card at the 36px phone breakpoint. Feature rows are individual Group modules: add or remove rows freely, but try to keep all three cards within one or two features of each other to preserve the equal-height stretch behavior. To remove the "Most popular" badge, delete the outer cream Group on the center card entirely.

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 Yoga Studio Pricing Section for Divi 5: Three-Tier Memberships

How do the three cards stay the same height even though they list different numbers of features?

The row uses `alignItems: stretch` in Divi 5's flex layout settings, so every column expands to match the tallest card. The feature-list Group inside each card also carries `flexGrow` and `flexShrink` sizing, which pushes the CTA Button to the bottom regardless of how many feature rows are present.

What modules make up each pricing card?

Each card is a Divi 5 Column containing nested Group modules: one for the plan name, tagline, and price display; one for the feature list (each feature is its own row Group pairing an Icon module and a Text module); and a Button module at the base. No third-party or premium modules are used.

Does the "Most popular" badge use a dedicated badge or callout module?

No. It is a Group module with a cream background (`#fbf6ee`), 12px border radius, and 6px top/bottom with 12px left/right padding, wrapping a single Text module styled in uppercase DM Sans at 12px. You can delete the Group entirely to remove the badge, or duplicate it to add a badge to another card.

How readable is the white text on the green card at small screen sizes?

All type on the green card is set to `#ffffff` directly in each module. Fraunces headings scale to 20px and DM Sans body copy stays at 16px on phone, which maintains sufficient contrast against `#41603a`. Because there are no background images or overlays in this section, contrast is consistent and does not vary with viewport size.

Are there any hover or animation effects built in?

The section is static with no entrance animations or toggle interactions. The Button modules do have hover color properties defined in their decoration settings (the ghost buttons on the light cards and the cream button on the green card both carry explicit hover states). Column-level hover effects, if wanted, can be added via Divi 5's built-in hover options without modifying the existing structure.

What is the first thing to edit after importing?

Start with the three plan names (the H3 Heading modules) and the price Text modules, then update the feature list Text modules in each card. The CTA button labels are plain text inside the Button module's inner content. The section heading and subtitle in the first row should be updated last, once the card content is confirmed.

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.