Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Alterações no layout das páginas e dos blocos na versão móvel

Os navegadores móveis são menores (e geralmente mais estreitos) do que as janelas dos desktops. Para manter o site legível e evitar que os visitantes tenham que apertar, ampliar e rolar para ver o conteúdo, o design responsivo do Squarespace empilha automaticamente os blocos, no sentido vertical, nos dispositivos móveis.

Se os blocos não ficarem alinhados do jeito que você deseja no dispositivo móvel, você poderá mover os blocos utilizando os cenários deste guia e do vídeo.

Assista a este vídeo

Para ver como isso funciona e para receber dicas sobre como alterar o layout, para que a apresentação fique melhor em monitores móveis, assista a este vídeo:

Testar com a visualização por dispositivo

Recomendamos que você edite o site na visualização por dispositivo e teste a aparência no seu próprio dispositivo.

Como os layouts de todos são diferentes, experimentar e visualizar o site é a melhor maneira de refinar o layout, até que você obtenha um design de que realmente goste e que fique ótimo em todos os dispositivos. 

Layout de coluna única na visualização por dispositivo móvel

Quando os blocos ocupam a largura total de uma página (sem blocos nas laterais), os blocos são empilhados verticalmente em dispositivos móveis, mantendo o layout da página nos desktops.

Várias colunas iguais na visualização por dispositivo móvel

A inclusão de blocos, à esquerda ou à direita de outros blocos, cria colunas em uma página.

As páginas com várias colunas são ótimas em navegadores de desktop, mas podem ser difíceis de ler em dispositivos móveis. Para tornar o conteúdo mais acessível, o Squarespace moverá a segunda, a terceira e as demais colunas para baixo da primeira nos dispositivos móveis. Em outras palavras, as colunas se moverão da horizontal para a vertical no celular.

Por exemplo:

  • Se você tiver três Blocos de Imagem em uma linha horizontal, eles serão empilhados uns sobre os outros, da esquerda para a direita, no dispositivo móvel.
  • Se você tiver três Blocos de Imagem em uma linha com Blocos de Texto abaixo de cada um descrevendo cada imagem, cada Bloco de Imagem terá seu Bloco de Texto associado, empilhado abaixo dele na visualização por dispositivo móvel, seguido pela imagem seguinte. Assista ao vídeo acima para ver como funciona.

Layouts mais complexos na visualização por dispositivo móvel

Nos layouts mais complexos, onde algumas áreas têm tamanhos de coluna diferentes dos outros, você ainda terá controle sobre como os blocos são ordenados em dispositivos móveis.

Ao adicionar blocos, há linhas guia que mostram como os blocos serão ordenados. Se uma linha guia ocupar o comprimento de um bloco ao lado dele, isso informará ao Squarespace que os dois blocos deverão ser agrupados em todas as telas.

Para manter um bloco empilhado com outro bloco, arraste o bloco e solte-o quando a linha guia (a linha horizontal) ocupar o comprimento do outro bloco.

Assista ao vídeo acima para ver como funciona.

Blocos flutuantes na visualização por dispositivo móvel

Os blocos flutuantes de um Bloco de Texto (por exemplo, imagens envoltas em texto) são exibidos acima do Bloco de Texto na visualização móvel.

Para saber mais sobre blocos flutuantes no texto, acesse Como mover Blocos.

Observação: se não houver texto suficiente para cercar o bloco, o bloco aparecerá ao lado do texto. Se os blocos estiverem aparecendo incorretamente acima do texto, na visualização por dispositivo móvel, você poderá resolver isso movendo o bloco para que ele não fique flutuando no texto.

Blocos Spacer

Na versão móvel da maioria dos templates, o Bloco de Espaçador fica automaticamente oculto.

Este artigo foi útil?
Utilizadores que acharam útil: 56 de 339
Alterações no layout das páginas e dos blocos na versão móvel