Clique e arraste blocos para novas posições, a fim de reorganizar o conteúdo do seu site.

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 transferir o bloco de página ou de área de conteúdo, como de um rodapé para uma publicação do blog.

Assistir a um vídeo

Este vídeo mostra o editor clássico.

Mova um bloco

Não importa onde você adicione blocos no Squarespace, é possível movê-los para personalizar o layout. Para mover um bloco:

Dica: para deixar o conteúdo do seu site acessível ao maior público possível, confira Recursos de acessibilidade no Squarespace.

Layouts do Editor Intuitivo

O atual recurso de edição de blocos no Squarespace se chama Editor Intuitivo. Ele está disponível nos sites da versão 7.1 em qualquer área onde você adiciona seções de bloco, como página de layout, subpágina de portfólio e rodapé. Os itens de coleção e as seções de bloco adicionadas antes do lançamento do Editor Intuitivo usam o editor clássico.

Devido ao sistema de grade no Editor Intuitivo, se você mover um bloco alguns blocos ao redor podem se mover levemente também. Isso serve para preservar o equilíbrio geral do layout da seção. 

No Editor Intuitivo, você precisa definir separadamente a visualização no computador e na versão móvel.

Centralize um bloco

Para centralizar um bloco na horizontal, clique e arraste o bloco em direção ao meio da seção e solte quando aparecer uma linha amarela na vertical através do centro da grade. O tamanho do bloco pode mudar um pouco para garantir que ele fique no centro da seção.

Crie um bloco sem margens

Ao retirar um bloco da grade do Editor Intuitivo, ele se adapta para ficar do tamanho da margem da largura do conteúdo da seção, criando um efeito sem margens. Para criar o efeito, alguns blocos precisam ser recortados de outra forma; é o caso do bloco de imagem definido para ser preenchido. 

Fixe o alinhamento e a sobreposição do conteúdo

No Editor Intuitivo. após mover um bloco para um novo local, aparece a barra de ferramentas do bloco.

• Para alinhar o conteúdo do bloco na horizontal, na vertical ou em ambas as orientações dentro das bordas, clique nos ícones de alinhamento na barra de ferramentas do bloco. Alguns blocos, o bloco de imagens e o bloco de botões definidos para preenchimento, não têm opções de alinhamento.
• Se os blocos se sobrepõem, a barra de ferramentas mostra os ícones Mover para frente e Mover para trás; assim, você pode definir qual bloco fica em cima. Se houver muitos blocos sobrepostos, talvez seja necessário clicar várias vezes para trazer o bloco para frente ou para trás.
• Para deixar o conteúdo do bloco mais visível nos blocos sobrepostos, adicione uma cor de fundo a alguns blocos.

Organize vários blocos ao mesmo tempo

Para destacar vários blocos, clique e arraste no fundo da seção. Em seguida, mova ou organize todos os blocos destacados ao mesmo tempo:

• Para mover vários blocos destacados ao mesmo tempo, clique e arraste um dos blocos. Essa ação move, ao mesmo tempo, todos os blocos destacados, preservando o layout atual.
• Para alinhar todos os blocos destacados ao mesmo tempo, clique no botão Alinhar grupo na barra de ferramentas. Em seguida, selecione uma das opções de alinhamento.
• Para mover todos os blocos destacados para trás ou para frente, clique nos botões Mover para trás ou Mover para frente na barra de ferramentas.
• Para redimensionar todos os blocos realçados, passe o cursor sobre um dos quadrados no contorno de um bloco até que se torne uma seta e, em seguida, clique e arraste os blocos maiores ou menores.

No Editor Intuitivo, para realçar e mover todos os blocos ao mesmo tempo em uma seção, pressione Command + A ou Control + A; depois, clique neles e arraste.

Layouts do editor clássico

Nos sites da versão 7.0, todas as áreas de bloco usam o editor clássico, além de algumas áreas nos sites da versão 7.1:

• Publicação do blog, evento e outras informações sobre um produto
• Seções de blocos adicionadas antes do Editor Intuitivo

Mover blocos

Na maioria das áreas com editor clássico, uma grade invisível aceita até 12 colunas e linhas ilimitadas. Algumas áreas, como o rodapé, têm outras limitações.

• Ao clicar e arrastar um bloco para alterar a posição dele na grade, ele fica levemente transparente.
• Ao mover um bloco, linhas-guia aparecem para mostrar onde o bloco está. Elas são úteis principalmente ao se criarem colunas e linhas.
• Ao flutuar um bloco na área de texto, como ao criar uma citação em destaque, aparecerá uma caixa cinza onde o bloco for posicionado para mostrar como o texto se quebrará.

Posicionando um bloco

