Htmly
Site Completo

Template HTML para Site Institucional de Empresa — Grátis e Editável

Template HTML grátis editável para site institucional de empresa com hero, sobre, serviços, equipe, contato e Schema.org ProfessionalService.

empresa
institucional
pme
consultoria
b2b
agencia
site-institucional

Sobre este template

Para quem é este template

Você toca uma empresa pequena ou média — consultoria, agência, escritório de advocacia, contabilidade, arquitetura, software house, marketing, RH, qualquer serviço B2B — e precisa de um site institucional de verdade. O cliente potencial pesquisa o nome da empresa no Google antes da reunião, encontra o site (ou pior, não encontra), abre no celular e faz a primeira impressão em 5 segundos. Você quer hero claro com proposta de valor, sobre que conta a história, lista de serviços, equipe para dar rosto, contato com formulário e endereço.

Layout pensado para qualquer PME, consultoria, agência ou profissional liberal. Header sticky dark com brand mark + navegação + CTA 'Fale conosco' sempre visível, hero dark com tagline em gradient e 2 CTAs (proposta + serviços), sobre com layout split (imagem + texto + 3 stats editáveis), 4 cards de serviços com numeração (01, 02, 03, 04), grid de 4 cards de equipe (avatar com iniciais + nome + cargo + descrição curta), seção de contato com 4 contact items (endereço, telefone, e-mail, horário) e formulário lateral, footer dark com 3 colunas (Empresa / Soluções / Legal) + CNPJ. Schema.org ProfessionalService inline com endereço, telefone e priceRange — Google entende automaticamente.

Por que publicar no Htmly

Template grátis, publicação em 10 segundos, HTTPS automático e link curto compartilhável (novacore.htmly.com.br). Edite direto no navegador — clique no nome da empresa, na proposta, nos números das stats, nos serviços e digite. Sem cadastro para testar. Quando estiver pronto, aponte o domínio próprio (novacore.com.br) pelo plano Pro para cliente potencial encontrar você no Google quando buscar pelo nome da empresa.

Próximos passos

PME B2B costumam combinar site institucional com landing pages de captação por serviço — o template de landing page para SaaS B2B entrega estrutura de conversão para tecnologia, e o template de landing page para advogado serve como referência para qualquer serviço profissional regulado. Se quer gerar landing totalmente customizada por serviço, a ferramenta de criar landing page por IA gera um prompt pronto para ChatGPT ou Claude. E para domínio próprio (empresa.com.br) e funcionalidades extras, confira os planos do Htmly Pro.

O que vem incluído

  • ✓Header sticky dark com brand mark + navegação (Sobre, Serviços, Equipe) e CTA 'Fale conosco' em destaque amarelo
  • ✓Hero dark com tagline em gradient (azul + amarelo via `background-clip: text`) e 2 CTAs claros: 'Solicitar proposta' (primary) + 'Nossos serviços' (ghost)
  • ✓Section 'Sobre' com layout split (imagem 4:3 com box-shadow + texto explicativo) + 3 stats editáveis (Projetos entregues, Clientes ativos, Anos de mercado)
  • ✓Quatro cards de serviços com numeração visual (01, 02, 03, 04) em pílula colorida — duplique pra adicionar mais serviços
  • ✓Grid de 4 cards de equipe com avatar de iniciais (gradient azul-amarelo), nome, cargo (em azul) e descrição curta (1 linha)
  • ✓Seção de contato com 4 contact items (Endereço, Telefone, E-mail, Horário) com ícones SVG e formulário lateral pronto (nome, e-mail, telefone, mensagem)
  • ✓Schema.org `ProfessionalService` inline com `priceRange`, `address` e `telephone` — Google exibe Knowledge Panel quando alguém busca pelo nome da empresa
  • ✓Footer dark com 3 colunas (Empresa, Soluções, Legal) + CNPJ + brand recap — visual de empresa séria
  • ✓Tipografia Manrope (sem serif e profissional), paleta azul institucional + amarelo accent + dark elegante
  • ✓Mobile-first com layout que reorganiza split em coluna automática no celular
  • ✓Acessível (WCAG AA, focus-visible em todos os elementos interativos, navegação por teclado, `prefers-reduced-motion` respeitado, alt em imagens)
  • ✓HTML estático aberto — você pode baixar o código, editar localmente em qualquer editor e hospedar onde preferir

