Como Colocar Imagens Lado a Lado Facilmente no WordPress

Quando começamos a blogar, fazer com que as imagens se alinhassem muitas vezes parecia mais frustrante do que divertido.

Mas logo percebemos que colocar imagens lado a lado não é apenas para deixar as coisas bonitas — na verdade, ajuda os leitores a entender e aproveitar mais o conteúdo.

Com o tempo, aprendemos algumas técnicas simples para facilitar esse processo, e colocar visuais um ao lado do outro se tornou uma de nossas maneiras preferidas de criar belas galerias de fotos.

Neste tutorial, vamos guiá-lo por dois métodos fáceis para exibir imagens lado a lado — um usando o editor de blocos integrado do WordPress e outro com o plugin Envira Gallery.

Ao final, você será capaz de melhorar o layout do seu conteúdo e criar uma experiência mais envolvente para seus visitantes.

Por que Adicionar Imagens Lado a Lado no WordPress?

Adicionar imagens lado a lado pode aprimorar o apelo visual do seu site WordPress, criando um layout mais interessante.

Imagens lado a lado também podem ajudar a usar o espaço do seu site de forma eficiente, permitindo que você encaixe mais visuais em uma área limitada.

Por exemplo, se você tem um site de fotografia, então organizar imagens lado a lado o ajudará a aproveitar ao máximo sua página do WordPress, exibindo fotos de maneira esteticamente agradável.

Além disso, às vezes, você pode querer que os usuários comparem duas imagens no seu blog WordPress. Colocá-las lado a lado facilitará a análise e a compreensão das diferenças entre as imagens.

Dito isso, mostraremos duas maneiras fáceis de colocar imagens lado a lado. O melhor método depende do que você precisa.

Para a maioria dos casos simples, o editor de blocos integrado do WordPress funciona perfeitamente. Se você quiser criar galerias de fotos mais avançadas com recursos extras, usar um plugin é a melhor escolha.

Você pode usar os links abaixo para pular para o método de sua preferência:

• Method 1: Add Images Side by Side in WordPress Using the Block Editor
• Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)
• Bônus: Alinhar Imagens no WordPress
• Perguntas Frequentes Sobre Adicionar Imagens Lado a Lado

Método 1: Adicionar Imagens Lado a Lado no WordPress Usando o Editor de Blocos

Se você está procurando uma maneira simples de adicionar imagens lado a lado usando o editor de blocos Gutenberg, então este método é para você.

O editor de blocos oferece a funcionalidade de bloco de Galeria que permite exibir facilmente imagens em linhas e colunas.

Passo 1: Adicione o Bloco de Galeria

Primeiro, você precisará criar uma nova postagem/página ou editar uma existente para abrir o editor de conteúdo. Uma vez lá, clique no botão ‘Adicionar Bloco’ (+) no canto superior esquerdo da tela para abrir o menu de blocos.

A partir daqui, basta localizar e adicionar o bloco de Galeria à página ou postagem.

Passo 2: Faça o Upload das Suas Imagens

Depois disso, você pode facilmente adicionar imagens ao seu bloco de galeria a partir do computador clicando no botão ‘Upload’.

Você também pode selecionar imagens da sua biblioteca de mídia do WordPress clicando no botão ‘Biblioteca de Mídia’.

Como você pode ver, adicionamos 2 imagens ao nosso bloco de Galeria, e o WordPress as posicionou automaticamente lado a lado.

Se você decidir adicionar uma terceira imagem, deverá clicar no botão ‘Adicionar’ na barra de ferramentas do bloco na parte superior.

Isso abrirá a biblioteca de mídia de onde você pode adicionar uma terceira imagem ao seu bloco de Galeria. Assim que fizer isso, você verá que o WordPress simplesmente redimensionou as imagens para colocá-las automaticamente lado a lado.

Passo 3: Ajuste as Colunas da Galeria

No entanto, se você decidir colocar uma quarta imagem no bloco de Galeria, ela será colocada sob as outras imagens.

