La versión corta
- Una página de link en bio es una pequeña landing para móvil que reúne los pocos sitios a los que quieres que vayan los visitantes del perfil.
- El mejor diseño de página de link en bio usa de tres a cinco botones, ordenados por lo que más importa esta semana.
- Los visitantes llegan desde un móvil, así que diseña primero la página para una pantalla vertical estrecha y compruébala con el ancho de un teléfono.
- La página debe llevar el mismo fondo, los mismos colores y las mismas tipografías que tu feed, para que el toque se sienta como entrar en la misma tienda.
- Cuando el enlace se comparte en un mensaje, su imagen de vista previa es un gráfico de 1200×630 aparte que también merece diseñarse.
En esta página
Un buen diseño de página de link en bio es una landing corta para móvil: tu nombre, una línea sobre lo que haces, de tres a cinco botones por orden de importancia y un fondo que combina con tu feed para que la visita se sienta continua. Casi todo el mundo llega desde un móvil, directo desde tu perfil, con unos segundos de atención. Cada decisión siguiente parte de ahí.
Qué necesita una página de link en bio, por orden
Lee la página de arriba abajo como lo hace un visitante. Quiere confirmar que está en el sitio correcto, ver qué puede hacer y hacerlo. Todo lo que frene esos tres pasos puede irse.
Qué poner
Limítate a
Limítate a
Qué poner
Limítate a
Qué poner
Limítate a
Limítate a
Escribe los botones como acciones. Reserva una mesa es mejor que Reservas; Lee el nuevo número es mejor que Newsletter. Los mismos principios valen para cada texto corto en redes, que el copywriting para redes sociales trata con más profundidad.
Diseñar el fondo
El fondo es la mayor parte de lo que ve un visitante, y es donde una página se parece a ti o a cualquier otra plantilla gratuita. Diséñalo primero para una pantalla de móvil. Un marco vertical de 1080×1920, igual que una story, es un tamaño de trabajo razonable para la imagen, y un color liso detrás cubre las pantallas más altas y el escritorio.
Una página de link en bio dibujada a tamaño de móvil: identidad arriba, promesa y luego las acciones, con el fondo haciendo el trabajo de marca.
Mantén la parte más recargada y brillante del fondo lejos de donde van los botones, normalmente hacia arriba o en una esquina. Los botones necesitan una superficie calmada y uniforme detrás o sus textos empiezan a competir con el color.
linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)Botones que parezcan pulsables
Evita
- Todos los botones iguales, de modo que ninguno destaca
- Contornos finos que desaparecen sobre un degradado
- Textos en mayúsculas con mucho espaciado, difíciles de escanear
- Botones diminutos muy juntos
- Emojis haciendo el trabajo de las palabras
Haz
- Un botón principal relleno, el resto más discretos
- Rellenos lisos tomados de tu paleta
- Textos en minúscula normal, un verbo cada uno
- Botones de ancho completo con espacio generoso
- Palabras sencillas, un icono solo si ayuda
Un botón relleno con tu color de acento, con los demás en un tono más suave del fondo, da al ojo un primer toque evidente. Comprueba que cada texto cumple el contraste con su propio relleno, no con la página: contraste de color y accesibilidad tiene las proporciones.
Crear tu propia página de link en bio
Los servicios de link en bio son rápidos, pero una página en tu propio dominio es fácil de crear y mantiene a los visitantes en tu sitio. Esta es una versión mínima y completa: un fondo degradado a toda altura, una columna centrada y un botón principal. Cambia tus colores y enlaces.
<!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>Si prefieres un botón más rico, el CSS de botón con degradado muestra cómo darle al principal algo de profundidad sin que grite.
Hacer que la página combine con tu feed
El toque de perfil a página debe sentirse como abrir una puerta en el mismo edificio. Usa los colores, tipografías y fondo que usas en tus publicaciones y el visitante nunca se preguntará si se ha ido. La coherencia de marca en redes sociales cubre el sistema más amplio.
Aquí es donde un fondo propio da frutos. Un Mark de Gradiently es un degradado vivo que se renderiza en cada tamaño que diseñas, así que tus publicaciones, stories y el fondo de la página pueden lucir exactamente el mismo estilo, y nadie más puede exportar con él una vez que lo has reservado. Exporta el Mark a 1080×1920 con Pro, que lo mantiene a tamaño completo y sin marca de agua, y la página combina con tu feed por construcción.
La imagen de vista previa que ve la gente al compartir el enlace
Cuando alguien envía tu enlace en un mensaje, las apps muestran una tarjeta de vista previa creada a partir de la imagen Open Graph de la página. Una vista previa en blanco o aleatoria deshace el trabajo anterior. Diseña una de 1200×630 con tu nombre y la promesa, usando el mismo fondo. Los detalles están en el tamaño de imagen OG.
La vista previa del enlace, con el fondo propio de la página, así que un enlace compartido ya se parece a ti.
- 1
Compruébalo con ancho de móvil
Abre la página en tu propio móvil desde tu perfil, como lo hacen los visitantes, no en un navegador de escritorio.
- 2
Reordena los botones cada semana
Sube arriba lo que importa ahora y retira lo que ha terminado.
- 3
Prueba la vista previa
Envíate el enlace en una app de mensajes y mira la tarjeta que genera.
Preguntas frecuentes
¿Qué debe llevar una página de link en bio?
Tu nombre y logotipo, una línea sobre lo que haces, de tres a cinco botones de acción con el más importante primero y pequeños enlaces de contacto al final.
¿Qué tamaño debe tener el fondo de un link en bio?
Diséñalo primero para móvil. Una imagen vertical de 1080×1920 funciona bien, con un color liso detrás para las pantallas más altas y el escritorio.
¿Debo usar un servicio de link en bio o mi propia web?
Un servicio es más rápido de configurar. Una página en tu propio dominio mantiene a los visitantes en tu sitio y te da control total del diseño, y puede ser un único archivo HTML.
¿Cuántos enlaces debe tener una página de link en bio?
De tres a cinco bastan para la mayoría. Cuantos más botones, menos probable es que se pulse cada uno.
¿Puedo añadir más de un enlace a mi biografía de Instagram?
Sí, Instagram permite añadir hasta cinco enlaces al perfil, pero solo el primero se ve antes de pulsar. Una sola página bien diseñada sigue siendo el camino más claro.
¿Cómo hago que mi link en bio combine con mi feed de Instagram?
Usa el mismo fondo, colores y tipografías que tus publicaciones, y da al botón principal tu color de acento.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil