Luxe Private Estates Real Estate Hero for Divi 5: Editorial Minimal

Hero Real Estate Elegant

A dark, editorial hero section for luxury real estate websites built with Divi 5. Features Cormorant Garamond typography, warm monochrome tones, and refined minimal layout.

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

Luxe Private Estates sets its tone before a single word is read. The section sits on a near-black background tinted with warmth (#16120e), a colour that pushes headline and body text into sharp relief without the cold severity of pure black. The palette moves in three deliberate steps: the cream headline (#f3ece0) carries all visual weight, the warm taupe (#b3a794) is reserved for supporting text and the eyebrow label, and a barely-visible border tone (#3a3127) marks the structural seam between the two content areas. Nothing here is accidental — this is a palette built to signal restraint and exclusivity rather than urgency.

The layout divides into two stacked rows inside a single full-width section. The first row spans the full column width and holds a constrained group (maxWidth 920px) containing three elements in sequence: an uppercase h4 eyebrow in Jost at 13px with 3px letter-spacing, a large h1 headline in Cormorant Garamond, and a thin 1px horizontal divider in the border tone. The group's maximum width prevents the headline from stretching uncomfortably wide on large monitors while keeping it left-aligned rather than centered. The second row splits asymmetrically, a wider 16/24 left column holds a body-text group (maxWidth 560px) and a narrower 8/24 right column holds the CTA link, creating a newspaper-style editorial split where descriptive copy and the call to action share the same horizontal band without competing.

Typography does the heavy lifting. The h1 is set in Cormorant Garamond Light (weight 300) at 104px with a tight 1.02em line height and textWrap: balance active, which distributes words across lines automatically to prevent awkward single-word orphans on large displays. Three explicit breakpoint values (104px desktop, 72px tablet, 44px phone) give predictable results at each viewport rather than relying on fluid scaling. The body copy runs in Jost at 20px with a generous 1.7em line height, while the CTA uses a plain underlined text link rather than a button, consistent with the editorial restraint of the whole composition.

On mobile, the headline group and the two-column body row both restack to full width (24/24 flex). Section padding compresses from 180px top / 140px bottom on desktop down through 120px/96px at tablet to 80px/64px on phone in two explicit steps, keeping proportional breathing room at every screen size without the layout ever feeling cramped.

What’s inside

H4 eyebrow label in Jost, 13px, uppercase, 3px letter-spacing (taupe `#b3a794`) for agency or brand name
H1 headline in Cormorant Garamond Light at 104px with `textWrap: balance` and tight 1.02em line height
Thin 1px horizontal Divider module in `#3a3127` separating the headline block from body content
Asymmetric two-column row (16/24 body copy + 8/24 CTA) that stacks to full width on phone
Body Text module in Jost 20px / 1.7em line height constrained to 560px for comfortable reading measure
Inline underlined text-link CTA (cream `#f3ece0`) in the narrow right column
Three explicit vertical padding breakpoints (desktop / tablet / phone) baked into the section

Who it’s for

This hero is built for boutique real estate agencies, independent estate agents, and luxury property consultancies targeting high-net-worth buyers who expect editorial quality over flashy sales tactics. It also suits high-end architectural practices, bespoke home builders, and interior design studios launching a portfolio-first homepage. If your brand language leans toward the quiet confidence of a luxury print magazine rather than a deals-and-listings portal, this section communicates exactly the right register from the first scroll.

Customization tips

Start with the eyebrow (h4) — swap the placeholder agency name for your own, keeping the text under roughly 40 characters so it stays on one line at the 13px size. The h1 headline benefits most from short, weighted copy: textWrap: balance works best with six to ten words; longer headlines may need a manual <br> tag to control where lines break. If you swap the background to a full-bleed property photograph, raise the overlay opacity in the section background settings to keep the cream headline legible. Cormorant Garamond and Jost are both Google Fonts and load from the Divi font library with no additional licensing. To swap to a different serif (Playfair Display or EB Garamond both complement Jost well), change the font family on the h1 heading module and preview at each breakpoint. The CTA link lives in a plain Text module — replace the anchor with a Divi Button module if your brand uses pill or outlined button styles.

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 Private Estates Real Estate Hero for Divi 5: Editorial Minimal

The h1 is 104px — will it actually scale down correctly on smaller screens?

Yes. The JSON contains three explicit font-size values: 104px on desktop, 72px at the tablet breakpoint, and 44px on phone. Divi applies each value at the matching viewport, so there are no surprises at common screen widths.

Why is the CTA a text link rather than a button module?

The editorial minimal aesthetic depends on the absence of button chrome. A contained button would introduce a visual weight that competes with the large headline. If your brand uses buttons, replace the Text module in the right column with a Divi Button module set to a borderless or text-only style to preserve the tone.

Can I place a full-bleed property photo behind the headline instead of the solid background?

Yes. Open the Section settings, switch the background from colour to image, and add a dark colour overlay at around 70-80% opacity. The existing palette tones were chosen to sit on dark backgrounds, so the text contrast holds as long as the overlay is dark enough.

What is the maxWidth 920px group doing on the headline row?

It prevents the h1 headline from stretching across the full browser width on very wide monitors. Without it, an ultra-wide viewport would produce uncomfortably long line lengths that undermine the editorial feel. You can adjust the value in the Group module sizing settings if your header container is narrower.

How long can the body copy paragraph be before the left column looks unbalanced?

The body text group is capped at 560px and set to Jost 20px / 1.7em. Two to three sentences (roughly 30-40 words) fills the column without pushing the CTA link out of the same horizontal band. Longer copy will extend the row height and the right-column link will appear high relative to the body text.

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.