Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como colocar imagens lado a lado no WordPress (facilmente)

Você deseja colocar imagens lado a lado no WordPress?

Muitas vezes, os iniciantes têm dificuldade em descobrir como colocar duas imagens uma ao lado da outra em seus posts e páginas do WordPress.

Neste artigo, mostraremos como colocar facilmente imagens lado a lado no WordPress (sem escrever nenhum código).

Putting images side by side in WordPress

Por que adicionar imagens lado a lado no WordPress?

A adição de imagens lado a lado pode aumentar o apelo visual do seu site WordPress, criando um layout mais interessante.

As imagens lado a lado também podem ajudar a fazer uso eficiente do espaço do site, permitindo que você coloque mais recursos visuais em uma área limitada.

Por exemplo, se você tiver um site de fotografia, organizar as imagens lado a lado o ajudará a fazer uso total da sua página do WordPress, exibindo as imagens de uma forma esteticamente agradável.

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

Dito isso, vamos ver como colocar facilmente as imagens lado a lado no WordPress.

Para este tutorial, mostraremos dois métodos diferentes, e você pode usar os links abaixo para ir para o método de sua escolha:

Método 1: Adicionar imagens lado a lado no WordPress usando o Block Editor

Se você estiver procurando uma maneira simples de adicionar imagens lado a lado usando o editor de blocos do Gutenberg, esse método é para você.

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

Primeiro, você precisará criar um novo post/página ou editar um já existente para abrir o editor de conteúdo. Quando estiver lá, clique no botão “Add Block” (+) no canto superior esquerdo da tela para abrir o menu de blocos.

A partir daí, basta localizar e adicionar o bloco Gallery à página ou postagem.

Upload images for the gallery

Depois disso, você pode adicionar facilmente imagens ao bloco da galeria a partir do computador, clicando no botão “Upload”.

Você também pode selecionar imagens da biblioteca de mídia do WordPress clicando no botão “Media Library” (Biblioteca de mídia).

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

Two images added to the block

Se você decidir adicionar uma terceira imagem, deverá clicar no botão “Add” (Adicionar) na barra de ferramentas de blocos na parte superior.

Isso abrirá a biblioteca de mídia, na qual você poderá adicionar uma terceira imagem ao bloco Galeria. Depois de fazer isso, você verá que o WordPress simplesmente redimensionou as imagens para colocá-las automaticamente lado a lado.

Add three images to the block

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

Para resolver isso, você pode alterar o número de imagens que o WordPress deve incluir lado a lado em uma única coluna.

Por exemplo, se você quiser duas imagens lado a lado e mais duas abaixo delas, poderá definir Columns como 2.

Change column number to display images side by side

Você também pode cortar imagens para que fiquem alinhadas, ajustar o tamanho das imagens, vinculá-las a páginas diferentes e alterar a cor do plano de fundo no painel de blocos.

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

Quando terminar, não se esqueça de clicar no botão “Update” (Atualizar) ou “Publish” (Publicar) para armazenar suas alterações.

Agora, basta acessar seu site para visualizar as imagens lado a lado.

Images side by side preview

Método 2: Colocar imagens lado a lado no WordPress usando um plug-in (maneira fácil)

Se você estiver usando o antigo editor clássico do WordPress ou se quiser criar galerias mais complexas do que o bloco Gallery padrão, esse método é para você.

Recomendamos o uso do Envira Gallery porque é o melhor plugin de galeria do WordPress.

Observação: o Envira Gallery também tem uma versão gratuita que você pode usar. No entanto, usaremos o plano Pro para este tutorial.

Primeiro, você precisará instalar e ativar o plug-in Envira Gallery. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá até a página Envira Gallery ” Add New (Adicionar novo ) no painel do WordPress.

Quando estiver lá, você terá que dar um título à sua nova galeria. Chamamos a nossa de “Example Gallery”.

Give your new gallery a name

Depois disso, carregue as imagens que deseja usar do computador clicando no botão “Select Files From Your Computer” (Selecionar arquivos do computador).

Para carregar imagens da biblioteca de mídia, clique no botão “Select Files from Other Sources” (Selecionar arquivos de outras fontes).

Depois de carregar as imagens, role para baixo até a seção Gallery (Galeria) para visualizá-las.

A partir daqui, você pode dar às suas imagens um título e um texto alternativo. O título aparece abaixo da imagem quando o usuário passa o cursor do mouse sobre ela.

Images uploaded to Envira Gallery

O título também aparece abaixo da imagem no modo pop-up da lightbox, que veremos em breve.

Para editar o título e o texto alternativo, clique no botão “Editar” em uma imagem da galeria.

Click the Edit button to edit an image in your gallery

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

Se o título descreve a imagem, você pode simplesmente repeti-lo no texto alternativo.

Setting the title and the alt text for the image

Quando terminar, certifique-se de clicar no botão “Save Metadata” (Salvar metadados) antes de fechar a janela.

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

Click the Save Metadata button to save your changes

