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

Movendo blocos para personalizar um layout

Mova blocos em torno de suas páginas para personalizar layouts ou criar colunas e linhas.

Este guia é o próximo passo para Adicionar conteúdo com blocos, que sugerimos que você leia primeiro se você é novo no Squarespace.

Atenção: você pode mover o bloco dentro da área de conteúdo da página onde ele foi adicionado. Não é possível mover o bloco entre as páginas ou entre áreas de conteúdo separadas, como de um rodapé para um cabeçalho.

Assistir a um vídeo

O vídeo abaixo mostra a versão 7.0, mas também vale para a versão 7.1.

Como funcionam os layouts de bloco

Antes de mover blocos, recomendamos que você estude estes termos para ter mais informações sobre como funciona o nosso sistema de blocos.

Grade da área de conteúdo

A grade da área de conteúdo é um modelo invisível que controla onde você pode colocar blocos. Na maioria das áreas, como páginas de layout e postagens de blog, a grade suporta até 12 colunas e uma quantidade ilimitada de linhas. Algumas áreas, como os rodapés, podem ter limitações diferentes.

Blocos em movimento

Ao clicar e arrastar um bloco para alterar sua posição na grade, ele fica levemente transparente.

Caixas cinzas

Uma caixa cinza aparece sempre que o bloco é posicionado dentro da área de texto, indicando como o texto o envolverá.

Linhas Guias

Ao mover um bloco, surgirão linhas pretas chamadas diretrizes para mostrar onde você está colocando o bloco. Elas são especialmente úteis quando se está criando colunas e linhas.

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 de Linha e Blocos de Espaçador

Blocos de Linha e Blocos de Espaçador são ferramentas úteis para separar o 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.

Você também pode usar os Blocos de Linha e Espaçador para separar temporariamente o conteúdo ao definir uma página ou área de conteúdo. Use um Bloco de Linha ou Espaçador para dividir as linhas e, em seguida, adicione blocos para criar novas colunas paralelas. Depois que o conteúdo for organizado, remova os Blocos de Linha ou de Espaçador, lembrando que os Blocos de Texto podem ser mesclados após a remoção da Linha ou do Espaçador. 

Mova um bloco

Para mover um bloco:

  1. Passe o mouse sobre o bloco que deseja mover. Seu cursor vai se transformar em uma mão.
  2. Clique e arraste o bloco para movê-lo pela página.
  3. Conforme você arrasta o bloco, use as linhas guia e as caixas para escolher o novo local.
  1. Toque e segure o bloco que você deseja mover. Ele ficará cinza e flutuará sobre o conteúdo.
  2. Arraste o bloco para movê-lo pela página.
  3. Conforme você arrasta o bloco, use as linhas guia e as caixas para escolher o novo local.

Imagens flutuantes e outros blocos no texto

É possível fazer um bloco flutuar dentro da área de texto para criar um efeito de amarração do texto. O vídeo abaixo mostra a versão 7.0, mas também vale para a versão 7.1.

Você pode querer fazer isso com uma imagem para criar um layout com colunas múltiplas único em uma postagem de blog ou em uma página ou texto.

Para criar esse layout, clique e arraste um bloco sobre um Bloco de Texto. Haverá uma caixa cinza onde o bloco deve aparecer no texto.

Criar colunas e linhas

Este vídeo mostra a versão 7.0, mas também se aplica à versão 7.1.

Crie colunas

As colunas podem abranger toda a altura da área de conteúdo ou alinhar com um bloco em uma linha existente, para criar uma coluna com altura correspondente. 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.

full_height_column.gif

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.

matching_height_column.gif

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 você tiver um número diferente de colunas, elas terão diferentes larguras. Essa regra vale para todas as áreas de conteúdo do site, exceto as barras laterais e alguns rodapés.

Para alterar a largura de uma coluna: 

  1. Passe o cursor entre dois blocos até ver duas setas, apontando para a esquerda e para a direita.
  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

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. Siga as etapas abaixo para colocar o bloco em uma linha de página inteira ou 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.

full_width_row.gif

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.

matching_width_row.gif

Criar colunas e linhas somente de texto

Mover texto para colunas ou linhas pode ser complicado. Os blocos de texto geralmente se mesclam se empilhados. Você pode evitar isso usando Blocos de Espaçador para separar o conteúdo durante a construção da página.

Colunas de texto

Transferir o texto para colunas é uma ótima forma de dividir visualmente o conteúdo ou emparelhar o texto com outros blocos, como um Bloco de Imagem. Para criar uma coluna de texto:

  1. Adicione seu primeiro Bloco de Texto em qualquer lugar na página.
  2. Clique em um ponto de inserção em qualquer lugar da página para adicionar um Bloco de Espaçador. Clique e arraste o bloco ao lado do primeiro Bloco de Texto.

add_spacer_block.gif

  1. Clique em um ponto de inserção em qualquer lugar da página para adicionar seu próximo Bloco de Texto. Como às vezes os Blocos de Texto podem ser difíceis de mover depois de colocados, clique e arraste o ícone de Texto diretamente do Menu Bloquear. Você verá as diretrizes exibidas, assim como acontece quando você move um bloco que já foi colocado.
  2. Arraste o ícone Texto na direção do Bloco de Espaçador até que a diretriz diminua até a mesma altura, depois solte-a e adicione o texto.

second_text_block.gif

  1. Repita o processo de adicionar de Blocos de Espaço e de Texto para todas as colunas de texto necessárias.
  2. 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 se fundir em um único bloco. Para mantê-los separados, recomendamos dividir o texto com um Bloco de Linhas ou de Spacer. Para espaços mais definidos, use o Bloco de Linhas. Para um espaço aberto, use o Bloco de Spacer.

Combinar colunas e linhas

Para personalizar a página, recomendamos combinar colunas e linhas. Um bom exemplo é o histórico da empresa ou a página "Sobre", nos quais recomendamos adicionar Blocos de Texto com Blocos de Imagem correspondentes em linhas iguais. Neste exemplo, combinamos três Blocos de Imagem e três Blocos de Texto.

Para combinar colunas e linhas:

  1. Adicione três Blocos de Imagem, cada um em sua própria coluna, usando as etapas para criar colunas de altura correspondentes acima.
  2. Em seguida, adicione um Bloco de Texto abaixo de cada Bloco de Imagem. A linha guia deve combinar com o Bloco de Imagem acima dela, o que criará uma nova linha dentro da coluna existente abaixo de cada imagem.

text_under_image.gif

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

Minhas imagens têm diferentes tamanhos

Para obter o melhor resultado, antes de fazer o upload, veja se todas as imagens têm a mesma proporção. Na maioria dos casos, recomendamos imagens com largura mínima de 1.500 pixels. Veja ajuda com o ajuste das imagens em Formatação de imagens para exibição na web

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

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. A ordem dos blocos dependerá da estrutura das colunas e linhas.

Para saber mais, acesse Alterações de página e bloco em dispositivos móveis.

Este artigo foi útil?
Utilizadores que acharam útil: 35 de 144
Movendo blocos para personalizar um layout