# Design de página de link na bio: uma landing page para o teu perfil
[Canonical HTML page](https://gradiently.design/pt-pt/guide/instagram-bio-link-page)
O único link do teu perfil é onde a curiosidade se torna uma reserva, uma venda ou um subscritor. Trata-o como uma pequena landing page: um visual, uns poucos botões, nada para decifrar.
## The short version
- Uma página de link na bio é uma pequena landing page para telemóvel que reúne os poucos sítios para onde queres que os visitantes do perfil vão a seguir.
- O melhor design de página de link na bio usa três a cinco botões, ordenados pelo que mais importa esta semana.
- Os visitantes chegam de um telemóvel, por isso desenha a página primeiro para um ecrã vertical estreito e verifica-a na largura de um telemóvel.
- A página deve vestir o mesmo fundo, as mesmas cores e os mesmos tipos de letra do teu feed, para o toque parecer entrar na mesma loja.
- Quando o link é partilhado numa mensagem, a sua imagem de pré-visualização é um gráfico de 1200×630 à parte, que também vale a pena desenhar.
O bom **design de página de link na bio** é uma landing page curta para telemóvel: o teu nome, uma linha sobre o que fazes, três a cinco botões por ordem de importância e um fundo igual ao do teu feed, para a visita parecer contínua. Quase toda a gente chega de um telemóvel, diretamente do teu perfil, com poucos segundos de atenção. Cada escolha abaixo decorre disso.
## O que uma página de link na bio precisa, por ordem
Lê a página de cima para baixo como o faz um visitante. Quer confirmar que está no sítio certo, ver o que pode fazer e fazê-lo. Tudo o que atrase estes três passos pode sair.
| Parte | O que lá pôr | Limita-te a |
| --- | --- | --- |
| Identidade | Logótipo ou fotografia, e o teu nome como aparece no perfil | Uma imagem, uma linha |
| Promessa | O que fazes, para quem, em palavras simples | Menos de 12 palavras |
| Botão principal | O que mais queres esta semana: Reservar, Ver a novidade, Comprar bilhetes | Um, visivelmente mais forte |
| Outros botões | Mais dois a quatro destinos | Verbos, não nomes de páginas |
| Rodapé | Pequenos ícones de redes sociais e contacto | Discreto, em baixo |
A anatomia de uma página que as pessoas realmente usam. As páginas costumam falhar por juntarem um décimo botão, não por lhes faltar um.
Escreve os botões como ações. Reservar uma mesa é melhor do que Reservas; Ler a nova edição é melhor do que Newsletter. Os mesmos princípios valem para todos os textos curtos nas redes sociais, que a [escrita de texto para redes sociais](https://gradiently.design/pt-pt/guide/writing-copy-for-visuals) trata com mais profundidade.
## Desenhar o fundo
O fundo é quase tudo o que um visitante vê, e é onde uma página ou se parece contigo ou se parece com todos os outros modelos gratuitos. Desenha-o primeiro para o ecrã de um telemóvel. Uma moldura vertical de 1080×1920, igual à de um story, é um tamanho de trabalho sensato para a imagem, e uma cor sólida por trás cobre os ecrãs mais altos e o computador.
Uma página vertical de link na bio de um estúdio de cerâmica, com o nome, uma linha curta e três ações sobre um fundo de gradiente
Uma página de link na bio desenhada ao tamanho de um telemóvel: identidade em cima, promessa e depois as ações, com o fundo a fazer o trabalho da marca.
Mantém a parte mais carregada e mais viva do fundo longe de onde ficam os botões, normalmente para o topo ou para um canto. Os botões precisam de uma superfície calma e uniforme por trás, ou as suas legendas começam a competir com a cor.
Topo vivo, metade inferior calma: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`
Cor e luz no terço superior, onde está o nome, a assentar num fundo profundo e uniforme por trás dos botões.
## Botões que parecem tocáveis
### Evita
- Todos os botões iguais, e nenhum lidera
- Contornos finos que desaparecem sobre um gradiente
- Legendas em maiúsculas com muito espaçamento, difíceis de percorrer
- Botões minúsculos muito juntos
- Emojis a fazer o trabalho das palavras
### Faz
- Um botão principal preenchido, os outros mais discretos
- Preenchimentos sólidos tirados da tua paleta
- Legendas em minúsculas normais, um verbo cada
- Botões de largura total com espaço generoso
- Palavras simples, um ícone só se ajudar
Um botão preenchido na tua cor de destaque, com os outros num tom mais suave do fundo, dá ao olho um primeiro toque óbvio. Confirma que cada legenda cumpre o contraste contra o seu próprio preenchimento, não contra a página: o [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) traz as razões.
## Construir a tua própria página de link na bio
Os serviços de link na bio são rápidos, mas uma página no teu próprio domínio é fácil de construir e mantém os visitantes no teu site. Esta é uma versão completa e mínima: um fundo em gradiente com altura total, uma coluna centrada e um botão principal. Troca pelas tuas cores e ligações.
```html
Studio Nine
Studio Nine
Handmade ceramics and weekend classes in Bristol.
Book a class
Shop the new pots
Visit the studio
```
Um ficheiro, sem scripts. A cor sólida em html aparece no deslize além do fim e em ecrãs mais altos do que o gradiente.
Se preferires um botão mais rico, o [CSS de botão com gradiente](https://gradiently.design/pt-pt/guide/css-gradient-button) mostra como dar ao principal um pouco de profundidade sem que grite.
## Combinar a página com o teu feed
O toque do perfil para a página deve parecer abrir uma porta no mesmo edifício. Usa as cores, os tipos de letra e o fundo que usas nas publicações, e o visitante nunca se pergunta se saiu de lá. A [identidade consistente nas redes sociais](https://gradiently.design/pt-pt/guide/brand-consistency-across-platforms) trata do sistema mais amplo.
- Fundo noturno: #0b0a1a
- Violeta: #4c1d95
- Índigo: #1e1b4b
- Botão principal: #fbbf24
- Tinta: #f5f3ff
As mesmas cinco cores usadas no feed, na página e nos botões. O âmbar aparece só no botão principal, e é por isso que é tocado.
É aqui que um fundo só teu compensa. Um Mark do Gradiently é um gradiente vivo que se renderiza em todos os tamanhos que desenhas, por isso as tuas publicações, os stories e o fundo da página podem vestir exatamente o mesmo visual, e mais ninguém pode exportar com ele depois de o reservares. Exporta o Mark a 1080×1920 com o Pro, que o mantém em tamanho completo e sem marca de água, e a página combina com o teu feed por construção.
## A imagem de pré-visualização que as pessoas veem quando partilhas o link
Quando alguém envia o teu link numa mensagem, as aplicações mostram um cartão de pré-visualização construído a partir da imagem Open Graph da página. Uma pré-visualização vazia ou aleatória desfaz o trabalho acima. Desenha uma a 1200×630 com o teu nome e a promessa, no mesmo fundo. Os detalhes estão no [tamanho da imagem OG](https://gradiently.design/pt-pt/guide/open-graph-image-size).
Um cartão largo de pré-visualização de link de um estúdio de cerâmica, com o nome e uma linha curta sobre o mesmo fundo de gradiente
A pré-visualização do link, no fundo da própria página, para que um link partilhado já tenha o teu aspeto.
1. **Verifica-a na largura de um telemóvel** Abre a página no teu telemóvel a partir do teu perfil, como fazem os visitantes, não num navegador de computador.
2. **Reordena os botões todas as semanas** Passa para o topo o que importa agora e retira o que já terminou.
3. **Testa a pré-visualização** Envia o link a ti próprio numa aplicação de mensagens e vê o cartão que faz.
## FAQ
### O que deve ter uma página de link na bio?
O teu nome e logótipo, uma linha sobre o que fazes, três a cinco botões de ação com o mais importante primeiro e pequenos links de contacto em baixo.
### Que tamanho deve ter o fundo de um link na bio?
Desenha-o primeiro para um telemóvel. Uma imagem vertical de 1080×1920 funciona bem, com uma cor sólida por trás para os ecrãs mais altos e o computador.
### Devo usar um serviço de link na bio ou o meu próprio site?
Um serviço é mais rápido de configurar. Uma página no teu próprio domínio mantém os visitantes no teu site e dá-te controlo total do design, e pode ser um único ficheiro HTML.
### Quantos links deve ter uma página de link na bio?
Três a cinco chegam para a maioria das pessoas. Mais botões tornam cada um menos provável de ser tocado.
### Posso pôr mais de um link na bio do Instagram?
Sim, o Instagram permite adicionar até cinco links ao perfil, mas só o primeiro é visível antes de um toque. Uma página bem desenhada continua a ser o caminho mais claro.
### Como faço o meu link na bio combinar com o meu feed do Instagram?
Usa o mesmo fundo, cores e tipos de letra das tuas publicações, e dá ao botão principal a tua cor de destaque.