Template HTML para Página de Evento — Workshop, Palestra e Conferência
Template HTML grátis editável para página de evento, workshop, palestra ou conferência com agenda, palestrantes e Schema.org Event.
Sobre este template
Para quem é este template
Você está organizando um evento — workshop, meetup técnico, palestra, lançamento de produto, festa pequena, conferência ou bootcamp — e precisa de uma página dedicada que comunique a proposta em 30 segundos pro inscrito potencial. Quer mostrar a data com destaque, o local, os palestrantes, a agenda completa, o que está incluso e um botão claro de inscrição apontando pro seu formulário de inscrição (Google Forms, Typeform, JotForm) ou checkout externo.
Layout pensado para qualquer organizador de evento (corporativo ou independente, presencial, online ou híbrido, grátis ou pago). Header sticky com navegação e CTA 'Inscreva-se' sempre visível, hero com pílula de data + título com gradient, 4 tiles editáveis (Data / Horário / Local / Vagas), agenda com 7 talks de exemplo (cada um com horário, descrição e palestrante opcional), grid de 4 palestrantes (avatar com iniciais, role e empresa) e bloco de CTA destacado com lote, preço e o que está incluso (almoço, coffee break, certificado, gravação). Schema.org Event inline para que o Google exiba detalhes do evento direto no SERP.
Por que publicar no Htmly
Template grátis, publicação em 10 segundos, HTTPS automático e link curto compartilhável (techconf-2026.htmly.com.br). Edite direto no navegador — clique no nome do evento, na data, no nome do palestrante, na agenda e digite. Sem cadastro para testar. Quando estiver pronto, aponte o botão de inscrição para seu formulário externo. Domínio próprio (techconf2026.com.br) disponível no plano Pro.
Próximos passos
Para lançamentos de produto B2B ou eventos corporativos, o template de landing page para SaaS B2B entrega uma estrutura mais focada em conversão de inscrição corporativa. Se quer uma página totalmente customizada para o seu evento, use a ferramenta de gerar landing por IA — você responde 8 perguntas e recebe um prompt pronto para ChatGPT ou Claude. A ferramenta de criar QR Code online ajuda a imprimir QR no ingresso ou crachá. E o tutorial de criar site com IA cobre o fluxo completo.
O que vem incluído
- ✓Header sticky com navegação (Programação, Palestrantes) e CTA 'Inscreva-se' sempre visível em qualquer scroll
- ✓Hero com pílula de data destacada, título com gradient azul-amarelo e subtítulo editável pra resumo do evento
- ✓Quatro info tiles editáveis no hero: Data, Horário, Local e Vagas — cada um com ícone SVG e valor curto
- ✓Agenda com 7 talks de exemplo (horário, título, descrição curta e palestrante opcional) — duplique pra adicionar mais sessões
- ✓Tag opcional 'Hands-on' (ou outras que você criar) pra destacar workshops práticos dentro da agenda
- ✓Grid de 4 palestrantes com avatar de iniciais editáveis, nome, role e empresa — duplique o `.speaker` pra adicionar mais
- ✓Bloco de CTA destacado com lote ('Lote promocional · vagas limitadas'), preço e botão 'Inscrever-se agora' apontando pro seu formulário externo
- ✓Lista do que está incluso (almoço, coffee break, certificado digital, gravação dos talks) — editável e duplicável
- ✓Schema.org `Event` inline com `startDate`, `endDate`, `location`, `offers` (preço, moeda BRL e disponibilidade) — Google entende e exibe o cartão do evento direto no SERP
- ✓Tipografia Manrope com fluidez clamp, paleta azul institucional + amarelo accent
- ✓Mobile-first com tipografia fluid (clamp) — inscrito potencial lê e se inscreve direto do celular
- ✓Acessível (WCAG AA, focus-visible, navegação por teclado, `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 o hero deste HTML trocando "TechConf 2026" pelo nome [DO MEU EVENTO], a data "15 de junho de 2026" pela [MINHA DATA], o local "São Paulo" pelo [MEU LOCAL] e gere uma agenda de [N] talks adequada ao tema [DO MEU EVENTO] mantendo a estrutura'
- 2Aponte o botão 'Inscrever-se agora' pro seu formulário externo — troque o `href="#"` pra um link do Google Forms, Typeform, JotForm, página de checkout, ou link de pagamento. Cliente clica e vai direto pra inscrição
- 3Edite o Schema.org `Event` no `<head>` — troque `name`, `startDate`, `endDate` (formato ISO 8601 com timezone), `location` (endereço completo) e `offers.price` (em BRL). Google exibe o cartão do evento na busca por nome do evento
- 4Substitua os 4 palestrantes pelos seus reais — troque iniciais nos avatares (`<div class="avatar">LF</div>`), nome, role e empresa. Pra eventos com mais de 4 speakers, duplique o `.speaker`
- 5Personalize a paleta no bloco `:root` — `--color-primary` (azul) e `--color-accent` (amarelo) definem o tom. Pra evento mais sóbrio (jurídico, médico, financeiro), troque pra azul-marinho `#1a237e` + cinza `#37474f`. Pra evento criativo (música, design), troque pra rosa `#ec4899` + roxo `#8b5cf6`
Perguntas frequentes
Funciona pra evento grátis ou só pra evento pago?▾
Os dois. Pro evento pago, mantenha o bloco de CTA com preço e aponte o botão pro seu link de checkout (Stripe, Mercado Pago, link de PIX). Pro evento grátis, troque o preço por 'Inscrição gratuita' ou apague o bloco de preço inteiro e aponte o botão pra um Google Forms simples coletando nome, e-mail e celular. A estrutura serve igual.
Como funciona a inscrição? O template tem formulário próprio?▾
O template é HTML estático, então não roda back-end nativo. Mas você pode (1) embedar um Google Forms, Typeform ou JotForm dentro de um `<iframe>` na seção de inscrição, ou (2) deixar o botão 'Inscrever-se' apontando pro link externo do seu formulário. Pra evento pago, aponte pro checkout (Stripe, Mercado Pago, plataforma de ingresso) — o template fica como vitrine.
Posso usar pra evento online ou híbrido?▾
Sim. No tile 'Local' do hero, troque 'São Paulo' por 'Online via Zoom' ou 'Híbrido · São Paulo + transmissão online'. No Schema.org `Event`, ajuste `eventAttendanceMode` pra `OnlineEventAttendanceMode` (online), `MixedEventAttendanceMode` (híbrido) ou mantenha `OfflineEventAttendanceMode` (presencial). Google exibe o badge correto no SERP.
O Schema.org Event ajuda mesmo no Google?▾
Sim. O bloco `<script type="application/ld+json">` no `<head>` declara estruturadamente que a página é um evento — com data, local, preço e disponibilidade. Isso aumenta a chance do Google exibir o cartão do evento na busca (com data, local e preço destacados) e fazer o evento aparecer em buscas tipo 'eventos de tecnologia em São Paulo junho 2026'. Sem schema, o Google teria que adivinhar a partir do HTML.
Posso usar domínio próprio (`meuevento.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 (`techconf-2026.htmly.com.br`) também funciona pra sempre, sem expirar — útil pra eventos pontuais que não justificam comprar domínio.