Exemplos de landing page para app: seções ao vivo e regras dos selos | We.Inc
Seções originais de landing page para app mobile que você pode editar ao vivo: hero com mockup de celular, recursos, passos e faixa de download, com as regras oficiais dos selos da App Store e do Google Play.
Uma landing page de app tem uma única função: fazer as pessoas certas instalarem. Comece dizendo em uma frase o que o app faz, mostre-o funcionando dentro de uma moldura de celular e coloque os selos oficiais da App Store e do Google Play perto do topo e de novo no final. Siga as regras de cada loja sobre tamanho e espaçamento dos selos.
Regras dos selos das lojas em resumo (consultadas em outubro de 2026)
Regra
Selo da App Store
Selo do Google Play
Texto
Baixar na App Store
Disponível no Google Play
Altura mínima na tela
40 px
28 px
Espaço livre ao redor
Um quarto da altura do selo
Um quarto da altura do selo
Ao lado de outros selos
Coloque-o primeiro; use o selo preto
Mesmo tamanho ou maior que os outros
Alterações permitidas
Nenhuma: não modifique, incline nem anime
Nenhuma: sem mudar cores nem reorganizar
A maioria das coletâneas de páginas de app são galerias de capturas de tela. Esta página entrega as próprias seções em HTML e CSS puros, criadas para apps fictícios, mais um pequeno gerador para o hero. Os espaços dos selos são marcadores, porque a arte real tem que vir da Apple e do Google.
Digite o nome do app, a promessa em uma linha e a cor da marca no gerador de hero e copie o HTML.
Siga pelos exemplos de seção: recursos, como funciona e a faixa final de download.
Baixe os selos oficiais nas páginas de marketing da Apple e do Google e coloque-os nos espaços marcados.
Ligue cada selo direto à página do seu app naquela loja.
Diga o que o app faz antes de dizer como ele faz você se sentir. Uma frase como Divida aluguel e contas com quem mora com você vale mais que um slogan.
Mostre telas reais do app dentro da moldura do celular. Dados fictícios tudo bem; recursos inventados, não.
As diretrizes da Apple pedem um único selo da App Store por layout e que ele fique em posição secundária em relação à mensagem principal.
No celular, considere mostrar só o selo da plataforma do visitante, já que a outra loja não instala no aparelho dele.
Adicione um pequeno bloco com QR code no desktop para que os visitantes passem para o celular em um passo.
Perguntas frequentes
O que uma landing page de app mobile deve ter?
Um título de uma frase que diga o que o app faz, um mockup de celular mostrando uma tela real, três ou quatro recursos escritos como resultados, uma faixa curta de como funciona, os selos oficiais das lojas e um link para a política de privacidade. Uma faixa final de download repete os selos.
Posso criar o meu próprio botão da App Store ou do Google Play?
Não. As duas empresas exigem a arte oficial dos selos, sem alterações. A página da Apple diz para não modificar, inclinar nem animar o selo, e a do Google diz para não alterar as cores nem reorganizar os elementos. Baixe os arquivos nos recursos de marketing delas.
Qual deve ser o tamanho dos selos das lojas?
A Apple define uma altura mínima na tela de 40 pixels para o selo da App Store, e o Google define 28 pixels para o selo do Google Play. Quando os dois aparecem juntos, o Google pede que o selo dele tenha o mesmo tamanho ou seja maior que os outros selos.
Preciso de um site se o meu app já está nas lojas?
Uma página no seu próprio domínio é para onde você pode mandar links de anúncios, e-mails e posts em redes sociais, onde hospeda a sua política de privacidade e onde aparece na busca da web pelo que o app faz. Só as páginas nas lojas não fazem tudo isso.
Uma estrutura que funciona para a maioria dos apps
Topo: título, uma linha de apoio, selos e o mockup de celular. Meio: recursos como resultados e depois uma faixa de como funciona em três passos. Fim: os selos repetidos, com um motivo curto para instalar hoje.
Mantenha a página curta. Um visitante que já decidiu quer o selo, não mais rolagem.
Selos e posicionamento
As duas lojas pedem um espaço livre de um quarto da altura do selo ao redor da arte. A Apple prefere o selo preto quando vários selos de lojas aparecem juntos e pede que o dela venha primeiro.
Use um texto alternativo igual ao texto do selo, como Baixar na App Store, para que usuários de leitor de tela ouçam para onde o link leva.
Seções de landing page de app para copiar
Hero com mockup de celular e espaços para os selos
Uma moldura de celular só em CSS ao lado do título. Em telas estreitas, o celular desce para baixo do texto.
Recursos escritos como resultados
Cada card começa com o que a pessoa ganha, não com o nome do recurso.
Como funciona em três passos
Passos numerados fazem o onboarding parecer curto. Use uma lista ordenada para que a ordem seja anunciada.
Faixa final de download com espaço para QR code
Repete os selos no fim. O espaço do QR code é para visitantes no desktop que querem passar para o celular.
Faixa rolável de telas do app
Uma faixa horizontal que rola dentro da própria caixa, para que a página nunca role para os lados.
Checklist da landing page de app
Antes de publicar
Item
Detalhe
O título diz o que o app faz
Uma frase simples
Telas reais no mockup
Nenhum recurso que o app não tenha
Selos oficiais, sem alterações
Baixados da Apple e do Google
Cada selo leva à página do app na loja
Não a uma página inicial genérica da loja
O texto alternativo do selo bate com o texto dele
Para usuários de leitor de tela
Política de privacidade no rodapé
Fácil de achar para visitantes e revisores
Selos repetidos no fim
Para quem lê até o final
Gerador de hero para app
Digite um título, uma linha de apoio e uma cor de tela para montar uma seção hero com moldura de celular em CSS e dois espaços para selos, depois copie o HTML.
Título
Linha de apoio
Cor da tela
Planeje a sua semana em cinco minutos
O Weekbird transforma a sua lista de tarefas em uma agenda tranquila e realista.
O hero do seu app
Copie isto e depois troque os espaços tracejados pela arte oficial dos selos.