Playful Purple Real Estate Hero — Signup Split | Divi 5 Layout

Hero Real Estate Playful

A playful purple Divi 5 real estate hero with a split signup card — capture buyer wishlists (name, email, neighborhoods, budget) and promise Sunday listing emails.

Rate this element

Be the first to rate

Download this section — free

Divi 5 JSON — import in seconds
Commercial license included
No account needed

Click to view the full page

Overview

The layout is a symmetrical two-column hero (1_2 + 1_2, capped at 1200px) sitting on a 135° purple gradient that runs from #2e1065 down to #4c1d95. Section padding is generous — 140px vertical on desktop, 90px on tablet, 70px on phone — which gives the type room to breathe against the dark backdrop and keeps the white card from feeling crowded on the gradient.

Left column carries the pitch. An uppercase eyebrow ('Independent Bay Area brokerage · Since 2018') with 3px letter-spacing sits above an 800-weight, 56px headline that tightens to 36px on phone at a 1.1em line-height. Below it, a 19px body paragraph in soft lavender (#ede9fe) explains the offer, followed by a compact social-proof line with a heart emoji, three agent first names, and a tel: link — small details that make the block feel like a real business, not a template.

Right column is the conversion moment: a white card with a 24px radius and a purple drop shadow (30px vertical, 60px blur, rgba(76,29,149,0.35)) that lifts it visibly off the gradient. Inside sits a 30px indigo card heading, a short subhead in #6d28d9, four field-shaped Text modules styled with 1.5px #ddd6fe borders on a #faf5ff fill, and a full-width #7c3aed button with a matching purple glow shadow. Worth calling out plainly: those field rows are visual placeholders — Text modules with placeholder-color copy — not a working form. You'll swap them for a real Divi Email Optin, Contact Form, or third-party embed before going live.

On phone the row flips to a stacked column so the pitch sits above the card, the card's padding drops from 48/40 to 32/24 so the fields stay tappable without horizontal scrolling, and the outer section padding compresses to 70/20. The result reads as one clean scroll on mobile and a balanced split above the fold on desktop.

What’s inside

50/50 two-column split (1_2 + 1_2) at 1200px max-width with 60px column gap and 40px row gap
Deep 135° purple gradient background (#2e1065 → #4c1d95) with 140px / 90px / 70px vertical section padding across desktop, tablet, and phone
Left-column stack: uppercase eyebrow (14px, 3px letter-spacing), 56px→36px 800-weight headline, 19px lavender body copy, and a one-line social-proof block with tel: link
White signup card on the right with 24px border-radius and a 30px purple drop shadow (rgba(76,29,149,0.35)) that lifts it off the gradient
Four field-shaped Text modules with #ddd6fe borders on a #faf5ff fill — ready to be replaced with a real Divi Email Optin or Contact Form
Primary Button module in #7c3aed with #5b21b6 hover, 12px radius, and a purple glow shadow that deepens on hover
Baked-in privacy microcopy with a mailto: link under the CTA, plus a phone tel: link in the pitch column
Phone breakpoint flips the row to a stacked column, tightens card padding to 32/24, and drops headline to 36px at 1.1em

Who it’s for

Built first for independent real-estate brokerages and solo agents who want a warmer, less corporate landing page — the copy hooks (neighborhoods, budget, weekly listing digest) map directly onto buyer-lead capture for residential agents. It also fits mortgage brokers, moving concierges, home stagers, and interior designers running a Sunday-newsletter or waitlist model. Outside real estate, the composition works for anything selling a curated weekly email: neighborhood community sites, boutique wellness studios, indie SaaS with a playful brand, coaching practices, or event series where the primary CTA is a friendly signup rather than a purchase. The purple gradient reads playful-premium rather than corporate, so pair it with brands that lean expressive.

Customization tips

The two focal colors are the section gradient stops (#2e1065 and #4c1d95) and the button pair (#7c3aed / #5b21b6 hover). Swap those four and the layout re-skins cleanly to any brand — the six lighter tints (#e9d5ff, #ede9fe, #c4b5fd, #a78bfa, #ddd6fe, #faf5ff) all read as faded-primary, so replace them with equivalents from a tint ramp of your new hue and paste them wherever the current purples appear. Copy limits: keep the headline around 40 characters so it holds the 56px size without wrapping to three lines, and keep the eyebrow under 50 characters so the letter-spacing stays legible. Swap the four placeholder Text rows for a real Divi Email Optin (single email field) or Contact Form module (multi-field) — the card's 40px inner padding leaves plenty of room. If you'd rather use a photo behind the hero, replace the section gradient with an image background and add a dark overlay so the white headline stays legible.

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 Playful Purple Real Estate Hero — Signup Split | Divi 5 Layout

Is the signup form actually functional?

No — this is important. The four field rows and the CTA button are styled Text and Button modules, not a real form, so nothing submits out of the box. Drop a Divi Email Optin module or a Contact Form module into the white card (or embed a third-party form) to make it live. The card, headline, subhead, and privacy microcopy around it can stay exactly as they are.

How does it behave on mobile?

The row flips to a stacked column at the phone breakpoint, so the headline column sits on top and the white card below. Section padding compresses from 140px to 70px vertical, card padding drops from 48/40 to 32/24, and the headline scales from 56px to 36px at a 1.1em line-height.

Which modules does it actually use?

One Section, one Row with two Columns, four Heading modules, several Text modules (including the four styled placeholder rows and two microcopy lines), and one Button module. No Form, Image, or Blurb modules — the visual weight comes from the gradient background and the lifted white card, not imagery.

There are no images — is that intentional?

Yes. The hero leans on the 135° purple gradient and the shadowed white card for contrast, which keeps it fast and forgiving to edit. If you want a photograph behind the pitch, replace the section's gradient background with an image and add a semi-opaque dark overlay so the white eyebrow and headline stay readable.

What should I edit first before publishing?

In order: the eyebrow (your city + brand line), the 56px headline, the body paragraph, the phone number in the tel: link, the mailto address in the privacy line, and — critically — replace the four placeholder Text 'fields' with a real form module. Then adjust the button label and #signup anchor to point wherever your form actually lives.

Can I rebalance the split so the card is smaller?

Yes. The row is set to a 1_2 + 1_2 flex layout, so you can change the column structure to 3_5 + 2_5 (or similar) to give more room to the pitch and shrink the card. Keep the 60px column gap so the shadow around the white card has breathing room against the gradient.

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.