Playful Agency Hero Section for Divi 5 — Ideas With A Wink

Hero Agency Playful

Bright, playful hero section for creative agencies and branding studios. Two-column Divi 5 layout with image, headline, intro copy, and rounded CTA button.

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

A split hero built on a single row of two equal columns, this section pairs a rounded studio photograph on the left with a stacked copy block on the right — image, eyebrow, headline, paragraph, pill button, and a small contact line underneath. The palette is a cool 135° gradient from #eaf3ff into #dbe9ff, with a royal-blue accent (#1d4ed8) reserved for the eyebrow label, the CTA fill, and the link colour. Body copy sits in a deep navy (#334876) against a nearly-black headline (#0b1e46), so the eye lands on the type first and the button second — the wink comes from the confident copy voice, not from noise on the canvas.

Hierarchy is deliberate. The eyebrow is 14px Inter uppercase with 3px tracking, the headline is Outfit 800 at 62px with a tight -1.5px letter-spacing and a 1.05em line-height, and the paragraph is 18px Inter at a generous 1.75em leading, capped at a 560px max-width so long lines never get uncomfortable. The image gets a 32px radius, a soft 60px blue box-shadow, a slide-in-from-left entrance, and a subtle -6px lift on hover — one small piece of motion, not a carnival.

Spacing is roomy but responsible: 140px vertical section padding on desktop, 90px on tablet, 70px on phone, with 6vw / 5vw / 20px horizontal gutters that keep the content honest at every width. The row itself is flex-centered with a 64px column gap on desktop; at the tablet breakpoint the flex direction switches to column and the columns stretch full-width, so the photograph sits above the copy block on phones without any awkward crop or overflow.

What’s inside

Two-column 1/2 + 1/2 hero row with a 1240px max-width and 64px column gap, centered on the section
Rounded studio photograph (32px radius) with a soft blue drop-shadow, slide-left entrance animation, and a lift-on-hover transform
Eyebrow Heading module in uppercase Inter with 3px letter-spacing to anchor the top of the copy stack
Display Heading in Outfit 800 at 62 / 46 / 36px across desktop, tablet, and phone
Body Text module capped at a 560px max-width so lines stay in the ideal 60–75 character range
Pill-shaped Button module (999px radius) with a coloured drop-shadow and a -3px hover translate
Secondary Text module for a booking status line plus mailto and tel: contact links
Fully stacked responsive behaviour: row flex-direction switches to column at tablet, padding steps down at phone

Who it’s for

Built for small to mid-sized creative studios, branding agencies, and web-design shops that want a first impression with personality but not chaos — the kind of independent team that leads with wit in the copy and cleanliness in the layout. It also fits freelance art directors, illustration studios, motion designers, product-design consultancies, and boutique marketing agencies pitching founders and Series-A clients. Because the structure is a straightforward image-plus-copy split with a single CTA, it works equally well as a homepage opener for a Divi 5 portfolio, a landing page for a specific service (rebrands, launch sprints, retainer packages), or the top of a case-study index. Anywhere a warm human voice needs to sit next to proof-of-work, this hero earns its keep.

Customization tips

Swap the palette at the section-preset level: the gradient stops (#eaf3ff → #dbe9ff), the accent blue (#1d4ed8, used on the eyebrow, button fill, and link colour), and the headline navy (#0b1e46) are the only colours doing real work — change those four and the whole section repaints.

Copy has practical ceilings. The eyebrow reads best under about 34 characters so it stays on one line at every breakpoint. The Outfit headline is sized for two lines of roughly 6–8 words each; anything longer starts to wrap awkwardly on tablet at 46px. The paragraph is capped at a 560px max-width, so aim for 45–60 words. Keep the button label to 2–3 words to preserve the pill shape.

The image column is a 1:1.4-ish landscape crop (the Pexels asset is 940×650). Upload a replacement at roughly 1200×840 for crisp 2× rendering, and keep the subject centred — the 32px radius will nibble the corners.

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 — Ideas With A Wink

How does the two-column layout behave on tablet and phone?

The row is set to flex-direction: row on desktop with a 64px column gap, then switches to flex-direction: column at the tablet breakpoint with a 32px row gap. Phones inherit the same column stack. The image sits above the copy block on both — no crop, no overlap.

Which Divi 5 modules does this hero use?

Six native modules inside one Section and one Row: an Image, two Headings (an uppercase eyebrow and the display headline), two Text modules (the main paragraph and the small contact line), and one Button. No custom code, no third-party plugins.

Where does the studio photograph come from and can I replace it?

The demo pulls a Pexels image via its CDN URL directly in the Image module. Replace it with your own upload from the WordPress Media Library — a landscape crop around 1200×840 keeps the 32px rounded corners and the drop-shadow looking balanced.

What's the first thing I should edit?

The two headings and the paragraph. The eyebrow ("Independent studio, since 2016"), the display line ("Brands built with brains, launched with a wink."), and the intro paragraph mentioning Confetti Kite are all studio-specific placeholders — everything else (spacing, palette, motion) can stay as-is on the first pass.

Are the animation and hover effects distracting?

They're intentionally small. The image slides in from the left once on load (700ms), then lifts -6px with a slightly larger shadow on hover. The button lifts -3px on hover. Both are single-property transforms — remove them per module if you want a fully static hero.

Can I add a second button or social proof under the CTA?

Yes — the right column is a plain Divi Column, so drop another Button module beside the first (they'll sit inline) or add a Text or Blurb module below the contact line. The 560px max-width on the paragraph won't constrain new modules.

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.