Como Adicionar um Botão que Rola para uma Seção
Use um Botão quando visitantes devem saltar de um CTA no hero até preços, um formulário, FAQ ou outra seção da oferta sem sair da página.
Antes de Começar
Certifique-se de ter:
- Uma página aberta no Construtor de Páginas.
- Uma seção de destino clara já na página (formulário, preços, bloco de oferta).
- O Navegador aberto para ler IDs de seção/elemento com precisão.
Passo 1: Prepare a Seção Alvo
- Selecione a seção ou container de destino no canvas (ou no Navegador).
- Anote ou defina um ID (ou classe) estável que o botão referenciará.
- Evite IDs duplicados — IDs errados ou repetidos fazem rolagem/revelação parecer quebrada.
Mantenha a seção alvo visível na página publicada (não oculta em todos os dispositivos), salvo se usar intencionalmente uma ação de revelação.
Passo 2: Adicione o Botão
- Arraste um Botão acima da dobra onde o CTA é esperado.
- Defina um rótulo curto como Ver preços, Começar ou Garantir oferta.
- Abra as configurações de evento de clique do botão.
Consulte Elemento Botão (referência).
Passo 3: Configure Rolagem ou Revelação
Dependendo das ações disponíveis na lista de eventos de clique do botão, use uma destas abordagens:
| Abordagem | Quando usar |
|---|---|
| Mostrar item por ID / classe | Revelar seção com delay ou oculta, ou interação de salto ligada a esse ID/classe. |
| Link com hash de seção | Navegar para #seu-id-de-secao quando os IDs da página suportam rolagem por hash. |
- Escolha o evento de clique que aponta para o ID ou classe da seção.
- Informe o ID/classe exato do Passo 1 — ortografia e maiúsculas devem coincidir.
- Salve as configurações do botão.
Se a seção só deve aparecer após delay de vídeo, combine isso com configurações de atraso com cuidado para o alvo existir quando o visitante clicar. Consulte Configurações de atraso.
Passo 4: Estilize e Posicione o CTA
- Estilize o botão para contraste claro e área de toque grande o suficiente.
- Use preview responsivo para confirmar que o CTA permanece fácil de tocar no mobile.
- Mantenha o botão focado — apenas rolagem/revelação; coloque explicação no texto próximo.
Passo 5: Publique e Teste
- Salve e Publique a página.
- Abra a URL ao vivo no desktop e clique no botão.
- Confirme que a página rola até (ou revela) a seção correta.
- Repita em viewport de largura de celular — rolagem automática pode parar em ponto visual diferente do desktop.
Solução de Problemas
| Problema | O que tentar |
|---|---|
| Nada acontece | Confirme evento de clique e correspondência exata de ID/classe. |
| Rola para lugar errado | Corrija IDs duplicados; selecione a seção correta no Navegador. |
| Alvo ausente | Seção pode ainda estar com delay/oculta — aguarde revelação ou ajuste visibilidade. |
| Mobile para mal | Reduza cabeçalhos fixos/overlays e reteste padding da seção alvo. |
Resultado
Visitantes podem ir do CTA até a seção pretendida na página com um clique, sem sair da página do funil.
Documentação Relacionada
FAQ
Um botão pode abrir outra página em vez de rolar?
Sim. Use evento de clique link com URL. Consulte Como adicionar um link a um botão.
E se minha seção estiver atrás de um delay?
O destino deve existir quando o visitante clicar. Se o delay ainda oculta a seção, aguarde a revelação ou reduza o delay antes de enviar tráfego.
Devo usar ScrollUp para isso?
Não. ScrollUp é um controle em nível de página que retorna visitantes ao topo. Use um Botão (ou ação hash/ID) para saltar para baixo até uma seção específica.