# Design af hero-sektion: den første skærm på din hjemmeside

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

Besøgende beslutter, om de bliver, før de scroller. Det er i heroen, de beslutter sig, så hvert ord og hver pixel i den skal gøre sig fortjent til pladsen.

## The short version

- En hero-sektion er den første fulde skærm på en hjemmeside, og den skal sige, hvad produktet er, hvem det er til, og hvad man skal gøre nu.
- Kernedelene er en overskrift, en støttende linje, én primær opfordring til handling og et visuelt element, der viser produktet eller sætter stemningen.
- Konkrete overskrifter, der nævner et resultat, virker bedre end slogans, der kunne tilhøre enhver virksomhed.
- En hero skal have én hovedhandling; et andet, mere afdæmpet link er fint, men flere valg udvander den.
- Design telefonversionen bevidst, for mange besøgende ser heroen første gang på en smal skærm.

Godt **design af en hero-sektion** besvarer tre spørgsmål, før nogen scroller: hvad er det her, er det til mig, og hvad gør jeg nu. Heroen er den første skærm på dit site, som regel en overskrift, én støttende sætning, én hovedknap og et visuelt element. Alt andet (logoer, mærker, en ekstra knap, en karrusel) skal retfærdiggøre den plads, det tager fra de fire. Denne guide dækker ordene, layoutet og opbygningen; for selve baggrunden, se [hero-baggrunde til hjemmesider](https://gradiently.design/da/guide/website-hero-background).

## Hvad hører til i en hero-sektion

| Del | Opgave | Typisk længde |
| --- | --- | --- |
| Overlinje (valgfri) | Kontekst eller en kategori: »Til uafhængige caféer« | 2 til 5 ord |
| Overskrift | Løftet, med læserens ord | 4 til 10 ord |
| Støttende linje | Hvordan det virker, eller hvad der gør det anderledes | Én sætning, 15 til 25 ord |
| Primær knap | Det ene næste skridt | 2 til 4 ord |
| Sekundært link (valgfrit) | En vej med mindre forpligtelse: »Se, hvordan det virker« | 2 til 4 ord |
| Visuelt element | Vis produktet, resultatet eller følelsen | Ét billede, en videoloop eller en baggrund |

Hjælper en del ikke den besøgende med at beslutte, om de vil blive, hører den til længere nede på siden.

## Skriv overskriften til heroen

Overskriften er den sværeste sætning på dit site. Smarte slogans fejler, fordi de kunne tilhøre hvem som helst. En god overskrift nævner, hvem det er til, hvad de får, eller hvilket problem det fjerner, med ord dine kunder faktisk bruger. Læs den højt ved siden af en konkurrents forside: hvis du kunne bytte dem om, uden at nogen opdagede det, er den ikke konkret nok.

| Vag | Konkret |
| --- | --- |
| Vi styrker din vækst | Bogføring for freelancere, klaret hver fredag |
| Fremtidens kaffe | Single origin-bønner, ristet mandag, ved din dør torsdag |
| Design gjort enkelt | Opslag til sociale medier, der ligner dit brand, i alle størrelser |
| Din wellnessrejse starter her | Pilates på små hold i Leeds, seks personer pr. hold |
| Innovative løsninger til moderne teams | Fælles kalendere til klinikker, der hader dobbeltbookinger |

De konkrete versioner er længere, og det er fint. Klarhed slår korthed i en overskrift.

Brug den støttende linje til hvordan eller beviset, ikke til en gentagelse. Mere om formuleringer finder du i [tekst til visuelt indhold](https://gradiently.design/da/guide/writing-copy-for-visuals) og [visuelt hierarki](https://gradiently.design/da/guide/visual-hierarchy).

## Tre hero-layouts, der virker

- **Centreret.** Overskrift, linje og knap stablet i midten over en baggrund. Stærkt til brands, lanceringer og produkter, der mere er en følelse end en skærm.
- **Delt.** Ord til venstre, produktbillede eller skærmbillede til højre. Bedst, når det er produktet selv, der er argumentet: apps, fysiske varer, mad.
- **Billede eller video i fuld bredde.** Et foto eller en loop fylder skærmen med ord over et roligt område. Passer til hoteller, restauranter, events og porteføljer, hvis læsbarheden håndteres ordentligt.

En centreret hero til et kafferisteri med overskrift og støttende linje over en varm gradient

Centreret: ordene bærer den, baggrunden sætter stemningen.

En delt hero til bookingsoftware for klinikker med tekst til venstre og plads til et produktbillede

Delt: ord på den ene side, plads på den anden til et skærmbillede af produktet.

## Opfordringen til handling

Én primær knap, visuelt det stærkeste element efter overskriften. Giv den en tekst, der siger, hvad der sker nu, ikke et generisk verbum: »Start en gratis prøveperiode«, »Book et bord«, »Se menukortet«. Tilføjer du en sekundær mulighed, så gør den til et mere afdæmpet tekstlink, så de to aldrig konkurrerer.

### Undgå

- Tre knapper med samme vægt
- »Send«, »Læs mere« eller »Klik her«
- En knap i samme farve som baggrunden
- Knappen under folden på en telefon
- En karrusel med forskellige budskaber, der kører af sig selv

### Gør

- Én knap, ét mere afdæmpet link
- En tekst, der siger, hvad der sker nu
- En knapfarve, der ikke bruges andre steder på skærmen
- Overskrift og knap synlige på en telefon, der er 390 px bred
- Ét budskab, sagt godt

## Hero-baggrunde og læsbarhed

Baggrunden er halvdelen af indtrykket og den mest almindelige grund til, at en hero fejler. Travle fotos og klare gradienter kæmper mod overskriften, og et mørkt lag over det hele gør stemningen flad. Planlæg et roligt område bag ordene, hold de travleste detaljer væk fra dem, og tjek [kontrasten](https://gradiently.design/da/guide/color-contrast-accessibility) i alle skærmbredder, for området bag teksten flytter sig, når layoutet ombrydes.

Her er en Gradiently Mark nyttig: dens roligste område med bedst kontrast flytter sig bag dine ord, og skriftfarven vælges fra dens egen palet, så overskriften kan læses i 1920×1080 og på en telefon uden en boks eller en skygge. Til CSS-tilgange, se [gradient-overlay](https://gradiently.design/da/guide/gradient-overlay) og [tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient).

## Design heroen til telefoner

På en telefon er heroen smal og høj, så delte layouts stables, og billeder i fuld bredde beskæres hårdt. Beslut selv, hvad telefonen viser, i stedet for at lade det ske: overskriften og knappen skal være synlige uden at scrolle, mens det visuelle element kan flytte ned eller blive mindre.

- Desktop 1920×1080: 1920 × 1080
- Bærbar 1440×900: 1440 × 900
- Telefon 390×844: 390 × 844

Den samme hero i tre almindelige skærmstørrelser. Det, der passer ved siden af overskriften på desktop, skal over eller under den på en telefon.

```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` tilpasser sig telefonens synlige skærm, `clamp()` skalerer skriften mellem telefon og desktop, og `text-wrap: balance` udligner overskriftens linjer.

## En tjekliste til hero-sektionen

1. **Skriv overskriften først** Før du vælger billeder, så skriv fem overskrifter, og vælg den mest konkrete. Layoutet følger ordene.
2. **Skær ned til én handling** Vælg det ene næste skridt, du vil have de fleste besøgende til at tage, og gør det til den eneste knap.
3. **Vælg et visuelt element, der beviser eller sætter stemningen** Et skærmbillede, et produktfoto eller en baggrund, der bærer brandet. Ikke et stockfoto af folk, der peger på bærbare computere.
4. **Tjek læsbarheden overalt** Træk browseren fra bred til smal, og hold øje med teksten mod baggrunden hele vejen.
5. **Hold den hurtig** Herobilledet er ofte det største på siden. Giv det den rigtige størrelse, og server [WebP eller AVIF](https://gradiently.design/da/guide/webp-images).

Heroen åbner siden; resten af siden skal holde løftet. [Design af landingssider](https://gradiently.design/da/guide/landing-page-design) dækker de sektioner, der følger.

## FAQ

### Hvad er en hero-sektion på en hjemmeside?

Den første fulde skærm på en side, over folden. Den indeholder som regel en overskrift, en støttende linje, en hovedknap og et visuelt element.

### Hvad skal overskriften i en hero-sektion sige?

Hvad produktet gør, og for hvem, med kundens egne ord. Konkrete resultater slår brede slogans.

### Hvor mange knapper skal en hero-sektion have?

Én primær knap. Et andet, mere afdæmpet tekstlink til en mulighed med mindre forpligtelse er fint, men flere valg svækker hovedknappen.

### Hvilken størrelse skal et herobillede have?

Design i 1920×1080 til desktop, og lever mindre versioner til telefoner via `srcset`, så mobilbesøgende henter en lettere fil.

### Skal en hero-sektion fylde hele skærmen?

Ikke nødvendigvis. En hero i fuld skærm passer til brandfokuserede sites; produktsites har ofte gavn af en kortere hero, der antyder indholdet nedenunder.