Colunas, grupo e mídia e texto – qual é a diferença?

“Colunas”, “Grupo” e “Mídia e Texto” são três blocos da categoria “Elementos de Layout” do Gutenberg, o editor de páginas nativo do WordPress. Embora os três sejam conjuntos de outros blocos (como parágrafo e imagem), cada um tem suas funções.

Colunas

As colunas colocam conteúdo lado a lado nas versões mais amplas da página: desktop e tablet. Na versão mobile dos sites responsivos (como o seu deve ser), elas se reorganizam para ficar uma abaixo da outra. Demorou para acertarem as colunas do Gutenberg – originalmente, elas só vinham aos pares. Atualmente, você pode escolher entre duas ou três, com algumas sugestões de proporção.

Opções de layout para colunas (você pode modificá-los depois)

Depois que você seleciona as colunas, é hora de preenchê-las com conteúdo, clicando no “+” dentro delas. Na barra de opções acima do bloco (1), você escolhe se quer alinhar o conteúdo das diferentes colunas por cima, centralizando ou por baixo, como em células do Excel. Caso você queira mudar a quantidade de colunas depois, pode fazer isso na barra lateral direita (2).

Você também pode alterar a largura de cada coluna clicando no bloco “Coluna”, que fica dentro de “Colunas”, mas fora do bloco de conteúdo, e mexendo na barra lateral à direita.

Mídia e texto

O bloco “Mídia e texto” está na categoria de layout, mas se você inseri-lo e observar os blocos que o Gutenberg sugere para trocar, vai encontrar “Imagem” ou “Vídeo”. Essencialmente, “Mídia e texto” é uma imagem sem legenda e um texto que foi pensado para ser destacado, ambos ocupando 50% de largura.

Na barra acima do bloco, você escolhe se quer que a imagem fique à esquerda ou à direita do texto (1), e se os dois são alinhados por cima, pelo centro ou por baixo dos blocos (2). Você também pode trocar a imagem ou alterar detalhes dela, como o texto alternativo, mas a legenda não: mesmo se você adicionar uma na aba de edição de imagem, ela não aparece.

Opções do bloco “Mídia e texto”

Já na barra lateral, se você tiver selecionado o bloco ou a imagem, ele vai oferecer configurações para o bloco combinado:

  • “Empilhar nos dispositivos móveis” (3) significa que o elemento da esquerda vai aparecer em cima do elemento da direita nos celulares. Se você leu o artigo sobre sites responsivos e por que o seu precisa ser um, vai concordar comigo que é melhor marcar essa opção.
  • “Recortar a imagem para preencher toda a coluna” (4) corta as imagens mais verticais em cima e embaixo para ficarem da altura do texto. Você pode escolher qual parte aparece no centro da imagem com o “ponto focal”.
  • Texto alternativo (5) é o texto lido pelos leitores de tela dos usuários com dificuldades para enxergar e pelos motores de busca. Saiba como preencher esse campo no artigo sobre adicionar imagens com acessibilidade e foco em SEO.
  • Nas configurações de cor (6), você pode escolher uma cor de fundo para o bloco. Inclusive, pode colocar o código hexadecimal da cor da sua marca, para manter um padrão no seu site. Quando você usa uma imagem vertical, seja cortada ou não, a cor de fundo só vale para o parágrafo.

Se você clicar no parágrafo, a barra de opções desse bloco vai aparecer acima dele e a barra lateral vai mudar as configurações para o tamanho da fonte e a opção de uma letra capitular. Você também pode escolher uma cor de fundo só para o bloco do parágrafo, e alterar a cor da fonte.

Grupo de blocos

O grupo é o mais básico: você o cria selecionando quantos blocos quiser e clicando no primeiro botão da barra acima do bloco. Ele tem três finalidades práticas:

  1. permitir que você mova vários blocos de uma vez para cima e para baixo do texto;
  2. marcar o conjunto como “reutilizável” e tenha aquele conteúdo disponível para outros posts e páginas na categoria “blocos reutilizáveis”;
  3. aplicar uma cor de fundo a uma parte da página (que também pode ser qualquer cor, se você colocar o código hexadecimal.

Anotou as dicas? Me conte nos comentários quais você vai colocar em prática no seu site. O próximo artigo da série Blocos do Gutenberg também foca em elementos de layout: o separador e o espaçador.

Você pode assistir ao vídeo desse artigo no canal de YouTube do WordPress sem Código:

Colunas, grupo e mídia e texto - qual é a diferença? Série Blocos do Gutenberg ep. 9

Deixe um comentário

O seu endereço de e-mail não será publicado.