Blocos

Blocos »Bloco de grade de layout

Um bloco de Grade facilita a criação de layouts que propagam linhas de grade verticais consistentes em todo o post ou página, além de permitir que você coloque o conteúdo entre colunas.

Uma grade tem de uma a quatro colunas, que podem ser redimensionadas e posicionadas em 12 linhas de grade verticais. Há opções que oferecem layouts específicos para tablet ou celular, com oito e quatro linhas de grade verticais respectivamente.

Você pode adicionar preenchimentos e cores de plano de fundo para dar ênfase ao layout.

Clique no botão Adicionar bloco e acesse a seção de layouts para adicionar uma Grade de layout. Se preferir um método mais rápido, digite /layout.

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

Algumas funcionalidades requerem que o tema do seu site seja totalmente compatível com o editor de blocos.

O que é uma grade de layout?

Uma grade é um mecanismo de design de layout, que contém um número de linhas determinadas pelo dispositivo de exibição (o ponto de interrupção responsivo):

  • 12 em desktops
  • 8 em tablets
  • 4 em celulares

A grade de layout tem de uma a quatro colunas, cada uma com o conteúdo desejado posicionado na grade.

As colunas podem ser expandidas por diversas linhas de grade (exibidas com linhas pontilhadas) e afastadas umas das outras. Isso é o layout de grade. Configurações diferentes podem ser usadas em cada dispositivo de exibição.

É comum em tablets e celulares que o layout seja expandido em várias linhas. Essa função é ativada automaticamente ao escolher a exibição para tablet ou celular. No entanto, basta alterar de forma direta os valores de grade para que essa função seja desativada.

Pontos de interrupção responsivos são um tópico avançado. Você pode usar a grade de layout sem se preocupar com esses pontos, utilizando as configurações padrão.

↑ Tabela de Conteúdo ↑

Como configurar a grade

Assim que você adiciona um bloco de Grade de layout, é solicitado que escolha o número de colunas:

Isso pode ser alterado depois na barra lateral Configurações do bloco.

↑ Tabela de Conteúdo ↑

Como adicionar conteúdo à grade

Cada coluna da grade pode conter outros blocos. Para adicionar o conteúdo, clique no ícone + e escolha um bloco.

↑ Tabela de Conteúdo ↑

Como redimensionar a grade

Há duas formas de redimensionar as colunas de uma grade de layout:

  • Arrastando as alças na tela
  • Usando a barra lateral Configurações do bloco

O ponto de interrupção responsivo selecionado no momento é exibido na parte inferior do bloco de Grade de layout.

Com a barra lateral de configurações, você pode escolher entre pontos de interrupção de celular, tablet e desktop. Basta clicar nos botões pertinentes.

O editor geral não será alterado para refletir o ponto de interrupção escolhido.

↑ Tabela de Conteúdo ↑

Como redimensionar a grade com alças de arrastar

Cada coluna da grade tem um circulo azul à direta e à esquerda. Essas são as alças de arrastar. Puxe-as para a esquerda ou direita para redimensionar o bloco.

A grade de layout impedirá a expansão do bloco para além dela, fazendo com que você precise ajustar outras colunas para abrir espaço.

Não é possível usar as alças de arrastar para redimensionar a grade em diferentes linhas.

↑ Tabela de Conteúdo ↑

Como redimensionar a grade com as configurações do bloco

Assim como as alças de arrastar, a barra lateral Configurações do bloco pode ser usada para modificar o layout da grade de forma direta.

Todos os blocos têm opções específicas na barra lateral do editor, além das opções encontradas na barra de ferramentas do bloco. Caso não esteja visualizando a barra lateral, basta clicar no ícone de engrenagem, ao lado do botão Publicar.

Você pode modificar os valores de cada coluna de forma direta:

  • Afastar – quantas linhas há entre essa coluna e a anterior (ou inicial)
  • Expandir – quantas linhas essa coluna expande

Essas funções são ajustadas automaticamente quando você usa as alças de arrastar.

↑ Tabela de Conteúdo ↑

Várias linhas

Os layouts para celular e tablet podem ter várias linhas.

Com as alças de arrastar, redimensione as colunas em cada linha. Se quiser mover as colunas pelas linhas, use a barra lateral Configurações do bloco.

↑ Tabela de Conteúdo ↑

Regras da grade

Até mesmo uma grade precisa de regras. Felizmente, há uma única regra: o total dos valores de expansão e afastamento de cada coluna em uma linha não pode exceder o número de linhas de grade para o dispositivo.

Por exemplo, em um desktop (12 linhas de grade), um layout com três colunas pode expandir quatro linhas de grade de cada coluna sem realizar afastamentos; expandir três linhas de grade com um afastamento em cada; ou expandir 10 linhas de grade em uma coluna e apenas uma linha nas outras duas.

A arrumação fica a seu critério. A regra impedirá que as colunas se sobreponham. Isso pode impedir que você realize certas combinações de expansões e afastamentos, principalmente em relação a várias linhas. Se isso ocorrer, você precisará escolher valores que atendam à regra de grade.

↑ Tabela de Conteúdo ↑

Preenchimento e cores

Cada coluna de grade tem suas próprias configurações, acessadas de forma similar às configurações do bloco. Pela barra lateral, você pode adicionar uma cor de plano de fundo e preenchimentos. Isso só afetará a coluna individual.