Template HTML para Site de Escola Particular — Grátis e Editável
Template HTML grátis editável para escola particular com hero de matrículas, programas infantil/fundamental/médio, equipe e Schema.org School.
Sobre este template
Para quem é este template
Você dirige ou coordena uma escola particular pequena ou média (200 a 1.500 alunos) e cansou de pais procurando o site da escola no Google e não achando — ou achando um site dos anos 2010 que envergonha. Quer um endereço institucional moderno, com programas (infantil, fundamental, médio), diferenciais pedagógicos, equipe, calendário de matrícula e contato direto. Tudo em uma página, mobile-first, para ser respondido por pais que pesquisam no celular antes da reunião com vocês.
O layout segue a estética das melhores escolas particulares brasileiras: header sticky com CTA 'Matricule-se' sempre visível, hero gradient azul institucional com tagline forte, faixa de stats (anos, alunos, % ENEM, professores), 3 cards de programas alinhados à BNCC, 4 diferenciais pedagógicos, equipe com avatares editáveis, banner de matrícula em destaque e contato com endereço, telefone e horário da secretaria. Schema.org School inline para que o Google entenda automaticamente endereço e telefone — Knowledge Panel sai sem você configurar nada.
Por que publicar no Htmly
Template grátis, publicação em 10 segundos, HTTPS automático via Cloudflare e link compartilhável (colegio-saber.htmly.com.br). Edite direto no navegador — clique nos números das stats, nos nomes da equipe, no endereço da secretaria e digite. Sem cadastro para testar. Quando estiver pronto, aponte o domínio próprio (colegiosaber.com.br) pelo plano Pro e tenha o site institucional no ar antes da próxima reunião com pais.
Próximos passos
Escola que quer gerar landing pages dedicadas para cada janela de matrícula (matrícula 2027, vestibulinho, intercâmbio) ganha tração com o gerador de landing page com IA. Para entender o fluxo de criação com IA do zero, o guia de criar site com IA cobre as decisões de conteúdo. O gerador de QR Code online ajuda a imprimir QR no folder de matrícula apontando para o link de inscrição. E para domínio próprio (colegio.edu.br), confira os planos do Htmly.
O que vem incluído
- ✓Header sticky com navegação (Programas, Diferenciais, Contato) e CTA 'Matricule-se' sempre visível em scroll
- ✓Hero gradient azul institucional com 2 CTAs (Matrículas + Conheça a escola) e tagline editável em destaque
- ✓Faixa de stats com 4 números (anos de história, alunos matriculados, % ENEM, professores) — todos editáveis em segundos
- ✓Três program cards (Educação Infantil, Fundamental, Médio) com 4 diferenciais por etapa, alinhados à BNCC
- ✓Grid de 4 diferenciais pedagógicos com ícones SVG inline (Tecnologia, Bilíngue, Robótica/STEM, Infraestrutura)
- ✓Section 'Equipe pedagógica' com 4 cards e avatares com iniciais editáveis (Diretora, Coord. Pedagógico, Coord. Infantil, Coord. Médio)
- ✓Banner de matrícula em destaque com CTA 'Agendar visita' — destaca a janela sazonal de matrícula
- ✓Três contact cards (Endereço, Telefone+WhatsApp, Horário da secretaria) atualizáveis sem editor
- ✓Schema.org `School` inline com endereço, telefone e descrição — Google entende automaticamente sem você configurar nada
- ✓Tipografia Manrope com fluidez clamp, paleta azul institucional + amarelo accent + roxo (etapa médio)
- ✓Acessível (WCAG AA, focus-visible, mobile-first, navegação por teclado, `prefers-reduced-motion` respeitado)
Como personalizar com IA
- 1Peça ao ChatGPT: 'reescreva os 3 cards de programas (Infantil, Fundamental, Médio) trocando os 4 diferenciais de cada etapa pelas características reais da [NOME DA ESCOLA], mantendo o tom institucional e o alinhamento com BNCC'
- 2Atualize as 4 stats da faixa (25+ anos, 1.200 alunos, 98% ENEM, 85 professores) com seus números reais — busque por `<span class="number">` no HTML e troque por seus valores e rótulos
- 3Substitua a equipe pedagógica — troque os 4 cards (Maria Regina, Carlos Fernandes, Lúcia Santana, Roberto Almeida) pelos nomes reais da escola e edite as iniciais nos avatares (`<div class="avatar">MR</div>` → suas iniciais)
- 4Edite o Schema.org `School` no `<head>` — troque endereço (`Av. Brasil, 1500`), telefone (`+551122223333`) e nome do colégio. O Google passa a indexar essas informações no Knowledge Graph automaticamente
- 5Atualize o banner de matrícula — troque 'Matrículas 2027 abertas' pela janela atual da sua escola e edite o link do botão 'Agendar visita' pra um Google Forms, link de WhatsApp ou e-mail da secretaria
Perguntas frequentes
Funciona pra escola pública, municipal ou técnica?▾
Sim. O esqueleto institucional (programas, diferenciais, equipe, contato) serve pra qualquer escola — particular, pública, técnica, federal ou cooperativa. Pra escola pública, troque 'Matrículas 2027' por 'Matrículas via SED/SISGRA' (ou o sistema da sua rede) e a stat '% ENEM' por outro indicador relevante (índice IDEB, aprovação em vestibular, ranking regional).
Como o Schema.org `School` ajuda no Google?▾
O bloco `<script type="application/ld+json">` no `<head>` declara estruturadamente que a página é uma escola — com endereço, telefone e descrição. Isso aumenta a chance do Google exibir o cartão da escola na busca local (Knowledge Panel) e nos resultados de 'escola particular [bairro]'. Sem isso, o Google teria que adivinhar a partir do HTML — com schema, ele tem certeza.
Posso adicionar formulário real de contato ou matrícula?▾
O template é HTML estático, então não roda PHP/Node por trás. Mas você pode embedar um Google Forms, Typeform ou JotForm dentro de um `<iframe>` na seção de matrícula — solução mais rápida e sem custo. Pra um formulário com banco de dados próprio, recomenda-se enviar os dados pra um endpoint via JavaScript (Formspree, Basin, ou backend próprio).
Como atualizo o calendário escolar e os comunicados?▾
Edite direto no HTML pelo editor visual do Htmly — clique no que quiser mudar e digite. Pra comunicados frequentes (reuniões, calendário, eventos), recomenda-se adicionar uma seção 'Avisos' antes do hero. Pra calendário escolar completo, considere subir um PDF e linkar (`<a href="calendario-2026.pdf">Calendário escolar 2026</a>`) — o Htmly hospeda PDFs grátis e o link fica permanente.
A página é acessível pra pais com baixa visão ou deficiência motora?▾
Sim. WCAG AA: contraste verificado em todos os textos, focus-visible em links e botões, navegação por teclado funcional, alt nas imagens, `prefers-reduced-motion` respeitado, tipografia escalável (clamp). Funciona com leitores de tela (NVDA, VoiceOver, TalkBack). Mobile-first — pais que pesquisam no celular durante o trabalho ou no transporte conseguem ler tudo confortavelmente.