Den första skärmen på er hemsida — hero-sektionen — är den viktigaste delen av hela sajten. Inte för att den är den enda som spelar roll, utan för att om den misslyckas så spelar resten ingen roll.

En besökare som inte förstår vad ni gör inom fem sekunder skrollar inte vidare. De stänger fliken.

Här är formula för en hero som faktiskt fungerar.

De fyra komponenterna

En bra hero-sektion innehåller fyra saker:

1. Huvudrubrik som säger vad ni gör. Konkret, inte vagt.

2. Underrubrik som specificerar för vem och var. Stadsdel, etablering, eller målgrupp.

3. Riktig bild eller video. Från verksamheten, inte stockfoto.

4. En tydlig primär CTA. “Boka tid”, “Ring oss”, “Kontakta oss”.

Allt synligt utan att skrolla. Allt klart inom fem sekunder.

Huvudrubriken

Här går flest hemsidor fel. De vanligaste typerna av dåliga huvudrubriker:

Välkomstmeningar:

  • “Välkommen till oss”
  • “Hej och välkommen!”

Floskler:

  • “Tillsammans skapar vi möjligheter”
  • “Kvalitet och engagemang sedan 2015”
  • “Vi hjälper dig att se ditt bästa ut”

För kreativa formuleringar:

  • “En oas av lugn i stadens puls”
  • “Där varje detalj betyder allt”

Inget av detta säger vad företaget faktiskt gör. För en främling som söker en specifik tjänst är det inte aktivt informativt.

Bra huvudrubrik säger:

  • Vad ni är (frisörsalong, restaurang, klinik, hantverksföretag)
  • Vad ni specialiserat på (om relevant)
  • Var ni är (stadsdel eller stad)

Exempel:

  • “Frisörsalong i Vasastan — herrklippning och skäggtrim”
  • “Italiensk restaurang i Linnéstaden, Göteborg”
  • “Tandläkare i Lund — specialister på tandskräck”
  • “Rörmokare i hela Stockholm — akut samma dag”

Konkret slår vacker, varje gång.

Underrubriken

Under huvudrubriken kommer ofta en underrubrik som ger lite mer kontext. Bra underrubriker innehåller:

  • Etablering (“sedan 2018”, “bedriven sedan 1992”)
  • Specialitet (“specialiserade på drop-in”, “sömnsvård för barn”)
  • Tillgänglighet (“öppet 7 dagar i veckan”, “akuta tider varje vardag”)
  • Hur man bokar (“drop-in eller boka via knappen”, “ring 08-XXX för akut”)

Hellre 2-3 specifika fakta än en lyrisk vacker mening. Underrubriken ska fördjupa huvudrubriken med praktisk information.

Bilden

Hero-bilden är ofta den största visuella delen av sidan. Här tre regler:

1. Riktig. Från lokalen, från personalen, från ert arbete. Inte stockfoto.

2. Tematiskt relevant. Bilden ska visa något om er verksamhet. En frisör visar lokalen eller arbetet. En restaurang visar maten eller atmosfären. En hantverkare visar ett jobb.

3. Inte en distraktion. Bilden ska stödja, inte konkurrera med, texten. Kontrasten mellan text och bakgrund ska vara tillräcklig för läsbarhet.

För video-bakgrund: kort, dämpad, lågt ljud. Inte distraherande. Och alltid med en still-bild som fallback.

Den primära CTA:n

En tydlig primär CTA — en knapp som dominerar — är vad som leder besökaren till nästa steg.

Bra CTA-design:

  • Färgen sticker ut mot resten av sidan
  • Texten är konkret (“Boka tid”, “Ring 08-XXX”, “Kontakta oss”)
  • Storleken är tillräcklig (minst 44×44 pixel för mobilträffsäkerhet)
  • Plats är logisk — slutet av hero-sektionen, inom första skärmen

Vanliga misstag:

  • Tre eller fyra CTA-knappar som tävlar om uppmärksamhet
  • “Läs mer”-knapp som inte säger vart den leder
  • CTA längst ner på sidan, kräver skrollning
  • CTA i samma färg som resten (försvinner)

En knapp. Tydlig. Synlig. Det vinner.

Specifika exempel

Bra: Frisör

Huvudrubrik: “Herrfrisör i Vasastan, Stockholm” Underrubrik: “Klassisk herrklippning, skäggtrim och styling. Drop-in eller boka tid sedan 2018.” Bild: Lokalen sett från entrén CTA: “Boka tid”

Bra: Restaurang

Huvudrubrik: “Italiensk restaurang i Linnéstaden” Underrubrik: “Pasta från grunden, pizza från vedugn. Öppet sju dagar i veckan.” Bild: En signaturrätt CTA: “Boka bord”

Bra: Hantverkare (rörmokare)

Huvudrubrik: “Rörmokare i Stockholm — öppet 7-19” Underrubrik: “Akuta jobb samma dag. Stamspolning, badrumsrenovering, vattenläckor. Sedan 2002.” Bild: En proffsbild av rörmokaren i arbete CTA: “Ring 08-XXX XX XX”

Snabb-audit

Visa er hero-sektion för någon som inte känner till företaget. Räkna fem sekunder. Stäng skärmen. Fråga:

Vill du gå djupare? Läs Hemsidan som faktiskt skapar kunder för helheten, eller Bygga förtroende på 5 sekunder för förtroendedelen specifikt.