Playful Agency Hero Section for Divi 5 — Bold Studio Landing

Hero Agency Playful

A playful, confident Divi 5 hero section built for independent agencies and studios. Blue pastel background, rounded imagery, pill CTA — ready to drop into any founder-led brand site.

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 hero sits inside a soft ice-blue (#eff6ff) section with 120px of vertical breathing room on desktop, tapering to 90px on tablet and 72px on phones. Inside, a two-column row uses an asymmetric 2/5 – 3/5 split: a Pexels editorial photo on the left, all the type and CTA on the right. A 64px column gap keeps the two halves comfortably distinct, and align-items: center locks the copy vertically to the middle of the image so nothing feels top-heavy.

The right column is a classic four-beat read: a small uppercase eyebrow tag in the accent blue (#2563eb, 14px, 3px letter-spacing) sets tone; a heavy 68px display heading in near-black (#0f172a, weight 800, tight -1.5px tracking) does the emotional lifting; a 20px slate body paragraph (#334155, line-height 1.6, capped at a 560px max-width) explains the offer; and a fully rounded pill button in the electric blue accent closes the section. Vertical margins step down cleanly — 20 → 28 → 40px — so each element gets its own beat instead of running together.

The playfulness lives in the details. The image module has a 32px border radius on all four corners and a soft blue-tinted drop shadow (preset3, 24px vertical offset, 60px blur, rgba(37,99,235,0.25)) that makes it feel like it's floating rather than pinned. On hover, a transform lifts it -8px on the Y axis for a tactile response. The CTA is a full 999px pill with a matching blue glow (preset2 shadow, 16px vertical, 40px blur) that deepens on hover as the fill shifts from #2563eb to #1d4ed8. On phone, the row's flex-direction switches to column, the image stacks above the copy, and the heading steps from 68px → 48px → 36px so the display type never overflows a narrow viewport.

What’s inside

Asymmetric 2/5 – 3/5 two-column row built with native Divi 5 flex layout (columnGap 64px, rowGap 48px, vertically centered)
Full-bleed image module with 32px rounded corners and a soft blue-tinted drop shadow (preset3, 60px blur)
Uppercase eyebrow text set in the accent blue at 14px / 700 weight with 3px letter-spacing
Responsive display heading — 68px on desktop, 48px on tablet, 36px on phone — with weight 800 and -1.5px tracking
Body paragraph capped at a 560px max-width so line length stays comfortable regardless of section width
Pill-shaped CTA button (999px radius) with a layered blue glow shadow that intensifies on hover
Subtle -8px hover lift transform on the image module for a floating, tactile feel
Native mobile stack: `flex-direction` switches to `column` at the phone breakpoint, image on top

Who it’s for

This hero suits independent creative studios, boutique branding agencies, and founder-led design shops that want personality without giving up polish. The playful shadow work and bright accent blue read confident and warm — a good fit for agencies pitching "we're the senior team, not an assembly line." It also works for adjacent service brands: copywriting studios, digital product agencies, marketing consultancies, video production houses, or specialized dev shops. If your positioning is craft, taste, and direct access to the people doing the work, this hero front-loads that story cleanly. Less suited to conservative enterprise B2B, law firms, or financial services, where a cooler and more restrained hero sets the right tone.

Customization tips

Every color in this hero traces back to two blues (#2563eb accent, #1d4ed8 hover) plus one background tint (#eff6ff). Change those three values in the section, button, and eyebrow modules and the whole hero re-skins — a warm ochre, forest green, or coral all work if blue feels too tech. The heading is tuned for a punchy 4–7 word line; anything longer breaks the 1.05 line-height rhythm on desktop, so trim before you swap in more copy. The body paragraph is capped at 560px, so hold it to roughly 30–40 words to keep it a two- or three-line block. The image slot expects a 3:2 or 4:3 editorial photo — the 32px radius forgives odd crops, but keep your subject roughly centered because the -8px hover lift is subtle and off-center subjects will drift under the shadow. If you replace the CTA text, keep it to three words ("Book a call", "See the work", "Get in touch") so the pill stays balanced.

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 Agency Hero Section for Divi 5 — Bold Studio Landing

How does the layout behave on mobile?

The 2/5 – 3/5 row switches `flex-direction` to `column` at the phone breakpoint, so the image reflows above the copy. The heading steps from 68px → 48px → 36px, and the section padding drops from 120px to 72px top and bottom so the hero doesn't dominate a small viewport.

Which Divi 5 modules does it use?

Only five native modules: one section, one row with two columns, one image, two text modules (an eyebrow and a body paragraph), one heading, and one button. No custom code, no third-party libraries, no shortcodes.

What kind of image works best in the left column?

A candid, editorial-feeling photo — a person, a workspace, a texture — reads best because the 32px rounded corners and soft blue drop shadow are already doing playful, tactile work. A flat product shot or a hard studio cut-out will fight that vibe.

What should I edit first when I drop this in?

The heading (currently "We make brands people actually feel."), the eyebrow tag, and the image. Those three carry the entire hero. Palette, spacing, and the CTA copy can wait until you've locked the message.

Can I remove the hover lift on the image?

Yes. The lift is a single transform on the image module — clear the -8px Y translate in the hover state and the image will stay perfectly still. The drop shadow underneath will remain.

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.