Fitness Website How It Works Section Examples

38 real how it works sections from 29 fitness websites

There are 38 how it works sections here, cut from 29 live fitness websites such as Superpower, Headspace and Strava. 15% of the health & fitness sites in the library have a how it works section, higher than the 8% across all websites. 93% of them are light-themed and the most common headline fonts are Nb international pro, Headspace Apercu and Boathouse.

At a glance

Live verified metrics

How it works sections: 38
Sites: 29 of 192 health & fitness sites (15%)
Library-wide: 8% of all websites have one
Per site: 1.3 on average
Light / dark: 93% light · 7% dark
Top heading fonts: Nb international pro, Headspace Apercu and Boathouse
Accent colours: blue 11red 6neutral 4
Leading sites: Superpower, Headspace and Strava

What makes a good how it works section on a fitness website

How-it-works sections reduce a product to three or four steps, each with a small visual, so a visitor can picture using it. Health and fitness products pair aspirational imagery with proof: outcomes, credentials and membership pricing. Compare these examples with how it works sections from every industry, or see the full homepages on the fitness website templates page.

What these 38 how it works sections have in common

On average each one carries 4.2 images or icons, 0.8 buttons and 0.7 links. 9% sit on a dark background, and 46% are taller than half their width — most are compact bands rather than full screens. Headlines range from “Choose from 600+ carefully selected therapists and prescribers” (Cerebral), “Your Complete Care journey” (Parsley Health) to “360° clean, three simple steps, A system for every need.” (Oral-B).

7 how it works sections worth studying

Superpower — “How it works”: It starts with an advanced health check, then so much more. 1 Build your baseline Your first blood draw gives you a comprehensive view of your… (1 buttons, 5 images, background #ffffff).
Headspace: Who we are Think of Headspace as your everyday mental health companion, making it easy to put your mind first with personalized support – from self-guided… (0 buttons, 6 images).
Strava — “It's easy to get started.”: Sign up or log in to your free Strava account. If you’re already subscribed, cancel your current plan first. Add up to three more members. Share… (0 buttons, 3 images, background #ffffff).
Tonal — “DELIVERY & INSTALLATION”: Choose your space and make sure it meets this criteria: 7 ft of unobstructed wall space 7 ft × 7 ft of floor space 7 feet,… (0 buttons, 4 images, background #1c1c1a).
Barry's: WHAT TO EXPECT FIRST TIME UNDER THE RED LIGHTS? 1. What to Expect: Get to the studio 15 minutes before class. This gives us time to… (0 buttons, 6 images, background #ffffff).
Runna — “How it works”: Runna is simple, intuitive, and designed for runners of all levels. Whether you're training for your first 5K or looking to smash a marathon PB, you'll… (1 buttons, 4 images, background #ffffff).
Ultrahuman — “How it works”: Submit a brief application for an Ultrahuman Ring AIR developer kit. Applications will be reviewed and priority will be given to applicants creating an app that… (1 buttons, 4 images, background #eeeeee).

How to use these how it works references

Count the steps and look at how each is illustrated; three or four steps with one visual each is the common pattern. For a health or fitness brand, look at how outcomes, credentials and membership offers are balanced with aspiration. Start with Superpower, Headspace and Strava, click a section to open it at full size and copy its build prompt, palette and fonts.