Como adicionar um botão que rola até uma seção
Use um Button quando visitantes devem saltar de um CTA hero para preço, formulário, FAQ ou outra seção de oferta sem sair da página.
Antes de começar
Confirme que você tem:
- Uma página aberta no Page Builder.
- Uma seção de destino clara já na página (formulário, preço, bloco de oferta).
- O Navigator aberto para ler IDs de seção/elemento com precisão.
Passo 1: Preparar a seção de destino
- Selecione a seção ou container de destino no canvas (ou no Navigator).
- Anote ou defina um ID (ou class) estável que você referenciará a partir do botão.
- Evite IDs duplicados — IDs errados ou repetidos fazem scroll/revelação parecer quebrado.
Mantenha a seção de destino visível na página publicada (não oculta em todos os dispositivos), a menos que use intencionalmente uma ação de revelação.
Passo 2: Adicionar o Button
- Arraste um Button acima da dobra onde o CTA é esperado.
- Defina um rótulo curto como See pricing, Get started ou Claim offer.
- Abra as configurações de click event do botão.
Veja Elemento Button (referência).
Passo 3: Configurar scroll 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 |
|---|---|
| Show item by ID / class | Revelar seção atrasada ou oculta, ou interação de salto ligada a esse ID/class. |
| Link with section hash | Navegar para #your-section-id quando os IDs da página suportam scroll por hash. |
- Escolha o evento de clique que aponta para o ID ou class da seção.
- Informe o ID/class exato do Passo 1 — ortografia e maiúsculas/minúsculas devem coincidir.
- Salve as configurações do botão.
Se a seção só deve aparecer após video delay, combine isso com configurações de delay com cuidado para o alvo existir quando o visitante clicar. Veja Configurações de delay.
Passo 4: Estilizar e posicionar o CTA
- Estilize o botão para contraste claro e área de toque grande o suficiente.
- Use pré-visualização responsiva para confirmar que o CTA permanece fácil de tocar no mobile.
- Mantenha a função do botão focada — apenas scroll/revelação; coloque explicação no texto próximo.
Passo 5: Publicar e testar
- Save e Publish 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 telefone — auto-scroll pode parar em ponto visual diferente do desktop.
Solução de problemas
| Problema | O que tentar |
|---|---|
| Nada acontece | Confirme que evento de clique e ID/class coincidem exatamente. |
| Rola para lugar errado | Corrija IDs duplicados; selecione a seção pretendida no Navigator. |
| Alvo ausente | Seção pode ainda estar atrasada/oculta — aguarde o delay ou ajuste visibilidade. |
| Mobile para mal | Reduza cabeçalhos/overlays fixos e teste novamente o padding da seção alvo. |
Resultado
Os 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
Perguntas frequentes
Um botão pode abrir outra página em vez de rolar?
Sim. Use um evento de clique link normal com URL. Veja 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 devolve visitantes ao topo. Use um Button (ou ação hash/ID) para saltar para baixo até uma seção específica.