Como colocar imagens lado a lado no WordPress (três maneiras)

O conteúdo visual desempenha um papel fundamental na captura da atenção dos usuários on-line. O que uma única imagem pode transmitir geralmente requer centenas de palavras. Além disso, as imagens podem evocar emoções e aprimorar a estética geral.

Uma maneira eficaz de exibir imagens é colocá-las lado a lado. Essa técnica é particularmente útil para comparar vários produtos, apresentar imagens de antes e depois e contar uma história.

Neste artigo, mostraremos a você três maneiras fáceis de colocar imagens lado a lado no WordPress.

Criar mesas bonitas
Com o Block Editor

O WordPress vem com o bloco Gallery padrão. Você pode apresentar imagens lado a lado com o bloco das seguintes maneiras.

Basta abrir um post ou uma página. Encontre o Bloco da galeria na biblioteca de blocos do Gutenberg, pressionando o botão botão de adição (+). Adicione-o ao editor.

Encontre e adicione o bloco Galeria do Gutenberg ao WordPress

Clique no botão Botão Upload para adicionar imagens novas de seu armazenamento local ao lado. Ou você pode carregá-las de seus arquivos existentes clicando no botão Biblioteca de mídia botão.

Faça upload de imagens do armazenamento local ou da biblioteca de mídia

Para este tutorial, faremos upload de imagens da Biblioteca de mídia. Selecione as imagens que você deseja adicionar. Pressione o botão Criar uma nova galeria no final.

Criar uma nova galeria

Depois que as imagens forem adicionadas ao editor, você as verá aparecendo lado a lado. Em seguida, você pode personalizar as configurações e estilizações do bloco Gallery usando as respectivas opções na barra lateral direita.

Imagens exibidas lado a lado usando o bloco Galeria do Gutenberg

Observação: Se suas imagens não forem exibidas lado a lado por padrão, selecione o bloco inteiro clicando no ícone Ícone da galeria na barra de ferramentas. Especifique os números das colunas na barra lateral direita.

Definir o número da coluna para o bloco Gallery

Método dois: usando o bloco Columns

O bloco Column permite que você dividir seu conteúdo em várias colunas. Você pode adicionar outros blocos para adicionar diferentes tipos de conteúdo em cada coluna.

Etapa 01: Adicionar o bloco de colunas ao seu site

Adicione o Bloco de colunas em seu editor seguindo o mesmo método descrito acima.

Adicionar o bloco de colunas ao seu site

Selecione o layout de coluna que desejar. Você pode exibir um número igual de imagens lado a lado, correspondente ao número de colunas que adicionar. Selecionamos o layout de duas colunas para o bloco.

Selecione um layout de coluna

Adicione o Bloco de imagens pressionando o botão botão de adição (+) dentro do Bloco de colunas.

Adicionar o bloco Image ao bloco Column

Faça upload de uma imagem da mesma forma que mostramos acima.

Observação: Como esse é o bloco Image, você pode adicionar apenas uma imagemao contrário do bloco Gallery.

Fazer upload da imagem para o bloco da coluna

Da mesma forma, adicione o Bloco de imagens novamente para a segunda coluna.

Adicionar várias imagens ao bloco de colunas

Você pode ver que a segunda imagem apareceu ao lado da primeira. Agora você pode adicionar textos alternativos e outras configurações para as imagens, uma a uma.

Várias imagens são exibidas usando o bloco de colunas

Terceiro método: Usando o bloco Tableberg

Tableberg é um plug-in de criação de tabelas baseado em blocos. Com ele, você também pode criar colunas e exibir imagens lado a lado. Siga as etapas explicadas abaixo após instalação e ativação o plug-in.

Instale e ative o plug-in TableBerg

Etapa 01: Adicionar o bloco TableBerg

O plug-in vem com um Bloco TableBerg. Adicione-o ao seu editor.

Adicione o bloco TableBerg ao seu post ou página

Se desejar, você pode selecionar várias linhas. Mas explicaremos o tutorial de hoje com uma única linha e várias colunas.

Selecione uma linha e colunas para a tabela

O TableBerg permite que você adicione diferentes tipos de blocos às células da tabela. Adicionar o Bloco de imagens para as células da tabela.

Adicione o bloco de imagem às células do TableBerg

Carregar uma imagem para a célula da tabela da mesma forma que mostramos nos dois métodos acima.

Carregar imagem na tabela

Continue adicionando imagens a outras colunas da tabela usando o Bloco de imagens. Espero que você consiga fazer isso sozinho.

Continue adicionando imagens a outras colunas da tabela

Veja a imagem abaixo. Exibimos três imagens lado a lado na tabela criada com o bloco TableBerg.

Imagens exibidas lado a lado com a tabela do TableBerg

# Remova a borda da tabela

Você pode ver uma borda ao redor da tabela. Para removê-la, clique no ícone do TableBerg três vezes na barra de ferramentas. Ir para Guia Estilos > Borda na barra lateral direita. Coloque o valor zero (0) para definir o tamanho da borda da tabela.

Remover a borda da tabela

Assim, você pode exibir imagens lado a lado em sites do WordPress.


Conclusão

Mostrar imagens lado a lado é altamente vantajoso, enquanto a comparação visual entre diferentes produtos, opções, recursos e variações é essencial. Espero que você consiga fazer isso sozinho hoje com este tutorial.

Você pode fazer mais em seu site criando diferentes tipos de tabelas usando o plug-in TableBerg. Dê uma olhada em Como criar uma tabela de comparação de produtos da Amazon no WordPress.



A equipe do Tableberg