Para corrigir isso, você pode alterar o número de colunas da sua galeria. Essa configuração controla quantas imagens aparecerão lado a lado em cada linha.

Por exemplo, se você quiser duas imagens lado a lado e mais duas abaixo delas, você pode definir as Colunas como 2.

Você também pode cortar imagens para que se alinhem, ajustar tamanhos de imagem, vinculá-las a páginas diferentes e alterar a cor de fundo no painel de blocos.

Para instruções detalhadas, consulte nosso guia para iniciantes sobre como criar uma galeria de imagens no WordPress.

Passo 4: Publique Suas Alterações

Assim que terminar, não se esqueça de clicar no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas alterações.

Agora, basta visitar seu site para ver as imagens lado a lado.

Método 2: Colocar Imagens Lado a Lado no WordPress Usando um Plugin (Caminho Fácil)

Embora o bloco Galeria integrado seja perfeito para layouts simples, você precisará de um plugin se quiser criar galerias de fotos mais avançadas com recursos como lightboxes bonitos, álbuns e opções de compartilhamento social.

Para isso, recomendamos o Envira Gallery. É o melhor plugin de galeria do WordPress do mercado e, em nossa experiência, é incrivelmente fácil de usar, ao mesmo tempo que oferece recursos poderosos.

Para mais detalhes sobre seus recursos, você pode dar uma olhada em nossa análise do Envira Gallery.

Passo 1: Instale e Ative o Envira Gallery

Primeiro, você precisará instalar e ativar o plugin Envira Gallery. Para mais detalhes, confira nosso guia passo a passo sobre como instalar um plugin do WordPress.

Passo 2: Crie uma Nova Galeria e Faça Upload de Imagens

Após a ativação, vá para a página Envira Gallery » Adicionar Nova no seu painel do WordPress.

Uma vez lá, você terá que dar um título à sua nova galeria. Chamamos a nossa de ‘Galeria de Exemplo’.

Depois disso, carregue as imagens que você deseja usar do computador clicando no botão ‘Selecionar Arquivos do Seu Computador’.

Para fazer upload de imagens da biblioteca de mídia, clique no botão ‘Selecionar Arquivos de Outras Fontes’.

Passo 3: Edite os Metadados da Imagem (Opcional)

Depois de fazer o upload das imagens, role para baixo até a seção Galeria para visualizá-las.

A partir daqui, você pode dar um título e texto alternativo às suas imagens.

O título aparece quando um usuário passa o mouse sobre a imagem e também é exibido abaixo da imagem no lightbox, que é a visualização pop-up em tela cheia.

Para editar o título e texto alternativo, clique no botão ‘Editar’ em uma imagem na galeria.

Em seguida, você pode alterar o título da sua imagem e inserir texto alternativo, o que é útil para o SEO do seu site WordPress.

Se o seu título descreve a imagem, então você pode simplesmente repeti-lo para o texto alternativo.

Quando terminar, certifique-se de clicar no botão ‘Salvar Metadados’ antes de fechar a janela.

Se você não fizer isso, quaisquer alterações feitas não serão salvas na galeria.

Passo 4: Publique Sua Galeria

Finalmente, role de volta para o topo da página e clique no botão ‘Publicar’ para salvar a galeria de imagens que você acabou de criar.

Depois disso, vá para a página ou postagem do WordPress onde você deseja adicioná-la.

Passo 5: Adicione o Bloco Envira Gallery a uma Postagem ou Página

Uma vez lá, clique no botão ‘Adicionar Bloco’ (+) no canto superior esquerdo da tela para abrir o menu de blocos.

A partir daqui, localize e adicione o bloco Envira Gallery à página/postagem.

Em seguida, você terá que selecionar a galeria que criou no menu suspenso dentro do próprio bloco.

Passo 6: Configure o Layout e Publique

Para exibir as imagens da galeria lado a lado, vá para o painel de blocos no canto direito da tela.

A partir daqui, role para baixo até a seção ‘Selecionar Layout’ e escolha o número de colunas no menu suspenso. Suas imagens agora serão exibidas lado a lado na página do WordPress.

