# Hero-sectie ontwerpen: het eerste scherm van je website

[Canonical HTML page](https://gradiently.design/nl/guide/hero-section-design)

Bezoekers beslissen of ze blijven voordat ze scrollen. De hero is waar ze dat beslissen, dus elk woord en elke pixel moet zijn plek verdienen.

## The short version

- Een hero-sectie is het eerste volledige scherm van een website en zegt wat het product is, voor wie het is en wat je nu doet.
- De kernonderdelen zijn een kop, een ondersteunende regel, één hoofdoproep tot actie en een beeld dat het product toont of de sfeer zet.
- Specifieke koppen die een resultaat noemen werken beter dan slogans die bij elk bedrijf kunnen horen.
- Een hero heeft één hoofdactie nodig; een tweede, rustigere link kan, maar meer keuzes verwateren hem.
- Ontwerp de telefoonversie bewust, want veel bezoekers zien de hero eerst op een smal scherm.

Een goed **hero-sectieontwerp** beantwoordt drie vragen voordat iemand scrolt: wat is dit, is het iets voor mij en wat doe ik nu. De hero is het eerste scherm van je site: meestal een kop, één ondersteunende zin, één hoofdknop en een beeld. Al het andere (logo’s, badges, een tweede knop, een carrousel) moet de ruimte rechtvaardigen die het van die vier afsnoept. Deze gids behandelt de woorden, de lay-out en de bouw; voor alleen de achtergrond zie je [hero-achtergronden voor websites](https://gradiently.design/nl/guide/website-hero-background).

## Wat er in een hero-sectie staat

| Onderdeel | Taak | Gebruikelijke lengte |
| --- | --- | --- |
| Eyebrow (optioneel) | Context of een categorie: ‘Voor onafhankelijke koffiebars’ | 2 tot 5 woorden |
| Kop | De belofte, in de woorden van de lezer | 4 tot 10 woorden |
| Ondersteunende regel | Hoe het werkt of wat het anders maakt | Eén zin, 15 tot 25 woorden |
| Hoofdknop | De ene volgende stap | 2 tot 4 woorden |
| Tweede link (optioneel) | Een weg met minder verplichting: ‘Zie hoe het werkt’ | 2 tot 4 woorden |
| Beeld | Toon het product, het resultaat of het gevoel | Eén afbeelding, videoloop of achtergrond |

Helpt een onderdeel de bezoeker niet te beslissen of hij blijft, dan hoort het verderop op de pagina.

## De hero-kop schrijven

De kop is de moeilijkste zin op je site. Slimme slogans falen omdat ze bij iedereen kunnen horen. Een goede noemt voor wie het is, wat ze krijgen of welk probleem verdwijnt, in woorden die je klanten echt gebruiken. Lees hem hardop naast de homepage van een concurrent: kun je ze verwisselen zonder dat iemand het merkt, dan is hij niet specifiek genoeg.

| Vaag | Specifiek |
| --- | --- |
| Jouw groei versterken | Boekhouding voor freelancers, elke vrijdag bijgewerkt |
| De toekomst van koffie | Single origin bonen, maandag gebrand, donderdag bij je thuis |
| Ontwerp, eenvoudig gemaakt | Social posts die eruitzien als je merk, in elk formaat |
| Hier begint je welzijnsreis | Pilates in kleine groepen in Leeds, zes personen per les |
| Innovatieve oplossingen voor moderne teams | Gedeelde agenda’s voor praktijken die een hekel hebben aan dubbele boekingen |

De specifieke versies zijn langer, en dat is prima. Duidelijkheid wint van kortheid in een kop.

Bewaar de ondersteunende regel voor het hoe of het bewijs, niet voor een herhaling. Voor meer over formuleren helpen [teksten schrijven voor beeld](https://gradiently.design/nl/guide/writing-copy-for-visuals) en [visuele hiërarchie](https://gradiently.design/nl/guide/visual-hierarchy).

## Drie hero-lay-outs die werken

- **Gecentreerd.** Kop, regel en knop gestapeld in het midden boven een achtergrond. Sterk voor merken, lanceringen en producten die meer een gevoel zijn dan een scherm.
- **Gesplitst.** Woorden links, productbeeld of screenshot rechts. Het best als het product zien het argument is: apps, fysieke producten, eten.
- **Beeld of video over de volle breedte.** Een foto of loop vult het scherm met woorden over een rustig gebied. Past bij hotels, restaurants, evenementen en portfolio’s, mits de leesbaarheid goed geregeld is.

Een gecentreerde websitehero voor een koffiebrander met kop en ondersteunende regel over een warme gradiënt

Gecentreerd: de woorden dragen het, de achtergrond zet de sfeer.

Een gesplitste websitehero voor planningssoftware voor praktijken met tekst links en ruimte voor een productafbeelding

Gesplitst: woorden aan de ene kant, ruimte aan de andere voor een screenshot van het product.

## De oproep tot actie

Eén hoofdknop, visueel het sterkste element na de kop. Label hem met wat er daarna gebeurt, niet met een algemeen werkwoord: ‘Start een gratis proef’, ‘Reserveer een tafel’, ‘Bekijk het menu’. Voeg je een tweede optie toe, maak er dan een rustigere tekstlink van, zodat de twee nooit concurreren.

### Vermijd

- Drie knoppen van gelijk gewicht
- ‘Verzenden’, ‘Meer informatie’ of ‘Klik hier’
- Een knop in dezelfde kleur als de achtergrond
- De knop onder de vouw op een telefoon
- Een automatisch afspelende carrousel met verschillende boodschappen

### Doe

- Eén knop, één rustigere link
- Een label dat zegt wat er daarna gebeurt
- Een knopkleur die nergens anders op het scherm voorkomt
- Kop en knop zichtbaar op een telefoon van 390 px breed
- Eén boodschap, goed verteld

## Hero-achtergronden en leesbaarheid

De achtergrond is de helft van de indruk en de meest voorkomende reden waarom een hero faalt. Drukke foto’s en felle gradiënten vechten met de kop en een donkere overlay over alles vlakt de sfeer af. Plan een rustig gebied achter de woorden, houd het drukste detail daarvandaan en controleer het [contrast](https://gradiently.design/nl/guide/color-contrast-accessibility) bij elke schermbreedte, want het gebied achter de tekst verschuift als de lay-out herschikt.

Hier is een Gradiently Mark nuttig: zijn rustigste, best contrasterende zone schuift achter je woorden en de letterkleur wordt gekozen uit zijn eigen palet, zodat de kop leest op 1920×1080 en op een telefoon, zonder vak of schaduw. Voor CSS-aanpakken zie je [gradiëntoverlay](https://gradiently.design/nl/guide/gradient-overlay) en [tekst op een gradiënt](https://gradiently.design/nl/guide/text-on-gradient).

## De hero ontwerpen voor telefoons

Op een telefoon is de hero smal en hoog, dus gesplitste lay-outs stapelen en beelden over de volle breedte worden fors bijgesneden. Beslis wat de telefoon toont in plaats van het te laten gebeuren: kop en knop moeten zichtbaar zijn zonder scrollen, het beeld kan eronder of kleiner.

- Desktop 1920×1080: 1920 × 1080
- Laptop 1440×900: 1440 × 900
- Telefoon 390×844: 390 × 844

Dezelfde hero op drie gangbare viewportformaten. Wat op desktop naast de kop past, moet op een telefoon erboven of eronder.

```css
.hero {
  min-height: min(100svh, 56rem);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.hero p {
  max-width: 40ch;
  margin-inline: auto;
}
```

`svh` past zich aan het zichtbare telefoonscherm aan, `clamp()` schaalt het lettertype tussen telefoon en desktop en `text-wrap: balance` verdeelt de regels van de kop gelijkmatig.

## Een checklist voor je hero-sectie

1. **Schrijf eerst de kop** Schrijf voordat je beelden kiest vijf koppen en kies de meest specifieke. De lay-out volgt de woorden.
2. **Kort in tot één actie** Kies de ene volgende stap die de meeste bezoekers moeten zetten en maak die de enige knop.
3. **Kies een beeld dat bewijst of de sfeer zet** Een screenshot, een productfoto of een achtergrond die het merk draagt. Geen stockfoto van mensen die naar laptops wijzen.
4. **Controleer de leesbaarheid overal** Verklein de browser van breed naar smal en let de hele weg op de tekst tegen de achtergrond.
5. **Houd het snel** De heroafbeelding is vaak het grootste op de pagina. Geef hem het juiste formaat en lever [WebP of AVIF](https://gradiently.design/nl/guide/webp-images).

De hero opent de pagina; de rest van de pagina moet de belofte waarmaken. [Landingspagina ontwerpen](https://gradiently.design/nl/guide/landing-page-design) behandelt de secties die volgen.

## FAQ

### Wat is een hero-sectie op een website?

Het eerste volledige scherm van een pagina, boven de vouw. Meestal bevat het een kop, een ondersteunende regel, een hoofdknop en een beeld.

### Wat moet de kop van een hero-sectie zeggen?

Wat het product doet en voor wie, in de eigen woorden van de klant. Specifieke resultaten winnen van brede slogans.

### Hoeveel knoppen moet een hero-sectie hebben?

Eén hoofdknop. Een tweede, rustigere tekstlink voor een optie met minder verplichting kan, maar meer keuzes verzwakken de hoofdknop.

### Hoe groot moet een heroafbeelding zijn?

Ontwerp op 1920×1080 voor desktop en lever kleinere versies voor telefoons via `srcset`, zodat mobiele bezoekers een lichter bestand downloaden.

### Moet een hero-sectie het hele scherm vullen?

Niet per se. Een hero over het hele scherm past bij merkgedreven sites; productsites hebben vaak baat bij een kortere hero die hint naar de inhoud eronder.