Headers and hero sections that make the point

Headers and hero sections that make the point

Membergate Support -

The first screen of a page, before anyone scrolls, does more persuading than anything below it. Visitors decide within moments whether they are in the right place, and many decide based on that opening area alone. On most sites it has two parts: the site header, the strip across the top with the logo and menu, and the hero section, the large opening block with a headline, a short explanation, an image and usually a button.

Membership sites often waste this space. The header is crowded with links, and the hero offers a beautiful photo with a vague slogan such as “Your journey starts here.” Visitors have to scroll and read before they know what the membership even is. Many never do.

The hero's job in five seconds

A good hero answers three questions immediately:

  1. What is this? A membership, a course, a community, a set of resources.
  2. Who is it for, and what will it do for them? The outcome, for a specific kind of person.
  3. What should I do next? One clear action.

If a stranger can look at your hero for five seconds, look away and tell you the answers, it is working. If they can describe the photo but not the offer, it is not.

Keep the site header slim and useful

The header sits above the hero on every page, so it needs to stay out of the way while offering the essentials:

  • Your logo or name, linking back to the home page
  • A short menu of the main sections visitors look for, often four to six items
  • A “Log in” link for existing members, always in the same place, usually at the right
  • A “Join” or “See plans” button, styled as the one prominent action

Avoid tall headers with announcement bars, social icons, phone numbers and search all competing at once. On phones, the header should shrink to the logo, a menu button and perhaps the login link, taking up as little of the small screen as possible.

Write a headline that says what you offer

The headline is the most important line on the page. It should state what members get, and for whom, in plain words. A clear promise of the kind described in write a one-sentence promise for your membership is often the best starting point. Slogans and wordplay can work in advertising, but in a hero they tend to hide the point.

Below the headline, a subheadline of one or two sentences explains how: what the membership includes or how it works. Together, the two lines should leave no doubt about what the visitor is looking at. For openings that grab attention without sacrificing clarity, see headlines and hooks for membership marketing.

Show the real thing

The image or video in a hero should help visitors picture being a member. Stronger choices include:

  • A screenshot or short clip of the inside of the membership
  • A real photo of you teaching, or of members doing the thing the membership helps with
  • A photo of a real result, such as a finished project

Weaker choices include stock photos of people smiling at laptops and scenic images unrelated to the offer. Avoid placing the headline over a busy photo, where parts of it become hard to read; put the text on a solid panel or beside the image instead. And avoid rotating carousels of several slides. Most visitors see only the first slide, and the movement distracts from the message.

One main action, with reassurance

Give the hero one primary button with a specific label, such as “Start your free week” or “See membership plans,” following the principles in buttons and calls to action that people click. A secondary option, such as “Watch a sample session,” can sit beside it as a quieter link. Where it helps, add a short line beneath the button covering the price or the cancellation terms.

A worked example: a public speaking membership

Nadia runs a membership where people practice public speaking in small online groups and receive feedback. Here is her home page hero before and after:

Before: a full-screen photo of an empty stage under bright lights. Over it, in thin white text: “Find your voice.” A button reading “Learn more.” Above it, a header with nine menu items, a newsletter sign-up and social icons.

After: a header with the logo, four menu items (How it works, Sessions, Pricing, About), “Log in” and a “Join” button. The headline reads “Get comfortable speaking in front of people, one small group at a time.” The subheadline: “Weekly online practice sessions for six people, with a coach and kind, specific feedback.” A button reads “Try your first session free,” with “No card needed” beneath it and a text link to “Watch a two-minute session clip.” Beside it sits a real photo of a video call, with one member presenting and others listening.

The new version is less dramatic and far more useful. A visitor knows within seconds what happens in the membership and how to try it.

Heroes on inner pages

Course pages, event pages and pricing pages need an opening section too, but a smaller one. Give them a clear title, a line saying what the page offers and the main action if there is one, without a large image pushing the content down. Inside the members area, skip heroes almost entirely; members want their content, not a banner.

Check it on a phone

On phones, heroes often become a tall image with the headline and button pushed below the first screen. Make sure the headline, subheadline and button all appear without scrolling on a typical phone. Shrink the image or move it below them if needed.

Your hero review

  1. Show your home page to someone for five seconds and ask what it offers and who it is for.
  2. Trim your header to the logo, a short menu, the login link and one button.
  3. Rewrite the headline as a plain statement of what members get.
  4. Replace stock or scenic images with something real from your membership.
  5. Remove any carousel and any text placed on a busy photo.
  6. Check that the headline and button appear without scrolling on a phone.

0 Comments

Comments are reviewed before they appear.