O bloco de grade é uma ferramenta robusta de layout do editor de blocos do WordPress Gutenberg que permite que você crie um layout de várias colunas sem codificação. Ela permite que você organize seu conteúdo em uma grade estruturada de linhas e colunas, em vez de ficar limitado a uma única coluna de texto ou mídia.
É mais fácil criar páginas, portfólios, galerias ou outras seções em estilo de revista nas quais você deseja adicionar conteúdo lado a lado usando o bloco de grade do WordPress. Hoje, vamos explorar como usar o bloco de grade no WordPress e lhe dar uma visão geral.
Criar mesas bonitas
Com o Block Editor
Como usar o bloco de grade no WordPress?
Agora, vamos examinar um guia passo a passo sobre como adicionar um bloco de grade. Essas etapas ajudarão os usuários iniciantes e intermediários a tirar o máximo proveito desse bloco.
Mas antes de seguir as etapas, você deve ir para sua postagem e para as páginas em que deseja usar o bloco. Depois disso, siga as etapas abaixo.
Inserir o bloco de grade
Clique no ícone Add Block (Adicionar bloco) (Ícone de adição) (1), digite "Grade" na caixa de pesquisa (2)e clique no bloco quando ele aparece (3).
Insira seu conteúdo
Por padrão, você verá que apenas duas colunas foram inseridas para o conteúdo. Insira seu conteúdo clicando no botão + ícone dentro do bloco e, em seguida, selecione o bloco desejado.
Agora, insira outro conteúdo ou bloco clicando no canto inferior direito do bloco.
Você pode inserir qualquer bloco que desejar. No meu caso, inseri o bloco de imagem.
Você pode inserir o espaço da coluna para cada bloco.
Personalização de blocos
Na personalização do bloco, você tem as opções para o layout (1) e posição (2).
No Layout, você pode escolher o Posição do item de grade. Você pode mantê-lo como padrão ou usar o manual.
A opção Auto permite que você ajuste a largura mínima da coluna.
A opção manual permite que você escolha as colunas para o bloco. Você pode ajustar facilmente o número de colunas dentro do bloco.
Em seguida, você pode escolher se deseja tornar a grade fixa ou não. Se você quiser torná-la aderente, escolha a opção aderente.
Há também estilos pré-construídos para o bloco na guia Styles (Estilos). Você pode selecionar e ver o que ele faz. Veja a visualização abaixo.
Você pode personalizar a cor do texto e do plano de fundo usando a opção Cor.
A opção Imagem de fundo permite que você adicione uma imagem para o fundo do bloco.
Para redefinir a imagem, clique nos três pontos e selecione redefinir tudo.
Na tipografia, você pode definir a fonte, o tamanho da fonte, a aparência, a altura da linha, o espaçamento entre letras, a decoração e as letras maiúsculas e minúsculas.
As dimensões permitem que você personalize o preenchimento, a margem, a altura mínima e o espaçamento entre blocos para o bloco Grid.
Vejamos abaixo a modificação do espaçamento entre blocos e da altura mínima.
Por fim, a opção border & shadow (borda e sombra) permite ajustar a borda e o raio da borda do bloco.
Aqui está a demonstração final do que fiz usando o bloco. Não é a melhor, mas dá uma ideia do que esse bloco pode fazer.
Visão geral do bloco de grade do WordPress
O que é o bloco de grade no WordPress?
O bloco de grade é um bloco contêiner que contém todos os outros blocos em um layout de grade. Em outras palavras, é um bloco pai no qual você pode colocar vários blocos filhos (como parágrafos, imagens, botões etc.), e ele os organizará em uma série de colunas. Ele cria automaticamente novas linhas conforme necessário.
Quais são os principais recursos do Grid Block?
O bloco de grade tem vários recursos úteis, o que o torna uma ferramenta versátil para a criação de layouts. Veja a seguir alguns dos principais recursos:
- Layouts de coluna flexíveis: Você pode escolher quantas colunas deseja em sua grade. O bloco de grade permite que você defina um número específico de colunas ou que o WordPress determine automaticamente o número de colunas com base em uma largura mínima de coluna.
- Design responsivo: O conteúdo disposto em um bloco de grade é compatível com dispositivos móveis.
- Disposição e reordenação do conteúdo: É fácil organizar e reordenar os blocos dentro da grade. Você pode arrastar e soltar blocos de conteúdo em diferentes posições ou usar as teclas de seta para movê-los para cima/para baixo dentro do contêiner Grid Block.
- Opções de estilo personalizado: Você pode alterar a cor do plano de fundo ou adicionar uma imagem de plano de fundo à seção, ajustar as cores do texto para o conteúdo interno e ajustar a tipografia (tamanhos e famílias de fontes), tudo em um só lugar.
- Integração com outros blocos de layout: Ele permite que você transformar em outros blocos de layout, como um Group padrão, um Row, um Stack, um bloco Cover ou até mesmo o antigo bloco Columns, se necessário.
Quais são os recursos da barra de ferramentas do bloco de grade?
Quando você seleciona o bloco de grade no editor, um barra de ferramentas de blocos aparece na parte superior do bloco. Essa barra de ferramentas oferece controles rápidos para ações comuns e personalização.
- Transformar: Você pode transformar um bloco de grade em um bloco de grupo, linha, pilha, capa ou coluna, preservando o conteúdo interno.
- Alça de arrasto: O ícone de seis pontos permite arrastar e mover todo o bloco de grade para uma posição diferente em sua página.
- Mover para cima/para baixo: Os ícones de seta para cima e para baixo permitem que você mova o bloco de grade uma posição para cima ou para baixo na estrutura do documento.
- Alinhamento (Alinhamento da largura): O ícone de alinhamento permite alterar a configuração de largura do contêiner do bloco de grade.
- Mais opções: Os três pontos verticais abrem um menu suspenso com opções adicionais de blocos.
Considerações finais!
O bloco de grade é um bloco incrível que é um acréscimo fantástico ao kit de ferramentas de design do WordPress. Ele permite que você crie facilmente layouts flexíveis e com várias colunas.
Usando o bloco, você pode criar seções mais fascinantes e envolventes para o seu site. Em resumo, o Grid Block ajuda você a sair do formato de coluna única e a exibir o conteúdo lado a lado em uma estrutura de grade limpa.
Diga-me sua opinião nas seções de comentários. Além disso, compartilhe com seus amigos usando suas mídias sociais.
Leia mais!
