Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

Como adicionar uma galeria a páginas e posts do WordPress: 3 maneiras

Como adicionar uma galeria a páginas e posts do WordPress: 3 maneiras 

Escrito por: avatar do autor Stacey Corrin
avatar do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: reviewer avatar Turner John
reviewer avatar Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

Você já se perguntou como adicionar uma galeria a páginas e postagens do WordPress?

As galerias de imagens exibem suas fotos, trabalhos artísticos e outros conteúdos visuais para seu público. Elas também separam seções com muito texto, mantêm os visitantes envolvidos e dão um toque especial ao seu site.

Neste guia, compartilharei três métodos populares para adicionar galerias ao seu site WordPress com dicas para otimizá-las para obter a melhor experiência do usuário.

Como mencionei acima, as galerias de imagens tornam seu site WordPress mais atraente para os visitantes. Elas transmitem emoções e mensagens mais facilmente do que o texto, o que é ideal para contar sua história e destacar seu trabalho.

Entretanto, fazer isso com o bloco de imagens padrão do WordPress nem sempre é fácil. Com ele, você só pode adicionar uma imagem de cada vez.

Galeria usando o bloco de imagens do WordPress

Como as imagens aparecem uma após a outra, os usuários precisam rolar a tela para visualizá-las. Isso não é apenas frustrante para os usuários, mas também não tem uma aparência profissional.

Com uma galeria de imagens, você resolve esse problema exibindo fotos e gráficos em uma grade atraente. Isso economiza espaço em sua página e tem uma aparência muito mais profissional. Muitas vezes, os usuários podem clicar em uma imagem da galeria e visualizá-la em tela cheia para vê-la mais de perto.

Opções para adicionar galerias ao WordPress

Há várias maneiras de adicionar uma galeria a páginas e posts do WordPress. A mais simples é usar o bloco Gallery incorporado no WordPress.

É uma boa solução para um iniciante porque é fácil de usar. Entretanto, você tem pouco controle sobre a aparência, além do tamanho da imagem e das legendas. Portanto, eu não o recomendaria para sites que precisam de mais opções de personalização.

