O bloco de linha e o bloco de pilha são um tipo de bloco de design que permite inserir vários blocos em uma linha (ou coluna com o bloco de pilha) e espaçá-los de maneira uniforme. É possível usar o bloco de linha ou de pilha para criar separadores ou adicionar vários elementos na mesma linha como se estivessem inclusos em colunas.
Neste guia
Clique no ícone + Inserção de blocos para adicionar o bloco de linha e pesquise por Linha para o bloco de linha ou Pilha para o bloco de pilha. Clique no bloco para adicioná-lo ao post ou à página.
💡
Usando o teclado, você também pode digitar /linha em uma nova linha e pressionar Enter para adicionar um novo bloco de linha ou /pilha para um novo bloco de linha.
Você encontra instruções detalhadas sobre como adicionar blocos neste link.
Ao clicar no bloco, aparecerá uma barra de ferramentas com opções:
A barra de ferramentas do bloco de linha 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.
- Alterar o alinhamento: nenhum, largura ampla ou largura total.
- Mais opções.
A barra de ferramentas 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 ou direita.
- Alterar o alinhamento: nenhum, largura ampla ou largura total.
- Mais opções.
📌
Se você não encontrar a opção de alterar a largura do bloco para ampla ou total, e seu tema for compatível com essas definições, será possível que o bloco tenha sido adicionado a um bloco de grupo. Saiba mais sobre o bloco de grupo aqui.
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 bloco de linha pode ser convertido em um bloco de grupo ou em um bloco de pilha. O bloco de pilha pode ser convertido em um bloco de grupo ou em um bloco de linha.
Na seção Layout, é possível definir a justificação das linhas ou blocos empilhados. Escolha entre esquerda, centro, direita ou justificado para definir o alinhamento da linha. A opção Orientação permite trocar de linhas para empilhado.
O bloco de pilha não inclui a opção de definir o conteúdo como justificado. Essa opção aparece no bloco Linha como forma de alinhar as linhas de maneira uniforme.
Além disso, é possível ativar ou desativar a possibilidade de agrupar seu conteúdo em várias linhas.
Na seçã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.
Avançado
Na guia Avançado, você adiciona uma classe CSS ao seu bloco, permitindo a gravação de CSS personalizado e a estilização do bloco conforme você julgar melhor.
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:
A seção Cor permite que você modifique a cor do texto, plano de fundo e links em seu bloco de linha ou de pilha.
Clique nos três pontos na seção Cor para adicionar a opção de modificar os links.
Para o texto e os links: ao clicar na área quadriculada, é possível escolher qualquer cor personalizada ou escolher uma das cores pré-selecionadas nas seções Tema ou Padrão abaixo.
Para o plano de fundo, além das configurações de cores semelhantes às do texto (acima), escolha entre uma cor sólida ou um gradiente (um conjunto de duas ou mais cores, exibidas em um determinado padrão (do mais claro ao mais escuro ou uma cor se misturando com a outra).
Ajuste a aparência do texto do bloco com as seguintes configurações.
Se você não vir a configuração, clique nos três pontos à direita de Tipografia (conforme mostrado à direita). Você poderá então escolher a opção que deseja acessar:
- Tamanho da fonte
- Família de fontes
- Aparência
- Altura da linha
- Decoração
- Letra maiúscula/minúscula
- Espaçamento entre letras
A opção Tamanho da fonte permite que você ajuste o tamanho do texto. Você pode escolher entre tamanhos predefinidos, como pequeno, médio e grande.
Você também pode definir um valor específico clicando no ícone do controle deslizante diretamente acima das seleções padrão, marcadas com 1 na captura de tela abaixo. Você pode mudar as unidades clicando onde um número 2 está marcado na captura de tela abaixo. As opções são pixels, em ou rem.
A opção Família de fontes permite que você altere o estilo de fonte usado. Escolha entre uma lista de fontes no menu suspenso.
A opção Aparência permite alterar o estilo do texto entre normal e itálico, variando de fino a extra negrito.
A opção Altura da linha define o espaçamento acima e abaixo do texto. Se você selecionar zero, confira o seu site em um dispositivo móvel.
Decoração inclui opções para sublinhado e tachado.
Letra maiúscula/minúscula permite que você defina o texto todo em letras maiúsculas, somente a primeira letra maiúscula ou todo o texto em letras minúsculas.
Espaçamento entre letras define o espaço entre cada caractere do texto. Você pode alterar as unidades do padrão (pixels) para percentual, em, rem, vw e vh. Saiba mais sobre unidades relativas aqui.
Dimensões permitem a você definir as margens internas, o espaço em torno dos elementos do seu bloco de linha. Essa opção é particularmente relevante quando você usa uma cor de fundo.
As margens internas podem ter um único valor para todos os quatro lados. Adicione um valor no campo abaixo de Preenchimento
As margens internas também podem ter valores diferentes para cada um dos lados. Clique no ícone do link para exibir as opções para adicionar preenchimento a cada lado individualmente. Os números mostrados aqui seguem no sentido horário acima direita, abaixo ou esquerda. Você pode acessar essa visualização clicando no ícone de link azul mostrado na imagem anterior.
O bloco de pilha não inclui a opção de definir as dimensões, pois os blocos dentro dele são empilhados e é possível definir as dimensões com o bloco individual ou usando o bloco de espaçador.
Use as configurações da borda para adicionar uma linha contornando o conteúdo. Você pode escolher a cor, o tamanho e a unidade de tamanho (px, %, em, rem, vw e vh.)
Por padrão, as configurações controlam os quatro lados da borda. Para fazer ajustes específicos na parte superior, direita, inferior ou esquerda, clique no ícone de link.
O raio permite que as imagens fiquem arredondadas. Definir o raio como 0 deixa as bordas das imagens mais pontiagudas.
📌
As configurações de borda e raio podem não aparecer em seu site se você estiver usando um tema clássico. Explore alguns dos nossos novos temas do editor de sites para poder personalizar as bordas de sua imagem e muito mais.
Primeiro, selecione os blocos que quer adicionar ao bloco de linha. Selecione vários blocos clicando e arrastando ou mantendo pressionada a tecla “shift” e clicando em cada um deles (eles precisam estar próximos um do outro).
A barra de ferramentas do bloco aparecerá. Selecione o ícone de linha ou pilha na barra de ferramentas. A imagem abaixo aponta para o ícone do bloco de linha, o ícone diretamente à direita é o ícone do bloco de pilha.
Talvez você tenha que desagrupar os blocos existentes para modificar o alinhamento dos blocos individuais.
- Clique em Visualização em lista na parte superior do editor e selecione o bloco de linha ou o bloco de pilha.
- Clique no ícone Mais opções na barra de ferramentas do bloco.
- Selecione a opção Desagrupar.
Suporte 