Playful Real Estate Footer — Warm, Boutique Divi 5 Layout
A cheerful, boutique real estate footer for Divi 5 with a big brand mark, tidy link columns, contact block, social pills, and a featured listing image.
Rate this element
Download this section — free
- Divi 5 JSON — import in seconds
- Commercial license included
- No account needed
Click to view the full page
Overview
This footer opens with a warm cream backdrop (#FFF4E6) and a generous 8vw top / 5vw bottom padding, giving the section room to breathe before the page ends. The top row splits 3/5 : 2/5, pairing a brand block on the left with a rounded, softly shadowed listing photo on the right — the image sits on a 28px border radius with a deep 64px blur shadow at rgba(42,29,15,0.18), which lifts it off the cream like a card pinned to a mood board.
Inside the left column, a chunky 58px serif-weight heading (#2A1D0F, -1.5px letter-spacing, 1.05em line-height) anchors the brand, followed by a 520px-max-width intro paragraph at 17px/1.65em in a muted brown (#5C4F42). Below that, a nested 1/2 : 1/2 row holds two link stacks under tiny uppercase eyebrow labels (12px, 2.5px letter-spacing, in the accent #E85D2F): an "Explore" navigation column of six inline text links, and a "Say hi" column with email, phone, address, and open-house hours. The generous 2.1em line-height on the nav list keeps tap targets comfortable even before mobile stacking kicks in.
A Social Media Follow module runs beneath the link columns with Instagram, Pinterest, Facebook, and TikTok, each icon set in a white pill (100px radius, 10px padding) with a soft preset-2 shadow and the orange accent used for the glyph itself. On the right, the featured image is followed by a short "New listing this week" caption with a highlighted inline link. A final full-width row adds a 1px hairline divider at rgba(42,29,15,0.18) and centers a small 14px legal line covering copyright, DRE license, Equal Housing, and a playful sign-off. On phone, both parent rows flip to flexDirection: column and every column becomes 24_24, so the brand, nav, socials, image, and legal line stack in a single readable sequence.
What’s inside
- Two-tier layout: a 3/5 + 2/5 hero row over a full-width legal row, both switching to a single-column phone stack
- Brand block with 58px display heading, 520px-max intro paragraph, and warm cream (#FFF4E6) background
- Nested 1/2 + 1/2 link row with two uppercase eyebrow labels and a six-link "Explore" nav plus contact stack (email, phone, address, hours)
- Social Media Follow module with Instagram, Pinterest, Facebook, and TikTok icons in white circular pills with soft preset-2 shadows
- Featured listing card: Divi Image module with 28px rounded corners, 440px min-height, and a large 64px-blur drop shadow
- Short caption text under the image for a rotating "new listing" highlight with an accent inline link
- Full-width divider row with a 1px hairline (rgba(42,29,15,0.18)) and a centered 14px legal line for copyright, DRE, and Equal Housing
- Warm three-tone palette baked into every module: cream background, deep espresso text (#2A1D0F), and burnt-orange accent (#E85D2F) on links, eyebrows, and social icons
Who it’s for
This footer suits boutique and independent real estate brands that want to feel more like a neighborhood shop than a corporate brokerage — think single-agent SF/Brooklyn/Austin practices, small teams focused on a specific district, or vacation-rental hosts curating a handful of properties. The featured-listing card and "new this week" caption make it especially useful for agents who refresh inventory often and want the footer to keep working as a soft CTA. Beyond real estate, the same warm-and-friendly structure translates cleanly to interior designers, home stagers, bakeries, florists, cafés, and lifestyle blogs where a personal address, open-house hours, and social presence matter as much as the nav.
Customization tips
Palette-wise, three colors do almost all the work: swap the cream #FFF4E6 on the section background, the espresso #2A1D0F on the heading and body text, and the burnt-orange #E85D2F on eyebrows, link hovers, and social icons — updating those three globally recolors the whole footer. Keep the brand heading to two or three words so the 58px display size doesn't wrap awkwardly, and cap the intro paragraph around 220 characters to respect the 520px max-width. The Explore column is sized for four to seven links; add more and the two-column link row will get taller than the contact stack. For the featured image, use a portrait or 3:4 crop around 940×1250 so it fills the 440px min-height without letterboxing, and keep the caption to a single sentence with one inline link. Swap the four social networks in place rather than adding more — five icons still fit the row, but six starts to crowd the pill spacing on tablet.
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 Footer — Warm, Boutique Divi 5 Layout
How does this footer behave on mobile?
Both parent rows use `flexDirection: column` on phone, and every column is set to `flexType: 24_24`. So on a phone you get the brand heading and intro first, then the Explore and Say hi link columns stacked, then the social icons, then the featured image and caption, and finally the centered legal line.
Which Divi 5 modules are used?
Native modules only: one Heading, several Text modules (for the intro, eyebrow labels, nav links, contact info, caption, and legal line), a Social Media Follow module with four network children (Instagram, Pinterest, Facebook, TikTok), one Image, and one Divider. No third-party plugins or custom code.
Where do the nav links point, and how do I edit them?
The Explore list is a single Text module using an HTML `<p>` with `<br />` line breaks between six anchors (`/listings`, `/neighborhoods`, `/team`, `/journal`, `/mortgage-101`, `/contact`). Open the Text module, edit the links in place, and add or remove lines by editing the `<br />` markers — no need to add extra modules.
What image should I use for the featured card?
Something warm, editorial, and portrait-oriented — a property exterior, styled interior, or neighborhood detail. The Image module has a 440px min-height and 28px rounded corners, so aim for roughly 940×1250 at 2x DPR. The stock URL points at Pexels; swap it for your own upload from the Media Library.
What should I edit first after import?
Update the brand name in the Heading module, rewrite the intro paragraph with your city and specialty, and replace the contact block (email, phone, address, open-house hours). Then point the six Explore links at your real routes, swap the Pexels image for your featured listing, and update the DRE number and copyright line at the bottom.
Can I remove the featured-listing column and use a wider link area instead?
Yes. Delete the 2/5 column on the right and change the row's column structure to a single 4/4 column (or a 1/2 + 1/2 for two even nav stacks). The Social Media Follow module can move directly under the intro, and the divider + legal row below will keep working unchanged.
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.
