Htmly
One Page

Template HTML para Cardápio Digital com QR Code — Grátis e Editável

Template HTML grátis editável para cardápio digital de restaurante com QR Code, navegação por categorias e link compartilhável.

cardapio
cardapio-digital
restaurante
menu
qr-code
bistro
lanchonete

Sobre este template

Para quem é este template

Você toca um restaurante, bistrô, lanchonete, café, doceria ou food truck e o cardápio impresso já não dá conta — atualizar preço significa reimprimir, mudar prato significa caneta riscando o PDF, novo cliente abre o WhatsApp e pergunta 'tem cardápio?'. Você quer um link único, bonito, que abre rápido no celular do cliente, mostra todos os pratos com preços organizados por categoria e que vira QR Code para colar na mesa, no balcão ou na embalagem do delivery.

Layout pensado para qualquer estabelecimento gastronômico de pequeno ou médio porte. Paleta dark elegante (background #0e0c0a com accent bronze #e8c872), tipografia serif italic em destaque (Fraunces), 5 categorias prontas (Entradas, Principais, Massas, Sobremesas, Bebidas — todas editáveis e duplicáveis), navegação sticky com scroll suave entre seções, tags coloridas por item (vegetariano, apimentado, novo) e preços em bronze para leitura rápida na mesa.

Por que publicar no Htmly

Template grátis, publicação em 10 segundos, HTTPS automático e link curto compartilhável (cafebistro.htmly.com.br). Edite direto no navegador — clique no nome do prato, na descrição, no preço e digite. Sem cadastro para testar. Quando estiver pronto, gere um QR Code grátis em qualquer ferramenta online (apontando pro seu link Htmly) e cole nas mesas. Domínio próprio (cafebistro.com.br) disponível no plano Pro para parecer ainda mais profissional.

Próximos passos

Quer ver como o cardápio digital se encaixa numa estratégia maior de marketing para restaurante? O template de landing page para restaurante entrega uma página de captação para reservas e divulgação do menu, complementar ao cardápio QR Code. Para o passo a passo completo de presença digital de restaurante, o guia de site para restaurante no blog cobre SEO local, Google Meu Negócio e integração com delivery. Se quer uma página totalmente customizada gerada por IA, use o gerador de landing page com IA ou imprima o QR Code do seu cardápio com o gerador de QR Code grátis.

O que vem incluído

  • ✓Hero fullbleed com imagem do estabelecimento em destaque (responsiva via picture+webp), nome em tipografia serif italic e tagline editável
  • ✓Navegação sticky no topo com 5 categorias clicáveis (Entradas, Principais, Massas, Sobremesas, Bebidas) e scroll suave entre seções
  • ✓Cinco categorias prontas com 16 itens-exemplo no total — adicione, remova, duplique ou renomeie categorias inteiras pra qualquer ramo gastronômico
  • ✓Cada item exibe nome, descrição curta, preço em destaque e tags opcionais — estrutura `<article>` independente, fácil de duplicar
  • ✓Tags coloridas por item: verde pra vegetariano, vermelho pra apimentado, bronze pra novo — adicione tags personalizadas no `<style>` se precisar
  • ✓Preços em tipografia Fraunces bronze italic — fácil pro cliente bater o olho na mesa e ver o valor sem precisar focar
  • ✓Variantes de tamanho/preço suportadas no formato 'R$ 8 / 12' (ex: 'Espresso · duplo')
  • ✓Footer editável com info do WiFi do estabelecimento + nota sobre taxa de serviço
  • ✓Tipografia Fraunces (serif elegante) + Inter (sans), paleta dark com accent bronze — visual de bistrô moderno, mas paleta totalmente trocável
  • ✓Mobile-first com tipografia fluid (clamp) — abre instantâneo no celular do cliente na mesa, no transporte ou em qualquer aparelho
  • ✓Acessível (WCAG AA, focus-visible, alt em imagens, 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

  1. 1Peça ao ChatGPT: 'reescreva o cardápio deste HTML trocando "Café & Bistrô" por [NOME DO MEU ESTABELECIMENTO], mantendo as 5 categorias mas substituindo os 16 itens pelos pratos reais do meu cardápio (nome curto + descrição de 1 linha + preço)'
  2. 2Adicione botão de pedido por WhatsApp em cada item — depois do preço, cole `<a href="https://wa.me/5511999999999?text=Quero pedir [NOME DO PRATO]">Pedir</a>` (substituindo seu telefone). Cliente clica e o pedido já chega no seu WhatsApp com o nome do prato
  3. 3Substitua a foto do hero (ID Unsplash 1414235077428-338989a2e8c0) por uma foto real do seu estabelecimento — proporções 16/9, formato webp, peso até 200KB pra carregar rápido no 4G do cliente
  4. 4Personalize a paleta no bloco `:root` do `<style>` — `--color-bg`, `--color-bronze` e `--color-text` definem o tom geral. Pra estabelecimento mais clean (lanchonete, doceria, padaria), troque pra background claro `#fafaf6`, accent rosa `#e8a4a4` ou verde `#7ca87c` mantendo bom contraste WCAG
  5. 5Gere o QR Code do seu link Htmly em qualquer ferramenta gratuita de gerar QR Code online — escaneando o QR, o cliente abre o cardápio no celular sem digitar nada. Imprima e cole nas mesas, no balcão ou na embalagem do delivery

Perguntas frequentes

Funciona pra restaurante, lanchonete, doceria ou food truck?▾

Sim. Os 5 grupos prontos (Entradas, Principais, Massas, Sobremesas, Bebidas) cobrem o que tem num cardápio típico, mas você pode renomear, adicionar ou remover categorias inteiras pra qualquer ramo. Doceria? Renomeie pra 'Bolos / Tortas / Salgados / Especiais / Bebidas'. Food truck de hambúrguer? Renomeie pra 'Combos / Burgers / Acompanhamentos / Sobremesas / Bebidas'. O esqueleto serve.

Como faço o QR Code pra colar nas mesas?▾

Você gera o QR Code do seu link Htmly em qualquer ferramenta gratuita de gerar QR Code online (busque 'gerar qr code grátis' no Google). Cole o link `cafebistro.htmly.com.br` no gerador, baixa o PNG, manda imprimir em qualquer gráfica ou impressora doméstica. Cliente escaneia com a câmera do celular e abre o cardápio. Sem app, sem cadastro do cliente, sem nada.

Posso receber pedidos pelo WhatsApp direto pelo cardápio?▾

Não vem nativo, mas dá pra adicionar com 2 minutos de edição. Em cada item, depois do preço, cole `<a href="https://wa.me/5511999999999?text=Quero pedir [NOME DO PRATO]">Pedir</a>` (substituindo seu telefone). Cliente clica, abre WhatsApp com mensagem pré-preenchida — você recebe o pedido organizado, sem ele precisar digitar. O passo-a-passo está na seção 'Como personalizar com IA' acima.

Como atualizo preços e pratos?▾

Pelo editor visual do Htmly — clique no preço, no nome do prato ou na descrição e digite. Salva sozinho. Pra adicionar novo prato, duplique um `<article class="menu-item">` existente e troque o conteúdo. Pra remover prato esgotado, apague o `<article>` correspondente. As alterações ficam no ar imediatamente — cliente que escaneia o QR vê a versão nova sem precisar fazer nada do lado dele.

Posso usar domínio próprio (`cafebistro.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, sem precisar mexer em servidor. Subdomínio grátis (`cafebistro.htmly.com.br`) também funciona pra sempre, sem expirar — escolhe o que fizer mais sentido pro seu estabelecimento.