Adicione, mova e redimensione blocos

Adicione blocos a uma página arrastando ou clicando e depois mova, redimensione, duplique e exclua os blocos na grade de 12 colunas.

Blocos são as peças com que você monta uma página: títulos, textos, botões, imagens, grades de produtos e mais. Você os adiciona pelo painel de blocos, solta-os onde quiser e arrasta as bordas para mudar o tamanho.

Como os blocos são organizados

Cada seção de uma página é uma grade de 12 colunas. Um bloco ocupa uma ou mais colunas e uma ou mais linhas dessa grade. Quando você solta ou redimensiona um bloco, ele se encaixa na grade, de modo que tudo fica alinhado e a página se reorganiza bem no celular. Você nunca posiciona um bloco por pixels exatos.

Os blocos ficam dentro de seções. Uma página precisa de pelo menos uma seção antes de você poder adicionar um bloco.

Adicione um bloco

Você pode adicionar um bloco de duas maneiras.

Arraste-o para a página

  1. No painel de blocos, à esquerda, encontre o bloco que você quer. Os grupos são Básico, Mídia, Layout, Loja, Marketing e Menus e formulários.
  2. Pressione e segure o bloco e arraste-o para a página.
  3. Passe o ponteiro sobre uma seção. Colunas claras aparecem, e uma caixa azul mostra exatamente onde o bloco vai ficar e qual será o tamanho dele.
    Um bloco de Texto sendo arrastado do painel de blocos para uma seção vazia, com as 12 colunas da grade e uma caixa azul de destino mostrando onde ele vai ficar
  4. Solte o botão do mouse. O bloco aparece na caixa e fica selecionado, e as configurações dele se abrem à direita.
Observação: Solte o bloco em um espaço vazio. Se você soltá-lo em um lugar que outro bloco já ocupa, os dois ficam um sobre o outro. Pressione Ctrl + Z para desfazer ou arraste o novo bloco para outro lugar.

Clique nele

Clique em um bloco no painel de blocos para adicioná-lo ao fim da seção que você selecionou. Se nada estiver selecionado, ele vai para a última seção da página. É a forma mais rápida de montar uma página de cima para baixo.

Selecione um bloco

Clique em um bloco na página. Ele ganha um contorno azul, duas alças azuis de redimensionamento e uma pequena barra de ferramentas ao lado com três botões: Duplicar, Rotacionar e Excluir. O painel de configurações à direita muda para mostrar as configurações desse bloco.

Um bloco de Texto selecionado com contorno azul, uma alça de redimensionamento nas bordas direita e inferior e uma barra de ferramentas com os botões Duplicar, Rotacionar e Excluir

Mova um bloco

  1. Pressione e segure o bloco e arraste-o. Uma pequena cópia do bloco acompanha o ponteiro.
  2. Observe a caixa azul para ver onde ele vai ficar.
  3. Solte o botão do mouse.

Você pode arrastar um bloco para outra seção ou para um contêiner ou grade. Mover um bloco para outra seção só é possível na visualização Computador, porque isso altera o bloco em todos os tamanhos de tela.

Redimensione um bloco

  1. Clique no bloco para selecioná-lo.
  2. Arraste a alça da borda direita para mudar a largura em colunas. Arraste a alça da borda inferior para mudar a altura em linhas.
    Um bloco de Texto sendo alargado ao arrastar a borda direita, com as colunas da grade aparecendo atrás dele
  3. Solte o botão do mouse.

Defina tamanho e posição com números

Para ter controle exato, use o painel de configurações em vez de arrastar.

  1. Selecione o bloco.
  2. No painel de configurações, clique em Tamanho e posição para abri-lo.
  3. Use os botões de menos e de mais para alterar Começa na coluna, Largura em colunas, Começa na linha e Altura em linhas.
    As configurações de Tamanho e posição com Começa na coluna, Largura em colunas, Começa na linha e Altura em linhas, o botão Preencher toda a largura, duas chaves e os controles deslizantes de Ajuste fino

O mesmo grupo tem estes extras:

  • Preencher toda a largura estica o bloco por todas as colunas do que o contém.
  • Ocultar este bloco oculta o bloco. Nas visualizações de Tablet e Celular, a chave oculta o bloco somente nesse tamanho de tela. Veja Deixe seu site bonito em celulares e tablets.
  • Igual em todas as telas mantém um único layout para o bloco no computador, no tablet e no celular.
  • Ajuste fino tem os controles deslizantes Rotação, Deslocar horizontalmente e Deslocar verticalmente. Eles inclinam ou deslocam o bloco apenas visualmente, sem mudar o lugar dele na grade, então nada ao redor se move. O pequeno x ao lado de um controle deslizante o volta a zero. Você também pode girar o bloco arrastando em volta dele o botão Rotacionar da barra de ferramentas. Ele se encaixa na posição reta, e segurar Shift o encaixa em passos de 15 graus.
Dica: Você também pode mover um bloco selecionado com o teclado. Ctrl + uma tecla de seta o move uma célula da grade, e Ctrl + Shift + uma tecla de seta o torna uma célula mais largo ou mais alto. Veja O editor em resumo para todos os atalhos.

Duplique ou exclua um bloco

  • Para duplicar, selecione o bloco e clique em Duplicar na barra de ferramentas dele ou pressione Ctrl + D. A cópia aparece logo abaixo do original.
  • Para excluir, selecione o bloco e clique em Excluir na barra de ferramentas dele ou pressione Delete. Você também pode abrir Gerenciar no painel de configurações e clicar em Duplicar ou Excluir ali.

Excluir um bloco não pede confirmação. Se você excluir um por engano, clique em Desfazer na barra superior.

Artigos relacionados

Last updated 2026-10-03