Website Hero Banner for Therapists: What to Put Above the Fold

What is a website hero banner?

The hero banner (or hero section) is the first full-width block on a page: usually a headline, a short supporting line, a button and sometimes an image. 'Above the fold' means everything visible before the visitor scrolls. On a phone that's a much smaller space than on a laptop — often just the headline, one line and a button — which is why the order and wording matter so much.

In our experience, therapist websites lose more enquiries in the hero than anywhere else. Not because the design is poor, but because the headline is vague ('Welcome to my practice'), the image is generic, and the visitor has to scroll to find out whether you even see their kind of difficulty.

What should a therapist put above the fold?

• —A headline that says who you help or what you help with, in the words a client would use.
• —A supporting line covering how you work and where: modality in plain English, location, online availability.
• —One primary call to action — usually booking a free initial call or getting in touch.
• —A small trust signal close to the button: your professional body registration, such as 'BACP registered' or 'HCPC registered clinical psychologist'.
• —Optionally, a photo of you or your therapy room.

That's it. Not your full qualification list, not three buttons, not an auto-playing video, not a carousel of slides. Every extra element divides the attention of someone who may already be finding it hard to focus.

How do I write a good headline for a therapy website?

Write it for the person reading it, not for your peers. Clinical terms (integrative, psychodynamic, person-centred) belong further down the page. The headline should describe the experience, the outcome of feeling understood, or the specific group you work with — without promising a cure.

Avoid headlines that promise outcomes ('Overcome anxiety for good'), create urgency ('Don't wait until it's too late'), or rely on fear. They conflict with the ASA's CAP Code and professional-body guidance, and they rarely land well with people who are already struggling. Avoid 'Welcome' headlines too — they use the most valuable words on your site to say nothing.

Your headline does the same job as the first line of your bio. If you're rewriting both, start here. Read: how to write a therapist bio →

Should a therapist website banner have an image?

Often yes, but it should be the right image — or none at all. The options, roughly in order of how well they tend to build trust:

• —A natural, professional photo of you, looking at the camera, in decent light. For solo practitioners this is usually the strongest choice: people want to see who they'll be talking to.
• —A photograph of your actual therapy room or building. It answers 'what will it be like to walk in?'
• —A calm, real-feeling detail photo — a window, a chair, plants — if you work from home and would rather not show the room.
• —No image: a clean colour block with a strong headline. Fast, accessible, and far better than a poor image.
• —Generic stock photography. Use sparingly, if at all. Avoid images of people holding their heads in their hands or looking distressed; they can be triggering and they say nothing about you.

If you put text over a photograph, add a solid or semi-opaque overlay behind the text so it meets WCAG 2.2's 4.5:1 contrast ratio for normal text (3:1 for large text). Text placed straight onto a busy photo almost always fails somewhere on the image, especially on mobile where the crop changes.

What to photograph, what to avoid and how to brief a photographer. Read: therapist website images →

What should the call-to-action button say?

Say exactly what happens when they click, in a way that feels low-pressure. Booking therapy is a big step; your button should make it feel like a small one.

Use one primary button. If you need a secondary option, make it a quieter text link — 'or read how I work' — for people who aren't ready to get in touch yet. A short reassurance under the button helps too: 'I reply within two working days. No obligation.'

The best hero sections on therapy websites don't try to sell anything. They tell a nervous visitor, in one breath, that they're in the right place and that the next step is small.

Adam Watters, Founder, Psyche Creative

How should a hero banner work on mobile?

Most visitors to therapist websites arrive on a phone, often from a Google search or a directory listing. Design the mobile hero first, then expand it for desktop.

• —Headline at roughly 28–36 px on mobile, so it's readable without zooming but doesn't push the button below the fold.
• —Keep the headline to around eight to twelve words so it fits in three or four lines.
• —Put the button above the image on mobile, or use a smaller image, so the CTA is visible without scrolling.
• —Make buttons at least 44 x 44 px so they're easy to tap — larger is better.
• —Check the image crop on a real phone. A landscape photo of you on a laptop may crop to just your shoulder on mobile; set the focal point or use a separate mobile image.
• —Avoid full-screen heroes that fill the whole phone with a photo and hide the headline. The visitor should never have to guess what the page is about.

How do I keep the hero section fast?

The hero image is usually the largest element on the page, which makes it the Largest Contentful Paint (LCP) — one of Google's Core Web Vitals. Google's 'good' threshold for LCP is 2.5 seconds or less. A slow hero is both an SEO problem and, for an anxious visitor watching a blank screen, a trust problem.

• —Export the image at the size it's displayed — typically no wider than 1920 px for desktop and around 800–1000 px for mobile — and serve the right one per device.
• —Use modern formats such as WebP or AVIF, and compress. A hero image under about 200 KB is a reasonable target.
• —Don't lazy-load the hero image; load it immediately and, on custom builds, preload it.
• —Avoid background videos and sliders in the hero. They're heavy, distracting and can be uncomfortable for people sensitive to motion.
• —Use no more than two web fonts, ideally self-hosted or from Google Fonts with sensible loading.

Why speed and calm design are part of a trauma-informed website, not just a technical nicety. Read: trauma-informed website design →

A simple hero banner checklist for therapists

• —Does the headline say who you help or what you help with, in plain English?
• —Does the supporting line say where (or that you work online)?
• —Is there one clear button, worded as a small, specific step?
• —Is your professional registration visible near the button?
• —Is the image of you or your space, or have you chosen no image deliberately?
• —Does all text pass 4.5:1 contrast, including over the image?
• —Can a mobile visitor see the headline and button without scrolling?
• —Does the page's main content load in under 2.5 seconds on a phone?
• —Is anything promising outcomes, creating urgency or using distressing imagery? Remove it.

We design and build trauma-informed therapist websites with hero sections written, photographed and tested for exactly this. See our Web Design service →