Como reorganizar blocos com layoutengine em squarespace

LayoutEngine de Squarespace permite posicionar 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ê usar 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 um 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: Anexa o bloco para a parte superior ou inferior de um 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 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 de 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 direita do parágrafo que você deseja que a imagem ou mapa para flutuar ao lado.

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

Como separar blocos em linhas

Quando você adicionar um bloco para 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 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 uma nova postagem no blog, um bloco de texto é adicionada automaticamente.

Como criar colunas de blocos

Quando você reorganizar blocos, você pode colocá-los para a esquerda ou para a direita um do outro, criando colunas dentro de uma linha. Estas colunas afectar somente a linha contendo 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 linha 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, posicionar 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. O redimensionamento um bloco afecta 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.

Video: How to Build a Homepage for your Online Brand with Squarespace

Além disso, quando o site é redimensionada para caber na largura de um dispositivo móvel, os blocos vão refluir para empilhar em cima uns dos outros.

Tipicamente, insere blocos acima ou abaixo do 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 parágrafos no bloco de texto.

Video: Squarespace and the love of optimizing constraints - Small Empires

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, você usar os ícones que aparecem na parte superior da imagem ou mapa de bloco. Suas opções são flutuantes

• Esquerda: Flutua o bloco à esquerda do texto.

• Nenhum envoltório: Flutua o bloco no texto, mas não exibe 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 fará o mesmo a menos que a imagem não é grande o suficiente, caso em que a imagem será exibida em 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.