# Design af link i bio-side: en landingsside til din profil
[Canonical HTML page](https://gradiently.design/da/guide/instagram-bio-link-page)
Det ene link på din profil er der, hvor nysgerrighed bliver til en booking, et salg eller en abonnent. Behandl det som en lillebitte landingsside: ét udtryk, nogle få knapper, intet at afkode.
## The short version
- En link i bio-side er en lille mobil landingsside, der samler de få steder, du vil have profilbesøgende til at gå hen bagefter.
- Det bedste design af en link i bio-side bruger tre til fem knapper, ordnet efter hvad der betyder mest denne uge.
- Besøgende kommer fra en telefon, så design siden til en smal, lodret skærm først, og tjek den i telefonbredde.
- Siden bør have samme baggrund, farver og skrifttyper som dit feed, så trykket føles som at gå ind i den samme butik.
- Når linket deles i en besked, er dets forhåndsvisning en separat grafik på 1200×630, der også er værd at designe.
Godt **design af en link i bio-side** er en kort mobil landingsside: dit navn, én linje om hvad du laver, tre til fem knapper i rækkefølge efter vigtighed og en baggrund, der matcher dit feed, så besøget føles sammenhængende. Næsten alle kommer fra en telefon, direkte fra din profil, med få sekunders opmærksomhed. Hvert valg nedenfor udspringer af det.
## Hvad en link i bio-side skal have, i rækkefølge
Læs siden oppefra og ned, som en besøgende gør. De vil bekræfte, at de er det rigtige sted, se hvad de kan gøre, og gøre det. Alt, der bremser de tre trin, kan fjernes.
| Del | Hvad der skal stå der | Begræns det til |
| --- | --- | --- |
| Identitet | Logo eller foto og dit navn, som det står på din profil | Ét billede, én linje |
| Løfte | Hvad du laver, for hvem, med enkle ord | Under 12 ord |
| Hovedknap | Det, du helst vil denne uge: Book, Køb nyheden, Få billetter | Én, synligt stærkere |
| Andre knapper | To til fire destinationer mere | Verber, ikke sidenavne |
| Sidefod | Små sociale ikoner og kontakt | Afdæmpet, nederst |
Opbygningen af en side, folk faktisk bruger. Sider går som regel galt ved at få en tiende knap, ikke ved at mangle en.
Skriv knapper som handlinger. Book et bord slår Reservationer; Læs det nye nummer slår Nyhedsbrev. De samme principper gælder for al kort tekst på sociale medier, som [tekstforfatning til sociale medier](https://gradiently.design/da/guide/writing-copy-for-visuals) dækker mere indgående.
## Design af baggrunden
Baggrunden er det meste af det, en besøgende ser, og det er der, en side enten ligner dig eller ligner alle andre gratis skabeloner. Design den til en telefonskærm først. Et lodret format på 1080×1920, det samme som en story, er en fornuftig arbejdsstørrelse til billedet, og en ensfarvet baggrund bag det dækker højere skærme og desktop.
En lodret link i bio-side for et keramikstudie med navnet, en kort linje og tre handlinger på en gradientbaggrund
En link i bio-side tegnet i telefonstørrelse: identitet øverst, løfte og så handlingerne, mens baggrunden gør brandarbejdet.
Hold den travleste, lyseste del af baggrunden væk fra der, hvor knapperne står, som regel mod toppen eller et hjørne. Knapper kræver en rolig, jævn flade bag sig, ellers begynder deres tekst at konkurrere med farven.
Lys top, rolig nedre halvdel: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`
Farve og lys i den øverste tredjedel, hvor navnet står, som falder til ro i en dyb, jævn grund bag knapperne.
## Knapper, der ser ud til at kunne trykkes på
### Undgå
- Alle knapper ens, så ingen fører
- Tynde konturer, der forsvinder på en gradient
- Tekst i versaler med bred spatiering, svær at skimme
- Bittesmå knapper pakket tæt sammen
- Emojis, der gør ordenes arbejde
### Gør
- Én udfyldt hovedknap, resten mere afdæmpede
- Massive udfyldninger hentet fra din palet
- Almindelige sætningsbogstaver, ét verbum hver
- Knapper i fuld bredde med god afstand
- Enkle ord, et ikon kun hvis det hjælper
En udfyldt knap i din accentfarve, med de andre i en blødere tone af grunden, giver øjet et oplagt første tryk. Tjek, at hver knaptekst har nok kontrast mod sin egen udfyldning, ikke mod siden: [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) har forholdene.
## Byg din egen link i bio-side
Link i bio-tjenester er hurtige, men en side på dit eget domæne er let at bygge og holder de besøgende på dit site. Her er en komplet, minimal version: en gradientbaggrund i fuld højde, en centreret kolonne og én hovedknap. Sæt dine egne farver og links ind.
```html
Studio Nine
Studio Nine
Handmade ceramics and weekend classes in Bristol.
Book a class
Shop the new pots
Visit the studio
```
Én fil, ingen scripts. Den ensfarvede baggrund på html vises ved overscroll og på skærme, der er højere end gradienten.
Foretrækker du en rigere knap, viser [CSS til gradientknapper](https://gradiently.design/da/guide/css-gradient-button), hvordan du giver hovedknappen lidt dybde uden at få den til at råbe.
## Få siden til at matche dit feed
Trykket fra profil til side skal føles som at åbne en dør i den samme bygning. Brug de farver, skrifttyper og den baggrund, du bruger i dine opslag, så den besøgende aldrig er i tvivl om, hvorvidt de har forladt dig. [Ensartet branding på sociale medier](https://gradiently.design/da/guide/brand-consistency-across-platforms) dækker det bredere system.
- Natgrund: #0b0a1a
- Violet: #4c1d95
- Indigo: #1e1b4b
- Hovedknap: #fbbf24
- Skrift: #f5f3ff
De samme fem farver brugt i feedet, på siden og på knapperne. Ravfarven optræder kun på hovedknappen, og derfor bliver den trykket på.
Det er her, en baggrund, du ejer, betaler sig. En Gradiently Mark er en levende gradient, der gengives i alle de størrelser, du designer i, så dine opslag, stories og sidens baggrund alle kan have præcis det samme udtryk, og ingen andre kan eksportere med den, når du har sikret dig den. Eksportér Marken i 1080×1920 med Pro, som holder den i fuld størrelse uden vandmærke, så matcher siden dit feed fra starten.
## Forhåndsvisningen, folk ser, når du deler linket
Når nogen sender dit link i en besked, viser apps et forhåndsvisningskort bygget ud fra sidens Open Graph-billede. En tom eller tilfældig forhåndsvisning ødelægger arbejdet ovenfor. Design et på 1200×630 med dit navn og løftet på den samme baggrund. Detaljerne står i [størrelse på OG-billeder](https://gradiently.design/da/guide/open-graph-image-size).
Et bredt forhåndsvisningskort for et keramikstudie med navnet og en kort linje på den samme gradientbaggrund
Linkets forhåndsvisning på sidens egen baggrund, så et delt link allerede ligner dig.
1. **Tjek den i telefonbredde** Åbn siden på din egen telefon fra din profil, som de besøgende gør, ikke i en desktopbrowser.
2. **Omrokér knapperne hver uge** Flyt det, der betyder noget nu, til toppen, og fjern det, der er slut.
3. **Test forhåndsvisningen** Send linket til dig selv i en beskedapp, og se på det kort, det laver.
## FAQ
### Hvad skal der være på en link i bio-side?
Dit navn og logo, én linje om hvad du laver, tre til fem handlingsknapper med den vigtigste først og små kontaktlinks nederst.
### Hvilken størrelse skal baggrunden til en link i bio-side have?
Design den til en telefon først. Et lodret billede på 1080×1920 virker godt, med en ensfarvet baggrund bag det til højere skærme og desktop.
### Skal jeg bruge en link i bio-tjeneste eller min egen hjemmeside?
En tjeneste er hurtigere at sætte op. En side på dit eget domæne holder de besøgende på dit site og giver dig fuld kontrol over designet, og den kan være en enkelt HTML-fil.
### Hvor mange links skal en link i bio-side have?
Tre til fem er nok for de fleste. Flere knapper gør det mindre sandsynligt, at hver enkelt bliver trykket på.
### Kan jeg tilføje mere end ét link til min Instagram-bio?
Ja, Instagram lader dig tilføje op til fem links til din profil, men kun det første er synligt uden et tryk. Én veldesignet side er stadig den klareste vej.
### Hvordan får jeg min link i bio-side til at matche mit Instagram-feed?
Brug den samme baggrund, de samme farver og skrifttyper som i dine opslag, og giv hovedknappen din accentfarve.