Marlowe & Finch — Elegant Law_firm Our Approach Page for Divi 5

Full Landing Law Firm Elegant

Discover how Marlowe & Finch handles every matter: four clear steps, one partner throughout, fixed fees agreed upfront, and four core principles guiding every case.

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

The page opens with a clean white intro section that places breadcrumb navigation and an H1 on the left and a single positioning line on the right. The H1 "Our approach" uses Spectral at 52px with weight 600 and -1px letter-spacing, stepping down to 40px on tablet and 32px on phone. A 1px bottom border in #cfd6de closes the section, acting as a visual threshold before the content begins. The right column carries an 18px Source Sans 3 tagline at 1.6em line-height, establishing the tone before the page delivers the detail.

The second section shifts to a cool grey background (#eceff3) and runs a four-step process grid at 120px vertical padding. Each step (Listen, Plan, Act, Close) opens with a 48px circular badge in deep burgundy (#7a1e2c) carrying a bold white numeral, with a horizontal double-line Divi Divider extending to the right on desktop. This connector hides on phone via the module's disabledOn setting, so the grid reads as a clean single-column stack on small screens. Below each badge, Spectral h3 headings at 22px name the step, and 16px Source Sans 3 body text in #55616f provides a one-sentence description. The grid reconfigures from four columns on desktop to two on tablet to one on phone using Divi's native grid layout settings.

The third section pairs an accordion on the left with a portrait image on the right. The accordion carries four differentiator items ("One partner, always", "Plain English", "Settle when it makes sense", "Fees you can predict") styled with a sharp 4px double bottom border in #14202e and zero border radius, which echoes the angular button in the section above. The right column holds a native Divi Image module at a locked 4:5 aspect ratio with object-fit cover. Below that sits a vertical timeline tracing a real business matter from Week 1 through Week 10 across five milestones, using 14x14px square markers in the same burgundy and a 2px #cfd6de connector line that grows with the content.

The layout closes with a full-width dark navy section (#14202e) presenting four core promises: Candour, Discretion, Proportion, and Availability. Each row is a flex row with a fixed 64px number column carrying a Source Sans 3 bold numeral, a flexible Spectral h3 at 34px, and a description block capped at 360px. Double-weight dividers in #eceff3 at 4px separate every row. On phone the rows collapse to a vertical stack. Section padding across all body blocks scales in three defined steps: 120px desktop, 80px tablet, 56px phone, giving the layout a calm, unhurried rhythm at every breakpoint.

What’s inside

White intro section with split two-column layout: breadcrumb + Spectral H1 on the left, 18px tagline on the right, closed by a 1px bottom border divider
Four-step process grid (Listen, Plan, Act, Close) using 48px circular badges in deep burgundy (#7a1e2c) with numbered white numerals and horizontal double-line connectors that hide on phone
Divi Accordion module with four items styled with a sharp 4px double-bottom-border, zero border radius, and a #eceff3 background matching the section
Locked 4:5 portrait image slot (object-fit cover) beside the accordion, occupying a full equal-width column on desktop and stacking below on phone
Vertical timeline section with five milestones (Week 1 through Week 10) built from 14x14px square burgundy markers and a continuous 2px #cfd6de connector line
Dark navy (#14202e) closing section with four numbered principle rows (Candour, Discretion, Proportion, Availability) separated by 4px double dividers in #eceff3
Ghost "Request a consultation" button with double outline border, zero border radius, uppercase Source Sans 3 lettering, and a dark fill on hover
Three-breakpoint responsive padding (120px / 80px / 56px) with explicit tablet and phone overrides defined on every body section

Who it’s for

This layout suits solicitors, barristers' chambers, and boutique law firms that compete on partner-led service and transparent process. It also fits independent financial advisers, management consultants, and accountancy practices that bill by matter or project and need to show prospective clients exactly how an engagement unfolds. The structured "how we work" narrative, the accordion differentiators, and the numbered principles section give any high-trust B2B service firm the page architecture to answer the question every serious client asks before instructing: "What will working with you actually look like?"

Customization tips

The two accent colours to replace first are the deep burgundy (#7a1e2c) on all step badges, timeline markers, and accordion close borders, and the dark navy (#14202e) on the closing section background and double-outline button. Swapping these in Divi's global preset or per-module colour fields keeps the entire page consistent without touching every module individually.

Spectral pairs well with Source Sans 3 for a formal, readable tone. If your brand uses a different serif (Cormorant Garamond and Playfair Display both work), replace Spectral across the heading modules. Keep body and label copy in a neutral sans-serif.

For the accordion, aim for one to two sentences per item. The module is not designed for multi-paragraph content and the collapsed state will look unbalanced if body text runs long.

The portrait image slot expects a 4:5 crop at around 800x1000px minimum. Landscape images will be centre-cropped by object-fit cover and will lose content at the top and bottom edges.

The timeline works naturally with four to six milestones. To add one, duplicate any existing milestone group and paste it before the final entry. The connector line extends automatically.

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 Our Approach Page for Divi 5

Does the four-step process grid use icon modules, or just the numbered badges?

Just the numbered badges. There are no icon modules in this layout. Each badge is a 48px circular Group module with a burgundy background. The horizontal connector to the right is a Divi Divider module set to hidden on phone via the built-in `disabledOn` responsive setting, so nothing breaks when it disappears.

How does the accordion section respond on mobile?

The accordion items expand and collapse normally at all breakpoints. On phone, the two-column row wraps so the text column (accordion + label + heading) stacks above the portrait image column. The accordion itself has no width-specific overrides, so it fills the full column width on phone.

What aspect ratio does the portrait image slot require?

The image module has a 4:5 aspect ratio locked in via Divi's sizing settings with object-fit set to cover. A crop around 800x1000px works well for sharpness at retina resolutions. Square or landscape images will be centre-cropped, which may cut faces or important subjects at the edges.

What should I update first after importing the layout?

Start with the two brand colours: the burgundy (#7a1e2c) on the numbered badges and timeline markers, and the navy (#14202e) on the closing section. Then rewrite the four accordion items and five timeline milestones to match your firm's actual process. The Spectral headings in the step grid and principles section are sized for short phrases of three to six words and will overflow on mobile if the copy runs significantly longer.

Can I add a sixth milestone to the timeline without breaking the connector line?

Yes. The timeline is built from repeating Group modules: a marker group on the left (square badge + connector line) and a content group on the right (label, heading, body text). Duplicate any existing milestone pair, drop it above the final entry, and the connector line between them extends automatically because its height is set to flex-grow.

Does the dark navy closing section include a call-to-action button?

No, the section ends after the fourth principle row and its closing divider. Adding a Divi Button module below the final divider is straightforward. To match the ghost button style used in the process section, set the border to a double style at 4px, set border radius to 0px, and use uppercase Source Sans 3 with letter-spacing around 2px. Invert the colours for the dark background: white label, transparent background, white border, and a white fill on hover.

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.