Visualização e visualizações responsivas
A visualização e os controles responsivos ajudam você a revisar a aparência de uma página antes de publicá-la.
Use o modo de visualização para inspecionar a página sem distrações normais de edição. Use controles responsivos para verificar layouts de desktop, tablet e dispositivos móveis durante a edição.
Modo de visualização
O cabeçalho do construtor inclui uma alternância de visualização.
Quando a visualização está habilitada, a página é mostrada mais próxima de como os visitantes irão experimentá-la. Isso é útil para verificar o espaçamento, o fluxo da seção, os botões, a mídia e o acabamento visual geral.
Use o modo de visualização antes de:
- Salvar as edições finais.
- Publicando uma página.
- Testando um fluxo de formulário ou botão.
- Revisando uma página com um colega de equipe ou cliente.
Visualizações responsivas
Os controles responsivos permitem revisar a página em diferentes larguras de dispositivo.
Use-os para verificar:
- Se as colunas são empilhadas corretamente no dispositivo móvel.
- Se os botões permanecem visíveis e fáceis de tocar.
- Se o texto permanece legível.
- Se vídeos, imagens, formulários e blocos de produtos cabem na tela.
- Se o espaçamento parece equilibrado entre os dispositivos.
Fluxo de trabalho de revisão responsiva recomendado
- Crie o layout principal na visualização da área de trabalho.
- Mude para a visualização do tablet e revise a largura, o espaçamento e o alinhamento da seção.
- Mude para a visualização móvel e verifique o empilhamento, a tipografia e o posicionamento dos botões.
- Corrija quaisquer problemas de layout das seções maiores às menores.
- Visualize novamente antes de salvar ou publicar.
Problemas móveis comuns para verificar
| Problema | O que revisar |
|---|---|
| Texto muito grande ou muito pequeno | Títulos, parágrafos, botões, rótulos e campos de formulário. |
| Ordem de empilhamento incorreta | Seções com várias colunas, mídia próxima ao texto e áreas de produtos. |
| Overflow horizontal | Imagens amplas, HTML personalizado, tabelas, conteúdo iframe ou contêineres de largura fixa. |
| Espaçamento excessivo | Preenchimento e margens herdados do estilo de desktop. |
| Botões difíceis de tocar | Tamanho, espaçamento e posição do botão. |
Melhores práticas
- Não presuma que as alterações na área de trabalho ficarão automaticamente boas em dispositivos móveis.
- Verifique todas as seções de conversão no celular.
- Revise os campos do formulário após editar o espaçamento ou a tipografia.
- Visualize o conteúdo HTML personalizado e iframe com cuidado, pois o conteúdo externo pode não ser redimensionado automaticamente.
- Salve após concluir as correções responsivas.
Documentos relacionados
Perguntas frequentes
Quando devo usar esta página sobre Visualização e visualizações responsivas?
Use esta página quando precisar entender o fluxo, as configurações ou as decisões relacionadas a Visualização e visualizações responsivas. Ela é mais útil antes de editar um recurso em produção, publicar alterações ou revisar o comportamento em um workspace Atomicat.
O que devo conferir antes de alterar Visualização e visualizações responsivas?
Confirme que você está no workspace, projeto, página, funil, site ou área da conta correta. Revise permissões, alterações salvas, status de publicação e integrações conectadas antes de atualizar.
Como verifico se Visualização e visualizações responsivas está funcionando corretamente?
Pré-visualize a página ou recurso afetado, teste o caminho principal em uma nova sessão do navegador e confirme que formulários, redirecionamentos, rastreamento, produtos, quizzes ou publicação funcionam como esperado.
O que faço se Visualização e visualizações responsivas não funcionar como esperado?
Revise novamente a configuração descrita nesta página, salve as alterações outra vez, limpe o cache do navegador se necessário e teste uma versão simples da configuração. Se continuar, reúna a URL, detalhes do workspace e capturas antes de contatar o suporte.