Is the signup form a real Divi Email Optin module?

No — the form is styled HTML rendered inside a Divi Text module (email input, neighborhood select, and a checkbox). It looks like a signup but isn't wired to a mailer. Drop in Divi's native Email Optin module, a Contact Form, or an embed from Fluent Forms / WPForms if you need real submissions.

Does the layout include any images?

No. Visual weight comes entirely from the purple gradient background, the white card, typography, and shadows. Nothing to resize, and no photography licensing to worry about — which also means it loads fast.

How does it behave on mobile?

The row switches to flexDirection column at the phone breakpoint, both columns expand to full width (flexType 24_24), the H1 scales from 64px down to 36px, and the white card's interior padding drops from 52/44px to 36/24px so the form doesn't feel cramped on a 375px screen.

What should I edit first?

Headline, the eyebrow city ("Portland, 2016"), the trust-line count, the six neighborhood s in the form HTML, and the fine-print phone/email under the button. Everything else is decoration you can leave alone on day one.

Can I change the CTA button colour without breaking the design?

Yes — but update it in three places together: the button background (#7c3aed), its hover state (#5b21b6), and the button's box-shadow tint. That's what makes the CTA read as a glowing continuation of the button rather than a mismatched drop shadow.

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.

Playful Purple Real Estate Hero with Signup Form — Divi 5 Layout

Hero Real Estate Playful

A vibrant purple gradient real estate hero for Divi 5 with a 50/50 split layout, early-access email signup form, neighborhood picker, and bold playful typography.

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

This is a 50/50 hero that leans hard on personality without losing its conversion job. The left column stacks a compact uppercase eyebrow (13px, letter-spaced 3px, in a soft lavender against the purple ground), a big 64px Outfit headline in white with tight -2px letter-spacing and a 1.04em line-height so it feels tabloid-poster confident, a 20px body paragraph at 88% white for the pitch, and a five-star trust-line to anchor social proof. The right column is a solid white card, rounded to 28px, edged with a 1px lavender border and dropped on a soft 28px/72px shadow tinted in the section's deepest purple — it reads as a floating capture panel, not a form glued onto the background.

The whole section sits on a 135° purple gradient from #4c1d95 to #7c3aed, so the eye is pulled from a deep top-left corner into the vibrant CTA button on the right. Desktop padding is a generous 120px top and bottom, tablet drops to 90px, phone to 64px, and horizontal padding tightens from 40 → 28 → 20px in step. The row is capped at 1200px, centered with auto margins, and uses a 56px column gap plus a 48px row gap so nothing crashes together at any breakpoint.

On mobile the row switches to flexDirection column, both columns expand to full width (phone flexType 24_24), and the white card drops its interior padding from 52/44px to 36/24px so the form still breathes on a 375px screen. The eyebrow / headline / paragraph / trust-line rhythm on the left holds its 20 / 28 / 36px bottom-margin spacing, so nothing looks orphaned when the right card slides underneath.

What’s inside

Two-column Divi Row (1_2, 1_2) capped at 1200px with a 56px column gap and 48px row gap — stacks to a single column at the phone breakpoint
135° purple gradient background on the Section (#4c1d95 → #7c3aed) driving the whole colour system
Left column headline stack: uppercase eyebrow Heading, 64px Outfit H1 in white, 20px body Text at 88% opacity, and a five-star trust-line Text
Right column white capture card with 28px rounded corners, a 1px lavender border, and a deep purple 72px-blur box shadow (preset3)
Signup form built as styled HTML inside a Divi Text module: email input, neighborhood <select> (five Portland districts + "Show me everywhere"), and a price-drop-alert checkbox
Native Divi Button module for the "Send Me New Listings →" CTA with a hover colour swap (#7c3aed → #5b21b6) and matching glow shadow
Fine-print Text under the CTA with a phone number and mailto link for buyers who'd rather contact a human
Responsive typography ramp on the H1 (64 → 46 → 36px) and vertical padding ramp on the Section (120 → 90 → 64px)

Who it’s for

Purpose-built for independent real estate brokerages, buyer's agents, and boutique property scouts who want to feel more like a lifestyle brand than a listings feed. The Portland copy is a placeholder — swap in Austin, Brooklyn, Lisbon, or any market that leans creative-class. It fits equally well for adjacent verticals where a friendly capture form is the primary CTA: relocation consultants, short-term rental curators, home staging services, mortgage brokers running a "new listings" waitlist, or an interior-design studio previewing off-market projects. The playful purple palette and casual tone won't suit corporate luxury brokerages — for those, restyle to a neutral or dark palette. Best used as a homepage hero above a featured-listings grid, or as a dedicated "get early access" landing page for paid ad traffic.

Customization tips

For a different market, all palette work happens on four colours: the section's gradient stops (#4c1d95 and #7c3aed), the eyebrow/trust-line lavender (#c4b5fd), and the button background plus hover (#7c3aed → #5b21b6). Change those and the whole hero re-skins. If you swap to a lighter palette, drop the box-shadow opacity from 0.45 to around 0.20 so it still reads over paler grounds. The H1 caps around 8 words comfortably at 64px — anything longer wraps awkwardly at tablet (46px) and phone (36px). The body paragraph holds around 30 words before pushing the card down noticeably. Neighborhood options in the