# Länk i bio-sida: en landningssida för din profil
[Canonical HTML page](https://gradiently.design/sv/guide/instagram-bio-link-page)
Den enda länken på din profil är där nyfikenhet blir en bokning, en försäljning eller en prenumerant. Behandla den som en liten landningssida: ett utseende, några knappar, inget att tyda.
## The short version
- En länk i bio-sida är en liten mobil landningssida som samlar de få platser dit du vill att profilbesökare ska gå härnäst.
- Den bästa designen för en länk i bio-sida använder tre till fem knappar, ordnade efter vad som är viktigast den här veckan.
- Besökare kommer från en mobil, så designa sidan för en smal stående skärm först och kontrollera den i mobilbredd.
- Sidan bör ha samma bakgrund, färger och typsnitt som ditt flöde, så att trycket känns som att gå in i samma butik.
- När länken delas i ett meddelande är dess förhandsbild en separat grafik på 1200×630 som också är värd att designa.
Bra **design av en länk i bio-sida** är en kort mobil landningssida: ditt namn, en rad om vad du gör, tre till fem knappar i viktighetsordning och en bakgrund som matchar ditt flöde så att besöket känns sammanhängande. Nästan alla kommer från en mobil, direkt från din profil, med några sekunders uppmärksamhet. Varje val nedan följer av det.
## Vad en länk i bio-sida behöver, i ordning
Läs sidan uppifrån och ned som en besökare gör. De vill bekräfta att de är på rätt ställe, se vad de kan göra och göra det. Allt som bromsar de tre stegen kan bort.
| Del | Vad du lägger där | Håll det till |
| --- | --- | --- |
| Identitet | Logotyp eller foto, och ditt namn som det står på din profil | En bild, en rad |
| Löfte | Vad du gör, för vem, med enkla ord | Under 12 ord |
| Huvudknapp | Det du helst vill ha den här veckan: Boka, Köp släppet, Skaffa biljetter | En, synbart starkare |
| Övriga knappar | Två till fyra destinationer till | Verb, inte sidnamn |
| Sidfot | Små sociala ikoner och kontakt | Stilla, längst ned |
Anatomin hos en sida som folk faktiskt använder. Sidor går oftast fel genom att lägga till en tionde knapp, inte genom att sakna en.
Skriv knappar som handlingar. Boka bord slår Reservationer; Läs nya numret slår Nyhetsbrev. Samma principer gäller varje kort text i sociala medier, vilket [copywriting för sociala medier](https://gradiently.design/sv/guide/writing-copy-for-visuals) går igenom mer ingående.
## Design av bakgrunden
Bakgrunden är det mesta en besökare ser, och det är där en sida antingen ser ut som du eller som alla andra gratismallar. Designa den för en mobilskärm först. En stående ruta på 1080×1920, samma som en story, är en rimlig arbetsstorlek för bilden, och en enfärgad botten bakom täcker högre skärmar och datorer.
En stående länk i bio-sida för en keramikstudio med namn, en kort rad och tre handlingar på en gradientbakgrund
En länk i bio-sida ritad i mobilstorlek: identitet överst, löfte, sedan handlingarna, med bakgrunden som bär varumärket.
Håll den livligaste, ljusaste delen av bakgrunden borta från där knapparna ligger, oftast mot toppen eller ett hörn. Knappar behöver en lugn, jämn yta bakom sig, annars börjar deras etiketter konkurrera med färgen.
Ljus topp, lugn nedre hälft: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`
Färg och ljus i övre tredjedelen, där namnet ligger, som lägger sig till en djup, jämn botten bakom knapparna.
## Knappar som ser tryckbara ut
### Undvik
- Alla knappar lika, så att inget leder
- Tunna konturer som försvinner på en gradient
- Etiketter i versaler med brett bokstavsavstånd, svåra att skanna
- Pyttesmå knappar tätt ihop
- Emojis som gör orden jobb
### Gör så här
- En fylld huvudknapp, resten stillsammare
- Solida fyllningar tagna ur din palett
- Etiketter med vanlig meningsstil, ett verb var
- Knappar i full bredd med generöst avstånd
- Enkla ord, en ikon bara om den hjälper
En fylld knapp i din accentfärg, med de andra i en mjukare ton av botten, ger ögat ett självklart första tryck. Kontrollera att varje etikett uppfyller kontrast mot sin egen fyllning, inte mot sidan: [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) har kvoterna.
## Bygg din egen länk i bio-sida
Länk i bio-tjänster är snabba, men en sida på din egen domän är lätt att bygga och håller besökare på din webbplats. Det här är en komplett, minimal version: en bakgrund med gradient i full höjd, en centrerad kolumn och en huvudknapp. Byt in dina färger och länkar.
```html
Studio Nine
Studio Nine
Handmade ceramics and weekend classes in Bristol.
Book a class
Shop the new pots
Visit the studio
```
En fil, inga skript. Den enfärgade färgen på html syns vid överskrollning och på skärmar som är högre än gradienten.
Föredrar du en rikare knapp visar [gradientknapp i CSS](https://gradiently.design/sv/guide/css-gradient-button) hur du ger huvudknappen lite djup utan att den skriker.
## Matcha sidan med ditt flöde
Trycket från profil till sida ska kännas som att öppna en dörr i samma byggnad. Använd färgerna, typsnitten och bakgrunden du använder i dina inlägg, så undrar besökaren aldrig om de har lämnat. [Enhetligt varumärke i sociala medier](https://gradiently.design/sv/guide/brand-consistency-across-platforms) går igenom det bredare systemet.
- Nattbotten: #0b0a1a
- Violett: #4c1d95
- Indigo: #1e1b4b
- Huvudknapp: #fbbf24
- Bläck: #f5f3ff
Samma fem färger används i flödet, på sidan och i knapparna. Bärnstenen syns bara på huvudknappen, vilket är varför den blir tryckt på.
Här lönar sig en bakgrund du äger. En Gradiently-Mark är en levande gradient som renderas i varje storlek du designar, så dina inlägg, stories och sidans bakgrund kan alla ha exakt samma utseende, och ingen annan kan exportera med den när du har säkrat den. Exportera Marken i 1080×1920 med Pro, som behåller den i full storlek utan vattenstämpel, så matchar sidan ditt flöde av konstruktion.
## Förhandsbilden folk ser när du delar länken
När någon skickar din länk i ett meddelande visar appar ett förhandskort byggt av sidans Open Graph-bild. En tom eller slumpmässig förhandsvisning raserar arbetet ovan. Designa en i 1200×630 med ditt namn och löftet, med samma bakgrund. Detaljerna finns i [OG-bildens storlek](https://gradiently.design/sv/guide/open-graph-image-size).
Ett brett länkförhandskort för en keramikstudio med namn och en kort rad på samma gradientbakgrund
Länkförhandsvisningen, i sidans egen bakgrund, så att en delad länk redan ser ut som du.
1. **Kolla den i mobilbredd** Öppna sidan på din egen mobil från din profil, som besökarna gör, inte i en webbläsare på datorn.
2. **Ordna om knapparna varje vecka** Flytta det som spelar roll nu överst och pensionera det som är slut.
3. **Testa förhandsvisningen** Skicka länken till dig själv i en meddelandeapp och titta på kortet den skapar.
## FAQ
### Vad ska finnas på en länk i bio-sida?
Ditt namn och din logotyp, en rad om vad du gör, tre till fem handlingsknappar med den viktigaste först och små kontaktlänkar längst ned.
### Vilken storlek ska en länk i bio-bakgrund ha?
Designa den för mobil först. En stående bild på 1080×1920 fungerar bra, med en enfärgad botten bakom för högre skärmar och datorer.
### Ska jag använda en länk i bio-tjänst eller min egen webbplats?
En tjänst är snabbare att sätta upp. En sida på din egen domän håller besökare på din webbplats och ger dig full kontroll över designen, och den kan vara en enda HTML-fil.
### Hur många länkar ska en länk i bio-sida ha?
Tre till fem räcker för de flesta. Fler knappar gör att varje enskild blir mindre sannolik att tryckas på.
### Kan jag lägga till fler än en länk i min Instagram-bio?
Ja, Instagram låter dig lägga till upp till fem länkar på din profil, men bara den första syns innan ett tryck. En väl designad sida är fortfarande den tydligaste vägen.
### Hur får jag min länk i bio att matcha mitt Instagram-flöde?
Använd samma bakgrund, färger och typsnitt som i dina inlägg, och ge huvudknappen din accentfärg.