Objetivo deste guia #
Este guia ensina como ajustar a versão mobile de uma página criada no Builderall Builder, de forma simples e prática.
Use este guia quando você precisar:
Ajustar imagens na versão mobile.
Corrigir elementos muito grandes ou muito pequenos no celular.
Organizar espaçamentos entre elementos.
Ajustar galerias de imagens, sliders e banners rotativos.
Ajustar iframes incorporados na página.
Melhorar a visualização da página em celular.
Evitar que a página fique quebrada, desalinhada ou difícil de navegar no mobile.
Entender quais configurações realmente afetam a versão mobile.
1. O que é a versão mobile #
A versão mobile é a versão da sua página exibida em celulares.
Ela não deve ser tratada apenas como uma cópia menor da versão desktop.
No celular, a tela é mais estreita, os elementos ficam empilhados e o espaço disponível é menor.
Por isso, mesmo que a página esteja bonita no computador, ela pode precisar de ajustes específicos no mobile.
2. Por que ajustar a versão mobile #
Hoje, muitos visitantes acessam páginas pelo celular.
Se a versão mobile estiver mal ajustada, o usuário pode encontrar problemas como:
Imagem cortada.
Texto muito grande.
Texto muito pequeno.
Botão fora da tela.
Espaço exagerado entre elementos.
Elementos colados demais.
Slider ou galeria com altura errada.
Iframe aparecendo cortado.
Página difícil de navegar.
Ajustar o mobile melhora a experiência do visitante e evita perda de conversão.
3. Onde acessar o editor mobile #
Passo 1
Acesse o Builderall Website Builder.
Passo 2
Entre no site que deseja editar.
Passo 3
Abra a página que precisa de ajuste.
Passo 4
Dentro do editor, acesse a opção de visualização ou edição mobile.
Passo 5
Faça os ajustes diretamente na versão mobile da página.
Importante:
Os ajustes mobile devem ser feitos olhando a página no formato de celular.
Não ajuste apenas no desktop esperando que tudo fique perfeito automaticamente no mobile.
4. O que você precisa entender antes de começar #
No Builderall Builder, muitos ajustes são feitos diretamente em cada elemento.
Isso significa que você pode precisar ajustar:
Uma imagem individualmente.
Um texto individualmente.
Um botão individualmente.
Uma galeria individualmente.
Um iframe individualmente.
Um banner individualmente.
Não existe uma única configuração mágica que arrume a página inteira.
O ajuste mobile é feito elemento por elemento.
5. Principais ajustes usados no mobile #
Os ajustes mais usados na versão mobile são:
Largura.
Largura máxima.
Altura mínima.
Largura mínima.
Espaçamento superior.
Espaçamento inferior.
Espaçamento esquerdo.
Espaçamento direito.
Esses ajustes ajudam a controlar o tamanho, a posição e o espaço ao redor dos elementos.
6. O que é largura #
A largura controla quanto espaço o elemento ocupa na tela.
Exemplo:
Uma imagem pode ocupar quase toda a largura do celular.
Ou pode ficar menor, com espaço nas laterais.
No mobile, a largura costuma ser limitada pelo tamanho da tela.
Por isso, em alguns casos, aumentar demais a largura pode não gerar diferença visível.
O elemento só pode crescer até o limite da tela disponível.
7. O que é largura máxima #
A largura máxima define até onde o elemento pode crescer.
Esse ajuste ajuda a impedir que um elemento fique grande demais.
Em alguns elementos, o campo de largura máxima para tablet também pode impactar a visualização no celular.
Por isso, ao ajustar a versão mobile, teste sempre olhando o resultado na própria visualização mobile.
8. O que é altura mínima #
A altura mínima define a altura mínima que um elemento deve ocupar.
Esse ajuste é muito importante para elementos como:
Galeria de imagens.
Slider.
Banner rotativo.
Iframe.
Se a altura mínima estiver muito pequena, o conteúdo pode aparecer cortado.
Se estiver muito grande, o elemento pode ocupar espaço demais e deixar a página pesada visualmente.
9. O que é largura mínima #
A largura mínima define o tamanho mínimo que um elemento deve manter.
Esse ajuste pode ser útil em elementos incorporados, como iframes.
Mas deve ser usado com cuidado no mobile.
Se a largura mínima for maior que a tela do celular, o elemento pode quebrar o layout ou gerar rolagem lateral.
10. O que são espaçamentos #
Os espaçamentos controlam a distância entre o elemento e outras partes da página.
Você pode ajustar:
Espaço acima do elemento.
Espaço abaixo do elemento.
Espaço à esquerda.
Espaço à direita.
Esses ajustes são essenciais para deixar a página respirando melhor.
No mobile, pequenos espaçamentos fazem muita diferença.
11. Quando usar espaçamento superior #
Use espaçamento superior quando um elemento estiver muito colado no elemento acima.
Exemplo:
Uma imagem ficou grudada no texto anterior.
Um botão ficou muito próximo da seção anterior.
Um iframe ficou colado no título.
Nesse caso, aumente o espaçamento superior até o visual ficar confortável.
12. Quando usar espaçamento inferior #
Use espaçamento inferior quando um elemento estiver muito colado no elemento abaixo.
Exemplo:
Um botão está grudado no próximo texto.
Uma imagem está encostando na próxima seção.
Um banner está muito próximo do conteúdo seguinte.
Nesse caso, aumente o espaçamento inferior.
13. Quando usar espaçamento lateral #
Use espaçamento lateral quando o elemento estiver muito colado nas bordas da tela.
No celular, isso acontece bastante.
Exemplo:
Texto encostado na borda esquerda.
Imagem ocupando a tela inteira sem respiro.
Botão muito próximo da lateral.
Iframe sem margem.
Ajustar o espaçamento esquerdo e direito ajuda a deixar o conteúdo mais agradável e fácil de ler.
14. Como ajustar uma imagem no mobile #
Passo 1
Abra a página no editor mobile.
Passo 2
Clique na imagem que deseja ajustar.
Passo 3
Acesse as configurações do elemento.
Passo 4
Ajuste a largura ou largura máxima.
Passo 5
Ajuste os espaçamentos laterais, se necessário.
Passo 6
Ajuste o espaço acima e abaixo da imagem.
Passo 7
Confira o resultado na visualização mobile.
Use esse ajuste quando a imagem estiver:
Grande demais.
Pequena demais.
Colada na lateral.
Descentralizada visualmente.
Muito próxima de outro elemento.
15. Boas práticas para imagens no mobile #
Prefira imagens simples e fáceis de entender.
Evite imagens com texto muito pequeno.
Não deixe a imagem colada nas bordas da tela.
Teste se o conteúdo principal da imagem aparece bem no celular.
Evite imagens muito altas sem necessidade.
Cuidado com banners criados para desktop, porque eles podem ficar ruins no celular.
Se a imagem tiver texto importante, confirme se ele fica legível no mobile.
16. Como ajustar galeria de imagens ou slider #
A galeria de imagens, também chamada de slider, precisa de atenção especial no mobile.
Além dos espaçamentos laterais, o ajuste mais importante costuma ser a altura mínima.
Passo 1
Clique na galeria ou slider.
Passo 2
Acesse as configurações do elemento.
Passo 3
Ajuste os espaçamentos laterais, se necessário.
Passo 4
Localize o campo de altura mínima.
Passo 5
Aumente ou reduza a altura até as imagens ficarem visíveis corretamente.
Passo 6
Teste a navegação entre as imagens.
A altura correta depende das imagens usadas dentro da galeria.
Se as imagens tiverem proporções diferentes, talvez seja necessário ajustar os arquivos ou padronizar o tamanho das imagens antes de usar no slider.
17. Problemas comuns em galerias e sliders #
A imagem aparece cortada.
A galeria fica alta demais.
A galeria fica baixa demais.
O conteúdo principal da imagem some.
As imagens parecem desproporcionais.
O slider ocupa espaço demais no celular.
A causa mais comum é altura mínima inadequada ou imagens com dimensões muito diferentes entre si.
18. Como ajustar banner rotativo no mobile #
O banner rotativo também depende muito da altura mínima.
Passo 1
Clique no banner rotativo.
Passo 2
Acesse as configurações do elemento.
Passo 3
Ajuste o espaçamento lateral, se necessário.
Passo 4
Ajuste a altura mínima do banner.
Passo 5
Se o banner tiver páginas ou slides internos, revise cada um deles.
Passo 6
Teste todos os slides na versão mobile.
Importante:
No banner rotativo, pode ser necessário ajustar tanto o banner como um todo quanto as páginas individuais dentro dele.
Se apenas um slide estiver ruim, revise aquele slide específico.
Se todos estiverem ruins, revise a configuração geral do banner.
19. Boas práticas para banners no mobile #
Evite usar o mesmo banner horizontal do desktop sem adaptação.
Banners muito largos geralmente ficam ruins no celular.
Use textos curtos.
Use imagens com foco centralizado.
Evite excesso de elementos dentro do banner.
Confira se o botão do banner aparece bem.
Confirme se todos os slides estão legíveis.
No mobile, clareza é mais importante que excesso de informação.
20. Como ajustar iframe no mobile #
Iframe é um elemento usado para incorporar conteúdos externos dentro da página.
Exemplos:
Vídeo incorporado.
Calendário.
Mapa.
Formulário externo.
Página externa.
Checkout incorporado.
Área de agendamento.
No mobile, iframes podem ficar cortados ou com tamanho estranho.
Por isso, é importante ajustar largura, altura e espaçamentos.
Passo 1
Clique no iframe.
Passo 2
Acesse as configurações do elemento.
Passo 3
Vá até as configurações avançadas, se necessário.
Passo 4
Ajuste os espaçamentos laterais.
Passo 5
Ajuste a altura mínima.
Passo 6
Ajuste a largura mínima, se necessário.
Passo 7
Teste o conteúdo incorporado no mobile.
21. O que observar em um iframe #
Veja se o conteúdo aparece inteiro.
Veja se há rolagem interna.
Veja se o usuário consegue clicar nos botões.
Veja se o iframe não está cortado.
Veja se ele não está criando rolagem lateral.
Veja se o conteúdo externo também é responsivo.
Importante:
Nem todo problema de iframe é causado pelo Builderall Builder.
Às vezes, o conteúdo externo incorporado não foi criado para funcionar bem no celular.
Nesse caso, o ajuste dentro do Builderall pode melhorar o encaixe, mas talvez não resolva 100% se a origem externa não for responsiva.
22. Como ajustar espaçamentos de qualquer elemento #
Passo 1
Clique no elemento que deseja ajustar.
Passo 2
Acesse as configurações avançadas.
Passo 3
Localize os campos de espaçamento.
Passo 4
Ajuste o lado esquerdo se o elemento estiver muito próximo da lateral esquerda.
Passo 5
Ajuste o lado direito se estiver muito próximo da lateral direita.
Passo 6
Ajuste o topo se estiver muito colado no elemento de cima.
Passo 7
Ajuste a parte inferior se estiver muito colado no elemento de baixo.
Passo 8
Confira o resultado no editor mobile.
Não exagere.
No mobile, muito espaçamento pode fazer a página parecer longa demais.
23. Como decidir se o elemento precisa de ajuste #
Olhe para a página como se você fosse o visitante.
Pergunte:
Consigo entender o conteúdo rapidamente?
O texto está legível?
A imagem aparece bem?
O botão está fácil de clicar?
Existe espaço suficiente entre os elementos?
Algum elemento está grudado na borda?
Alguma parte está cortada?
Preciso rolar demais para chegar ao conteúdo importante?
Se a resposta mostrar algum problema, ajuste o elemento.
24. Ordem recomendada para ajustar a versão mobile #
Siga esta ordem para evitar retrabalho:
- Ajuste o topo da página.
- Ajuste a primeira dobra, que é a área que aparece primeiro no celular.
- Ajuste textos principais.
- Ajuste imagens.
- Ajuste botões.
- Ajuste galerias, sliders e banners.
- Ajuste iframes.
- Ajuste espaçamentos entre seções.
- Teste a página inteira rolando do início ao fim.
- Publique e teste no celular real.
25. Primeira dobra no mobile #
A primeira dobra é a parte da página que aparece antes do usuário rolar a tela.
No mobile, ela é extremamente importante.
Ela deve deixar claro:
O que é a página.
Qual é a promessa ou mensagem principal.
Qual ação o usuário deve tomar.
Se a primeira dobra estiver confusa, com imagem grande demais ou botão escondido, o visitante pode sair antes de entender a oferta.
26. Ajuste de textos no mobile #
Embora o tutorial tenha foco em elementos visuais, textos também precisam ser revisados no mobile.
Verifique:
Se o título não está grande demais.
Se o texto não está pequeno demais.
Se as linhas não estão longas demais.
Se há espaço entre blocos de texto.
Se o botão aparece logo depois da explicação principal.
Textos longos demais cansam mais rápido no celular.
Prefira blocos curtos e diretos.
27. Ajuste de botões no mobile #
Botões precisam ser fáceis de tocar no celular.
Verifique:
Se o botão não está pequeno demais.
Se o texto do botão cabe em uma linha ou fica bem organizado.
Se o botão não está colado em outro elemento.
Se há espaço suficiente acima e abaixo.
Se o botão aparece no momento certo da página.
Um botão bem posicionado no mobile pode melhorar muito a conversão.
28. O que não fazer no mobile #
Não deixe elementos colados nas laterais.
Não use imagens com texto minúsculo.
Não deixe banners enormes empurrando o conteúdo principal para baixo.
Não use iframes sem testar no celular.
Não ajuste apenas a versão desktop.
Não publique sem conferir a versão mobile.
Não deixe rolagem lateral.
Não esconda o botão principal.
Não use espaços gigantes entre elementos.
Não pense que “se ficou bom no computador, ficou bom no celular”.
29. Como testar a versão mobile #
Depois de ajustar a página, teste com atenção.
Passo 1
Veja a página no editor mobile.
Passo 2
Publique a página.
Passo 3
Abra a página no seu celular.
Passo 4
Teste em mais de um navegador, se possível.
Passo 5
Role a página do início ao fim.
Passo 6
Clique nos botões.
Passo 7
Teste links, formulários, sliders e iframes.
Passo 8
Veja se tudo está legível.
Passo 9
Confirme se não existe rolagem lateral.
Passo 10
Se encontrar problema, volte ao editor mobile e ajuste o elemento específico.
30. Checklist antes de publicar #
Antes de considerar a página pronta, confira:
O topo da página está bem ajustado.
O título principal está legível.
As imagens aparecem corretamente.
Os botões estão fáceis de clicar.
Galerias e sliders têm altura adequada.
Banners rotativos estão legíveis.
Iframes não estão cortados.
Os espaçamentos laterais estão confortáveis.
Não existe rolagem lateral.
A página não está com espaços vazios exagerados.
Os links funcionam.
A página foi testada em celular real.
31. Troubleshooting #
A imagem está grande demais no celular #
Ajuste a largura ou largura máxima da imagem.
Também confira os espaçamentos laterais.
Se a imagem foi criada para desktop, talvez ela precise ser substituída por uma imagem mais adequada para mobile.
A imagem está pequena demais #
Aumente a largura ou largura máxima do elemento.
Verifique se algum espaçamento lateral está limitando demais a imagem.
Confira também se a imagem original tem boa qualidade.
A imagem está colada na lateral #
Aumente o espaçamento esquerdo e direito.
Faça o ajuste aos poucos até o visual ficar confortável.
O elemento está muito colado no item acima #
Aumente o espaçamento superior do elemento.
Se necessário, revise também o espaçamento inferior do elemento acima.
O elemento está muito colado no item abaixo #
Aumente o espaçamento inferior do elemento.
Se necessário, ajuste também o espaçamento superior do próximo elemento.
O slider está cortando as imagens #
Ajuste a altura mínima do slider.
Se as imagens tiverem proporções muito diferentes, padronize as imagens antes de usar na galeria.
O slider está ocupando espaço demais #
Reduza a altura mínima.
Teste todos os slides para garantir que nenhum ficou cortado.
O banner rotativo ficou estranho no celular #
Revise a altura mínima do banner.
Depois, revise cada slide individualmente.
Se o banner tiver muito texto ou imagem horizontal, crie uma versão mais simples para mobile.
O iframe aparece cortado #
Aumente a altura mínima.
Confira a largura.
Teste se o conteúdo externo também funciona bem no celular.
Se o conteúdo externo não for responsivo, ele pode continuar com problemas mesmo após o ajuste no Builderall.
O iframe criou rolagem lateral #
Reduza a largura mínima.
Ajuste os espaçamentos laterais.
Verifique se o conteúdo incorporado não tem largura fixa maior que a tela do celular.
O botão saiu da tela #
Revise a largura do botão.
Ajuste o texto do botão.
Reduza espaçamentos laterais excessivos.
Confira se o botão não está dentro de um bloco com largura fixa inadequada.
O texto ficou difícil de ler #
Ajuste o tamanho do texto na versão mobile.
Quebre textos longos em blocos menores.
Aumente o espaçamento entre elementos, se necessário.
A página ficou com muito espaço vazio #
Verifique altura mínima dos elementos.
Revise espaçamentos superiores e inferiores.
Veja se algum banner, iframe ou galeria está com altura exagerada.
A página parece boa no editor, mas ruim no celular #
Publique novamente.
Teste em aba anônima.
Limpe o cache do navegador.
Teste em outro celular.
Confira se você realmente editou a versão mobile.
As alterações não aparecem no celular #
Verifique se a página foi publicada após os ajustes.
Teste em aba anônima.
Limpe o cache.
Teste em outra rede.
Aguarde alguns minutos e teste novamente.
32. FAQ #
Preciso ajustar a versão mobile separadamente? #
Sim. Mesmo que a página venha adaptada automaticamente, muitos elementos precisam de ajuste manual para ficarem bons no celular.
O ajuste no desktop resolve o mobile? #
Nem sempre.
A versão mobile precisa ser conferida e ajustada na visualização mobile.
Tenho que ajustar todos os elementos? #
Não necessariamente.
Ajuste apenas os elementos que estiverem desalinhados, cortados, grandes, pequenos ou com espaçamento ruim.
A largura máxima de tablet pode afetar o celular? #
Em alguns ajustes, sim.
Por isso, sempre teste olhando a versão mobile depois de alterar largura ou largura máxima.
O que mais causa problema no mobile? #
Os problemas mais comuns são imagem grande demais, slider com altura errada, iframe cortado, botão desalinhado e espaçamento ruim.
Como sei se o espaçamento está bom? #
O conteúdo não deve ficar colado nas bordas nem distante demais dos outros elementos.
O ideal é que a página fique confortável de ler e navegar.
Posso usar a mesma imagem do desktop no mobile? #
Pode, mas nem sempre é o ideal.
Se a imagem tiver muitos detalhes, texto pequeno ou formato muito horizontal, talvez seja melhor usar uma imagem mais adequada para celular.
Por que meu banner fica bonito no desktop e ruim no celular? #
Porque o formato da tela muda.
Desktop é largo.
Celular é estreito.
Banners horizontais costumam precisar de adaptação para mobile.
Por que meu iframe não fica bom no celular? #
Pode ser por altura, largura ou pelo próprio conteúdo externo.
Se o conteúdo incorporado não for responsivo, o ajuste dentro do Builderall pode não resolver totalmente.
Preciso testar em celular real? #
Sim.
O editor ajuda muito, mas o teste final deve ser feito em um celular real.
Depois de ajustar, preciso publicar? #
Sim.
As alterações precisam ser publicadas para aparecerem na página online.
33. Resumo final para usuário iniciante #
A versão mobile é a versão da sua página exibida no celular.
Ela precisa ser revisada separadamente porque a tela do celular é menor e os elementos se comportam de forma diferente.
No Builderall Builder, os ajustes mobile são feitos diretamente em cada elemento.
Para imagens, ajuste largura, largura máxima e espaçamentos.
Para galerias, sliders e banners rotativos, preste atenção principalmente na altura mínima.
Para iframes, revise altura mínima, largura mínima e espaçamentos laterais.
Sempre teste a página rolando do início ao fim.
Depois de ajustar, publique e abra a página em um celular real.
A regra principal é simples:
Ajuste elemento por elemento.
Teste no mobile.
Publique.
Confira no celular real.
