Nota: Embora nossos guias mais populares tenham sido traduzidos para o português, alguns guias estão disponíveis apenas em inglês.
Criar colunas e linhas com blocos

É possível organizar o conteúdo em colunas e filas arrastando blocos e seguindo as linhas guias para ajudar com o posicionamento.

Se tiver pouca experiência com o Squarespace, recomendamos os seguintes guias e vídeos antes de começar a ler este guia:

Dica: Atente-se às linhas guias – as linhas pretas que aparecem ao clicar em blocos e arrastá-los. Se a linha guia se estender por toda a altura da página, uma nova coluna será criada. Se a linha guia se estender por toda a largura da página, uma nova linha será criada.

Watch a video

Glossário

Antes de criar colunas e filas, recomendamos que leia estes termos:

Grade da área de conteúdo

A grade da área de conteúdo é um modelo invisível que controla onde é possível posicionar blocos. Na maioria das áreas, como Páginas Simples e postagens de blog, a grade suporta até 12 colunas e uma quantidade ilimitada de linhas.

Algumas áreas exclusivas de cada template, como barras laterais e rodapés, têm limitações diferentes. Para saber mais sobre estas áreas de seu template, acesse nossos guias de templates.

Linhas Guias

Ao mover um bloco, essas linhas pretas mostram onde o bloco será posicionado.

Ao arrastar os blocos, as linhas guias mudam para mostrar se o bloco irá:

  • Se estender por toda a altura da página, criando uma nova coluna.
  • Se estender por toda a largura da página, criando uma nova fila.
  • Coincidir com a altura ou largura de outro bloco, posicionando-o em uma coluna ou fila existente.

Blocos em movimento

Ao clicar e arrastar um bloco para alterar a sua posição na grade, ele fica levemente transparente. Se estiver arrastando um bloco dentro de uma área de texto, uma caixa cinza é exibida sempre que o bloco é posicionado para indicar como o texto o envolverá.   

Bloco de Linha e Bloco de Espaço

O Bloco de Linha e Bloco de Espaço são ferramentas úteis para separar conteúdo em colunas e linhas.

Como Blocos de Texto costumam se fundir quando empilhados, é possível usar um Bloco de Linha ou de Espaço para dividir o texto e impedir a fusão. Consulte a seção abaixo sobre Blocos de Texto para obter ajuda.

Também é possível usar os Blocos de Espaço e de Linha para separar temporariamente o conteúdo ao montar uma página ou área de conteúdo. Use um Bloco de Linha para dividir linhas e então adicione blocos para criar novas colunas paralelas. Assim que o conteúdo estiver organizado, remova os Blocos de Linha ou de Espaço. Lembre-se de que Blocos de Texto podem ser fundidos após a remoção da Linha ou Espaço.

Crie colunas

Existem dois tipos de colunas no Squarespace:

  • Colunas de página inteira são colunas novas que se estendem por toda a altura de uma página. Toda a página é dividida, liberando mais espaço para empilhar blocos verticalmente.
  • A coluna de altura correspondente se alinha a um bloco em uma coluna existente. Ele não entra nas linhas acima ou abaixo. Em vez de criar uma coluna que divida toda a página, uma coluna de altura correspondente cria um layout mais complexo.

Para criar uma coluna:

  1. Passe o mouse sobre um bloco que deseja mover.
  2. O cursor se transformará em um ícone de mão, permitindo clicar e arrastar o bloco para movê-lo pela página.
  3. Ao mover o bloco, são exibidas linhas guias para mostrar a nova coluna que o bloco vai ocupar.
  4. Siga os passos abaixo para adicionar a coluna a uma página inteira ou coluna de altura correspondente.

Crie uma coluna de página inteira

Para criar uma nova coluna que se estende por toda a altura da página, clique e arraste um bloco até que a linha guia se estenda verticalmente ao longo de toda a página. Isso cria uma nova coluna que divide toda a página.

Crie uma coluna de altura correspondente

Para uma nova coluna corresponder à altura de outro bloco, clique e arraste o bloco até que a linha guia corresponda à altura do outro bloco. Isto é útil para posicionar blocos lado a lado acima ou abaixo de blocos mais amplos.

Altere a largura da coluna

Para criar colunas de largura idêntica, é necessário que as colunas sejam em uma destas quantidades:

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Se tiver um número diferente de colunas, elas terão diferentes larguras. Esta regra se aplica a todas as áreas de conteúdo de seu site, exceto barras laterais e alguns rodapés. 

Para alterar a largura de uma coluna: 

  1. Passe seu cursor entre dois blocos.
  2. Clique e arraste para expandir e encolher a coluna.
  3. Isto altera tanto a largura da coluna como o tamanho total de ambos os blocos.
  4. Repita com os espaços entre outros blocos na fila conforme necessário.

Crie linhas

Como com as colunas, é possível criar dois tipos de linhas. As linhas podem se estender por toda a largura da área de conteúdo ou se alinhar com um bloco em uma coluna existente para criar uma pilha.

