Guias/Criar conteúdo/Design/Blocos de linha e pilha

Blocos de linha e pilha

O bloco de linha e o bloco de pilha são contêineres para outros blocos. Use-os para organizar vários blocos e ajustar a cor, estilo do texto, largura e posição de todos os blocos dentro do contêiner. Esses blocos são uma variação do bloco de grupo.

Adicionar o bloco de linha ou pilha

Você pode começar com um bloco de linha/pilha vazio ou agrupar blocos existentes em uma linha ou pilha.

Começar com um bloco vazio

Para adicionar um bloco de linha/pilha vazio, clique no botão de inserção de blocos (+) e pesquise “linha” ou “pilha”. Clique no bloco para adicioná-lo ao post ou à página. Usando o teclado, você também pode digitar /linha ou /pilha em uma nova linha e pressionar Enter para adicionar um novo bloco de linha ou de pilha.

Adding a row block with the slash command.

Você encontra instruções detalhadas sobre como adicionar blocos neste link.

Após adicionar um bloco de linha/pilha, clique no ícone de inserção de blocos (+) para começar a adicionar blocos dentro da linha ou pilha.

Usar blocos existentes

É possível combinar os blocos que já estão na página em um bloco de linha/pilha usando as seguintes etapas:

  1. Selecione os blocos que você deseja agrupar. Você pode selecionar vários blocos ao:
    • Destacar todos os blocos com o mouse.
    • Clicar no primeiro bloco, manter pressionada a tecla Shift no teclado e clicar no bloco final. Isso selecionará todos os blocos entre eles.
    • Usar a Visualização em lista, clicar no primeiro bloco, manter pressionada a tecla Shift no teclado e clicar no bloco final. Isso selecionará todos os blocos entre eles.
  2. Na barra de ferramentas acima ou abaixo do bloco, clique no ícone de linha (dois semiquadrados lado a lado), no ícone de pilha (dois semiquadrados um acima do outro) ou no ícone de grade:
An arrow points to the group icons in the block toolbar.
Clique no ícone de linha ou de pilha na barra de ferramentas do bloco para agrupar blocos existentes

Barra de ferramentas do bloco de linha e pilha

Ao clicar no bloco, aparece uma barra de ferramentas com opções:

The Row block toolbar that appears above the Row block with icons for block type, move block, and more described below.
A barra de ferramentas do bloco de linha
The Stack block toolbar that appears above the Stack block with icons for block type, move block, and more described below.
A barra de ferramentas do bloco de pilha

A barra de ferramentas do bloco de linha e do bloco de pilha oferece as seguintes opções:

  • Alterar o tipo ou estilo do bloco.
  • Arrastar o bloco.
  • Mover o bloco para cima ou para baixo.
  • Alterar a justificação dos itens: esquerda, centro, direita e espaço entre os itens.
  • Alinhar o conteúdo na parte superior, no meio, na parte inferior ou ampliar.
  • Alterar o alinhamento: nenhum, largura ampla ou largura total.
  • Mais opções.

Configurações dos blocos de linha e pilha

Ao selecionar um bloco, serão exibidas configurações adicionais na barra lateral direita. Se você não estiver vendo a barra lateral, clique no ícone Configurações, no canto superior direito, para exibi-las. Esse ícone se parece com um quadrado com duas colunas irregulares:

O ícone de configurações no editor com a dica de ferramenta "Configurações" abaixo dele.
Clique no ícone Configurações para abrir as configurações do bloco

Os blocos de linha e de pilha incluem as seguintes configurações:

Transformar em outra variação de grupo

Clique nos ícones na parte superior das configurações do bloco para mudar para outra variação:

Layout

Nas configurações de layout, é possível definir a justificação das linhas ou pilhas de blocos. Escolha entre esquerda, centro, direita ou justificado para alinhar o conteúdo dentro do contêiner

A opção Orientação permite trocar de linhas (layout horizontal) para empilhado (layout vertical).

Além disso, é possível ativar ou desativar a possibilidade de agrupar seu conteúdo em várias linhas. Isso é útil para visualizar sua página em telas menores, como dispositivos móveis, quando o conteúdo não cabe em uma linha.

The Layout section of the Block Settings sidebar, with the options to set justification, orientation and wrap options.

Posição

Usando a configuração Posição, você pode escolher entre Padrão e Fixo.

  • Padrão: o bloco desaparece à medida que você passa para outras seções da página.
  • Fixo: o bloco flutua e permanece visível na página, mesmo quando você rola além da posição em que ele foi originalmente adicionado. Um ícone de alfinete aparecerá ao lado do bloco na visualização em lista.
Default position is highlighted, with Sticky shown underneath.

Avançado

Para mais informações, consulte as instruções detalhadas em Configurações avançadas.

Estilos dos blocos de linha e pilha

Na barra lateral de configurações do bloco, clique no ícone Estilos para acessar as configurações de design do bloco. O ícone Estilos tem a forma de um círculo com a metade preenchida:

Uma seta aponta para o ícone Estilos, no qual você pode clicar para abrir a seção de estilos do bloco.

Cor, tipografia, dimensões e borda

Aqui, você pode definir a cor do texto, a cor de fundo, o tamanho e as fontes do texto, o preenchimento, a margem e o espaçamento do bloco. Consulte os guias a seguir para obter mais detalhes sobre como usar essas configurações:

Imagem de fundo

Nos estilos do bloco de linha e do bloco de pilha, assim como em todas as variantes de bloco de grupo, você pode definir uma imagem ou um gradiente de cor para ser exibido atrás do conteúdo do bloco. Para obter instruções detalhadas sobre como adicionar uma imagem de fundo, consulte o guia do bloco de grupo.

Configurações de largura (blocos aninhados)

As configurações de largura aparecem nas configurações de cada bloco aninhado em um bloco de linha/pilha, e não nas configurações do bloco de linha/pilha.

Para acessar essas configurações, clique em um bloco dentro do bloco de linha/pilha, procure a opção Largura na barra lateral de configurações do bloco (ela pode aparecer na guia Estilos):

The Dimensions width settings, showing Fit, Grow, and Fixed.

Há três opções de largura disponíveis:

  • Adequada: o bloco diminui para se encaixar no conteúdo, ocupando apenas o espaço necessário.
  • Expansível: o bloco se expande para preencher todo espaço disponível na linha ou na pilha.
  • Fixo: o bloco ocupa a largura específica que você define, independentemente do conteúdo ou tamanho do contêiner.

Desagrupar blocos

Se quiser remover um bloco de linha/pilha sem apagar os blocos internos, desagrupe-os. Siga estas etapas:

  1. Selecione Visualização em lista na parte superior da tela de edição.
  2. Selecione o bloco de linha/pilha.
  3. Clique nos três pontos ao lado do bloco de linha/pilha.
  4. Selecione a opção Desagrupar.
Ungrouping a Row block.
Copied to clipboard!