Como Reorganizar Blocos com LayoutEngine em Squarespace

LayoutEngine de Squarespace permite colocar blocos de várias maneiras. O processo é quase mágico. A raiz da magia de LayoutEngine é uma grade coluna que governa como os blocos são posicionados na página. Você usa a grade para alinhar perfeitamente blocos para criar páginas bem organizados que são visualmente agradável aos olhos.

Para mover e reorganizar blocos em uma página, faça o seguinte:

1. Passe o cursor do mouse sobre um bloco até que o cursor se transforma em uma seta multidirecional.

   

2. Clique e mantenha pressionado o botão do mouse sobre o bloco que você deseja mover.

   Todos os blocos em sua página tornam-se esboçado em um fulgor fraco, azulado para que você possa ver as suas bordas e posicionar precisamente o bloco que você está se movendo.

   Um ícone de seta multidirecional aparece no canto superior direito de certos blocos quando você passar o cursor do mouse sobre eles. Se você vir este ícone, você deve clicar nele para arrastar o bloco.

3. Arraste o bloco para outro local na página.

   À medida que arrasta o bloco mais perto da borda de outro bloco, a borda é realçada com uma linha azul, e uma das quatro opções de ancoragem aparece. Você pode controlar quais opção aparece pela posição do seu cursor perto da borda:

4. Linha: Adiciona o bloco para uma nova linha. Posicione o cursor mais perto da borda inferior ou superior de outro bloco.

5. Inserir: Atribui o bloco para a parte superior ou inferior de outro bloco. Posicione o cursor mais longe para dentro da borda superior ou inferior do bloco para o qual você deseja anexar o bloco que você está se movendo.

6. Coluna: Adiciona o bloco ao lado de um outro bloco ou conjunto de blocos. Posicione o cursor perto da borda esquerda ou direita de outro bloco.

7. Flutuador: Permite que você coloque um bloco de imagem ou um bloco mapa dentro de um bloco de texto de modo que as palavras envolver em torno dos lados do bloco flutuante. Posicione o cursor para a esquerda ou para a direita do parágrafo que deseja que a imagem ou mapa para flutuar ao lado.

8. Soltar o bloco no lugar, liberando o botão do mouse.

Como para separar os blocos em linhas

Quando você adicionar um bloco a uma página, o bloco é adicionado a uma nova linha e se estende desde a extrema esquerda à extrema direita da página. A altura do bloco é fluido, expandindo-se para conter o conteúdo que você adicionar a ele. Você pode reorganizar blocos cima e para baixo da página.

Se você está adicionando um bloco para uma página que já contém blocos, o novo bloco será adicionado abaixo dos já existentes.

Quando você cria uma nova página ou um novo post, um bloco de texto é adicionado automaticamente.

Como criar colunas de blocos

Quando você reorganizar blocos, você pode colocá-los para a esquerda ou para a direita do outro, criando colunas dentro de uma linha. Estas colunas afetam apenas a linha que contém os blocos. Por exemplo, você pode organizar três blocos em uma linha, mas cinco blocos em outra linha.

LayoutEngine utiliza uma estrutura de grelha de 12 colunas. Se você está organizando blocos em uma fila e quer que eles sejam da mesma largura, você deve usar 1, 2, 3, 4, ou 6 quadras. (Estes números são divisíveis em 12.)

Para ajustar a largura de dois blocos adjacentes, posicione o cursor entre os dois blocos. Uma linha fina, vertical aparece e o cursor muda para um cursor de redimensionamento. Clique e arraste para ajustar a largura dos blocos. Redimensionar uma quadra afeta o tamanho do bloco adjacente.

Como inserir blocos

Quando você insere um bloco acima ou abaixo de outro bloco, você conecta os blocos dentro da mesma coluna. Os blocos serão exibidos juntos, o que pode ser útil ao criar layouts de páginas complexas.

Além disso, quando o site é redimensionado para se ajustar à largura de um dispositivo móvel, os blocos vão refluir se a pilha em cima uns dos outros.

Normalmente, você inserir blocos acima ou abaixo de outro bloco. No entanto, você também pode dividir os blocos de texto com outro bloco através da inserção de um bloco entre os parágrafos no bloco de texto.

Como a flutuar blocos dentro de conteúdo

Quando você tem um flutuando bloco, o texto na página envolve os lados do bloco. Os únicos blocos que podem flutuar em um bloco de texto são blocos de imagem e blocos de mapa.

Você pode flutuar um bloco ao lado de qualquer parágrafo de texto no bloco de texto. Para posicionar seu bloco, use os ícones que aparecem na parte superior da imagem ou mapa bloco. Suas opções são flutuantes

• Esquerda: Flutua o bloco para a esquerda do texto.

• Nenhum envoltório: Flutua o bloco no texto, mas não exibir o texto no lado esquerdo ou direito do bloco. O bloco mapa irá esticar para preencher toda a largura do bloco de texto.

  O bloco de imagem irá fazer o mesmo a menos que a imagem não é grande o suficiente, caso em que a imagem será exibida no seu maior tamanho, centrado em toda a largura do bloco de texto.

• Certo: Flutua o bloco para a direita do texto.

Agora que você já olhou como adicionar, remover e reorganizar blocos dentro de suas páginas, é hora de seguir em frente com a Parte IV, onde você olhar para todos os diferentes tipos de blocos que você pode adicionar ao seu site.