Template HTML para Site de ONG e Projeto Social — Grátis e Editável
Template HTML grátis editável para ONG e projeto social com hero de doação, faixa de impacto, projetos, voluntariado e bloco PIX integrado.
Sobre este template
Para quem é este template
Você toca uma ONG, coletivo, projeto social, instituição religiosa, associação ou fundação — e precisa de site institucional para captação de doações e legitimação. Doador potencial chega pelo Instagram, WhatsApp ou Google e quer entender em 30 segundos: quem são vocês, o que fazem, qual o impacto real, como cada doação é gasta, como ele pode ajudar (doar ou virar voluntário). Site institucional sério é a vitrine que valida o trabalho — sem isso, doador desconfia, voluntário não se inscreve, parceiro corporativo não responde e-mail.
Layout pensado para qualquer ONG ou projeto social brasileiro com CNPJ. Header sticky com brand mark + nav (Missão, Projetos, Voluntariado) + CTA 'Doar agora' em vermelho sempre visível, hero verde gradient com tagline emocional + 2 CTAs (Doar agora vermelho + Voluntário ghost), faixa de impacto com 4 stats (crianças atendidas, comunidades, voluntários, refeições/ano), seção de missão em 3 pilares (Educação / Alimentação / Sustentabilidade — editáveis para qualquer causa), grid de 3 projetos com card (imagem gradient + ícone SVG, título, descrição, número de impacto), bloco de doação destacado vermelho com valores em pílula (R$ 30, 50, 100, 200, Outro) + botão PIX, seção de voluntariado em 3 cards (Professor, Apoio admin, Eventos — editáveis), seção de transparência com 3 percentuais editáveis (% investido em projetos / % operacional / % captação) e footer dark verde com OSCIP + CNPJ + nota de dedutibilidade no IR. Schema.org NGO inline com foundingDate.
Por que publicar no Htmly
Template grátis, publicação em 10 segundos, HTTPS automático e link curto compartilhável (instituto-raizes.htmly.com.br). Edite direto no navegador — clique no nome da ONG, na missão, nos números de impacto, nos percentuais de transparência e digite. Sem cadastro para testar. Quando estiver pronto, aponte o domínio próprio (institutoraizes.org.br) pelo plano Pro para parecer ainda mais sério no olhar do doador.
Próximos passos
ONG que faz captação corporativa ou lança campanhas pontuais (Dia das Crianças, Natal Solidário) ganha tração com o criador de landing page com IA, gerando página dedicada por campanha em minutos. Para entender o fluxo de criação com IA do zero, o guia de como criar site com IA cobre o passo a passo. O gerador de QR Code para PIX ajuda a imprimir QR Code no flyer de doação. E para domínio próprio (minhaong.org.br), confira os planos pagos.
O que vem incluído
- ✓Header sticky com brand mark + navegação (Missão, Projetos, Voluntariado) e CTA 'Doar agora' em vermelho sempre visível
- ✓Hero verde gradient com tagline emocional ('Educação que muda histórias') + 2 CTAs claros: 'Doar agora' (vermelho com ícone de coração) + 'Seja voluntário' (ghost)
- ✓Faixa de impacto com 4 stats editáveis (crianças atendidas, comunidades, voluntários ativos, refeições/ano) — números em destaque verde, fácil de atualizar
- ✓Seção de missão em 3 pilares com border-left verde (Educação, Alimentação, Sustentabilidade) — cada um com ícone SVG, título e descrição. Renomeie pros 3 eixos da sua causa
- ✓Grid de 3 projetos com card responsivo: imagem com gradient + ícone SVG temático (educação azul / alimentação amarelo / ambiente verde), título, descrição e número de impacto em destaque
- ✓Bloco de doação destacado em gradient vermelho com 5 valores em pílula (R$ 30, 50, 100, 200, Outro) + botão grande 'Doar via PIX'
- ✓Seção de voluntariado em 3 cards (Professor voluntário, Apoio administrativo, Eventos e campanhas) — cada um com ícone, título e descrição. Editável pra perfis reais que você procura
- ✓Seção de transparência com 3 percentuais editáveis (82% investido em projetos / 12% operacional / 6% captação) — passa credibilidade direto pro doador potencial
- ✓Schema.org `NGO` inline com `name`, `description`, `foundingDate` e `address` — Google entende automaticamente que é organização sem fins lucrativos
- ✓Footer dark verde com OSCIP nº + CNPJ + nota 'Doações dedutíveis no IR' — credibilidade institucional
- ✓Tipografia Manrope, paleta verde institucional + accent vermelho (caridade) — visual sério e empático
- ✓Mobile-first com layout que reorganiza 3-coluna em 1-coluna no celular — doador potencial lê e doa direto do mobile
- ✓Acessível (WCAG AA, focus-visible, navegação por teclado, alt em ícones SVG, `prefers-reduced-motion` respeitado)
- ✓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 este site de ONG HTML pra [NOME DA NOSSA ORGANIZAÇÃO], área de [SUA CAUSA — ex: animais abandonados, idosos em situação de rua, mulheres vítimas de violência, alfabetização adulta, esporte para juventude], adaptando os 3 pilares, os 3 projetos, os 4 stats e os 3 percentuais de transparência pros números reais da nossa atuação'
- 2Atualize o bloco de doação PIX — troque o `<a href="#">` do botão 'Doar via PIX' por um link único de cobrança (gere no seu app do banco), por uma página externa de doação (Doare, Pague.app, link do Stripe) ou por um QR Code Pix embedado como `<img>` na seção. Adicione mensagem 'Chave Pix: [email protected]' abaixo do botão
- 3Edite o Schema.org `NGO` no `<head>` — troque `name`, `description`, `foundingDate` (ano de fundação), `address` (endereço completo). Google passa a indexar essas info no Knowledge Panel automaticamente quando alguém busca pela ONG
- 4Atualize a seção de transparência com seus números reais — `82%` (projetos), `12%` (operacional), `6%` (captação). Pra ONG madura com auditoria independente, vale linkar o relatório anual em PDF (`<a href="relatorio-2025.pdf">Ver relatório auditado 2025</a>`) abaixo dos percentuais
- 5Personalize a paleta no bloco `:root` — `--color-primary` (verde) e `--color-accent` (vermelho) definem o tom. Pra causa ambiental, mantenha verde. Pra causa social/saúde, troque pra azul `#1d4ed8` + laranja `#ea580c`. Pra causa cultural/educação, lilás `#7c3aed` + amarelo `#eab308`. Pra causa religiosa, pode ir pra azul-marinho `#1e3a8a` + dourado `#c9a56b`. Mantenha contraste WCAG
Perguntas frequentes
Funciona pra qualquer tipo de causa ou só pra educação?▾
Qualquer causa. Os 3 pilares de exemplo (Educação, Alimentação, Sustentabilidade) são totalmente editáveis. ONG de animais? Troque pra 'Resgate / Adoção / Esterilização'. Projeto cultural? 'Acervo / Oficinas / Apresentações'. Coletivo de mulheres? 'Acolhimento / Capacitação / Advocacy'. ONG religiosa? 'Espiritualidade / Assistência social / Educação'. A estrutura (impacto + missão + projetos + transparência + doação + voluntariado) é universal pra qualquer organização sem fins lucrativos.
Como configuro doação via PIX direto na página?▾
Tem 3 caminhos. (1) Mais simples — gere QR Code Pix com chave da ONG (CNPJ ou e-mail) em qualquer ferramenta gratuita de gerar QR Code, salve como PNG e cole `<img src="qr-pix.png">` na seção de doação. (2) Cobrança única — gere link de cobrança Pix no app do banco (Banco do Brasil, Itaú, Bradesco, Sicoob suportam) e aponte o botão 'Doar via PIX' pra esse link. (3) Plataforma de doação — aponte o botão pra Doare, Pague.app, Mercado Pago ou link de plataforma especializada que dá recibo automático e dedutibilidade no IR.
Como o Schema.org NGO ajuda no Google?▾
O bloco `<script type="application/ld+json">` no `<head>` declara estruturadamente que a página é organização sem fins lucrativos — com nome, descrição, ano de fundação e endereço. Aumenta a chance do Google exibir o Knowledge Panel quando alguém busca pelo nome da ONG (com endereço, telefone e horário em destaque) e melhora ranking em buscas como 'ONG [sua área] [sua cidade]'. Pra ONG conseguindo doação por busca orgânica, é grátis e essencial.
Posso adicionar relatórios anuais, estatuto e ata em PDF na seção de transparência?▾
Sim. Suba os PDFs no Htmly junto com o HTML (mesma pasta do template) e linke direto: `<a href="relatorio-anual-2025.pdf">Relatório anual 2025</a>`, `<a href="estatuto.pdf">Estatuto social</a>`, `<a href="ata-eleicao-2024.pdf">Ata de eleição da diretoria</a>`. Recomendamos adicionar uma subseção 'Documentos públicos' dentro de Transparência. PDFs hospedam grátis no Htmly e ficam linkáveis permanentemente — passa credibilidade real.
Posso usar domínio próprio (`minhaong.org.br`) em vez de subdomínio Htmly?▾
Sim, no plano Pro — altamente recomendável pra ONG séria. ONGs no Brasil tradicionalmente usam `.org.br` (registro custa ~R$ 40/ano no Registro.br pra ONG com CNPJ). Aponte pro Htmly via CNAME — fazemos a configuração SSL automática via Cloudflare for SaaS. Doador potencial e parceiro corporativo confiam muito mais em `minhaong.org.br` do que em `.htmly.com.br`. Subdomínio grátis também funciona pra sempre — útil enquanto monta o orçamento.