# Diseño de página de link en bio: una landing para tu perfil
[Canonical HTML page](https://gradiently.design/es/guide/instagram-bio-link-page)
El único enlace de tu perfil es donde la curiosidad se convierte en reserva, venta o suscriptor. Trátalo como una landing diminuta: un solo estilo, pocos botones, nada que descifrar.
## The short version
- 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.
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.
| Parte | Qué poner | Limítate a |
| --- | --- | --- |
| Identidad | Logotipo o foto, y tu nombre tal como aparece en tu perfil | Una imagen, una línea |
| Promesa | Lo que haces, para quién, en palabras sencillas | Menos de 12 palabras |
| Botón principal | Lo que más quieres esta semana: Reserva, Compra el lanzamiento, Consigue entradas | Uno, claramente más fuerte |
| Otros botones | De dos a cuatro destinos más | Verbos, no nombres de página |
| Pie | Pequeños iconos sociales y contacto | Discreto, al final |
La anatomía de una página que la gente usa de verdad. Las páginas suelen fallar por añadir un décimo botón, no por que falte uno.
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](https://gradiently.design/es/guide/writing-copy-for-visuals) 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 vertical de link en bio de un estudio de cerámica con su nombre, una línea breve y tres acciones sobre un fondo degradado
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.
Arriba brillante, abajo calmado: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`
Color y luz en el tercio superior, donde está el nombre, asentándose en un fondo profundo y uniforme tras los botones.
## 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](https://gradiently.design/es/guide/color-contrast-accessibility) 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.
```html
Studio Nine
Studio Nine
Handmade ceramics and weekend classes in Bristol.
Book a class
Shop the new pots
Visit the studio
```
Un archivo, sin scripts. El color liso en html se ve al hacer overscroll y en pantallas más altas que el degradado.
Si prefieres un botón más rico, el [CSS de botón con degradado](https://gradiently.design/es/guide/css-gradient-button) 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](https://gradiently.design/es/guide/brand-consistency-across-platforms) cubre el sistema más amplio.
- Fondo nocturno: #0b0a1a
- Violeta: #4c1d95
- Índigo: #1e1b4b
- Botón principal: #fbbf24
- Tinta: #f5f3ff
Los mismos cinco colores usados en el feed, la página y los botones. El ámbar aparece solo en el botón principal, y por eso se pulsa.
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](https://gradiently.design/es/guide/open-graph-image-size).
Una tarjeta ancha de vista previa de enlace de un estudio de cerámica con su nombre y una línea breve sobre el mismo fondo degradado
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.
## FAQ
### ¿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.