21 / CASE VEDDU · Nutra e bebida funcional
Página de vendas para bebida funcional: LipoMonster
Página de vendas do LipoMonster, bebida funcional em pó, montada para escolher sabor e kit pelo celular, e a página que capta inscrições para uma aula online gratuita.
Role a tela: a página de vendas passa inteira, no desktop e no celular.
Contexto
do projeto
Resposta direta
O que uma página de vendas de suplemento precisa ter para vender no celular
Uma página de vendas de suplemento vende no celular quando a decisão cabe numa mão: prova que se entende de relance, escolha em poucos toques e compra sempre a um botão de distância. Quem chega de um anúncio decide entre um vídeo e outro do feed, e cada rolagem a mais é uma chance de fechar a aba.
- Contexto
- Bebida funcional em pó costuma ser vendida direto ao consumidor, pela internet, e disputa a mesma decisão que o energético de lata, o chá e a cápsula. O LipoMonster chega a esse mercado com duas versões, uma com cafeína e outra sem, em potes de 20 doses, e fala com um público feminino.
- Desafio
- Explicar um produto novo, com fórmula, ingredientes e comparativo, numa página longa, sem afastar a compra de quem decide no meio da leitura nem fazer da escolha do pedido uma tabela.
- Decisão
- Dar um trabalho só a cada página: a de vendas concentra toda chamada no quadro da oferta, e a da aula fala apenas do conteúdo dela, sem marca nem oferta na tela.
Quatro telas, da venda à captação, e a decisão por trás de cada uma.
Três telas vêm da página de vendas e uma da captação da aula, todas capturadas em 5 de outubro de 2026. Preços como estavam publicados nesse dia.
Prova social
A prova social mistura vídeos de story e fotos de um evento da marca.
O carrossel tem dez quadros verticais: cinco vídeos de mulheres falando para a câmera, quase todas com o pote em cena, e cinco fotos de um evento da marca, com mulheres de camiseta pink. Em quatro vídeos, a legenda vem gravada na imagem, para quem assiste sem som. A capa é uma foto parada, e o vídeo só abre, numa janela sobre a página, quando alguém toca no play.
Oferta
Primeiro o sabor, depois a quantidade, num quadro só.
A escolha acontece em dois passos: abas de sabor no topo, com Morango do Amor, Pink Lemonade e Mix, e os kits de um, dois e três potes embaixo, cada um com a sua faixa de desconto. O de três vem preenchido em magenta e marcado como mais vendido, e todos têm frete grátis. Na tela do celular, o kit em destaque cabe inteiro logo abaixo das abas.
Perguntas frequentes
Açúcar, glúten e lactose têm resposta antes do último botão.
São cinco perguntas curtas numa sanfona, e três delas tratam do que se confere no rótulo antes de tomar algo todo dia. Na tela, a de glúten e lactose está aberta, com a resposta numa frase só. As outras duas perguntam sobre uso sem treino e sobre quem pode tomar, e logo depois vem o último Experimentar agora da página.
Página de captação
O conceito da aula ganhou nome e chega num dossiê confidencial.
A virada da aula é um conceito com nome próprio, o Intestino Silencioso, apresentado como estudo interno de quem conduz a reunião. Ao lado do texto, ele aparece numa pasta magenta com aba de Dossiê 01, clipe e carimbo de acesso restrito, no clima confidencial que batiza o evento. A ilustração em neon foi feita sobre fundo preto e fundida ao magenta, para só o brilho aparecer. No celular, a pasta vem depois dos parágrafos.
Como a Veddu constrói uma landing page que fecha a venda de bebida funcional no celular.
Paleta e fontes da página de vendas
- Magenta
- #EC268F · títulos, abas ativas e a maioria dos botões que descem para a oferta
- Rosa de seção
- #E14176 · fundo do topo, da fórmula e das perguntas
- Verde de compra
- #5BB100 · botões Comprar agora, faixas de desconto e dois Experimentar agora
- Fundo
- #FEFBFC · branco rosado entre as seções
- DIN 2014
- títulos, texto corrido e botões
- Cooper Black
- faixa de selos, título da garantia e botões Comprar agora
Cores e fontes tiradas do CSS da página publicada; a DIN 2014 vem do Adobe Fonts.
Cada etapa é uma camada da página publicada ou um registro do projeto, e o visor mostra o dado de que ela saiu. As duas últimas são da página de captação da aula.
- 01
Cor da embalagem na página, verde onde se compra
A página repete a embalagem: magenta e rosa aparecem em todas as seções, no fundo, nos títulos ou nos botões. O verde, fora dessa família, fica com os botões de compra e com poucos atalhos para a oferta. A tipografia segue a mesma economia: uma família para títulos, texto e botões e outra, mais pesada, para poucos pontos.
Paleta e fontes da página de vendas
- Magenta
- #EC268F · títulos, abas ativas e a maioria dos botões que descem para a oferta
- Rosa de seção
- #E14176 · fundo do topo, da fórmula e das perguntas
- Verde de compra
- #5BB100 · botões Comprar agora, faixas de desconto e dois Experimentar agora
- Fundo
- #FEFBFC · branco rosado entre as seções
- DIN 2014
- títulos, texto corrido e botões
- Cooper Black
- faixa de selos, título da garantia e botões Comprar agora
Cores e fontes tiradas do CSS da página publicada; a DIN 2014 vem do Adobe Fonts.
- 02
Pagamento num lugar, conversa em outro
A página separa quem quer pagar de quem quer conversar. Só os botões de kit abrem o pagamento, no subdomínio de checkout da marca. A dúvida antes do pedido segue para o WhatsApp de vendas, com mensagem pronta no botão flutuante, e quem já comprou tem outro número, o de pós-venda. Não há formulário no caminho.
Para onde cada clique leva
- 12
- chamadas de ação entre o topo e o rodapé
- 7
- links de kit para o checkout: três em cada sabor e um no Mix
Atendimento- WhatsApp flutuante com mensagem pronta
- Fale com vendas
- Fale pós-vendas
- Instagram @uselipomonster
Contado na página publicada: os números são os mesmos no computador e no celular.
- 03
Uma rolagem só, sem menu no topo
Sem menu, a própria ordem das seções faz a navegação, e no lugar do cabeçalho corre uma faixa de selos. O produto se apresenta primeiro, preparo e composição ficam no meio, e a oferta só chega depois do comparativo com o energético, quando o custo por dose já foi mostrado.
- 01Topo com os potes
- 02O que é a bebida
- 03Prova social
- 04Por que escolher e como funciona
- 05Preparo e ingredientes
- 06Versões e comparativo
- 07Oferta e garantia
- 08Perguntas frequentes
- 0
- itens de menu no topo
- 3
- grupos de atalhos no rodapé: links úteis, políticas e atendimento
Ordem lida de cima para baixo na página publicada; a versão de celular segue a mesma sequência.
- 04
No celular, o produto vem antes do título
Na tela estreita, cada seção foi resolvida de um jeito. O topo inverte a ordem para os potes aparecerem antes do título, os passos de preparo se empilham na ordem de uso e o comparativo continua em duas colunas, para a comparação seguir à vista de uma vez.
Do computador para o celular
- Topo
- texto à esquerda e potes à direita no computador; foto primeiro no celular
- Prova social
- seis quadros à vista no computador, dois no celular
- Modo de preparo
- três cards em linha no computador, empilhados no celular
- Comparativo
- duas colunas nas duas versões, mais estreitas no celular
Comparado nas capturas da página inteira, com janela de 1600 px no computador e de 390 px no celular.
- 05
Inscrição medida até a saída para o grupo
A campanha da aula precisa aprender com quem chega ao grupo, e não só com quem preencheu o formulário. Por isso a confirmação da vaga tem página própria, que mostra a data e segue sozinha para o WhatsApp, e o evento de conclusão sai antes dessa troca, no último instante em que a página ainda existe.
- 01Anúncio no Meta
- 02Formulário de inscrição
- 03Página de confirmação da vaga
- 04Link de rastreio do funil
- 05Grupo do WhatsApp
- 2
- eventos no Pixel: Lead no envio e CompleteRegistration na saída para o grupo
- 5 s
- de contagem na confirmação, ou um toque no botão verde
- 500 ms
- entre o evento de conclusão e a saída para o link do grupo
Fluxo validado inteiro em teste automatizado, do envio do formulário à saída para o grupo.
- 06
Menos código para carregar a captação
Tela em branco depois do clique é anúncio pago que não vira inscrição. Na captação, a Veddu tirou do pacote o que pesava sem mudar nada na tela: a biblioteca de animação, trocada por recurso nativo do navegador com o mesmo efeito, e um validador de formulário que ocupava o maior bloco de código da página.
O que saiu do código da captação
- -34%
- de JavaScript e CSS, de 1.290 para 849 KB
- ~150 KB
- de GSAP e ScrollTrigger, a biblioteca de animação
- 554 KB
- em 5 imagens alternativas, tiradas do pacote publicado
Cortes registrados no projeto da captação, publicada em julho de 2026.
Sua bebida funcional já se vende bem pelo celular?
Para marca de suplemento ou bebida funcional, a Veddu abre a sua página no celular, monta um pedido até o pagamento e aponta onde a escolha emperra, que evento o Pixel deixa de contar e que frase a ANVISA não permite.
Frentes deste projeto
- SitesA página de vendas em WordPress com Elementor, na raiz do domínio, e a captação da aula em código próprio, numa pasta do mesmo endereço.
- Tráfego pagoRevisão do Pixel da marca em junho de 2026: disparos de navegador e de servidor, cada evento do funil de compra e um plano de ação por impacto.