Como exibir imagens do WordPress em colunas e linhas

Como exibir imagens do WordPress em colunas e linhas

Não é mais segredo que o conteúdo visual, como as imagens, desempenha um papel importante na apresentação de conceitos e narrativas. O conteúdo de texto sozinho muitas vezes não consegue cativar os leitores. É por isso que a incorporação de imagens relevantes em posts e páginas de blogs se tornou obrigatória.

O WordPress permite que você adicione imagens ao seu site de várias maneiras. Uma das maneiras mais eficazes de fazer isso é adicionar imagens em colunas e linhas. Isso permite que você apresente suas imagens de forma organizada.

Nesta postagem do blog, mostraremos a você várias maneiras de exibir imagens do WordPress em Columns & Rows.

Criar mesas bonitas
Com o Block Editor

Método 1: Exibir imagens no WordPress usando o bloco de colunas

O WordPress tem um bloco de colunas padrão. Você pode adicionar muitos outros blocos dentro dele, inclusive o bloco de imagens. Aqui está o guia.

Etapa 01: Adicionar o bloco Gutenberg Column

Localizar e adicionar o bloco Column clicando no ícone de adição (+) no editor.

Adicionar o bloco Coluna do Gutenberg

Selecione o número de variações de coluna que deseja adicionar ao bloco de colunas. Para este tutorial, selecionaremos a variação de coluna 50/50.

Selecione o número de colunas para o bloco de colunas

Etapa 02: Adicionar o bloco de imagem ao bloco de coluna

Como dissemos, você pode colocar outros blocos do Gutenberg dentro do bloco de colunas. Agora, clique no ícone de mais (+) dentro da coluna. Localizar e adicionar o bloco Image a ele.

Adicionar o bloco de imagem ao bloco de coluna

Agora você pode adicionar imagens da Media Library ou da unidade local. Faça isso como desejar.

Fazer upload da imagem para o bloco da coluna

Etapa 03: Estilizar o bloco de imagem dentro do bloco de coluna

Você pode ver que adicionamos uma imagem. Você pode alinhá-la centralmente usando a opção de alinhamento na barra de ferramentas. Redimensione a imagem segurando o ícone de círculo de borda. Por fim, você pode estilizá-la mais usando as opções da guia Style (Estilo).

Estilizar o bloco de imagem dentro do bloco de coluna

Da mesma forma, adicione uma imagem à outra coluna também.

Adicionar imagem à outra coluna

O WordPress tem um bloco Gallery padrão pelo qual você pode adicionar várias imagens com o mesmo layout de bloco.

Etapa 01: Adicionar o bloco Gallery

Como no método acima, encontre e adicionar o bloco Gallery ao editor.

Adicionar o bloco Gallery

Você terá permissão para fazer upload de imagens de seu unidade local ou o Biblioteca de mídia. Neste tutorial, faremos upload de imagens da Biblioteca de mídia.

Fazer upload de imagens

Etapa 02: Selecione e faça upload de imagens

Selecione as imagens que você deseja carregar no bloco Gallery. Você pode selecionar quantas imagens quiser. Quando terminar, clique no botão Criar uma nova galeria.

Selecionar imagens para o bloco Gallery

Você pode adicionar legendas para cada imagem, se desejar. Não há problema se você não adicionar nada. Pressione o botão Botão Inserir galeria no final.

Inserir galeria

Você pode ver que as imagens foram adicionadas à galeria. Em seguida, você pode personalizar o bloco Image usando as opções da seção Configurações e Guia Estilos na barra lateral direita.

Espero que você consiga fazer isso sozinho, por isso não entrarei em detalhes.

Imagens adicionadas à Galeria

Método 3: Exibir imagens no WordPress usando o plug-in TableBerg

O TableBerg é um plug-in de criação de tabelas fácil de usar. Ele permite que você adicione vários blocos personalizados às células da tabela para criar tabelas multifuncionais. Nesta seção, mostraremos como adicionar imagens no WordPress usando o plug-in TableBerg.

Etapa 01: Instalar e ativar o plug-in TableBerg

Ir para Plug-ins > Adicionar novo plug-in. Tipo TableBer na caixa de pesquisa. Instalar e ativar assim que o plug-in for exibido abaixo.

Instale e ative o plug-in TableBerg

Etapa 02: Adicione o bloco TableBerg à sua postagem/página

O plug-in vem com um bloco do Gutenberg chamado TableBerg. Encontre e adicione o bloco Bloco TabelBerg para seu editor.

Encontre e adicione o bloco TableBerg ao seu editor Gutenberg

Defina o número da linha e da coluna da tabela. O processo é semelhante ao do bloco de tabela padrão. Faça você mesmo.

Definir o número da linha e da coluna

Etapa 03: Localizar e adicionar o bloco de imagem à tabela

Espero que sua tabela esteja pronta. Selecione a célula em que deseja adicionar uma imagem. Quando você seleciona uma célula, o botão ícone de mais (+) aparecerá.

Clique no ícone de mais (+). Você obterá o bloco Image. Clique no bloco Imagem.

Adicione o bloco Image à tabela

Você terá opções para carregar imagens da unidade local ou da Biblioteca de mídia. Clique em qualquer opção desejada e carregue a imagem.

Fazer upload de uma imagem para o bloco

Etapa 04: Estilizar a imagem carregada

Esperamos que sua imagem já tenha sido carregada na tabela. Vá até a guia Styles (Estilos) na barra lateral direita. Você encontrará opções como Duotone, Border e Radius para estilizar o bloco Image.

Estilizar a imagem carregada

Assim, você pode fazer upload de imagens para a tabela do WordPress com o plug-in. Explorar como criar uma seção de membros da equipe no WordPress usando o bloco de colunas.

Observações finais!

Para manter um website com sucesso, você precisa fazer upload e apresentar seu conteúdo de diferentes maneiras. Às vezes, o mesmo conteúdo precisa ser apresentado de maneiras diferentes em posts e páginas diferentes. E o mesmo acontece com o bloco de imagens.

Esperamos que, depois de ler este tutorial, você consiga adicionar seu bloco de imagens de várias maneiras no WordPress e trazer variações ao conteúdo.



A equipe do Tableberg