# Hero-sektion: designa webbplatsens första skärm

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

Besökare avgör om de stannar innan de scrollar. Hero-sektionen är där de avgör det, så varje ord och pixel i den ska förtjäna sin plats.

## The short version

- En hero-sektion är en webbplats första helskärmsvy, och den ska säga vad produkten är, vem den är för och vad man ska göra härnäst.
- De viktigaste delarna är en rubrik, en stödrad, en primär uppmaning till handling och en bild som visar produkten eller sätter stämningen.
- Specifika rubriker som nämner ett resultat fungerar bättre än slagord som skulle kunna tillhöra vilket företag som helst.
- En hero behöver en huvudhandling. En andra, lugnare länk är okej, men fler val späder ut den.
- Designa telefonversionen med avsikt, eftersom många besökare ser hero-sektionen först på en smal skärm.

Bra **design av hero-sektionen** svarar på tre frågor innan någon scrollar: vad är det här, är det för mig och vad gör jag härnäst. Hero-sektionen är sajtens första skärm, oftast en rubrik, en stödmening, en enda huvudknapp och en bild. Allt annat (logotyper, märken, en andra knapp, en karusell) måste motivera det utrymme det tar från de fyra. Den här guiden går igenom orden, layouten och bygget. För bara bakgrunden, se [bakgrunder till hero-sektioner](https://gradiently.design/sv/guide/website-hero-background).

## Vad som ingår i en hero-sektion

| Del | Uppgift | Typisk längd |
| --- | --- | --- |
| Överrad (valfri) | Sammanhang eller en kategori: ”För fristående kaféer” | 2 till 5 ord |
| Rubrik | Löftet, med läsarens egna ord | 4 till 10 ord |
| Stödrad | Hur det fungerar eller vad som skiljer det | En mening, 15 till 25 ord |
| Primär knapp | Det enda nästa steget | 2 till 4 ord |
| Sekundär länk (valfri) | En väg med lägre åtagande: ”Se hur det fungerar” | 2 till 4 ord |
| Bild | Visa produkten, resultatet eller känslan | En bild, en videoloop eller en bakgrund |

Om en del inte hjälper besökaren att avgöra om hen ska stanna hör den hemma längre ner på sidan.

## Att skriva rubriken i hero-sektionen

Rubriken är den svåraste meningen på din webbplats. Kvicka slagord faller eftersom de kunde tillhöra vem som helst. En bra rubrik nämner vem den är för, vad de får eller vilket problem den tar bort, med ord som dina kunder faktiskt använder. Läs den högt bredvid en konkurrents startsida: kan ni byta utan att någon märker det är den inte specifik nog.

| Vagt | Specifikt |
| --- | --- |
| Stärker din tillväxt | Bokföring för frilansare, klar varje fredag |
| Kaffets framtid | Bönor från en enda odling, rostade på måndag, hos dig på torsdag |
| Design gjord enkel | Sociala inlägg som ser ut som ditt varumärke, i varje storlek |
| Din hälsoresa börjar här | Pilates i liten grupp i Leeds, sex personer per pass |
| Innovativa lösningar för moderna team | Delade kalendrar för kliniker som hatar dubbelbokningar |

De specifika versionerna är längre, och det är okej. Tydlighet slår korthet i en rubrik.

Spara stödraden till hur eller beviset, inte en upprepning. För mer om formuleringar hjälper [att skriva text till visuellt material](https://gradiently.design/sv/guide/writing-copy-for-visuals) och [visuell hierarki](https://gradiently.design/sv/guide/visual-hierarchy).

## Tre hero-layouter som fungerar

- **Centrerad.** Rubrik, rad och knapp staplade i mitten över en bakgrund. Stark för varumärken, lanseringar och produkter som är mer en känsla än en skärm.
- **Delad.** Ord till vänster, produktbild eller skärmbild till höger. Bäst när det är argumentet att se produkten: appar, fysiska varor, mat.
- **Helbild eller video.** Ett foto eller en loop fyller skärmen med ord över ett lugnt område. Passar hotell, restauranger, evenemang och portföljer, om läsbarheten sköts ordentligt.

En centrerad hero-sektion för ett kafferosteri med rubrik och stödrad över en varm gradient

Centrerad: orden bär den, bakgrunden sätter stämningen.

En delad hero-sektion för bokningsprogram för kliniker med text till vänster och plats för en produktbild

Delad: ord på ena sidan, plats på den andra för en produktskärmbild.

## Uppmaningen till handling

En primär knapp, visuellt det starkaste elementet efter rubriken. Döp den efter vad som händer härnäst, inte efter ett generiskt verb: ”Starta en gratis provperiod”, ”Boka bord”, ”Se menyn”. Om du lägger till ett andra alternativ, gör det till en lugnare textlänk så att de två aldrig konkurrerar.

### Undvik

- Tre knappar med lika stor vikt
- ”Skicka”, ”Läs mer” eller ”Klicka här”
- En knapp i samma färg som bakgrunden
- Knappen nedanför vecket på en telefon
- En automatiskt spelande karusell med olika budskap

### Gör

- En knapp, en lugnare länk
- En etikett som säger vad som händer härnäst
- En knappfärg som inte används någon annanstans på skärmen
- Rubrik och knapp synliga på en telefon som är 390 px bred
- Ett budskap, väl sagt

## Hero-bakgrunder och läsbarhet

Bakgrunden är halva intrycket och den vanligaste orsaken till att en hero-sektion fallerar. Röriga foton och klara gradienter slåss mot rubriken, och ett mörkt överdrag över allt plattar ut stämningen. Planera ett lugnt område bakom orden, håll de rörigaste detaljerna borta från dem och kontrollera [kontrasten](https://gradiently.design/sv/guide/color-contrast-accessibility) vid varje skärmbredd, eftersom området bakom texten flyttar sig när layouten flödar om.

Här är en Gradiently-Mark användbar: dess lugnaste, mest kontrasterande område flyttas bakom dina ord och textfärgen väljs ur dess egen palett, så rubriken läses i 1920×1080 och på en telefon utan ruta eller skugga. För CSS-lösningar, se [gradientöverdrag](https://gradiently.design/sv/guide/gradient-overlay) och [text på en gradient](https://gradiently.design/sv/guide/text-on-gradient).

## Designa hero-sektionen för telefoner

På en telefon är hero-sektionen smal och hög, så delade layouter staplas och helbilder beskärs hårt. Bestäm vad telefonen visar i stället för att låta det ske: rubriken och knappen ska synas utan att scrolla, bilden kan flyttas ner eller krympa.

- Dator 1920×1080: 1920 × 1080
- Bärbar 1440×900: 1440 × 900
- Telefon 390×844: 390 × 844

Samma hero-sektion i tre vanliga skärmstorlekar. Det som får plats bredvid rubriken på datorn måste hamna över 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` anpassar sig till telefonens synliga skärm, `clamp()` skalar texten mellan telefon och dator, och `text-wrap: balance` jämnar ut rubrikens rader.

## En checklista för hero-sektionen

1. **Skriv rubriken först** Innan du väljer bilder, skriv fem rubriker och välj den mest specifika. Layouten följer orden.
2. **Skär ner till en handling** Välj det enda nästa steg du helst vill att de flesta besökare tar, och gör det till den enda knappen.
3. **Välj en bild som bevisar eller sätter stämningen** En skärmbild, ett produktfoto eller en bakgrund som bär varumärket. Inte ett arkivfoto på människor som pekar på bärbara datorer.
4. **Kontrollera läsbarheten överallt** Ändra webbläsarens storlek från bred till smal och följ texten mot bakgrunden hela vägen.
5. **Håll den snabb** Hero-bilden är ofta det största på sidan. Dimensionera den ordentligt och leverera [WebP eller AVIF](https://gradiently.design/sv/guide/webp-images).

Hero-sektionen öppnar sidan. Resten av sidan måste hålla löftet. [Design av landningssidor](https://gradiently.design/sv/guide/landing-page-design) går igenom avsnitten som följer.

## FAQ

### Vad är en hero-sektion på en webbplats?

Sidans första helskärmsvy, ovanför vecket. Den innehåller oftast en rubrik, en stödrad, en huvudknapp och en bild.

### Vad ska rubriken i en hero-sektion säga?

Vad produkten gör och för vem, med kundens egna ord. Specifika resultat slår breda slagord.

### Hur många knappar ska en hero-sektion ha?

En primär knapp. En andra, lugnare textlänk för ett alternativ med lägre åtagande är okej, men fler val försvagar huvudknappen.

### Hur stor ska en hero-bild vara?

Designa i 1920×1080 för dator och ta fram mindre versioner till telefoner via `srcset`, så att mobilbesökare laddar ner en lättare fil.

### Ska en hero-sektion fylla hela skärmen?

Inte nödvändigtvis. En helskärms-hero passar varumärkesledda sajter. Produktsajter tjänar ofta på en kortare hero som antyder innehållet nedanför.