# Design af landingssider: en struktur, der konverterer

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

En landingsside er ét argument med én afslutning. Her er rækkefølgen, argumentet skal føres i, et gennemarbejdet eksempel, du kan kopiere, og de designvalg, der holder folk i gang ned ad siden.

## The short version

- En landingsside er en selvstændig side bygget til ét mål, som en tilmelding, en booking eller et køb.
- En pålidelig struktur er hero, problem, sådan virker det, bevis, tilbuddets detaljer, indvendinger og en afsluttende opfordring til handling.
- Siden bør matche annoncen, opslaget eller e-mailen, der sendte den besøgende, i både ord og udtryk.
- Fjerner du sitets navigation og ekstra links, holdes opmærksomheden på den ene handling, siden findes for.
- Test ændringer én ad gangen mod dine egne tal i stedet for at stole på generelle benchmarks.

Godt **design af landingssider** er ét mål, argumenteret i rækkefølge. I modsætning til en forside, der betjener alle, findes en landingsside for én besøgende, der kommer fra ét sted for at tage én handling: booke prøvetimen, skrive sig på ventelisten, sikre sig tilbuddet. Den struktur, der virker igen og igen, er en tydelig hero, problemet med læserens egne ord, hvordan det virker, bevis, tilbuddets detaljer, svar på indvendinger og den samme opfordring til handling til sidst. Designets opgave er at gøre den rækkefølge ubesværet at følge.

## Én side, ét mål

Skriv målet ned som én sætning, før du designer noget: »Få førstegangsbesøgende fra vores Instagram-annonce til at booke en gratis introtime.« Så har hver sektion en test. Hjælper den denne person med at tage dette skridt? Hvis ikke, så skær den væk, eller flyt den til hovedsitet.

### Forside

- Betjener alle slags besøgende
- Fuld navigation og mange links
- Flere produkter eller ydelser
- Forklarer hele virksomheden

### Landingsside

- Betjener én målgruppe fra én kilde
- Ingen navigation, eller kun et logo
- Ét tilbud
- Fører ét argument og spørger én gang, og så igen

## Landingssidens struktur, sektion for sektion

