Playful Agency Hero Section for Divi 5 — Image Left Layout

Hero Agency Playful

A playful, conversion-ready Divi 5 hero section for creative agencies. Image-left layout with bold typography, rounded visuals, and a vibrant blue palette.

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

This is a two-column hero built on an asymmetric 2/5 – 3/5 split: a square image anchors the left column while the headline, supporting paragraph, and CTA sit in the wider right column. The section wears a pale sky-blue wash (#EAF2FF) with 7vw of vertical padding top and bottom, which gives the composition breathing room without feeling stiff — spacious enough to read as friendly, not corporate. The image itself has 40px rounded corners on all sides, a soft blue-tinted drop shadow (12px horizontal, 18px vertical, 40px blur, rgba(31,87,222,0.25)), and a subtle -2% Y translate that lifts it out of the row baseline. That small detail is the whole "playful" cue — nothing here is aggressively animated, but the photo reads as floating rather than glued down.

Typography carries most of the personality. The headline uses Outfit at 4.4vw with an 800 weight, -1px letter-spacing, and a 1.05em line-height — display-scale, but tight enough to feel confident rather than shouty. It sits in deep navy (#0B2A6B) against the pale background. The body paragraph directly beneath it flips into electric blue (#1F57DE) at 19px / 1.6, so the copy reads as a splash of color rather than default gray-body filler. The CTA is a fully pill-shaped button (999px radius) filled with that same electric blue and hovering to the navy — no border, no gradient, just a two-tone system that ties heading, text, image shadow, and button together.

On mobile the row stacks in the natural Divi order — image on top, copy below — and the vw-scaled headline scales down gracefully because it's tied to viewport width rather than a fixed pixel value. The right column's asymmetric padding (30px top, 20px right, 30px bottom, 40px left) insets the copy away from the image on desktop and re-centers cleanly once the columns collapse.

What’s inside

Asymmetric 2/5 – 3/5 row structure: square image on the left, headline + paragraph + CTA on the right
Pale sky-blue section background (#EAF2FF) with 7vw synced vertical padding for a roomy, airy feel
Square (900×900) image with 40px rounded corners on all four sides, a blue-tinted 12/18/40 drop shadow, and a -2% Y translate for a subtle float
Display headline in Outfit 800 at 4.4vw, -1px letter-spacing, 1.05 line-height, colored deep navy (#0B2A6B)
19px body paragraph set in electric blue (#1F57DE) at 1.6 line-height — copy that reads as color, not filler
Pill-shaped CTA button (999px radius) with an electric-blue fill and a navy hover state, no border
Built with only native Divi 5 modules: section, row, columns, image, heading, text, button — no third-party dependencies

Who it’s for

Creative agencies, branding studios, and boutique marketing consultancies whose voice is warm, human, and a little cheeky — the kind of shop where a corporate-blue suit-and-tie hero would feel wrong. It's a strong fit for challenger-brand agencies, indie freelance collectives, illustration and motion studios, and DTC-adjacent marketing partners launching a new site or repositioning. The playful-but-still-refined palette also works for coaches, workshop facilitators, event planners, and content creators who want personality on the very first screen. Anyone whose pitch is "we make work you actually want to share" will find the tone here already in the right neighborhood.

Customization tips

The whole palette is two colors doing most of the work: swap #1F57DE (electric blue) and #0B2A6B (navy) for your brand's two-tone pair using Divi's global color slots and the section background #EAF2FF — a tinted wash of the primary — should be adjusted in the same pass so it stays cohesive. The headline is sized in viewport units (4.4vw), so keep it to roughly 10–14 words; longer strings will wrap in a way that fights the tight -1px letter-spacing. The image is 1:1 (900×900) — any square asset works, from portraits to product shots to bold illustrations, but switching to landscape will shift the row balance and probably want a rounded-corner reduction. Body copy sits comfortably at 35–55 words; the -2% image lift starts to feel disconnected past ~80 words. Keep the button label to three or four words to preserve the pill's shape.

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 — Image Left Layout

How does this hero behave on mobile?

The 2_5 / 3_5 row collapses to stacked columns in Divi's default order — image on top, headline/paragraph/button below. The 4.4vw headline scales down with the viewport rather than staying huge, and the right column's asymmetric padding recenters once it's full-width, so nothing needs manual tweaking to look right on phones.

Can I replace the Pexels image with my own photo?

Yes — open the image module and swap the source. The layout is built around a square (1:1) asset at ~900×900, and the 40px rounded corners plus blue-tinted shadow will apply to whatever you upload. Team photos, product shots, illustrations, and bold graphic art all sit well in the frame.

What should I edit first when using this for my own agency?

Headline, body paragraph, and CTA label — in that order. The Tangerine copy is intentionally specific so you can see the tone; rewrite it in your own voice. After the copy, swap the two brand colors (electric blue #1F57DE and navy #0B2A6B) globally, then replace the image.

Can I remove the shadow, rounded corners, or float effect for a cleaner look?

All three are independent settings on the image module. Drop the box-shadow style to "none" for a flatter image, set the border radius back to 0 for hard corners, and clear the -2% Y transform to sit the image flush with the copy baseline. Any combination of the three works without breaking the layout.

Is the palette easy to change site-wide?

Yes — the section uses only three hard-coded colors (#EAF2FF background, #1F57DE electric blue for body copy, button, and shadow tint, and #0B2A6B navy for the heading and button hover). Wire those into Divi's global color palette and you can restyle the whole hero from one place.

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.