Você também pode alterar as margens da galeria, habilitar um belo efeito de filtragem animada (conhecido como Isotope) e configurar as configurações do lightbox no painel do bloco.

Quando terminar, não se esqueça de clicar no botão ‘Publicar’ ou ‘Atualizar’ para salvar suas configurações.

Agora, você pode visitar seu site para ver as imagens exibidas lado a lado.

O usuário agora pode clicar em qualquer imagem para ver a versão em tamanho real em um lightbox.

Além disso, eles também podem percorrer as imagens usando a lightbox.

Se você quiser adicionar mais imagens à sua galeria, poderá voltar a ela visitando a página Envira Gallery » Todas as Galerias no seu painel do WordPress.

Uma vez lá, basta clicar no nome da sua galeria para editá-la.

Quaisquer alterações que você fizer na sua galeria aparecerão onde quer que você a tenha colocado em suas postagens, páginas ou barras laterais. Você não precisa adicioná-la novamente a esses locais.

Bônus: Alinhar Imagens no WordPress

Ao adicionar duas imagens lado a lado, elas devem se alinhar para criar um visual coeso e atraente.

Mesmo que você esteja adicionando uma única imagem ao seu blog do WordPress, você ainda vai querer alinhá-la com o seu conteúdo para criar um equilíbrio visual.

Você pode facilmente alinhar imagens no editor de blocos do WordPress clicando no botão 'Alinhar' na barra de ferramentas acima do bloco.

Isso abrirá algumas opções onde você pode mover sua imagem para a direita ou esquerda, torná-la da mesma largura do contêiner ou usar a opção de largura total para que a largura da imagem seja a mesma do restante da página.

Além disso, você também pode usar o bloco Coluna para alinhar sua imagem com o conteúdo. Para fazer isso, você terá que selecionar a variação 50/50.

Depois de fazer isso, você pode adicionar um bloco de imagem que se alinha perfeitamente com o seu conteúdo.

Além disso, você também pode envolver texto ao redor da imagem, usar o bloco de grupo, adicionar o bloco de capa, ou fazer muito mais para alinhar imagens juntas ou separadamente.

Para mais informações, veja nosso guia para iniciantes sobre como alinhar imagens no editor de blocos do WordPress.

Perguntas Frequentes Sobre Adicionar Imagens Lado a Lado

Aqui estão algumas perguntas que nossos leitores fizeram com frequência sobre como adicionar imagens lado a lado no WordPress:

Como coloco uma imagem e texto lado a lado no WordPress?

A melhor maneira de colocar uma imagem ao lado do texto é usando o bloco Colunas.

Primeiro, adicione o bloco Colunas e escolha um layout, como 50/50. Em seguida, você pode adicionar um bloco de Imagem em uma coluna e um bloco de Parágrafo na outra. Isso lhe dará um layout limpo e lado a lado.

Qual é a melhor maneira de alinhar imagens de tamanhos diferentes lado a lado?

Embora o bloco Galeria seja ótimo para imagens uniformes, o bloco Colunas oferece mais flexibilidade para tamanhos diferentes. Você pode usá-lo para criar layouts de 70/30 ou outros layouts personalizados.

Para um controle mais avançado, um plugin como Envira Gallery permite criar grades personalizadas que podem lidar com várias dimensões de imagem de forma elegante.

Minhas imagens lado a lado permanecerão juntas em dispositivos móveis?

Geralmente, não. A maioria dos temas modernos do WordPress é responsiva, o que significa que os blocos de imagem colocados lado a lado em um desktop serão automaticamente empilhados verticalmente em telas menores.

Isso é feito para garantir que as imagens sejam grandes o suficiente para serem vistas claramente em um telefone, proporcionando uma melhor experiência ao usuário.

Esperamos que este tutorial tenha ajudado você a aprender como colocar imagens lado a lado no WordPress. Você também pode consultar nosso guia sobre como alterar a altura e largura de blocos no WordPress e nosso guia sobre adicionar tabelas em posts e páginas do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.