Playful Real Estate Hero with Weekly Listings Signup — Divi 5 Layout

Hero Real Estate Playful

A playful purple-gradient Divi 5 hero for real estate agents: split layout with bold headline, social proof, and a Friday-listings email signup card with neighborhood picker.

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 split hero built on a single Divi 5 section with a 135° gradient that runs from deep violet (#4C1D95) into #7C3AED. The section pads generously — 120px top and bottom on desktop, dropping to 80px on tablet and 60px on phone — and the row inside caps at a 1200px max width with a 48px column gap. The left column carries the verbal weight: a spaced-out "Twin Cities · Buyers Only" eyebrow set in Outfit, a 56px 800-weight headline ("House hunting shouldn't feel like a second job."), a paragraph limited to 520px so the line length stays readable, and a five-star social-proof line underneath.

The right column is a white card that pops off the gradient — 24px border-radius, 48px internal padding, and a preset3 box-shadow tinted rgba(30,27,75,0.45) so it reads as lifted rather than pasted. Inside the card sit a 28px "Get Friday's new listings first" heading, an intro paragraph, three signup fields (name, email, a neighborhood select pre-loaded with six Twin Cities picks), a checked consent toggle for price-drop alerts, a solid violet CTA ("Send me Friday's list") with a matching purple glow, and a small fallback contact line for people who'd rather email or call.

On phone, the row flips to a stacked column: the headline block reads first, then the signup card slides below it. Section padding tightens to 60px, the headline steps down from 56px → 44px → 36px across the three breakpoints, and the card's internal padding shortens to 32px/24px so nothing crowds the screen edges. There are no images, icons, or third-party embeds anywhere in the layout — the density comes entirely from Outfit typography, the two violet stops, and the contrast between the gradient background and the single white card.

What’s inside

Single Divi 5 section with a 135° violet gradient (#4C1D95 → #7C3AED) and responsive vertical padding (120/80/60px)
Two-column 1_2 row capped at 1200px with a 48px column gap that collapses to a single stacked column on phone
Left column: uppercase Outfit eyebrow, 56px 800-weight headline that scales to 44px/36px, capped-width intro paragraph, and a five-star social-proof line
White signup card on the right with 24px border-radius and a deep violet drop-shadow that lifts it off the gradient
Card interior: 28px card heading, styled name and email inputs, a neighborhood select with six pre-filled options, and a checked consent toggle
Solid violet CTA button with a matching rgba(124,58,237,0.45) glow and 12px corner radius
Inline fallback contact line (email + phone) under the CTA for people who'd rather talk than fill a form
Outfit typography throughout at weights 600–800, tight letter-spacing on the headline, and comfortable 1.6 line-height on body copy

Who it’s for

Local, personality-forward real estate agents and boutique brokerages who run a weekly listings newsletter — especially neighborhood-focused buyer's agents in a specific metro. The playful voice ("purple-door-worthy homes", "House hunting shouldn't feel like a second job") pairs naturally with an agent who already writes their own emails and doesn't want to sound like a national portal. It also fits relocation consultants, property scouts, and real estate coaches who want an email-first lead capture instead of a booking form. Because the whole hero is text and form — no property photo — it works well when you don't want to commit to a specific listing image on the homepage, and it's a clean fit for a landing page you point paid traffic at.

Customization tips

Palette swaps map to Divi 5 preset colors — replace the two gradient stops with your brand's dark → mid tone and keep the white card as the light anchor. The CTA background and its shadow both reuse #7C3AED, so change them together to keep the glow reading as a color halo rather than a mismatch. The headline is tuned for roughly 48–60 characters; much longer and it loses its punch on desktop, longer still and it overflows on phone. Keep the intro paragraph under about 200 characters so the 520px max-width stays two lines. Swap the six neighborhood options in the select for your own five to eight — fewer feels sparse, more looks like a data dump. There's no image module, so there's no aspect ratio to manage; if you want a photo, add an Image module above the headline or a low-opacity background image on the section behind the gradient. Finally, the form fields are inline HTML inside a Text module for preview purposes — replace that block with a real Contact Form, Bloom, or ESP embed before you publish.

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 Real Estate Hero with Weekly Listings Signup — Divi 5 Layout

Does the signup form actually capture submissions out of the box?

No — the name, email, neighborhood, and consent fields are styled inline HTML inside a Divi 5 Text module so you can preview the look. Before you go live, replace that Text module with a real Contact Form (or Bloom, or your ESP's embed) and map the fields to your list.

How does the hero behave on mobile?

The row flips to a vertical stack — headline block first, signup card underneath. Section padding drops from 120px to 60px, the 56px headline steps down to 36px, and the card's internal padding tightens from 48px to 32px so nothing crowds the screen edges.

Which Divi 5 modules is the layout actually built from?

A Divi 5 Section, one Row, two Columns, three Heading modules, three Text modules, and one Button module. No third-party plugins, no icon library, no image modules.

What should I change first when I drop this in?

The eyebrow ("Twin Cities · Buyers Only"), the city reference in the intro paragraph, the six neighborhood options in the select, and the "340+ families placed since 2019" social-proof line. Then swap the fallback email and phone under the button for yours.

There's no hero image — can I add one?

Yes. Add an Image module above the headline in the left column, or set a background image on the section behind the gradient at roughly 30% opacity so the eyebrow and headline still read. Keep the white card as-is so the form stays legible on top of the photo.

How do I match the CTA button's purple glow to my brand color?

The button uses a preset3 box-shadow tinted rgba(124,58,237,0.45). Change that color to a translucent version of your accent (same hue as your gradient works best) and update the button background from #7C3AED at the same time — otherwise the halo will fight the button.

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.