Luxe Bridal Boutique Pricing Section for Divi 5: Two-Plan Highlight

Pricing E-commerce Elegant

A dark, editorial two-plan pricing section for luxury bridal boutiques. Features side-by-side service tiers with feature lists and CTA buttons, 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 section sits on a deep espresso background (#1f1a15) padded at 160px top and bottom on desktop, stepping to 112px on tablet and 72px on phone. That vertical generosity is the first signal to a visitor: this is not a crowded price comparison grid. A single two-column row divides the viewport on an 8/24 left panel for the editorial headline and a 16/24 right panel for the pricing cards, with columns aligned center on the vertical axis and separated by a 56px gap. On tablet and phone the row wraps to a single column, stacking headline above cards automatically, with no custom CSS required.

The typography pairing carries the whole mood. Cormorant Garamond handles every display element: the H2 headline at 40px weight 300 with textWrap: balance for clean line breaks, and the price figures at 56px weight 700 with -1px letter-spacing, creating a deliberate tension between the delicate headline and the assertive number. Jost carries all secondary text: eyebrow labels at 13px uppercase with 3px letter-spacing, body copy at 17px, feature lines at 16px, and button labels. The palette runs on three hex values (#1f1a15 section, #16120e near-black card, #f3ece0 warm cream card), with #b3a794 (muted taupe) used exclusively for secondary copy on dark surfaces.

The two pricing cards live inside a divi/group set to CSS grid with two columns and a 24px gap, which collapses to a single column on phone. Each card shares identical internal architecture: an uppercase label, an H3 plan name, a large price figure, a payment note, a 2px top-border divider group that grows to fill remaining height, five feature rows each built from a divi/icon checkmark and a divi/text node at 12px row gap, and a divi/button at the base. The button treatment inverts between cards: the dark card gets a ghost button (transparent fill, 1px solid #f3ece0 border) and the cream card gets a filled dark button (#16120e fill), so each CTA reads clearly against its respective background without any opacity tricks.

All spacing is defined at three breakpoints inside the module attributes: section padding at 160px/112px/72px, card padding at 44px-40px/36px-32px/32px-24px, and price type at 56px/48px/40px. Nothing relies on viewport units or external CSS, which means the layout imports cleanly into any Divi 5 site and renders predictably across devices from the first page load.

What’s inside

Asymmetric two-column row: 8/24 editorial headline column and 16/24 pricing grid column, center-aligned with a 56px gap
CSS grid pricing container with `gridColumnCount: 2` on desktop collapsing to a single column on phone, 24px gap between cards
Contrast card pair: near-black `#16120e` consultation card and warm cream `#f3ece0` full-design card with fully inverted color schemes
Cormorant Garamond Bold at 56px for price figures (responsive: 48px tablet, 40px phone) and weight 300 at 40px for the H2 headline
Five feature line items per card, each built as a `divi/icon` + `divi/text` flex row with a FontAwesome checkmark glyph at 15px
Two distinct CTA treatments: ghost button with 1px outline on the dark card, filled button on the cream card, both using Jost uppercase with 2px letter-spacing
Three-tier responsive spacing baked into module attributes across desktop, tablet, and phone breakpoints with no custom CSS

Who it’s for

This section fits bridal boutiques and wedding dress ateliers most directly, but the structure translates cleanly to any appointment-based luxury service with two clear price tiers. Bespoke tailors, couture alteration studios, high-end event stylists, and premium day spas all have the same conversion need: a lower-commitment entry offer alongside a comprehensive full-service package. The dark/cream card contrast and the editorial headline column work particularly well for any brand where the experience of booking is part of the value proposition, not just the deliverable.

Customization tips

The entire palette is controlled by three hex values: #1f1a15 for the section background, #16120e for the dark card, and #f3ece0 for the cream card. Swapping to deep navy + ivory or charcoal + blush requires changing only those three tokens; the button and icon colors inherit from the card text color, so they invert automatically. Keep the cream card as the lighter option to preserve the ghost/filled button logic.

Price figures are set at 56px in Cormorant Garamond Bold. If your price string exceeds five characters (for example, $1,200) drop the size to 44-48px to prevent line wrapping inside the card at its 40px horizontal padding. Feature list items read best at 3-6 words per line; longer phrases push into a second line and disrupt the tight 12px row gap. Button labels can run to roughly 20 characters before the 40px horizontal padding starts to compress. Both fonts (Cormorant Garamond and Jost) load via Divi's font manager: confirm both are active under Divi > Theme Options > General > Font Manager before publishing.

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 Luxe Bridal Boutique Pricing Section for Divi 5: Two-Plan Highlight

Does the layout include both pricing cards, or just one?

You receive the complete section: the editorial headline column on the left and the CSS grid on the right containing both the dark consultation card and the cream full-design card, each with five feature rows and a CTA button.

What modules does this layout use?

Only native Divi 5 modules: `divi/section`, `divi/row`, `divi/column`, `divi/group` (for the grid container, each card, and each feature row), `divi/heading`, `divi/text`, `divi/icon`, and `divi/button`. No third-party plugins required.

Does the layout include any photography or background images?

No. The section is entirely typographic and icon-based against flat color backgrounds. There are no images to source or configure, which keeps load time low and makes the layout straightforward to adapt to any brand without a photoshoot.

How does the layout respond on mobile?

On phone the row wraps to a single column (headline stacks above cards), the CSS grid collapses from two columns to one (cards stack vertically), the H2 scales from 40px to 30px, price figures drop from 56px to 40px, and section padding reduces from 160px to 72px. All breakpoint values are set natively inside the Divi 5 module attributes.

What should I edit first after importing?

Start with the plan names (the H3 headings inside each card), the price figures, and the feature list text. Then update the button labels and their link targets. Color and font changes can follow once the copy reflects your actual service offering.

Can I add a third pricing tier?

The grid is set to two columns on desktop. A third card will create a new grid row (two cards on the first row, one on the second), breaking the symmetry. For three tiers, change `gridColumnCount` to 3 on the outer group and reduce card padding and font sizes proportionally to keep the cards readable at the narrower width.

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.