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

Como os blocos se acumulam no celular

Na versão móvel, para manter o site legível e evitar que o visitante tenha que pinçar, ampliar e rolar para ver o conteúdo, o design responsivo do Squarespace empilha automaticamente os blocos na vertical.

Se os blocos não estiverem empilhando da maneira que você deseja, é possível mover blocos usando os cenários deste guia e vídeo. Experimentar e visualizar o seu site é a melhor maneira de refinar o layout até conseguir um design que desejar e que pareça ótimo em todos os dispositivos. 

Assista a este vídeo

O vídeo mostra um site da versão 7.0, mas blocos e colunas se comportam da mesma maneira nos sites da versão 7.1

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.
  • Blocos flutuantes em um Bloco de Texto (por exemplo, imagens envolvidas em texto) são exibidos acima do Bloco de Texto na visualização móvel. Se os blocos estiverem aparecendo incorretamente acima do texto na visualização móvel, mova o bloco para garantir que ele não esteja flutuando 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

Mais ajuda

  • Para visualizar como seu site pode aparecer no celular, use a Visualização por dispositivo. 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.
Este artigo foi útil?
Utilizadores que acharam útil: 57 de 352