# Design av lenkeside i bio: en landingsside for profilen
[Canonical HTML page](https://gradiently.design/nb/guide/instagram-bio-link-page)
Lenken i profilen er der nysgjerrighet blir til en bestilling, et salg eller en abonnent. Behandle den som en liten landingsside: ett uttrykk, noen få knapper og ingenting å tyde.
## The short version
- En lenkeside i bio er en liten landingsside for mobil som samler de få stedene du vil sende profilbesøkende videre til.
- Det beste designet for en lenkeside i bio bruker tre til fem knapper, sortert etter det som er viktigst denne uken.
- Besøkende kommer fra en mobil, så design først for en smal, vertikal skjerm og sjekk siden i mobilbredde.
- Siden bør bruke samme bakgrunn, farger og skrifter som feeden, så trykket føles som å gå inn i samme butikk.
- Når lenken deles i en melding, vises et eget forhåndsvisningsbilde på 1200×630 som også er verdt å designe.
Godt **design av lenkeside i bio** er en kort landingsside for mobil: navnet ditt, én linje om hva du gjør, tre til fem knapper etter viktighet og en bakgrunn som matcher feeden, så besøket føles sammenhengende. Nesten alle kommer fra en mobil, rett fra profilen din, med bare noen sekunders oppmerksomhet. Alle valgene nedenfor følger av det.
## Hva en lenkeside i bio trenger, i rekkefølge
Les siden ovenfra og ned slik en besøkende gjør. De vil bekrefte at de er på rett sted, se hva de kan gjøre og gjøre det. Alt som forsinker disse tre stegene, kan fjernes.
| Del | Hva du legger der | Begrens det til |
| --- | --- | --- |
| Identitet | Logo eller bilde, og navnet slik det står i profilen | Ett bilde, én linje |
| Løfte | Hva du gjør og for hvem, med enkle ord | Under 12 ord |
| Hovedknapp | Det du ønsker mest denne uken: Bestill, Se nyhetene, Skaff billetter | Én, tydelig fremhevet |
| Andre knapper | To til fire andre mål | Verb, ikke sidenavn |
| Bunntekst | Små sosiale ikoner og kontakt | Diskret, nederst |
Oppbygningen av en side folk faktisk bruker. Problemet er vanligvis en tiende knapp, ikke en som mangler.
Skriv knapper som handlinger. Bestill bord er bedre enn Reservasjoner; Les den nye utgaven er bedre enn Nyhetsbrev. Samme prinsipper gjelder all kort tekst i sosiale medier, som [tekst til sosiale medier](https://gradiently.design/nb/guide/writing-copy-for-visuals) går nærmere inn på.
## Design av bakgrunnen
Bakgrunnen utgjør det meste av det besøkende ser, og avgjør om siden ligner deg eller alle andre gratis maler. Design den først for en mobilskjerm. Et vertikalt format på 1080×1920, som en story, er en fornuftig arbeidsstørrelse for bildet, med en ensfarget bunn som dekker høyere skjermer og datamaskiner.
En vertikal lenkeside i bio for et keramikkstudio, med navn, en kort linje og tre handlinger på en gradientbakgrunn
En lenkeside i bio tegnet i mobilstørrelse: identitet øverst, løfte og så handlingene, mens bakgrunnen bærer merkevaren.
Hold den mest urolige og lyseste delen av bakgrunnen unna knappene, vanligvis nær toppen eller i et hjørne. Knapper trenger en rolig, jevn overflate bak seg, ellers begynner etikettene å konkurrere med fargen.
Lys topp, rolig nedre halvdel: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`
Farge og lys i øverste tredel, der navnet ligger, som roer seg til en dyp, jevn bunn bak knappene.
## Knapper som ser trykkbare ut
### Unngå
- Alle knapper er like, så ingenting leder
- Tynne konturer som forsvinner på en gradient
- Etiketter i versaler med stor bokstavavstand, vanskelige å skanne
- Små knapper tett inntil hverandre
- Emoji som gjør ordenes jobb
### Gjør
- Én fylt hovedknapp, resten roligere
- Ensfargede fyll hentet fra paletten din
- Etiketter med vanlig setningsform, ett verb hver
- Knapper i full bredde med god avstand
- Enkle ord, et ikon bare hvis det hjelper
En fylt knapp i aksentfargen din, med de andre i en mykere variant av bunnfargen, gir øyet et tydelig første trykk. Sjekk at hver etikett har nok kontrast mot knappens eget fyll, ikke mot siden: [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) har forholdstallene.
## Bygg din egen lenkeside i bio
Tjenester for lenkesider i bio er raske, men en side på ditt eget domene er enkel å bygge og holder besøkende på nettstedet ditt. Dette er en komplett, minimal versjon: gradientbakgrunn i full høyde, en midtstilt kolonne og én hovedknapp. Bytt inn dine farger og lenker.
```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 skript. Den ensfargede bunnen på html vises ved overskrolling og på skjermer som er høyere enn gradienten.
Hvis du ønsker en mer detaljert knapp, viser [CSS for gradientknapper](https://gradiently.design/nb/guide/css-gradient-button) hvordan hovedknappen kan få litt dybde uten å rope.
## La siden matche feeden
Trykket fra profil til side bør føles som å åpne en dør i samme bygning. Bruk fargene, skriftene og bakgrunnen fra innleggene dine, så lurer besøkende aldri på om de har forlatt deg. [Konsekvent merkevare i sosiale medier](https://gradiently.design/nb/guide/brand-consistency-across-platforms) tar for seg det større systemet.
- Nattbunn: #0b0a1a
- Fiolett: #4c1d95
- Indigo: #1e1b4b
- Hovedknapp: #fbbf24
- Tekstfarge: #f5f3ff
De samme fem fargene brukes i feeden, på siden og på knappene. Ravfargen finnes bare på hovedknappen, derfor får den trykkene.
Her lønner det seg å eie en bakgrunn. En Mark fra Gradiently er en levende gradient som rendres i alle størrelser du designer, så innlegg, stories og sidebakgrunnen kan ha nøyaktig samme uttrykk, og ingen andre kan eksportere med den når du har sikret deg den. Eksporter Marken på 1080×1920 med Pro, som gir full størrelse uten vannmerke, så matcher siden feeden fra starten av.
## Forhåndsvisningsbildet folk ser når du deler lenken
Når noen sender lenken din i en melding, viser apper et forhåndsvisningskort laget fra sidens Open Graph-bilde. En tom eller tilfeldig forhåndsvisning svekker arbeidet over. Design et bilde på 1200×630 med navnet og løftet ditt, på samme bakgrunn. Detaljene finner du i [størrelse på OG-bilder](https://gradiently.design/nb/guide/open-graph-image-size).
Et bredt lenkeforhåndsvisningskort for et keramikkstudio, med navn og en kort linje på den samme gradientbakgrunnen
Lenkeforhåndsvisningen bruker sidens egen bakgrunn, så en delt lenke allerede ligner deg.
1. **Sjekk i mobilbredde** Åpne siden på din egen mobil fra profilen, slik besøkende gjør, ikke i en nettleser på datamaskinen.
2. **Endre knappenes rekkefølge ukentlig** Flytt det som er viktig nå til toppen, og fjern det som er avsluttet.
3. **Test forhåndsvisningen** Send lenken til deg selv i en meldingsapp og se på kortet den lager.
## FAQ
### Hva bør en lenkeside i bio inneholde?
Navnet og logoen din, én linje om hva du gjør, tre til fem handlingsknapper med den viktigste først, og små kontaktlenker nederst.
### Hvilken størrelse bør bakgrunnen på en lenkeside i bio ha?
Design først for mobil. Et vertikalt bilde på 1080×1920 fungerer godt, med en ensfarget bunn bak for høyere skjermer og datamaskiner.
### Bør jeg bruke en tjeneste for lenkesider i bio eller eget nettsted?
En tjeneste er raskere å sette opp. En side på eget domene holder besøkende på nettstedet ditt og gir full kontroll over designet, og kan bestå av én HTML-fil.
### Hvor mange lenker bør en lenkeside i bio ha?
Tre til fem er nok for de fleste. Flere knapper gjør det mindre sannsynlig at hver enkelt blir trykket på.
### Kan jeg legge til mer enn én lenke i Instagram-bioen?
Ja, Instagram lar deg legge til opptil fem lenker i profilen, men bare den første er synlig før et trykk. Én godt utformet side er fortsatt den tydeligste veien videre.
### Hvordan får jeg lenkesiden i bio til å matche Instagram-feeden?
Bruk samme bakgrunn, farger og skrifter som i innleggene dine, og gi hovedknappen aksentfargen din.