Você também pode usar os plug-ins de galeria de imagens do WordPress. Eles vêm com muito mais opções de personalização e recursos avançados. Por exemplo, os plug-ins de galeria mais populares oferecem:

  • Popups de lightbox
  • Layouts exclusivos
  • Animações e efeitos de foco
  • Proteção de imagens (marca d'água)
  • E mais.

Como alternativa, muitos construtores de páginas do WordPress têm módulos exclusivos de galeria de imagens. Eles facilitam a adição de galerias às suas páginas de destino sem a necessidade de instalar plug-ins adicionais.

Não se preocupe se ainda não puder escolher. Abordarei as três opções no tutorial abaixo para que você possa encontrar a que melhor atenda às suas necessidades.

Vou começar com meu método favorito, adicionando uma galeria ao WordPress usando um construtor de páginas.

Quando estiver criando uma página de galeria de alta conversão, como um portfólio, você quer ferramentas que facilitem a geração de leads e conversões.

Você poderia criar uma página de destino no editor do WordPress e usar o bloco Gallery. No entanto, ela provavelmente não terá os outros recursos de que você precisa, como:

  • Temporizadores de contagem regressiva
  • Depoimentos
  • Formulários de opt-in
  • Tabelas de preços
  • Classificação por estrelas

Nesse caso, faz mais sentido usar um construtor de páginas do WordPress com tudo o que você precisa em um único plug-in do WordPress.

Construtor de sites WordPress SeedProd Drag and Drop

Minha principal opção é o SeedProd, um dos melhores construtores de páginas do WordPress do tipo arrastar e soltar. Com ele, você pode criar páginas de destino que convertem e exibem seu trabalho com o bloco de galeria avançado.

Primeiro, você precisará instalar e ativar o plug-in SeedProd em seu site WordPress. Se precisar de ajuda com isso, consulte nosso guia sobre como instalar o SeedProd Pro.

Depois de ativar o plug-in, vá para SeedProd " Landing Pages no painel do WordPress e clique no botão "Add New Landing Page" (Adicionar nova página de destino).

adicionar nova página de destino SeedProd

Agora, navegue pelos modelos de página de destino para encontrar um design pré-fabricado que atenda às suas necessidades. Você também pode começar do zero com um modelo de página em branco.

Escolha um modelo de página de destino no SeedProd

Basta passar o mouse sobre um modelo e clicar no ícone de marca de seleção para iniciá-lo no construtor de arrastar e soltar do SeedProd. Em seguida, você pode personalizar a página visualmente para torná-la sua.

Para obter etapas mais detalhadas, consulte meu guia passo a passo sobre como criar uma página de destino no WordPress.

Observação: Com o SeedProd, você só pode adicionar galerias a páginas do WordPress, não a posts.

Depois de configurar sua página de destino, você desejará personalizá-la com uma galeria de fotos do WordPress. Há três maneiras de fazer isso no SeedProd:

  • Bloco Gallery: Uma galeria simples de várias colunas.
  • Bloco de galeria avançado: Uma galeria única ou múltipla com filtros, sobreposições e descrições de texto.
  • Bloco de carrossel de imagens: Uma galeria de imagens deslizante de coluna única com opções de reprodução automática.

Para adicionar o bloco Gallery, localize-o na barra lateral de blocos à esquerda e arraste-o para o lugar em sua página.

como adicionar uma galeria ao WordPress com o seedprod

Em seguida, clique na opção "Add Gallery Images" (Adicionar imagens da galeria) nas configurações do bloco.

Adicionar imagens da galeria nas configurações do bloco da galeria

Agora, você pode carregar novas imagens do seu computador ou selecionar imagens da sua biblioteca de mídia do WordPress. Selecione todas as imagens que deseja adicionar à sua galeria e clique em "Create Gallery".

Criar galeria no WordPress

Em seguida, você pode dar uma legenda a cada imagem e clicar no botão "insert Gallery" (inserir galeria).

Agora você verá a galeria em sua página de destino. A partir daí, clique na guia "Settings" (Configurações) nas opções de bloco para ajustar as colunas da galeria, o link, o tamanho da imagem e a ordem.

Configurações do bloco da galeria SeedProd

O bloco Advanced Gallery funciona de forma semelhante. Entretanto, em vez de uma única galeria, você pode adicionar várias galerias e exibir filtros para que os usuários escolham facilmente o que desejam ver.

Como antes, localize o bloco Advanced Gallery na barra lateral esquerda e arraste-o para sua página.

Bloco de galeria avançado SeedProd

Desta vez, há um menu suspenso para escolher "único" ou "múltiplo". Selecionarei múltiplo para mostrar como funciona.

Tipo de galeria avançada SeedProd

Como você pode ver, ao escolher isso, você terá uma opção de "guia". Essa é sua primeira galeria.

Clique na guia para expandi-la e ver as configurações da galeria.

Adicionar várias galerias ao WordPress com o SeedProd

Aqui, clique na opção "Add Gallery Images" (Adicionar imagens da galeria) e siga as etapas como antes para adicionar mídia e inserir suas fotos.

Agora, clique no botão "Add Galleries" para adicionar outra galeria de imagens.

Adicionar outra galeria

Na visualização da galeria, você verá vários títulos. No meu exemplo, eles são "Todos", "Carros vermelhos" e "Carros pretos".

Filtros de galeria do WordPress

Isso significa que os usuários podem visualizar todas as imagens de uma só vez ou uma galeria de cada vez.

Nesse bloco, há uma configuração extra chamada "Overlay". Expanda-a e você poderá ativar o efeito de sobreposição. Esse efeito permite que você adicione uma sobreposição de cores às miniaturas de imagens da galeria que são exibidas quando você passa o mouse sobre elas.

Opções de sobreposição de galeria do WordPress

Você também pode exibir a legenda, o título ou a descrição da imagem para dar mais contexto aos visitantes.

Se você quiser que suas imagens ocupem menos espaço na página, use o bloco Image Carousel.

Bloco de carrossel de imagens SeedProd

Nas configurações do bloco, você pode carregar imagens individualmente, mas, em vez de uma grade, elas aparecerão como uma apresentação de slides com paginação.

Configurações do carrossel de imagens do WordPress

Os usuários podem clicar manualmente para deslizar por cada imagem ou você pode definir o carrossel para reprodução automática na área de configurações.

Configurações de reprodução automática do carrossel

Escolha o método que funciona melhor para você. E não se esqueça de clicar em "Save" (Salvar) e "Publish" (Publicar) para que as alterações sejam aplicadas em seu site.

Agora, vou orientá-lo em uma alternativa: um plug-in de galeria do WordPress. Esse método é ideal se você quiser galerias de imagens com muitos recursos para adicionar a páginas e posts.

Para isso, recomendo o Envira Gallery, um dos melhores plug-ins de galeria de fotos para WordPress.

Plug-in do WordPress Envira Gallery

Sua funcionalidade de arrastar e soltar o torna fácil de usar e tem todos os recursos necessários para criar um layout de galeria responsivo e fácil de usar.

Primeiro, você precisará instalar e ativar o plug-in Envira Gallery. Estou usando a versão gratuita para este exemplo, mas a versão Pro desbloqueia muitos outros complementos, como marca d'água, proteção por senha, ícones de mídia social, galerias WooCommerce para sites de comércio eletrônico e muito mais.

Para obter ajuda, consulte este guia prático sobre como instalar um plug-in do WordPress.

Após a ativação, crie uma nova página ou edite uma já existente. Em seguida, clique no ícone de adição para adicionar um novo bloco do WordPress, procure por "Envira" e clique para adicioná-lo à sua página.

Bloco da Galeria Envira

Em seguida, clique no botão "Media Library" (Biblioteca de mídia) para escolher imagens da sua biblioteca para adicionar à galeria.

Para editar sua galeria, clique na opção "Edit Gallery" (Editar galeria) na barra de ferramentas ou na barra lateral direita.

Editar a galeria Envira

Isso abre uma nova guia com várias opções de personalização.

Configurações da Galeria Envira

Por exemplo, na guia "Config", você pode definir o número de colunas, ativar ou desativar o carregamento lento, definir a altura e as margens automáticas da linha e escolher o tamanho e as dimensões da imagem.

Configurações do Envira Gallery Config

Você também pode clicar na guia "Lightbox" para ativar um efeito de lightbox da galeria que abre suas imagens em tamanho real quando os usuários clicam nelas.

Configurações do Envira Gallery Lightbox

Quando estiver satisfeito com suas configurações, clique em "Update" (Atualizar) no canto superior direito e, em seguida, retorne à sua página. A partir daí, salve e publique sua página para exibir a galeria ao vivo em seu site.

Você também pode usar esse método para adicionar uma galeria às postagens do WordPress.

Exemplo de galeria Envira em postagem do WordPress

Se você prefere um site com o mínimo de plug-ins do WordPress ou precisa de algo simples, sem os sinos e assobios, o bloco Gallery integrado do WordPress é uma opção sólida.

Para usá-lo, edite ou crie uma nova página ou postagem, clique no ícone de adição para adicionar um bloco no editor de blocos (Gutenberg) e procure o bloco Galeria.

Bloco de galeria do WordPress

Em seguida, carregue suas imagens ou escolha-as na biblioteca de mídia do WordPress e clique no botão "Create New Gallery" (Criar nova galeria).

Criar nova galeria

Em seguida, adicione legendas ou reorganize sua galeria e selecione o botão "Insert Gallery" (Inserir galeria).

Inserir galeria

Quando estiver em seu post ou página, você poderá personalizar a galeria escolhendo as opções na barra lateral direita.

Configurações da galeria do WordPress

Por exemplo, você pode definir o número de colunas e a resolução, vincular o arquivo de mídia ou a página de anexo e cortar as imagens para ajustá-las.

Alternar para as configurações de "Styles" permite que você defina uma cor de fundo personalizada e ajuste o espaçamento entre as imagens.

Configurações de estilo de galeria do WordPress

Quando estiver satisfeito com as alterações, clique em atualizar ou publicar para ativá-las.

Como otimizar suas imagens para a Web

Tenho certeza de que você vai querer começar a trabalhar com suas galerias. Mas antes de fazer isso, você deve saber como otimizá-las.

De acordo com a Microsoft, nossa capacidade de atenção passou de uma média de 12 segundos para 8 segundos. Portanto, se suas imagens demorarem mais de 8 segundos ou menos para carregar, os leitores ficarão impacientes e irão embora.

A otimização das imagens em sua galeria reduz o tamanho dos arquivos sem reduzir sua qualidade. Como resultado, elas serão carregadas mais rapidamente, o que é excelente para a experiência do usuário.

Mas como você otimiza as imagens para a Web? Aqui estão algumas táticas fáceis de otimização de imagens que você pode experimentar:

  • Redimensionar imagens: Certifique-se de que suas imagens tenham o tamanho certo para o layout do seu site. Use um software de edição de imagens como o Photoshop ou uma ferramenta on-line gratuita para alterar as dimensões da imagem.
  • Comprimir imagens: Use ferramentas de compactação de imagens, como TinyPNG ou TinyJPEG, para reduzir o tamanho dos arquivos. 
  • Escolha o formato correto: Os formatos de imagem mais comuns para a Web são JPEG e PNG. O JPEG é melhor para fotografias, enquanto o PNG é melhor para gráficos com linhas e textos nítidos.
  • Use o Lazy Loading: O carregamento lento atrasa o carregamento de imagens até que elas estejam prestes a ficar visíveis na tela, o que pode melhorar o tempo de carregamento da página.

A otimização para mecanismos de pesquisa (SEO) é tão importante quanto o tamanho da imagem. Dê às suas imagens descrições detalhadas e nomes de arquivos para ajudar os mecanismos de pesquisa como o Google a entender o que elas são.

Além de ajudar as imagens a aparecerem nos resultados de pesquisa, boas descrições de texto alternativo ajudam os usuários com leitores de tela a entender o contexto das imagens. Isso torna seu site mais acessível para pessoas com deficiências visuais.

Otimize o texto alternativo e o título da imagem do WordPress

A biblioteca de mídia do WordPress permite que você edite facilmente o nome do arquivo, a descrição/capítulo e o texto alternativo das imagens. Selecione uma imagem e você poderá digitar as informações no lado direito.

Espero que os métodos deste guia tenham ajudado você a aprender como adicionar uma galeria ao WordPress. Escolha um que funcione para você e, em seguida, dê vida ao seu site com conteúdo visual atraente.

Você também pode gostar dos seguintes tutoriais do WordPress sobre o uso de imagens:

Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.

Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.