Template HTML para Link na Bio — Grátis, Editável e com Domínio Próprio
Template HTML grátis editável para link na bio de creator com avatar, redes sociais e até 7 botões num link compartilhável.
Sobre este template
Para quem é este template
Você tem várias contas para divulgar — Instagram, TikTok, YouTube, Spotify, portfólio, loja, blog, contato profissional — mas o Instagram só permite 1 link na bio. Aí você precisa de uma página única, bonita, que reúna todos os destinos em um só lugar e abra rápido no celular do seguidor que clicou.
Layout pensado para qualquer pessoa com presença digital — creator, influencer, freelancer, designer, fotógrafo, músico, escritor, consultor, profissional liberal, marca pessoal. Avatar circular grande com gradient ou emoji, nome em destaque, handle (@seuhandle), bio curta de 1-2 linhas, fileira de 5 ícones de redes sociais (Instagram, YouTube, LinkedIn, TikTok, e-mail) e lista vertical de 7 botões clicáveis: 1 botão destacado (CTA principal — curso, lançamento, promoção) + 6 botões regulares com ícone (emoji ou SVG), título e descrição curta. Background gradient escuro com radiais coloridos para um visual moderno; tipografia Inter com glassmorphism nos cards.
Por que publicar no Htmly
Template grátis, publicação em 10 segundos, HTTPS automático e link curto compartilhável (juliasouza.htmly.com.br ou julia-souza.htmly.com.br). Edite direto no navegador — clique no nome, no handle, na bio, em cada botão e digite. Sem cadastro para testar. Cole o link na bio do Instagram, TikTok, YouTube, e cada clique vira tráfego pro SEU domínio. Domínio próprio (juliasouza.com.br) disponível no plano Pro para ficar ainda mais memorável.
Próximos passos
Creator que combina link na bio com portfólio profissional ganha autoridade extra — o template HTML de portfólio criativo entrega galeria de cases para freelancer, designer ou fotógrafo. Se quer publicar conteúdo recorrente para nutrir audiência, o blog do Htmly tem guias práticos de marca pessoal e SEO. Para gerar uma landing page totalmente customizada para seu nicho, use o builder de landing page com IA. E o fluxo de criar site com IA passo a passo explica desde a escolha do tema até a publicação.
O que vem incluído
- ✓Avatar circular grande com gradient (96-104px) ou emoji editável — sem precisar de foto se preferir
- ✓Nome + handle (@seuhandle) + bio curta de 1-2 linhas em destaque
- ✓Fileira de 5 ícones de redes sociais com hover sutil (Instagram, YouTube, LinkedIn, TikTok, e-mail) — duplique pra adicionar Spotify, X, Threads, GitHub etc.
- ✓Lista vertical de 7 botões clicáveis com ícone, título e descrição curta — duplique pra adicionar mais destinos
- ✓Botão destacado em gradient primary (Featured) pra CTA principal — perfeito pra novo curso, lançamento, link de afiliado, promoção da semana
- ✓Cada botão tem hover lift sutil (translateY -2px) e seta animada na direita — feedback visual gostoso
- ✓Background gradient escuro com radiais coloridos roxo + verde água (paleta editável) — visual moderno e aerado
- ✓Glassmorphism nos cards (backdrop-filter: blur) — efeito vidro fosco que respeita performance mobile
- ✓Schema.org `Person` inline com `jobTitle` e `url` — Google entende a persona quando alguém busca pelo nome
- ✓Tipografia Inter responsiva, layout centrado de no máximo 28rem — visual limpo, sem distração
- ✓Mobile-first com viewport-specific (`100dvh` pra altura dinâmica em iOS) — abre instantâneo no Instagram in-app browser
- ✓Acessível (WCAG AA, focus-visible em todos os links, `prefers-reduced-motion` respeitado, alt em ícones SVG)
- ✓HTML estático aberto — você pode baixar o código, editar localmente em qualquer editor e hospedar onde preferir
Como personalizar com IA
- 1Peça ao ChatGPT: 'reescreva esta página de links HTML pra [SUA PERSONA — ex: fotógrafo de casamento / nutricionista funcional / cantor / programador freela], trocando "Júlia Souza" e "@juliasouza" pelos meus dados, e adaptando os 7 botões pros meus destinos reais (cursos, redes sociais, portfolio, loja, contato)'
- 2Substitua o emoji do avatar `<div class="avatar">👩💻</div>` por um emoji que represente você (📷 fotógrafo, 🎤 músico, 🎨 designer, 🎯 coach, 💄 maquiadora) ou troque por uma foto real (`<img>` com border-radius 50%)
- 3Personalize o botão Featured (destacado) — duplique se quiser 2 CTAs principais. Edite ícone, título ('Novo curso de UI/UX Design') e descrição ('Vagas limitadas · 50% de desconto até sexta'). Bom pra promoções urgentes
- 4Adicione/remova ícones de redes na `<nav class="socials">` — duplique um `<a class="social">` e troque o SVG e o `href`. Apague redes que não usa (LinkedIn pra creator B2C, TikTok pra profissional sério, etc.)
- 5Personalize a paleta no bloco `:root` do `<style>` — `--bg-from`, `--bg-mid`, `--bg-to` (gradient de fundo), `--color-primary` e `--color-accent` (cores de destaque). Pra paleta clara, troque os 3 tons de bg pra `#fafafa #f0f0f5 #ffffff` e ajuste `--color-text` pra escuro mantendo contraste WCAG
Perguntas frequentes
Funciona pra qualquer tipo de pessoa ou só creator?▾
Funciona pra qualquer um com presença digital — fotógrafo, músico, escritor, designer, cantor, atriz, advogado, médico, professor, terapeuta, coach, consultor, freela, marca pessoal. A estrutura (avatar + bio + redes + lista de links) é universal. Cada perfil usa pra coisa diferente: creator destaca curso novo, freelancer destaca portfólio, terapeuta destaca link de agendamento, advogado destaca artigos publicados.
Quantos links posso adicionar?▾
Quantos quiser. O template vem com 7 botões de exemplo (1 destacado + 6 regulares), mas você pode duplicar a estrutura `<a class="link">...</a>` quantas vezes precisar. Pra mais de 12-15 links, vale repensar a estratégia: o seguidor escaneia 5-7 destinos no máximo. Use o botão Featured pra forçar o CTA principal e mantenha 5-7 botões regulares debaixo.
Posso usar GIF, vídeo ou imagem como avatar?▾
Sim. Troque o emoji `<div class="avatar">👩💻</div>` por uma `<img>` com `src="sua-foto.jpg"` ou `sua-foto.gif`. Mantenha o `border-radius: 50%` no CSS pra manter circular. Pra GIF/vídeo, comprima antes (max 300KB) — cada KB extra atrasa o carregamento no celular do seguidor que clicou da bio do Instagram. Foto profissional, ilustração SVG ou emoji são as opções com melhor performance.
Como acompanho cliques em cada botão?▾
Hoje o Htmly mostra apenas as visualizações totais da página. Pra clique-por-clique, você pode (1) usar UTM tags em cada `href` (ex: `?utm_source=biolink&utm_medium=instagram&utm_campaign=curso`) e ver no Google Analytics ou na plataforma de destino, ou (2) usar um encurtador com analytics (Bitly, TinyURL) pra cada botão. Pra creator com volume alto, vale a pena o esforço.
Posso usar domínio próprio (`meunome.com.br`) em vez de subdomínio Htmly?▾
Sim, no plano Pro. Você registra o domínio onde preferir (Registro.br, GoDaddy etc.) e aponta pro Htmly via CNAME — fazemos a configuração SSL automática via Cloudflare for SaaS. Subdomínio grátis (`seunome.htmly.com.br`) também funciona pra sempre, sem expirar — e já é mais memorável que qualquer URL com hash.