Template pronto em HTML e CSS é um site completo em arquivos: você baixa um ZIP, abre num editor, troca texto e imagem, e publica. Existe em abundância e de graça, e a parte que quase ninguém confere antes de publicar é a licença.
Este texto mostra onde baixar, como ler a licença, a armadilha do formulário de contato, o que conferir antes de subir e onde o template para de resolver.
Onde baixar
| Fonte | Melhor para | O que esperar |
|---|---|---|
| HTML5 UP | página institucional e portfólio | acabamento alto, poucos e muito bem feitos; exige crédito |
| Start Bootstrap | página de venda e site institucional | construídos em Bootstrap, licença permissiva |
| Colorlib | variedade por segmento | catálogo grande, qualidade irregular; confira caso a caso |
| StyleShout | portfólio e página pessoal | poucos modelos, visual limpo |
| Cruip | página de venda de produto digital | versões em HTML e também em bibliotecas de interface |
| ThemeWagon | procurar por categoria | catálogo muito grande, com parte gratuita e parte paga |
| Freebiesbug | garimpar | curadoria de recursos gratuitos, não é catálogo próprio |
| BootstrapMade | site institucional | gratuito com crédito obrigatório, ou pago sem crédito |
Duas observações que economizam tempo. Catálogo grande não é vantagem: a diferença entre um lugar com dez modelos ótimos e outro com mil de qualidade irregular é o tempo que você gasta filtrando. E quase toda fonte gratuita hoje tem uma versão paga do mesmo modelo, normalmente para tirar o crédito obrigatório ou liberar suporte.
A licença é a primeira coisa a conferir
“Gratuito” não quer dizer “faça o que quiser”. Existem quatro situações diferentes debaixo dessa palavra, e a que vale para o seu caso está no arquivo LICENSE dentro do ZIP, ou na página de licença do site.
- Licença permissiva do tipo MIT: uso pessoal e comercial liberado, sem obrigação de crédito. É o caso do Start Bootstrap, cujos modelos vêm com o arquivo de licença MIT no pacote.
- Creative Commons com atribuição: uso comercial liberado, e o crédito ao autor é obrigatório. É o caso do HTML5 UP, que licencia tudo em Creative Commons Attribution 3.0 e vende à parte a versão sem atribuição. Tirar o crédito do rodapé sem pagar quebra a licença.
- Gratuito só para uso pessoal: não pode ser usado no site da empresa. Aparece bastante em catálogo grande, misturado com o resto.
- Gratuito com link obrigatório no rodapé, que é a variação mais comum em quem também vende. Aqui vale um segundo cuidado: o link vai para o site de quem fez o modelo, e é um link que sai do seu site sem você ter decidido isso.
O erro que custa é publicar o site da empresa com um modelo de uso pessoal, ou apagar o crédito de um modelo que exige crédito. Nenhum dos dois aparece como problema técnico: aparece como notificação depois.
A armadilha do formulário de contato
Praticamente todo template gratuito vem com um formulário de contato bonito que não envia nada. O HTML do formulário está lá, o visual está lá, e não existe nada do outro lado para receber, porque arquivos HTML e CSS não processam envio. É a surpresa número um de quem publica um template: o site fica no ar, o formulário aceita o preenchimento, e as mensagens não chegam a lugar nenhum.
Antes de publicar, teste o envio de verdade e veja se a mensagem chega. Se não chegar, as saídas são apontar o formulário para um serviço externo que recebe envio de formulário, trocar por um formulário incorporado de outra ferramenta, ou simplesmente substituir o formulário por telefone, e-mail e link de mensagem direta, que é o que costuma converter melhor em site pequeno de qualquer jeito.
O que conferir antes de publicar
- A licença, antes de qualquer trabalho de personalização.
- Se o formulário envia, testando de verdade.
- Se o código vem legível ou só compactado. Pacote que traz apenas o CSS e o JavaScript minificados é impossível de manter: qualquer ajuste depois vira gambiarra por cima.
- A idade das dependências. Modelo antigo carrega biblioteca abandonada, e biblioteca abandonada é onde mora falha de segurança conhecida. Olhe a data do último commit ou da última versão.
- De onde vêm as fontes e os scripts. Muitos modelos carregam fonte e biblioteca de servidor de terceiro, o que envia dado do seu visitante para fora sem aviso, com as implicações descritas em cookies de terceiros. Baixar e servir do seu próprio domínio resolve.
- Comportamento no celular, testado em aparelho real e não só reduzindo a janela do navegador. Vale a régua de mobile first.
- Acessibilidade, que é a lacuna mais comum em modelo bonito: contraste baixo, imagem sem descrição, formulário sem rótulo. O que conferir está em acessibilidade digital.
- Texto de exemplo esquecido. Faça uma busca por palavras de preenchimento no pacote inteiro antes de subir. Sobra mais vezes do que parece.
Como personalizar sem quebrar
A ordem importa, porque o jeito errado é abrir o arquivo principal e começar a mexer no meio. Um pacote típico traz o index.html na raiz, uma pasta de estilo, uma de scripts e uma de imagens, e a sequência que dá menos trabalho é esta:
- Guarde uma cópia intacta do ZIP antes de tocar em qualquer coisa. É o que permite comparar quando algo quebrar, e algo vai quebrar.
- Abra a demonstração ao lado do arquivo e identifique qual bloco de HTML corresponde a qual parte da tela antes de editar.
- Troque conteúdo primeiro, estilo depois. Texto, imagem e link são seguros; mexer em CSS antes de o conteúdo real estar no lugar faz você ajustar espaçamento para um texto que vai mudar.
- Não edite o CSS original. Crie um arquivo próprio e carregue-o depois do original, sobrescrevendo só o que precisa. Isso mantém a possibilidade de atualizar o modelo, e deixa claro o que é seu.
- Cor e fonte no topo do arquivo. Modelo bem feito declara as cores como variáveis no começo do CSS: mudar três linhas ali troca a identidade do site inteiro, e é o ajuste com melhor retorno por minuto.
- Apague o que não vai usar. Seção sobrando, biblioteca carregada sem motivo e imagem de exemplo pesam no carregamento e confundem quem for mexer depois.
- Troque as imagens por suas, mantendo a proporção das originais. Imagem de proporção diferente é o que mais deforma layout pronto.
Um editor de código qualquer serve, e o mais usado hoje mostra o resultado ao lado enquanto você digita, o que encurta muito essa etapa para quem não programa.
Painel administrativo é outra categoria
Quem procura template pronto às vezes não quer um site: quer a tela de dentro de um sistema, com menu lateral, tabela, gráfico e formulário. Isso é outra categoria de pacote, com nomes conhecidos como AdminLTE e CoreUI, e ela resolve mesmo a parte visual de um painel.
A diferença importante é que aqui o template é só a casca. Painel administrativo existe para mostrar e alterar dado, e dado precisa de servidor, banco e controle de quem pode ver o quê. O pacote entrega a aparência de um sistema e nada do sistema, o que é útil quando existe alguém para construir o resto, e enganoso quando não existe.
Onde o template para de resolver
Template resolve a vitrine, e resolve bem: página institucional, portfólio, página de venda, site de evento. Se é isso que você precisa, o caminho gratuito é legítimo e o resultado pode ser melhor que o de muito site pago.
Ele para de resolver na primeira coisa que tem lógica: formulário que precisa chegar a algum lugar, área com login, integração com o sistema que já existe, conteúdo que alguém sem programar precisa editar, cobrança. Nenhuma dessas é questão de design, e nenhuma vem no ZIP.
Nesse ponto existem três saídas, em ordem de custo. Ferramenta no-code, que resolve site editável e formulário que funciona sem ninguém programar. Plataforma low-code, quando há regra de negócio e ainda cabe em ferramenta. E desenvolvimento sob medida, quando a regra é o diferencial, com a conta em quanto custa desenvolver um produto digital e os critérios de quem executa em fábrica de software.
O critério para decidir é sempre o mesmo, e é anterior à escolha da ferramenta: o que precisa existir primeiro. Ele está em como definir o escopo do primeiro produto digital. E se o objetivo é vender online, o recorte próprio está em como criar um site de vendas, com o panorama de tipos de software em software aplicativo.
Perguntas frequentes
Onde baixar sites prontos em HTML e CSS gratuitos?
HTML5 UP tem poucos modelos e acabamento alto, bom para institucional e portfólio. Start Bootstrap serve página de venda e site institucional, com licença permissiva. Colorlib e ThemeWagon têm catálogo grande e qualidade irregular, que exige conferir caso a caso. StyleShout e Cruip são bons para portfólio e página de produto. E Freebiesbug é curadoria de recursos, não catálogo próprio.
Template gratuito pode ser usado comercialmente?
Depende da licença, e existem quatro situações debaixo da palavra grátis. Licença permissiva do tipo MIT libera uso comercial sem crédito. Creative Commons com atribuição libera o uso comercial e obriga a manter o crédito. Gratuito só para uso pessoal não pode ir para o site da empresa. E gratuito com link obrigatório no rodapé exige manter o link de quem fez.
Onde encontro a licença de um template?
No arquivo LICENSE dentro do ZIP, ou na página de licença do site que distribui. É a primeira coisa a conferir, antes de qualquer trabalho de personalização. O erro que custa é publicar o site da empresa com um modelo de uso pessoal, ou apagar o crédito de um modelo que exige crédito: nenhum dos dois aparece como problema técnico, aparece como notificação depois.
Preciso dar crédito ao usar um template do HTML5 UP?
Sim. O HTML5 UP licencia todos os modelos em Creative Commons Attribution 3.0, o que libera uso pessoal e comercial e obriga a dar crédito ao autor pelo design. Tirar o crédito do rodapé sem pagar quebra a licença: quem quer a versão sem atribuição compra à parte. Já os modelos do Start Bootstrap vêm com licença MIT no pacote, que não exige crédito.
Por que o formulário de contato do template não funciona?
Porque arquivos HTML e CSS não processam envio. Praticamente todo template gratuito vem com um formulário bonito cujo visual está lá e não existe nada do outro lado para receber. É a surpresa número um de quem publica: o site fica no ar, o formulário aceita o preenchimento, e as mensagens não chegam a lugar nenhum. Teste o envio de verdade antes de publicar.
Como fazer o formulário do template enviar de verdade?
Três saídas. Apontar o formulário para um serviço externo que recebe envio e repassa por e-mail. Trocar por um formulário incorporado de outra ferramenta. Ou substituir o formulário por telefone, e-mail e link de mensagem direta, que é o que costuma converter melhor em site pequeno de qualquer jeito.
O que conferir antes de publicar um template?
A licença. Se o formulário envia. Se o código vem legível ou só compactado, porque pacote com CSS e JavaScript apenas minificados é impossível de manter. A idade das dependências, já que biblioteca abandonada é onde mora falha conhecida. De onde vêm as fontes e os scripts. Comportamento em celular real. Acessibilidade. E texto de exemplo esquecido, que sobra mais vezes do que parece.
Como personalizar um template sem quebrar?
Guarde uma cópia intacta do ZIP antes de tocar em nada. Troque conteúdo primeiro e estilo depois. Não edite o CSS original: crie um arquivo próprio e carregue depois dele, sobrescrevendo só o necessário. Mude cor e fonte nas variáveis do topo do CSS, que é o ajuste com melhor retorno por minuto. Apague o que não vai usar. E troque as imagens mantendo a proporção das originais.
Template de painel administrativo serve para fazer um sistema?
Serve para a aparência dele, e nada mais. Pacotes como AdminLTE e CoreUI resolvem bem a parte visual de um painel, com menu lateral, tabela, gráfico e formulário. Mas painel existe para mostrar e alterar dado, e dado precisa de servidor, banco e controle de quem pode ver o quê. É útil quando existe alguém para construir o resto, e enganoso quando não existe.
Quando um template pronto não é suficiente?
Ele resolve a vitrine e resolve bem: institucional, portfólio, página de venda, site de evento. Para de resolver na primeira coisa que tem lógica, como formulário que precisa chegar a algum lugar, área com login, integração com o sistema que já existe, conteúdo que alguém sem programar precisa editar, e cobrança. Nenhuma dessas é questão de design, e nenhuma vem no ZIP.