Playful Coding Camp Pricing Section for Divi 5: Three-Tier Sessions

Pricing Coaching Playful

A bright, playful Divi 5 pricing section for kids coding camps. Three-column cards — one week, a fortnight, whole summer — with feature lists and CTA buttons. Fredoka headings, warm pastels, bold navy accents.

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 in its own full-width row: a small h4 eyebrow in Fredoka at 13px and #625a8c sets the context, then a constrained h2 group (max-width 720px, text-wrap: balance) drops in at 44px with a single conversion question, and a 640px-wide Nunito 18px subtext line adds the social-proof detail in one sentence. The warm cream section background (#fff7ec) with 88px vertical padding on desktop gives the section breathing room without imposing a width cap on the outer shell.

Below the header, three equal-width columns (1/3 each, 24px gap, stretch alignment) hold the three tiers. Each card is a Divi column with 36px corner radius, a 2px solid navy-purple (#2b2457) border, a hard 6px/6px offset box shadow in the same colour, and 32px internal padding on all sides. The outer two cards sit on white; the centre card fills solid pink (#ff7aa5) and carries a white pill badge built from a nested Group module with its own 12px radius and a Fredoka 12px "Most popular" label. The price display in every card is a two-module baseline-aligned Group: the figure in Fredoka 44px at 700 weight and the period label in Nunito 15px at a lighter muted-purple, so the number commands attention without the unit label vanishing. Below a top-border divider (warm peach #f1dfcc on the white cards, semi-transparent navy on the pink card) three Icon+Text rows deliver the feature list, each pairing a 15px Font Awesome checkmark at #2b2457 with 16px Nunito body copy. Each card closes with a pill CTA button that carries a matching 6px hard shadow: ghost outline on the outer tiers, solid white on the featured card, all flipping to a deep navy fill on hover.

At tablet width the row switches to flexWrap: wrap, so cards reflow to full container width and stack in pairs before a final single. On phones the layout becomes a single vertical column, stacking all three cards in DOM order. Section padding steps down from 88px to 60px to 40px across the three breakpoints, and the headline scales from 44px to 36px to 30px, keeping hierarchy intact at every viewport. The stretch alignment on the card row means all cards share the same height on desktop, so the feature list and CTA button always land at the same vertical position regardless of how much copy each tier carries.

What’s inside

Three-column equal-height card grid using native Divi columns with 24px gap and stretch alignment
Featured "Most popular" pill badge on the centre card, built as a nested Divi Group with its own border-radius and inline background
Baseline-aligned price display: Fredoka 44px figure paired with a Nunito period label in a two-module flex Group
Icon + Text feature rows using a 15px Font Awesome checkmark module beside Nunito 16px body copy, separated from the price block by a top-border divider
Pill-shaped Divi button with hard 6px/6px offset box shadow and fill-on-hover state per card (ghost outline on outer tiers, solid white on the featured card)
Fully responsive: tablet wraps cards to full width, phone stacks all three columns vertically via flex-direction: column
Responsive headline scaling: 44px desktop, 36px tablet, 30px phone, with text-wrap: balance on the h2

Who it’s for

This section fits any coaching or education business that offers time-based enrolment: coding camps, summer academies, sports training programs, music schools, tutoring services, or kids' STEM workshops. The three-tier structure (short, medium, full commitment) maps naturally to any program that sells by week, term, or season. The warm, rounded aesthetic reads as approachable rather than corporate, making it a strong fit for youth-focused or family-facing brands. Freelance Divi designers building sites for small education providers will find it equally useful as a starting point for a custom colour scheme.

Customization tips

The entire palette is driven by four hex values: swap #fff7ec (section background), #2b2457 (borders, text, shadows), #625a8c (secondary text), and #ff7aa5 (featured card) to match any brand in one pass. The hard offset shadow uses the same #2b2457 value as the border, so changing the border colour automatically harmonises the shadow if you update both fields together. Keep price copy to three to six characters (e.g. "$240" or "1 100 €") so the 44px Fredoka figure does not overflow the card at mobile widths. Feature list items work best at two to five words each: longer lines break the icon-text alignment on narrower viewports. The "Most popular" badge text can be swapped for any short label ("Best value", "Save 10%") without structural changes. If you remove the badge entirely, delete the wrapping Group module rather than leaving an empty container, to avoid an unexpected gap above the h3 tier title.

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 Playful Coding Camp Pricing Section for Divi 5: Three-Tier Sessions

Do all three cards stay the same height on desktop?

Yes. The card row uses alignItems: stretch, so Divi stretches every column to match the tallest card. The feature list Group inside each card also uses flexGrow, so it expands to fill remaining vertical space and keeps the CTA button pinned to the bottom regardless of how many feature lines you add or remove.

What happens to the card order on mobile?

On phones the row switches to flex-direction: column, so cards stack in their DOM order: one week first, fortnight second, whole summer third. If you want the featured pink card to appear at the top on mobile, move the centre Divi column to the first position in the row inside the Divi editor.

Which modules make up the feature list rows?

Each feature row is a Divi Group module set to flex-direction: row with a 12px column gap. Inside it sits a Divi Icon module (Font Awesome checkmark, 15px) and a Divi Text module. To add or remove a feature, duplicate or delete one of these Group modules within the feature list section of the column.

The pink card uses different text colours from the white cards. Why?

On white cards the description and period label use #625a8c (muted purple) to create visual hierarchy against a white background. The pink card switches those same elements to #2b2457 (dark navy) because the pink fill provides contrast on its own. If you change the featured card background to a dark colour, update those text fields to white to maintain legibility.

Can I add a fourth pricing tier?

Yes. Duplicate one of the existing columns and add it to the row, then update the row column structure from 1_3,1_3,1_3 to a four-column split in the Divi row settings. On tablet and phone the cards already wrap and stack, so the responsive behaviour carries over without extra changes.

Do the buttons link anywhere by default?

No. Each Divi Button module has placeholder text ("Reserve a week", "Reserve two weeks", "Reserve a place") but no URL assigned. After importing the layout, open each button module and add the link to your enrolment form, booking page, or checkout flow.

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.