Como os blocos se empilham na versão móvel (editor clássico)

Ao usar o editor clássico, faça os blocos aparecerem na ordem correta na versão móvel.

Ultima atualização 8 de Agosto de 2024

No editor clássico, o design responsivo do Squarespace empilha automaticamente os blocos na vertical na versão móvel. Isso deixa o site legível e evita que os visitantes precisem pinçar, fazer zoom e rolar a tela para navegar pelo seu conteúdo.

Se os blocos não ficarem empilhados como desejado, confira este guia e vídeo para mover os blocos. Teste e veja as prévias do seu site - essa é a melhor forma de refinar seu layout até achar um design que você adore e que apareça bem em todos os aparelhos.

Acessando o recurso

Este guia aborda o comportamento (na versão móvel) dos blocos adicionados no editor clássico, que é usado em todos os sites da versão 7.0 e em algumas áreas dos sites da versão 7.1. No Editor Intuitivo, você organiza o layouts para computador e para celular de forma independente. Se você não sabe qual editor uma área do seu site usa, confira Editor Intuitivo, o mais novo recurso para edição de conteúdo do Squarespace.

Assista a este vídeo

Layouts de coluna na visualização móvel

Quando os blocos são empilhados verticalmente e ocupam toda a largura de uma página (sem blocos em ambos os lados), eles também serão empilhados verticalmente em dispositivos móveis, mantendo o layout do computador da página. 

Adicionar blocos à esquerda ou à direita de outros blocos cria colunas. Quando uma página tiver colunas, o Squarespace moverá a segunda, a terceira e as colunas adicionais abaixo da primeira em dispositivos móveis. Em outras palavras, as colunas se movem 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.

Lembre-se das seguintes exceções:

  • Os blocos espaçadores são automaticamente ocultos no celular em todos os sites da versão 7.1 e na maioria dos sites da versão 7.0.
  • Na versão móvel, os blocos flutuantes em um bloco de texto (como imagens envolvidas em texto) aparecem acima do bloco de texto. Se os blocos aparecerem incorretamente acima do texto, mova o bloco para que ele não flutue no texto.

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

Em layouts onde algumas áreas têm tamanhos de coluna diferentes dos outros, você ainda tem controle sobre como os blocos são ordenados no celular.

Ao adicionar blocos, você verá diretrizes que mostram eles ficarão ordenados. Se uma diretriz executar o comprimento de um bloco ao lado dele, isso informa ao Squarespace que os dois blocos devem 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.

move_text_block_under_image_block.png

move_text_block_under_image_block.png

Mais ajuda

  • Para visualizar como seu site pode aparecer no celular, use a Prévia por aparelho. Como os sites podem parecer um pouco diferentes conforme o dispositivo, também recomendamos testar a aparência dele em seu próprio dispositivo móvel.
  • Para uma melhor noção de como seu site aparece no celular, edite-o a com o aplicativo Squarespace.
Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.

Como os blocos se empilham na versão móvel (editor clássico)