Marlowe & Finch — Elegant Law_firm Contact Page for Divi 5

Full Landing Law Firm Elegant

A sophisticated Divi 5 contact page layout for law firms. Features a split contact panel, inquiry form, FAQ accordion, and a free consultation CTA — all in a refined, editorial style.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Part of a theme pack

This page ships inside Marlowe & Finch: Law Firm Theme (6 Pages), 6 coherent pages that share one brand.

$12.00one-time, commercial license

See everything in the pack

Click to view the full page

Overview

Marlowe & Finch is a three-section contact page built around the typographic pairing of Spectral (a refined serif at 52px for the h1, stepping down responsively to 32px on mobile) and Source Sans 3 (set in small-caps at 600 weight, 2px letter-spacing for all labels and navigation). The opening section sits on white with 72px top padding on desktop, dropping to 40px on phone, and draws a 1px #cfd6de bottom border to separate the breadcrumb-and-headline band from the content below. The layout divides desktop space with a 16-of-24 / 8-of-24 column split, so the h1 dominates while the sub-copy sits in a narrower, offset column — a deliberate weight imbalance that keeps the headline authoritative without crowding the right side.

The main content section uses a cool #eceff3 slate background and a 10-of-24 / 14-of-24 column split. The narrower left column holds four contact-detail rows (email, phone, address, hours), each separated by a 3px double top border in #cfd6de and led by an 18px Font Awesome icon in ink (#14202e). The label sits in 12px all-caps Source Sans 3 above the value in 17px regular — a hierarchy that lets a prospective client scan to the right detail without reading every word. On tablet the columns collapse to full-width stacked blocks, and on phone flexDirection switches to column, so the form always appears after the contact details at single-column width.

The contact form itself lives in a white card with 48px interior padding on desktop (scaling to 24px on phone) and a 4px double border in #14202e on all four sides — the same double-border motif used throughout the layout for visual consistency. Fields inherit the slate #eceff3 background with matching double borders, and the ghost-style "Send enquiry" button inverts to ink-on-white on hover. Below the form section, a centred FAQ accordion (max-width 800px) answers six practical questions in Spectral h3 titles and Source Sans 3 body copy. The page closes with a full-bleed deep-crimson section (#7a1e2c) that rows a white Spectral h2 at 48px against a ghost "Request a consultation" CTA button, creating a confident final call to action without photography or illustration.

What’s inside

Two-section responsive row layout using a 10/14 column split on desktop that collapses to stacked full-width blocks on tablet and single column on phone
Four icon-led contact-detail rows (email, phone, address, hours) built with Divi Group and Icon modules, each divided by a 3px double top border
Divi Contact Form module styled to match the layout's double-border system, with slate-background fields, a ghost submit button, and full hover inversion
Six-item Divi Accordion module in the FAQ section, set to open on the first item, with Spectral headings and Source Sans 3 body copy at 16px/1.7em
Full-bleed crimson CTA section (`#7a1e2c`) with a flex row that separates the headline group from the button group, collapsing to column on phone
Breadcrumb text module at the top using 600-weight Source Sans 3 in small-caps with matching link colour for a clean navigation trail
Responsive padding steps defined at all three breakpoints (desktop / tablet / phone) across every section, with no fixed heights that could break on smaller screens

Who it’s for

This layout is a natural fit for law firms, barristers' chambers, notary practices, and legal consultancies that want a contact page conveying discretion and authority rather than friendliness. It also works for financial advisers, chartered accountants, private wealth managers, and any professional-services firm where confidentiality and prompt partner-level response are core selling points. The tone — measured, serif-forward, no photography — suits boutique practices over high-volume consumer-facing operations.

Customization tips

The palette resolves to three variables: ink (#14202e), slate (#eceff3), and crimson (#7a1e2c). To re-brand, replace all three globally — ink governs text and borders, slate governs section and field backgrounds, crimson governs the CTA section. Spectral can be swapped for any Google serif (Cormorant Garant, Playfair Display) without touching Source Sans 3. The four contact-detail rows are Divi Group modules, so adding or removing a row (e.g. a fax number or a second office) takes under a minute. Keep label text under 10 characters to preserve the two-line icon-label-value rhythm. The accordion accepts up to eight items cleanly before vertical length becomes an issue on mobile. The CTA heading is set with textWrap: balance — keep it under 55 characters to let Divi balance the line break naturally.

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 Marlowe & Finch — Elegant Law_firm Contact Page for Divi 5

Does the layout use any custom CSS or shortcodes?

No. Every style decision — borders, spacing, typography, hover states — is set inside the native Divi 5 module options. There is no custom CSS or shortcode dependency.

How does the contact form send submissions?

The Divi Contact Form module handles delivery using your WordPress mail settings, exactly as it does on any other Divi page. Point it to your preferred SMTP plugin or leave it on default WP mail.

What is the first thing I should edit after importing?

Replace the four contact-detail values (email address, phone number, street address, office hours) in the left column. Those are plain Text modules and take about two minutes to update.

Will the accordion FAQ section work on mobile?

Yes. The accordion section is a single full-width column with a max-width of 800px centred on the page. It reflows naturally at all breakpoints and the tap targets are large enough for phone use.

Can I change the crimson CTA section to a different colour without breaking the button?

Yes. The button uses a ghost style with a white double border and white text. If you change the section background, update the button border and text colour in the Button module decoration settings to maintain contrast.

Is the layout compatible with a dark-mode WordPress theme?

The layout sets explicit background colours on every section (white, slate, crimson) so it overrides any theme-level colour. It will look as designed regardless of whether your theme supports dark mode.

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.