Bold Esports Coaching Pricing Section for Divi 5: Two-Plan Highlight

Pricing Coaching Bold

A bold two-card esports coaching pricing section for Divi 5. Features a single-session plan and a season pass, with feature lists, strong typography, and high-contrast yellow/black styling.

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 uses a strict two-column row — an 8/24 left column for context copy and a 16/24 right column for the pricing cards — so the cards dominate without the headline competing for space. On tablet and phone, both columns collapse to full-width and stack vertically, keeping the reading order intact. Section padding steps down in three breakpoints: 80px on desktop, 56px on tablet, 36px on mobile, so the section never feels cramped on smaller viewports.

The typography system is a deliberate two-family pairing. Unbounded at 800 weight handles the section headline (Rank up with a coach in your ear.) and both price figures at 56px with a -1px letter-spacing, lending the aggressive density you'd expect from a competitive gaming brand. Work Sans at 700 handles every label, feature row, and button — readable at 16px body size, sharp at 13px uppercase with 2px tracking for tier labels. The headline shrinks gracefully from 40px to 36px to 30px across breakpoints, keeping a dominant hierarchy without overflow.

The two pricing cards are built as nested divi/group modules inside a CSS grid (two columns, 24px gap on desktop, single column on mobile). The "One-off" card uses #ffd60a yellow fill with a 2px solid #0c0c14 border and a hard-offset box shadow (6px horizontal, 6px vertical, 0 blur, preset4) — a flat neo-brutalist stroke that reads as a physical object. The "Season pass" card inverts this: #0c0c14 fill with yellow (#ffd60a) text and a same-style shadow, creating a dark/light contrast pair that communicates hierarchy at a glance without using size or position alone.

Feature rows inside each card use icon + text groups in a flexDirection: row with alignItems: flex-start, separated from the pricing block by a 3px top border that matches the card's accent color. Buttons sit below the feature list and carry matching hover states: the outline button on the yellow card flips to a filled black background with yellow label text, while the filled yellow button on the dark card becomes a transparent outline. Both use a 999px pill radius and the same 6px hard shadow, reinforcing the design language across both CTAs.

What’s inside

Two `divi/group` pricing cards in a CSS grid (2-col desktop, 1-col mobile) with hard neo-brutalist box shadows and fully rounded 36px corners
Asymmetric row layout: 8/24 context column with `Unbounded` 800-weight H2 + body intro, and 16/24 cards column
56px price figures in `Unbounded` 700 with -1px letter-spacing, scaling to 48px tablet and 40px mobile via per-breakpoint overrides
Icon + text feature rows using FontAwesome checkmarks (fa ``) at 15px, aligned `flex-start` for multi-line safety
Pill-shaped `divi/button` modules (999px radius) with hover state inversions per card: outline-to-filled on yellow, filled-to-outline on dark
Three-breakpoint section padding (80px / 56px / 36px vertical) and card padding (44px / 36px / 32px) baked into the layout
Yellow `#ffd60a` / near-black `#0c0c14` two-tone palette with inverted card color logic signaling which plan is recommended

Who it’s for

This layout is built for esports coaching platforms, competitive gaming academies, and solo coaches selling structured session packages directly from their WordPress site. It also works for any performance-coaching niche where a one-off trial and a commitment bundle need to sit side by side: think fitness coaching, mental performance coaching, or music instruction sites that want an aggressive, high-contrast visual language. The dark/yellow palette and Unbounded typeface are genre-appropriate without being so niche-specific that a rebrand feels costly.

Customization tips

The hardest part of this layout to change is the palette, and it's also the most impactful. The #ffd60a yellow and #0c0c14 near-black appear as background fills, border colors, shadow colors, text colors, and button hover states simultaneously. If you want a different accent color, plan to update it in roughly 15 places across the two card groups -- use Divi's global presets or a find-replace in the JSON before import to avoid missing any instance.

Price figures and tier names are plain divi/text content; swap them in the Divi editor without touching layout. Feature list rows each contain one icon module and one text module -- you can add or remove rows freely inside the border-separated sub-group, but keep each row as an icon + text pair to preserve the flex alignment. If your feature copy runs two lines, alignItems: flex-start on the row group already handles it cleanly. The button labels (Book a session / Get the pass) should stay short -- test anything over 20 characters at 375px to make sure the pill doesn't overflow the card padding.

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 Bold Esports Coaching Pricing Section for Divi 5: Two-Plan Highlight

How do the two cards stack on mobile?

The outer grid container switches from two columns to a single column on phones via a `gridColumnCount: 1` phone override. The cards stack vertically in source order: the yellow "One-off" card first, the dark "Season pass" card below it. Both expand to full column width.

What modules make up the feature rows, and can I add more?

Each feature row is a `divi/group` set to `flexDirection: row` containing a `divi/icon` (FontAwesome checkmark, 15px) and a `divi/text`. They live inside a second nested group with a 3px top border separator. You can duplicate any row group inside that container -- the flex column layout with `rowGap: 12px` handles additional rows automatically.

There are no images in this layout -- is that intentional?

Yes. The design relies entirely on color contrast, typography weight, and the hard box shadows to create visual impact. There are no image modules, no background images, and no avatars. This keeps load time minimal and makes the layout work without any media assets on import.

Which element should I edit first after importing?

Start with the four text nodes that carry the plan names, price figures, and billing descriptors (e.g. `One-off` / `$45` / `Per 60-minute session`). These anchor the entire section's meaning. Then update the feature list text inside each card. Leave the button styles until the copy is final, since button label length affects how the pill renders at narrower widths.

Can I change the accent color from yellow to something else?

Yes, but it requires a consistent find-replace because `#ffd60a` appears as a background fill on the yellow card, as text/icon/border color throughout the dark card, and in both button hover states. The cleanest approach is to do a global replace in the JSON before importing, or use a Divi global color preset and remap the token. Changing it only in one or two places will leave yellow visible elsewhere.

Does the layout include a CTA button for each plan?

Yes. Each card ends with a standalone `divi/button` module. The yellow card's button is an outline style (transparent fill, black border and label) that fills black on hover. The dark card's button is a solid yellow fill that becomes a transparent outline on hover. Both use the same 999px pill radius and 6px hard offset box shadow.

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.