À medida que você arrasta um bloco, as linhas-guia aparecem para mostrar o que acontece ao soltá-lo:

• Linha vertical na altura da área de conteúdo - o bloco abrangerá toda a altura da página, criando uma nova coluna
• Linha horizontal na largura da área de conteúdo - o bloco abrangerá toda a largura da página, criando uma nova linha0
• Linha correspondente à altura ou largura de outro bloco - o bloco será adicionado a uma coluna ou linha existente, com a mesma altura ou largura desse bloco

Separe os blocos em colunas e linhas

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

• Como os blocos de texto costumam se fundir quando empilhados, use um bloco de linha ou de espaçamento para dividir o texto e impedir a fusão. A seção abaixo sobre o bloco de texto pode ajudar.
• Ao montar uma página ou área de conteúdo, você também pode usar um bloco de linhas e um bloco de espaçamento para separar temporariamente o conteúdo. Use um bloco de linhas ou de espaçamento para dividir as linhas e, em seguida, adicione blocos para criar colunas paralelas. Organizado o conteúdo, exclua os blocos de linhas ou de espaçamento, lembrando que os blocos de texto podem se juntar após se excluírem a linha ou o espaçamento.

Layout para versão móvel

Na versão móvel, a forma como os blocos são organizados depende em qual editor o bloco está:

• Editor Intuitivo - o layout para versão móvel e para computador são separados. Clique no ícone Tela na versão móvel no canto superior direito para ver e editar o layout da página na versão móvel. Mover blocos no layout para computador não afeta o layout para versão móvel. 
• Editor clássico - não é possível editar separadamente o layout para computador e para celular. O layout para versão móvel é igual ao layout para computador, e os blocos são reorganizados automaticamente para caber nos aparelhos menores.

Criar colunas e linhas

Seu site inclui várias opções para criar colunas e linhas automaticamente com tipos comuns de conteúdo. Você pode adicionar conteúdo a eles ao longo do tempo, sem muita reorganização manual. Para criar colunas e linhas sóbrias e uniformes, recomendamos as seguintes opções:

• Layout automático (versão 7.1) - imagens, texto e botões
• Seção de galeria (versão 7.1) - imagens e texto
• Bloco de galeria - imagens e texto
• Bloco de sumário - imagens e texto extraídos das páginas de coleção, como o blog

No entanto, se você precisar criar colunas e linhas com outros tipos de conteúdo ou num layout não aceito pelas opções acima, é possível criar colunas e linhas com um conjunto de blocos:

• Editor Intuitivo - posicione os blocos ajuste o tamanho deles; use as linhas-guia de grade para criar colunas e linhas uniformes e, em seguida, organize o layout para versão móvel em colunas e linhas diferentes, se necessário.
• Editor clássico - criar colunas e linhas é mais complexo. O restante deste guia ensinar a criar manualmente as colunas e linhas no editor clássico.

Este vídeo mostra a versão 7.0, mas também vale para o editor clássico na versão 7.1.

Crie uma coluna no editor clássico

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 cursor sobre o bloco a ser movido. O cursor vai virar um ícone de mão. Se essa mão não aparecer, clique no bloco primeiro.
2. 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. Isso é útil para posicionar blocos lado a lado acima ou abaixo de blocos mais amplos.

Alterar 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 uma linha no editor clássico

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 cursor sobre o bloco a ser movido. O cursor vai virar uma mão. Se a mão não aparecer, clique primeiro no bloco.
2. Clique e arraste 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: o bloco de imagem, bloco de espaçamento, bloco de mapa e bloco 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 publicação, 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 para cima ou para baixo de outro bloco até que a linha-guia encolha de acordo com a largura do bloco existente. Em vez de criar uma linha inteira ao longo da página, essa ação empilha um bloco sobre o outro.

Crie colunas e linhas somente texto no editor clássico

Transferir o texto para um coluna ou linha é complicado. Os blocos de texto geralmente se fundem quando empilhados. Para evitar isso, use um bloco de espaçamento para separar o conteúdo durante a criaçã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.

3. Clique num ponto de inserção na página para adicionar o próximo bloco de texto. Como às vezes o bloco de texto é complicado de mexer após ser posicionado, clique e arraste o ícone de Texto diretamente do menu do bloco. Aparecerão linhas-guia iguais às que aparecem quando você move um bloco já posicionado.
4. 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.

5. Repita o processo de adicionar de Blocos de Espaço e de Texto para todas as colunas de texto necessárias.
6. 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. Para um espaço aberto, use o Bloco de Spacer.

Combine colunas e linhas no editor clássico

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.

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

Solução de problemas sobre colunas e linhas no editor clássico

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. Geralmente, 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 depende da estrutura das colunas e linhas.

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