1. **Hero** Overskrift med løftet, én støttelinje, én knap, ét visuelt element. [Design af hero-sektionen](https://gradiently.design/da/guide/hero-section-design) gennemgår denne skærm i detaljer.
2. **Problemet** To eller tre sætninger, der beskriver den situation, den besøgende står i, med deres egne ord. Det viser, at du forstår, før du sælger.
3. **Sådan virker det** Tre trin, hver med en kort titel og en sætning. Folk forpligter sig lettere, når de kan forestille sig forløbet.
4. **Bevis** Rigtige udtalelser med navne, fotos af rigtigt arbejde, logoer fra rigtige kunder eller en kort demo. Aldrig opdigtet.
5. **Tilbuddet i detaljer** Hvad de præcis får, hvornår, og hvad det koster eller ikke koster. Klare vilkår fjerner tøven.
6. **Indvendinger** En kort FAQ, der besvarer grundene til, at folk ikke handler: tid, pris, om det passer, afmelding, hvad der sker bagefter.
7. **Afsluttende opfordring til handling** Gentag løftet fra overskriften og den samme knap. Besøgende, der læser til ende, er klar; tving dem ikke til at scrolle op igen.

Ikke alle sider har brug for alle sektioner. En venteliste til en lancering kan være bare en hero, tre linjer om, hvordan det virker, og et e-mailfelt. Et tilbud, der kræver en stor forpligtelse, som et kursus eller en konsultation, har som regel brug for alle syv og mere bevis.

## Et gennemarbejdet eksempel: et introtilbud fra et yogastudie

| Sektion | Hvad siden siger |
| --- | --- |
| Hero | »Din første time er på os.« Støttelinje: »Små, begyndervenlige hold i Bristol, seks dage om ugen.« Knap: »Book din gratis time« |
| Problem | »Store holdtimer i fitnesscentret går hurtigt, og ingen tjekker din teknik. Det er svært at starte, når man ikke ved, hvad man laver.« |
| Sådan virker det | Vælg et begynderhold. Kom ti minutter før, måtter findes. Bliv til en snak på fem minutter om, hvad der passer dig. |
| Bevis | Tre korte anmeldelser fra rigtige medlemmer med fornavne og fotos plus billeder af selve studiet. |
| Tilbud | Én gratis time for nye elever, enhver begyndertime, intet kort påkrævet. |
| Indvendinger | »Jeg er ikke smidig.« »Hvad skal jeg have på?« »Er der parkering?« »Hvad sker der efter den gratis time?« |
| Afsluttende opfordring til handling | »Kom og prøv en time.« Samme knap: »Book din gratis time« |

Hver linje besvarer et spørgsmål, en nervøs begynder faktisk har. Samme struktur virker til en tandlæges tilbud om eftersyn eller en prøveperiode på software.

## Match siden med annoncen, der sendte dem

De fleste besøgende på en landingsside kommer fra noget: en [Instagram-annonce](https://gradiently.design/da/guide/instagram-ad-design), en LinkedIn-annonce, en e-mail, en QR-kode på en flyer. I det øjeblik de lander, tjekker de, at de er det rigtige sted. Gentag annoncens præcise tilbud i overskriften, og tag dens udtryk med: samme baggrund, farver og skrift. En side, der ser urelateret ud til annoncen, føles som lokkemad, selv når den ikke er det.

En stående Instagram-annonce for et yogastudie, der tilbyder en gratis første time

Instagram-annoncen i 1080×1350.

En bred hero på en landingsside, der gentager samme tilbud om en gratis første time og samme baggrund som annoncen

Landingssidens hero i 1920×1080: samme ord, samme udtryk, så ingen er i tvivl om, at de klikkede på det rigtige link.

Designer du begge ud fra én kilde, sker det automatisk. I Gradiently kan ét design med Pro tilpasses til alle størrelser i ét trin, så opslaget, storyen, e-mailens header og sidens hero deler én Mark og én overskrift. [Ét udtryk, alle størrelser](https://gradiently.design/da/guide/one-look-every-size) viser arbejdsgangen, og [brandkonsistens](https://gradiently.design/da/guide/brand-consistency) forklarer, hvorfor det betyder noget ud over én kampagne.

## Designvalg, der får folk til at blive ved med at scrolle

- **Én accentfarve til alle knapper**, brugt ingen andre steder. Øjet lærer, hvor det skal klikke. [60-30-10-reglen](https://gradiently.design/da/guide/60-30-10-rule) er en god måde at finde balancen på.
- **Generøs luft mellem sektionerne**, så hver læses som én idé. Overfyldte sider føles som hårdt arbejde.
- **Overskrifter, der giver mening for sig selv.** Mange skimmer kun overskrifterne; de bør fortælle hele historien.
- **Rigtige fotos frem for stockfotos.** Dit faktiske lokale, produkt, team eller resultater.
- **Korte formularer.** Spørg kun om det, du har brug for nu. En e-mailadresse er lettere at give end et telefonnummer.
- **Ingen navigationsmenu**, eller kun et logo, så der ikke er noget sted at vandre hen.

- Sidebund: #fbf7f2
- Sektionsbånd: #efe6da
- Tekst: #2b2a33
- Sekundær tekst: #6b6670
- Kun knapper: #c2410c

En rolig palet til en landingsside: to varme bunde, der skifter mellem sektionerne, to tekstfarver og én accent reserveret til opfordringen til handling.

## Mobil først, test derefter

Trafik fra opslag på sociale medier kommer mest fra telefoner, så design versionen i 390 pixels bredde først. Hold overskrift og knap på første skærm, gør knapper mindst 44 pixels høje, og brug kun en fastgjort knap, hvis den ikke dækker indhold.

### Undgå

- At ændre fem ting på én gang og gætte, hvad der virkede
- At kopiere en konverteringsrate fra et blogindlæg som dit mål
- Popups, der dukker op, før den besøgende har læst noget
- En formular med ti felter for at downloade en guide

### Gør

- Ændr én ting, som overskriften, og sammenlign
- Mål mod din egen tidligere version
- Lad folk læse tilbuddet, før du beder om noget
- Spørg om det mindste, og lær mere senere

Der findes ingen universelt god konverteringsrate; den afhænger af tilbuddet, prisen og trafikken. Det, du altid kan gøre, er at gøre næste version tydeligere end den forrige. Farverne bag det hele finder du i [farveskemaer til websites](https://gradiently.design/da/guide/website-color-scheme).

## FAQ

### Hvad er den bedste struktur til en landingsside?

Hero, problem, sådan virker det, bevis, tilbuddets detaljer, indvendinger og en afsluttende opfordring til handling. Korte tilbud kan springe sektioner over; større forpligtelser har brug for dem alle.

### Skal en landingsside have navigation?

Som regel ikke. Fjerner du menuen, holdes opmærksomheden på den ene handling, siden findes for; et logo er nok.

### Hvor lang skal en landingsside være?

Så lang, som det kræver at besvare den besøgendes spørgsmål. En gratis venteliste kan være én skærm, mens et betalt kursus ofte kræver en lang side med detaljeret bevis og FAQ.

### Hvad er forskellen på en landingsside og en forside?

En forside betjener alle besøgende og linker overalt. En landingsside betjener én målgruppe fra én kilde og beder om én handling.

### Skal min landingsside ligne min annonce?

Ja. Gentag annoncens tilbud i overskriften, og behold dens farver og baggrund, så besøgende med det samme ved, at de er det rigtige sted.