Como personalizar com IA

  1. 1Peça ao ChatGPT: 'reescreva este site institucional HTML pra [NOME DA MINHA EMPRESA], área de [SEU SETOR — ex: contabilidade, advocacia, marketing digital, engenharia], mantendo as 6 seções (header, hero, sobre, serviços, equipe, contato) e adaptando os 4 serviços e os 3 stats pros números reais da empresa'
  2. 2Atualize o Schema.org `ProfessionalService` no `<head>` — troque `name`, `description`, `address` (rua, cidade, CEP), `telephone`. Adicione `priceRange` ('$$' = mid-market, '$$$' = premium). Google passa a indexar essas info no Knowledge Panel automaticamente
  3. 3Substitua a equipe pelos seus reais — troque os 4 cards (Roberto Almeida, Patrícia Lima, Diego Santos, Fernanda Costa) pelos nomes reais e edite as iniciais nos avatares (`<div class="avatar">RA</div>` → suas iniciais). Pra equipe maior, duplique `.team-card`
  4. 4Edite o formulário de contato — o `<form>` está com `onsubmit="return false;"` por padrão (não envia). Pra fazer funcionar, aponte o `action` pra Formspree, Basin, Web3Forms ou backend próprio. Alternativamente, troque o form todo por um Google Forms embedado em `<iframe>`
  5. 5Personalize a paleta no bloco `:root` — `--color-primary` (azul), `--color-accent` (amarelo) e `--color-dark` (azul-marinho do header/footer) definem o tom. Pra área jurídica/contábil, troque pra azul-marinho `#1a237e` + dourado `#c9a56b` + dark `#0c1829`. Pra área criativa, mantenha azul mas troque accent pra rosa `#ec4899`. Mantenha contraste WCAG AA

Perguntas frequentes

Funciona pra qualquer setor (advocacia, contabilidade, marketing, engenharia)?▾

Sim. As 6 seções (hero, sobre, serviços, equipe, contato, footer) servem pra qualquer empresa B2B ou profissional liberal. Pra advocacia, troque os 4 serviços por 'Direito empresarial / Trabalhista / Tributário / Família'. Pra contabilidade, 'Abertura de empresa / DAS-MEI / Imposto de Renda / Folha de pagamento'. Pra agência de marketing, 'Estratégia / Performance / Branding / Conteúdo'. O esqueleto serve.

Como o Schema.org ProfessionalService ajuda no Google?▾

O bloco `<script type="application/ld+json">` no `<head>` declara estruturadamente que a página é um serviço profissional — com nome da empresa, endereço, telefone e priceRange. Isso aumenta a chance do Google exibir o Knowledge Panel quando alguém busca pelo nome da sua empresa (com endereço, telefone e horário em destaque na lateral) e também ajuda em buscas locais ('contabilidade [seu bairro]'). Sem schema, Google teria que adivinhar.

O formulário de contato funciona de cara?▾

Não. Como é HTML estático, o `<form>` vem com `onsubmit="return false;"` — visualmente funcional pra preview, mas não envia nada. Pra fazer funcionar, você tem 3 caminhos. (1) Apontar `action` pra serviço de form-to-email tipo Formspree, Basin, Web3Forms — copiar e colar o endpoint. (2) Trocar o form inteiro por um Google Forms embedado em `<iframe>`. (3) Backend próprio com endpoint custom. Pra empresa pequena, opção (1) ou (2) leva 5 minutos.

Posso adicionar página separada de cases, blog ou política de privacidade?▾

Sim. O template é uma página única (`index.html`), mas você pode criar arquivos HTML novos no mesmo diretório (`cases.html`, `blog.html`, `privacidade.html`) e linkar dos `<a href="#">` no footer ou no nav. Pra cases, duplique a estrutura `.section` e adicione cards. Pra política de privacidade e termos, peça ao ChatGPT pra gerar texto LGPD-compliant baseado no seu setor — e cole dentro de um `<article>` simples.

Posso usar domínio próprio (`empresa.com.br`) em vez de subdomínio Htmly?▾

Sim, no plano Pro — e é altamente recomendável pra empresa séria. 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. Cliente potencial procurando pelo nome da empresa no Google encontra `empresa.com.br`, não `empresa.htmly.com.br`. Subdomínio grátis também funciona pra sempre — útil enquanto valida o negócio.