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 ajuda você a apresentar recursos visuais de forma mais clara e estruturada. Isso melhora a compreensão do seu conteúdo pelos usuários e deixa suas páginas mais organizadas.

• Melhor Contação de Histórias Visuais: Você pode mostrar etapas, progresso ou ideias relacionadas em uma única visualização, em vez de separá-las pela página. Isso torna seu conteúdo mais fácil de seguir e entender rapidamente.
• Comparação Fácil: Você pode colocar duas ou mais imagens juntas para que os usuários possam comparar rapidamente detalhes, diferenças ou resultados sem precisar rolar a página para frente e para trás.
• Economiza Espaço na Página: Em vez de empilhar imagens verticalmente e tornar a página mais longa, você pode acomodar vários recursos visuais em uma única linha, o que mantém seu layout limpo e compacto.
• Melhora o Design e o Layout: Imagens lado a lado quebram grandes seções de texto e tornam sua página mais equilibrada, moderna e visualmente atraente.
• Funciona Bem para Muitos Casos de Uso: É especialmente útil para comparações de produtos, imagens de antes e depois, tutoriais e portfólios de fotografia onde os recursos visuais são mais importantes.

Dito isso, mostraremos duas maneiras fáceis de colocar imagens uma ao lado da outra. Você pode usar os links abaixo para pular para o método de sua preferência:

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, 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 elas se alinhem, ajustar os tamanhos das imagens e vinculá-las a páginas diferentes no painel de blocos.

Para instruções detalhadas, veja 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 de Galeria integrado seja perfeito para layouts simples, você precisará de um plugin para criar galerias de fotos mais avançadas com recursos como lightboxes, álbuns e opções de compartilhamento social.

Para isso, recomendamos o Envira Gallery. Ele é consistentemente classificado como um dos melhores plugins de galeria do WordPress, com uma classificação de 4,7/5 estrelas em mais de 1.600 avaliações no WordPress.org.

Em nossa experiência, é muito fácil de usar, mesmo para iniciantes. O construtor de arrastar e soltar mantém as coisas simples, ao mesmo tempo que oferece recursos poderosos. Modelos pré-fabricados também tornam mais rápido criar galerias limpas e polidas.

No geral, é uma ótima opção para fotógrafos, artistas e empresas que desejam exibir recursos visuais de forma profissional. Para mais detalhes sobre seus recursos, dê 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 o texto alternativo, clique no botão ‘Editar’ em uma imagem na galeria.

Você pode então alterar o título da sua imagem e inserir texto alternativo, o que é útil para o SEO do site WordPress.

Se o seu título descreve a imagem, crie um texto alternativo conciso e descritivo que explique o conteúdo e o propósito da imagem para acessibilidade e SEO.

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 (Incluindo Lado a Lado com o Bloco de Colunas)

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.

Usando o Bloco de Colunas para Imagens Lado a Lado

Além do bloco de Galeria, o bloco de Colunas é uma ferramenta excelente para colocar imagens lado a lado, especialmente quando você precisa de mais controle sobre os tamanhos individuais das imagens ou o espaçamento.

Você pode até usá-lo ao combinar imagens com outro conteúdo.

Para usá-lo, basta adicionar um bloco de Colunas e selecionar o layout desejado, como uma divisão 50/50. Em seguida, adicione um bloco de imagem que se alinhe perfeitamente ao seu conteúdo.

Além disso, você 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 o Envira Gallery permite criar grades personalizadas que podem lidar com várias dimensões de imagem graciosamente.

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 a largura dos 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.