Halcyon Dental — Minimal Dental Membership Page for Divi 5

Full Landing Dental Minimal

A clean, minimal Divi 5 layout for a dental membership plan page. Features adult and family plan pricing cards, a feature comparison table, and an insurance vs. membership explainer section.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Part of a theme pack

This page ships inside Halcyon: Dental Clinic Theme (6 Pages), 6 coherent pages that share one brand.

$12.00one-time, commercial license

See everything in the pack

Click to view the full page

Overview

The layout opens with a two-column breadcrumb and page title section on a white ground, separated from the main content by a 1px #cfe6e1 sage border. The H1 "Membership plan" sits in a 16/24 flex column at 52px Manrope with -1px letter-spacing and drops to 32px on phones, while an 18px Nunito intro sentence occupies the narrower 8/24 right column. This deliberate weight imbalance signals a transactional page rather than a marketing one: the title dominates, and the supporting line qualifies without competing for attention.

The plan cards in section two invert the column weighting: the left 8/24 column holds a section label and H2, while the 16/24 right column carries a two-card CSS grid (24px gap) that collapses to a single column on phones. The Adult card uses the mint #eaf6f3 surface with a sage #cfe6e1 border and a transparent-background button outlined in deep teal, reading as available but not the primary recommendation. The Family card reverses to a #10343a dark background with an #eaf6f3 mint button, making it the clear visual anchor. Both price figures are set in Manrope at 56px, 700 weight, and -1px tracking to land with authority without requiring a separate display typeface. Each card holds five checkmark feature rows built from paired divi/icon and divi/text modules, with a ruled separator group between the price and the list.

Section three is a full-width feature comparison table built from nested divi/group modules in a 4-column CSS grid, with 1px #cfe6e1 gap lines acting as cell borders (no HTML table element). The header row labels Pay-as-you-go, Adult, and Family columns; subsequent rows cover check-ups, cleans, X-rays, whitening kit, and treatment discount, using centered divi/icon checkmarks and plain-text dashes to fill each cell. A solid #0f7c80 teal "Choose a plan" CTA button closes the section and introduces the accent hue for the first time on the page.

The final two sections share the #eaf6f3 mint background before the page closes on a full-bleed #0f7c80 teal banner. Section four compares insurance against the practice's plan using two card panels: white with a #cfe6e1 border for insurance (Font Awesome times icons in muted #4c6a6e), and deep teal #10343a for the membership plan (checkmarks in #eaf6f3 mint). The closing CTA banner collapses from a horizontal justify-between flex row (heading left, button and micro-copy right) to a vertical column on phones, with the H2 scaling from 48px to 32px. All breakpoint behavior is encoded directly in the JSON with no custom CSS required.

What’s inside

Five-section full-landing structure: breadcrumb intro with bottom border, side-by-side plan cards, 4-column feature comparison grid, insurance-vs-membership comparison, and a full-bleed teal CTA banner
Two plan cards (Adult at $34/mo and Family at $79/mo) in a collapsing CSS grid, each with a 56px price figure, five icon-prefixed feature rows, a ruled separator, and its own CTA button
4-column comparison table built from divi/group modules and 1px gap lines — no HTML table — covering five feature rows (check-ups, cleans, X-rays, whitening kit, treatment discount) across three tiers
Insurance-vs-membership two-card comparison using Font Awesome check () and times () icons with contrasting card backgrounds (#ffffff and #10343a) for instant visual differentiation
Dual-typeface system: Manrope at 700 weight with -1px tracking for all headings and price figures; Nunito for body copy, labels, and CTA buttons — both configured at the module level in the JSON
Full responsive cascade encoded in JSON: H1 52px to 32px, price figures 56px to 40px, section headings 44px to 30px, with column wrapping and card grid reflow at desktop, tablet, and phone breakpoints
No images in the layout — all visual hierarchy comes from background colors (#ffffff, #eaf6f3, #10343a, #0f7c80), typography scale, and divi/icon modules, so there are no placeholder images to replace

Who it’s for

This layout suits independent dental practices, DSO-affiliated clinics, and dental startups launching an in-house membership plan as an alternative to insurance. It fits family practices particularly well, since the Adult and Family card structure maps directly onto a two-tier offering without modification. The insurance-versus-membership comparison section makes it a strong choice for practices whose prospective patients are weighing options rather than ready to sign up immediately. Dental marketers or freelance web designers building sites for multiple dental clients will get direct, production-ready value from this layout.

Customization tips

The teal palette is defined by three hex values across all modules: #10343a (deep teal for dark backgrounds and headings), #0f7c80 (mid teal for the CTA section and button), and #eaf6f3 (mint for section backgrounds, card fills, and reversed text). A find-and-replace on these three values in the JSON swaps the entire palette to a new brand color in one pass. Plan names, prices, and feature rows are standard divi/text and divi/heading content; the five checkmark rows per card can be added or removed without touching layout structure. The comparison table is a fixed 4-column grid, so the column count should stay at four. Replacing the "Pay as you go" column with a third plan tier (such as an ortho add-on) requires substituting one group per row. CTA button labels use Nunito at 600 weight and fit cleanly at 10 to 22 characters; labels longer than that will wrap at the 14px top/bottom padding. The micro-copy line beneath the final CTA button ("Your first check-up is included.") is a standalone divi/text module and is easy to miss, so update it alongside the button label.

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 Halcyon Dental — Minimal Dental Membership Page for Divi 5

How do the two plan cards behave on phones?

The outer divi/row sets flexWrap to wrap and flexDirection to column at the phone breakpoint. The inner plan card group switches from gridColumnCount 2 to gridColumnCount 1, so both cards stack vertically in source order — Adult first, then Family — with full 24/24 flex width each.

Does the layout use any images?

No. There are no divi/image or divi/gallery modules anywhere in the layout. All visual contrast comes from section background colors, card fill colors, and Font Awesome icon modules. There are no placeholder images to source or aspect ratios to match.

What is the comparison table actually built from — is it an HTML table?

No. It is a divi/group set to display grid with gridColumnCount 4. The cell borders are produced by setting #cfe6e1 as the outer group background and using 1px columnGap and rowGap, so each inner group cell sits against that color. It reflows like any CSS grid layout and does not require horizontal scrolling on mobile.

How are the check and cross icons handled in the insurance comparison section?

They are native divi/icon modules. The insurance card uses Font Awesome solid times () at 16px in muted #4c6a6e. The plan card uses Font Awesome solid check () at 16px in mint #eaf6f3. Both are inline with divi/text modules inside flex row groups, with 14px column gap and flex-start alignment so the icon stays top-anchored when text wraps.

What should I edit first after importing?

Start with the three price figure text modules (the 56px Manrope modules showing $34, $79, and From $89) and the feature row text in each card. Then update both CTA button labels and the standalone micro-copy line beneath the final banner button — that line is a separate divi/text module, not part of the button itself, and is easy to overlook.

Can I add a third membership tier without rebuilding the layout?

Adding a third card to the plan section requires changing the outer group from gridColumnCount 2 to 3, which will also adjust the phone collapse. For the comparison table in section three, a fifth column can be added by updating the gridColumnCount from 4 to 5 and inserting one new group cell per row. The table header row and each feature row each need one new cell group to keep the grid complete.

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.