Playful Agency Hero — Friendly Branding Studio Divi 5 Layout

Hero Agency Playful

A playful Divi 5 hero section for branding and web agencies — bold headline, warm intro copy, rounded image, and a pill-shaped CTA in fresh blue pastels.

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 section opens with a pale blue wash (#eff6ff) and a generous 110px top-and-bottom padding, giving the hero room to breathe before any content sits inside it. Structure is a two-column split — a narrower 2/5 image column on the left and a wider 3/5 text column on the right — separated by a 64px column gap that keeps the photo and the copy from crowding each other.

Hierarchy on the text side moves through three deliberate steps. An uppercase eyebrow in #2563eb (15px, weight 700, 3px letter-spacing) opens with a friendly, categorical hello. The display headline follows in near-black slate (#0f172a) at 58px, weight 800, with a tight 1.05 line height and -1px letter-spacing, so the phrase "Brands so good your competitors will quietly screenshot them" lands as a single sculpted shape. A softer 18px body paragraph in #334155 (line-height 1.65em) fills in what the studio actually does, and the block resolves into a fully pill-shaped CTA (999px radius) that sits at #1d4ed8 and deepens to #1e3a8a on hover.

The image column carries the visual weight. A 36px-rounded portrait (roughly 900×1000, drawn from Pexels in the source file) is lifted off the page by a blue-tinted drop shadow — 24px vertical offset, 60px blur, rgba(29,78,216,0.25) — which pulls the same accent blue back through the composition and ties the two columns together.

On phone the row's flex direction flips to column, so the image stacks above the copy and each column expands to full width (flexType 24_24). Nothing else changes: the palette, the spacing rhythm, and the pill CTA all carry through, so the hero reads the same on a 375px screen as it does at desktop width.

What’s inside

Two-column split hero (2/5 image, 3/5 text) with a 64px column gap and centered vertical alignment
Divi Image module with 36px rounded corners on all sides and a soft blue-tinted drop shadow (24px vertical, 60px blur)
Three-tier text stack: uppercase letter-spaced eyebrow → 58px/800 display headline → 18px body paragraph
Fully pill-shaped CTA button (999px radius) with a hover state that shifts from #1d4ed8 to #1e3a8a
Pale-blue #eff6ff section wash tying the eyebrow accent, shadow tint, and button color into one palette
Roomy 110px top-and-bottom padding sets a calm, unhurried opening rhythm for the page
Native mobile behavior — the row's flexDirection switches to column on phone, stacking image above copy at full width
Built entirely from native Divi 5 modules (Section, Row, Column, Image, Heading ×2, Text, Button) — no third-party dependencies

Who it’s for

Small branding studios, creative agencies, boutique web shops, and independent designers who want their homepage to sound like a person, not a pitch deck. The warm voice, portrait-oriented photo, and pill CTA suit personality-led teams — solo founders, two-person studios, indie creative collectives — much more than enterprise consultancies. It also lands well for adjacent creative service providers: copywriters, illustrators, brand strategists, launch marketers, and photography studios that lead with warmth over gravitas. Coaches and course creators whose brand hinges on approachability can adopt it wholesale — the eyebrow/headline/paragraph/CTA rhythm is generic enough to swing between "agency intro" and "personal brand intro" with only copy changes.

Customization tips

Treat the four blues as a set — the section wash (#eff6ff), the eyebrow accent (#2563eb), the button base (#1d4ed8), and the button hover (#1e3a8a) share a family, so swap them together rather than one at a time if you want to move away from blue. Keep the eyebrow under about six words so the 3px letter-spacing still reads cleanly, and aim the display headline at 8–14 words: past that, the 58px/1.05-line-height treatment starts to overflow into a fourth line on desktop. Body copy tolerates 3–5 sentences before the button feels far from the headline. For the photo, swap in a portrait-oriented shot near 900×1000 (roughly 9:10) — team photos, a founder portrait, or a bold illustration all fit the friendly tone; the 36px corner radius is generous, so busy edges won't survive the crop. If you need a secondary action, replace the paragraph's last sentence with a text link rather than adding a second pill — the layout is composed around a single CTA.

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 — Friendly Branding Studio Divi 5 Layout

How does this hero behave on phones?

The row's flex direction switches to column on the phone breakpoint, so the rounded image stacks above the text column and both expand to full width (flexType 24_24). Padding, palette, and the pill button all carry through unchanged — no separate mobile design work required.

What image size and shape should I drop in?

The source uses a roughly 900×1000 portrait crop (about 9:10). Anything close to that ratio will sit comfortably inside the 36px rounded frame; square images work but lose some of the vertical presence that balances the 3/5 text column.

Which Divi 5 modules make up the layout?

One Section, one Row (2_5 / 3_5 columns), one Image module in the left column, and two Heading modules (eyebrow + display), one Text module, and one Button in the right column — all native Divi 5, no plugins.

Can I add a second CTA next to the pill button?

You can, but the composition is tuned around a single action — the 58px headline and rounded photo already carry a lot of weight. If you need a secondary path, a plain text link inside the paragraph reads better than a second pill button competing with the first.

What should I edit first after installing?

Swap the Pexels image for your own portrait or team shot, then rewrite the two headings and the paragraph — those four fields carry all of the personality. The palette and spacing are already balanced, so leave those until you've seen your own copy in place.

Is the whole layout blue, or can I recolor it easily?

Five colors do all the work: #eff6ff (section background), #2563eb (eyebrow), #0f172a (headline), #334155 (body), and #1d4ed8/#1e3a8a (button + hover). Change them as a family in the module presets and the hero will recolor cleanly in a few minutes.

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.