Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o espanhol, outros 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.

Assista a este vídeo

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 de Layout e publicações 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 sua posição na grade, ele fica levemente transparente. Uma caixa cinza aparece sempre que o bloco é posicionado dentro da área de texto, indicando 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 Spacer e de Linha para separar temporariamente o conteúdo enquanto uma página ou área de conteúdo é desenvolvida. Use um Bloco de Linha para dividir linhas. Depois, adicione blocos para criar novas colunas paralelas. Após organizar o conteúdo, exclua os Blocos de Linha ou de Spacer. Os Blocos de Texto podem ser fundidos após se excluir a Linha ou o Spacer.

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 vai virar uma mão. Clique e arraste 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: os Blocos de Imagem, Blocos de Espaçamento, Blocos de Mapa e Blocos de Galeria em Carrossel têm uma alça de recorte que ajusta a altura do bloco. Use esses blocos para personalizar a altura das linhas da 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.

Manter colunas e linhas quando adicionar blocos

Use Blocos de Espaço para manter as colunas e as linhas no lugar quando adicionar novos conteúdos à página.

  1. Empilhe dois Blocos de Espaço com largura total no lugar onde você quer inserir o conteúdo. 
  2. Para definir colunas, adicione outra linha de Blocos de Espaço no meio. 
  3. Adicione novos blocos, seguindo as linhas guia na linha do meio.
  4. Apague os Blocos de Espaço marcadores de posição.

maintain_columns_and_rows.png

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.

Meu layout de colunas e linhas não aparece em um dispositivo móvel

Como parte do design responsivo do Squarespace, os blocos se empilham na vertical na versão móvel

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