Halcyon Dental — Minimal Dental New Patients Page for Divi 5

Full Landing Dental Minimal

Everything new patients need to know before their first visit at Halcyon Dental — what to bring, what to expect, and what happens after.

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 breadcrumb-anchored page header on a white background, separated from the content below by a 1px mint-green border (#cfe6e1). An asymmetric two-column row places the H1 "New patients" in Manrope at 52px (tight -1px letter-spacing, deep #10343a) in the wider left column, while a short subtitle in Nunito 18px sits in the narrower right column. On phones both columns stack full-width with padding cut to 40px/36px, so the opening moment stays uncluttered without any hero image to load or source.

The second section pairs a sticky label column (8/24 desktop width) against a numbered-steps column (16/24) carrying 48px of left padding. The step counters render at 80px Manrope 700, letter-spaced at -2px — blunt typographic anchors that step down to 64px on tablet and 52px on phone. A 1px #cfe6e1 Divider module sits between each of the three entries, so the eye moves from "Book" to "Meet" to "Plan" without bullets or icons competing for attention.

Section three introduces a "What to bring" checklist. The content column uses a CSS grid set to two columns with a 40px gap on desktop, collapsing to one column on phone. Each row is a horizontal flex group: a native Divi Icon module (FontAwesome checkmark, 18px, #10343a, top-aligned) alongside a Nunito 17px text module with a 14px gap. Eight items are pre-filled. The label column follows the same 8/24 pattern, keeping the page hierarchy consistent throughout.

The fourth and fifth sections share the #eaf6f3 mint background, visually grouping the post-visit timeline and the FAQ apart from the white sections above. The timeline uses a hand-built vertical connector: a 14x14px square Group in vivid #0f7c80 teal flows into a 2px flex-grow Group in #cfe6e1 between each of four milestones (Same day, One week, Six months, Every year). The FAQ follows as a borderless accordion of five native Divi Toggle modules with sharp 0px radius, no side padding, a 2px dark top rule on the container, and 1px mint bottom-dividers per toggle. The first toggle opens by default.

What’s inside

Asymmetric two-column page header with H1 (Manrope 52px, responsive to 32px phone) and a companion subtitle column, anchored by a breadcrumb Text module and a 1px #cfe6e1 section bottom border
Three-step process block with oversized Manrope step counters (80px desktop, 52px phone), individual H3 headings, body text, and native Divi Divider modules between steps
Eight-item 'What to bring' checklist in a two-column CSS grid (single column on phone), each row using a native Divi Icon module (FontAwesome checkmark, 18px) top-aligned to a Text module with a 14px gap
Four-milestone post-visit timeline built entirely from nested Divi Group modules: a 14x14px square dot (#0f7c80) plus a flex-grow connector line (#cfe6e1) per milestone, with H4 time label, H3 title, and body text
Five native Divi Toggle modules forming an FAQ accordion — first toggle open by default, 2px top border on the container, 1px bottom-divider per item, zero side padding, 0px border-radius throughout
Two-color section rhythm: three white (#ffffff) sections and two mint (#eaf6f3) sections, alternating without any image modules
Three-breakpoint responsive padding on every section (desktop/tablet/phone), with all rows switching to flexWrap and column direction on phone

Who it’s for

This layout is built for independent dental practices, group offices, and dental service organizations that want to reduce new-patient anxiety before the first appointment. The calm, transparent structure (clear steps, a bring-list, a post-visit timeline, an FAQ) suits family dentistry, general and cosmetic practices, and orthodontic offices equally. Freelance designers and agencies building sites for dental clients will find it a ready-to-deploy foundation that only needs practice-specific copy, contact details, and real FAQ answers swapped in.

Customization tips

The palette is anchored by three hex values: #10343a (headings and icons), #4c6a6e (eyebrows and body text), and #0f7c80 (timeline dots). Replacing all three with a warmer navy/slate trio or a neutral warm-gray scheme takes the layout from dental-clinical to general healthcare without any structural changes. Derive the light section background (#eaf6f3) and the divider color (#cfe6e1) as desaturated tints of whatever primary you choose so the tonal relationship holds.

The H2 headings use text-wrap: balance and are comfortable up to about 45 characters at the 44px size before they feel tight at tablet widths. The checklist grid fits up to ten items cleanly across two desktop columns; beyond that, add a new row rather than a third column. For the timeline, each milestone body line works best at one short sentence — longer copy will stretch the flex-grow connector line unpredictably on short viewports. Because the layout contains no Image modules, there are no aspect ratio constraints to manage.

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 New Patients Page for Divi 5

Does this layout use any images or hero photography?

No. Every section uses color backgrounds (#ffffff or #eaf6f3), typography, icons, and Group modules only. There are no Image or Blurb modules anywhere, so you can import and publish without sourcing photos first.

How are the numbered steps built — is it a Blurb or a custom module?

The step counters are plain Divi Text modules (Manrope 80px) and the step titles are Divi Heading modules, with Divi Divider modules placed between each entry. No Blurb modules and no third-party plugins are involved.

How does the vertical timeline in the 'After the visit' section work technically?

Each row is a horizontal Divi Group containing two nested groups side by side: a narrow 14px-wide column holding a 14x14px square Group (the dot, #0f7c80) stacked above a 2px flex-grow Group (the connector line, #cfe6e1), then a content column with the heading and text. It is native Divi Groups and Headings only.

What happens to the two-column checklist grid on mobile?

The outer Group module switches from gridColumnCount 2 to gridColumnCount 1 on phone. All eight rows reflow to a single column and each row's top and bottom padding reduces from 14px to 10px.

What should I edit first after importing?

Start with the five FAQ Toggle modules — they contain practice-specific claims about insurance acceptance, sedation, and same-day emergency hours that must reflect your actual policies. Then update the contact email in the closing text below the FAQ, and replace the three-step and timeline copy with your own process details.

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.