Por fim, role de volta para a parte superior da página e clique no botão “Publish” (Publicar) para salvar a galeria de imagens que você acabou de criar.

Depois disso, vá até a página ou postagem do WordPress onde você deseja adicioná-lo.

Click the Publish button to publish your gallery, so you can use it on your site

Quando estiver lá, clique no botão “Add Block” (+) no canto superior esquerdo da tela para abrir o menu de bloqueio.

A partir daí, localize e adicione o bloco da Envira Gallery à página/post.

Add Envira Gallery block

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

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

A partir daí, role para baixo até a seção “Select Layout” (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.

Change columns number from the Select Layout dropdown menu

Você também pode alterar as margens da galeria, ativar o isótopo e definir as configurações da lightbox no painel de blocos.

Quando terminar, não se esqueça de clicar no botão “Publish” (Publicar) ou “Update” (Atualizar) para armazenar suas configurações.

Agora, você pode acessar seu site para visualizar as imagens exibidas lado a lado.

Images side by side in WordPress

O usuário agora pode clicar em qualquer imagem para ver a versão em tamanho real em uma caixa de luz.

Além disso, eles também podem percorrer as imagens usando a caixa de luz.

Viewing an image from the Envira gallery in a lightbox

Se quiser adicionar mais imagens à sua galeria, você poderá voltar a ela visitando a página Envira Gallery ” All Galleries no painel do WordPress.

Quando estiver lá, basta clicar no nome da sua galeria para editá-la.

Editing a gallery you've already created in Envira Gallery

Todas as alterações feitas em sua galeria aparecerão onde quer que você a tenha colocado em suas postagens, páginas ou barras laterais. Não é necessário adicioná-la a esses locais novamente.

Dica: Se você estiver usando o editor clássico em vez do editor de blocos, ainda poderá usar o Envira Gallery.

Você verá um botão “Add Gallery” acima do editor clássico que pode ser usado para adicionar uma galeria existente à sua postagem.

Quando terminar, não se esqueça de clicar no botão “Publish” (Publicar) ou “Update” (Atualizar) para armazenar suas configurações.

Adding an Envira gallery in the classic editor

Bônus: Alinhar imagens no WordPress

Quando você adiciona duas imagens lado a lado, elas devem se alinhar para criar uma aparência coesa e visualmente atraente.

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

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

Isso abrirá algumas opções nas quais você poderá deslocar a imagem para a direita ou para a esquerda, torná-la da mesma largura que o contêiner ou usar a opção de largura total para que a largura da imagem seja igual à do restante da página.

Use alignment settings to resize an image

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

Depois de fazer isso, você poderá adicionar um bloco de imagens que se alinhe perfeitamente ao seu conteúdo.

Add Block using column

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

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

Esperamos que este tutorial tenha ajudado você a aprender como colocar imagens lado a lado no WordPress. Talvez você também queira ler nosso guia sobre como alterar a altura e a largura do bloco no WordPress e nossa lista abrangente dos plug-ins obrigatórios do WordPress (escolha de especialistas) para ajudar a expandir seus negócios.

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

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

13 ComentáriosDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    These Gutenberg tutorials are seriously great. For someone like me who learned how to make websites in Elementor, these articles are priceless. I don’t have to scramble to find a way to do such a simple thing in Gutenberg because you have tutorials for it.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrador

  3. Kurt

    I’ve used HTML tables in the past. I’ll try this feature the next time I need to use more than one image in the same location.

    • WPBeginner Support

      We hope our recommendation makes the process easier for you :)

      Administrador

  4. Diana

    Is there a way to have “nested” galleries? Would this be an “album”? And would Envira accomplish this? Example: I need to build an artist’s website, with a dedicated page for images. I need to have a “cover” image for separate bodies of artwork (painting, sculpture, outdoor sculptures, ceramic vessels, etc.). So that when you click on it, it opens another gallery of works within a given category (paintings, small sculptures. large sculptures, etc.) And I’d like to be open those images in a slideshow format. Is there an easy way to do this? Most of the templates only allow for single image galleries (i.e. what you see is what you get, only larger, when you click on it). The only other workaround would be to link the cover image to a hidden pager each category?

    It’s frustrating to know what I want, but not how to DO IT…

    • WPBeginner Support

      For what it sounds like you’re wanting, you would want to take a look at Envira’s albums and that should be what you are looking for.

      Administrador

  5. Michael Jakubowski

    This looks very promising and I’ll use it in near future. I would have tried to load a 2 column table and then import pictures into it but this looks great!
    Thanks.

    • WPBeginner Support

      You’re welcome :)

      Administrador

  6. MR MICHAEL F TULK

    Always good to get a suggestion. All that is on my blog already but it takes a kick up the pants to get me to utilise things. Thanks.

    • WPBeginner Support

      Glad our guide could be helpful :)

      Administrador

  7. Daniel

    This article help me out because I wondering if side by side to give my blog post a different look I’ll definitely using it the blog post. For sure thanks

    • WPBeginner Support

      Glad our article was helpful :)

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.