Para criar uma linha:

  1. Passe o mouse sobre o bloco que deseja mover.
  2. O cursor se transformará em um ícone de mão, permitindo clicar e arrastar o bloco para movê-lo pela página.
  3. Ao mover o bloco, são exibidas linhas guias para mostrar a coluna ou linha que o bloco vai ocupar.
  4. Use a linha guia para posicionar seu bloco em uma linha de página inteira ou linha alinhada.
Dica: Blocos de Imagem, Blocos de Espaço, Blocos de Mapa e Blocos de Galeria em Carrossel incluem uma alça de recorte que permite ajustar a altura do bloco. Use esses blocos para personalizar a altura das linhas em sua página. Use esses blocos para personalizar a altura das linhas em sua página.

Crie uma linha de página inteira

Para criar uma nova linha que se estende por toda a página ou postagem, clique e arraste um bloco de modo que a linha guia se estenda horizontalmente ao longo de toda a página.

Crie uma linha de largura correspondente

Para coincidir com a largura de outro bloco, mova um bloco acima ou abaixo de outro bloco até que a linha guia encolha para corresponder à largura do bloco existente. Em vez de criar uma linha inteira ao longo da página, esta ação empilha blocos individuais um sobre o outro.

Crie colunas e linhas somente de texto

Mover texto para colunas ou linhas pode ser complicado. Blocos de Texto costumam fundir-se quando posicionados próximos um ao outro. É possível evitar isto usando um Bloco de Espaço para separar conteúdo ao construir a página.

Colunas de texto

Mover o texto para colunas é uma ótima maneira de dividir o conteúdo visualmente ou emparelhar o texto com outros blocos, como Blocos de Imagem.

Adicione seu primeiro Bloco de Texto em qualquer lugar na página.

A seguir, clique em um Ponto de Inserção em qualquer lugar da página para adicionar um Bloco de Espaço. Clique e arraste o bloco próximo ao primeiro Bloco de Texto.

Clique um Ponto de Inserção em qualquer lugar da página para adicionar seu próximo Bloco de Texto. Como às vezes pode ser difícil mover Blocos de Texto já posicionados, clique e arraste este segundo bloco diretamente da opção Text (Texto) no Menu de Blocos. Serão exibidas linhas guias iguais às exibidas quando blocos já posicionados são movidos.

Mova o segundo Bloco de Texto em direção ao Bloco de Espaço até que a guia encolha até ter a mesma altura e então solte-o. Adicione seu texto para o novo bloco. 

Agora você possui duas colunas de texto separadas por um espaço. Repita o processo de adicionar de Blocos de Espaço e de Texto para todas as colunas de texto necessárias. Quando tiver posicionado todas suas colunas de texto, exclua os Blocos de Espaço para deixar somente as colunas de texto.

Linhas de texto

Blocos de Texto empilhados costumam fundir-se em um único bloco. Para manter estes blocos separados, recomendamos dividir seu texto com um Bloco de Linha ou de Espaço. Para espaços mais definidos, use um Bloco de Linha:

Para um espaço aberto, use um Bloco de Espaço:

Combinar colunas e linhas

Talvez seja útil combinar colunas e linhas para personalizar sua página. Um exemplo comum é em um histórico de empresa ou página "Sobre", onde talvez seja útil adicionar Blocos de Texto com Blocos de Imagem correspondentes em linhas de tamanhos iguais.

Neste exemplo, combinamos três Blocos de Imagem e três Blocos de Texto. Esta é a mesma estrutura exibida no conteúdo de alguns modelos de template, incluindo o Five.

Primeiro, adicione três Blocos de Imagem, cada um em sua própria coluna, utilizando os passos para criar linhas de largura correspondente acima.

Em seguida, adicione um Bloco de Texto abaixo de cada Bloco de Imagem. Certifique-se de que a linha guia combine com o Bloco de Imagem acima, o que criará uma nova linha dentro da coluna existente abaixo de cada imagem.

Se precisar de títulos, adicione-os no topo de cada coluna usando Blocos de Texto adicionais alinhados aos Blocos de Imagem.

Resolução de problemas

Dica: Ao criar um layout de página, talvez seja útil praticar arrastando e soltando os blocos. Especialmente se tiver pouca experiência com o Squarespace, praticar o encaixe dos blocos é uma ótima forma de familiarizar-se com nossa plataforma e chegar ao layout de página desejado.

Minhas imagens têm diferentes tamanhos

Para os melhores resultados, isso ajuda a garantir que as imagens usadas tenham a mesma relação de aspecto antes de serem carregadas. Na maioria dos casos, recomendamos usar imagens com largura mínima de 1500 pixels. Para ajuda com o ajuste das imagens, acesse Formatar as imagens para exibição na web.

Minhas colunas estão desiguais

Para criar colunas de largura idêntica, é necessário que as colunas sejam em uma destas quantidades:

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Para alterar a largura para estas quantidades de colunas, siga os passos na seção Colunas deste guia. Se possuir uma quantidade diferente de colunas (por exemplo, se tiver cinco ou sete blocos em uma linha), elas devem ter diferentes larguras.

Minhas colunas tornam-se linhas em dispositivos móveis

Este comportamento é esperado. O design responsivo do Squarespace empilha automaticamente os blocos verticalmente nos dispositivos móveis

Esse artigo foi útil?
Usuários que acharam isso útil: 48 de 126
Criar colunas e linhas com blocos