Dark Studio Agency Comparison Features Layout for Divi 5: Two Panels

Features Agency Dark

A dark two-panel features section for Divi 5 that contrasts a freelance marketplace with a dedicated studio. Built for agencies positioning against commoditized design services.

Rate this element

Be the first to rate

Download this section, free

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

Click to view the full page

Overview

The section opens with a full-width header block: a 14px uppercase eyebrow in JetBrains Mono (#8d9892) labeled "The difference," followed by a Space Grotesk H2 at 44px capped to 720px so it never sprawls across wide viewports. A single-clause subtitle sits below, capped at 640px, and closes the block without competing for attention. The outer section background is #0b0d0c, a near-black with a faint forest tint that reads warmer than pure black and keeps the palette from feeling generic. Section padding runs 88px top and bottom on desktop, stepping down to 64px on tablet and 40px on mobile.

Below that header, two equal-width panels sit in a 50/50 row with a 24px gap. The left card uses #131715 for its background, a shade just light enough to lift off the section floor as a surface, with a 1px dashed border in #2a312d. The right card inverts to #e8ece9, the warm off-white that doubles as the primary text color everywhere else on dark. That color inversion is the layout's central argument: the "competitor" column reads in shadow, the "studio" column in light. Both cards carry 44px of internal padding on desktop, stepping down to 32px on tablet and 28px on mobile, so neither feels cramped at any breakpoint.

Each card opens with a 13px uppercase JetBrains Mono eyebrow naming its side, then a Space Grotesk H3 at 28px delivering the editorial verdict in a single line. Four icon-plus-text rows follow, each built as a flex Group containing a 16px Font Awesome icon and a 17px/1.6em JetBrains Mono Text module. On the dark panel the icons are fa-times in muted sage (#8d9892); on the light panel they are fa-check in near-black. The monospace typeface at that size and line-height gives each row enough air to scan without feeling padded. The right panel adds a CTA button below the feature rows, dark-filled with a dashed 1px border and JetBrains Mono weight-600 label, turning the comparison directly into a conversion prompt.

On mobile the 50/50 row collapses to a single column, with the dark panel stacking above the light one. The H2 steps from 44px to 30px and the H3s from 28px to 22px, keeping the hierarchy legible without any structural changes. There are no images in this layout: the entire section is built from typography, color, and iconography alone.

What’s inside

Two side-by-side comparison cards in a 1/2 + 1/2 Divi row, collapsing to stacked full-width columns on mobile
Four icon-text feature rows per panel, each a native Divi 5 Group module wrapping an Icon module (fa-times / fa-check at 16px) and a Text module
Inverted card color scheme: dark panel (`#131715`, dashed `#2a312d` border) for the competitor side; off-white (`#e8ece9`) panel for the studio side
Two-font hierarchy: Space Grotesk for the H2 section headline and H3 card subheads; JetBrains Mono for all eyebrows, body copy, and the CTA button label
Responsive padding at three breakpoints on both the section (88/64/40px) and each card (44/32/28px) using native Divi spacing controls
CTA button on the light panel with dark fill, JetBrains Mono weight-600 label, 2px border radius, and 1px dashed border -- no third-party button plugin required
H2 headline constrained to 720px max-width and subtitle to 640px via Divi Group sizing, keeping both left-aligned and readable on ultrawide screens

Who it’s for

This layout is built for agencies, studios, and consultancies that compete directly with freelance platforms for the same buyers. Web design agencies, branding studios, content production houses, and development shops will all find the two-panel comparison argument immediately useful on a services page, a pricing section, or an "about our process" block. It also works for any subscription-model service, retainer agency, or managed-service provider making the case for continuity and accountability over commodity hiring. The editorial tone suits premium positioning: it names the alternative directly rather than ignoring it.

Customization tips

The most impactful change to make first is the two H3 subheads ("Fast to start, hard to trust" and "One team, accountable throughout"). They carry the positioning argument, and they need to reflect your actual comparison. Keep each under 40 characters so they stay on one line at 28px, otherwise the card heights diverge. The four text rows inside each card are each a single short clause -- keep them at that length, because the 1.6em line-height is sized for one-liners and becomes oversized if a row wraps. To rebrand the palette, change the card backgrounds (#131715 and #e8ece9) while keeping the contrast between them high enough that the "winner" reads instantly at a glance. The dashed border on the dark card is doing subtle design work; replacing it with a solid border softens the tone noticeably. The CTA button label fits up to roughly 28 characters within the existing 24px horizontal padding before it needs a size adjustment. No images need to be sourced -- this layout uses no image modules.

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 Dark Studio Agency Comparison Features Layout for Divi 5: Two Panels

What happens to the two columns on mobile?

The row is set to `flexWrap: wrap` and `flexDirection: column` on mobile, so both cards collapse to full width and stack vertically. The dark (left) panel appears first, the light (right) panel below it. Each card's internal padding steps down to 28px top/bottom and 24px left/right at the phone breakpoint.

What icon set is used for the check and X marks?

Both are Font Awesome solid glyphs rendered as native Divi 5 Icon modules: `fa-times` () on the dark panel and `fa-check` () on the light panel. They sit at 16px inside a flex Group module alongside the Text module, with a 14px column gap between icon and copy.

Does this layout use any photography or background images?

No. The entire section is built from typography, color blocks, and iconography. There are no image modules, background images, or video embeds to source or replace. The visual weight comes entirely from the palette inversion between the two cards.

What should I edit first after importing?

Start with the H2 ("A marketplace and a dedicated studio") and the two H3 subheads -- they set the entire argument. Then update the eight icon-text rows to match your actual comparison points. Swap the button label and its link last. The eyebrow text ("Freelance marketplace" / "Our studio") and the section subtitle are lower priority.

Can I add a fifth comparison row to each panel?

Yes. Each icon-text pair is a Divi Group module containing an Icon and a Text module. Duplicate any existing row within the card group and update the content. The `rowGap: 12px` on the parent card group handles vertical spacing automatically -- no manual margin adjustments needed.

The light panel background is `#e8ece9` -- can I swap it to a brand color?

Yes, but keep contrast high. The `#e8ece9` shade is also the primary text color on the dark side of the section, so it already feels unified. If you use a different color for the light panel, change all text and icon colors inside it to maintain a readable contrast ratio -- the Text and Icon modules each have their own color properties set independently.

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.