Länk i bio-sida: en landningssida för din profil

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.

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 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.

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.

Knappar som ser tryckbara ut

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 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.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Studio Nine</title>
  <meta property="og:image" content="https://example.com/og.png">
  <style>
    html { background: #0b0a1a; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, sans-serif;
      color: #f5f3ff;
      background: linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%);
    }
    main { max-width: 26rem; margin: 0 auto; padding: 4rem 1.25rem; text-align: center; }
    img { width: 96px; height: 96px; border-radius: 50%; }
    p { opacity: 0.85; margin: 0.5rem 0 2rem; }
    a {
      display: block;
      padding: 1rem;
      margin: 0 0 0.75rem;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.12);
      color: inherit;
      text-decoration: none;
      font-weight: 600;
    }
    a.main { background: #fbbf24; color: #1c1917; }
  </style>
</head>
<body>
  <main>
    <img src="logo.png" alt="Studio Nine">
    <h1>Studio Nine</h1>
    <p>Handmade ceramics and weekend classes in Bristol.</p>
    <a class="main" href="/classes">Book a class</a>
    <a href="/shop">Shop the new pots</a>
    <a href="/visit">Visit the studio</a>
  </main>
</body>
</html>

Föredrar du en rikare knapp visar gradientknapp i CSS 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 går igenom det bredare systemet.

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.

1. 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. 2

   Ordna om knapparna varje vecka

   Flytta det som spelar roll nu överst och pensionera det som är slut.

3. 3

   Testa förhandsvisningen

   Skicka länken till dig själv i en meddelandeapp och titta på kortet den skapar.