Como Tornar uma Galeria do WordPress Responsiva (2 Métodos) 

Quando adicionei uma galeria ao meu site WordPress pela primeira vez, ela parecia boa no desktop, mas era uma bagunça completa no celular. Foi quando aprendi o quão importante é tornar minha galeria do WordPress responsiva.

Neste guia, mostrarei os dois métodos mais simples que uso para criar galerias compatíveis com dispositivos móveis que se ajustam automaticamente a qualquer tamanho de tela sem diminuir a velocidade do seu site.

Seja para fotos de produtos, imagens de portfólio ou visuais de blog, estas etapas lhe darão uma galeria que fica ótima em todos os lugares e também ajuda seu SEO.

Por que Tornar uma Galeria do WordPress Responsiva?

Atualmente, quase 60% de todo o acesso à internet é feito por smartphone. Portanto, ao adicionar novos recursos e funcionalidades ao seu site, você precisará garantir que ele funcione corretamente em dispositivos móveis.

Seja um tablet, smartphone, laptop ou desktop, seu novo layout de galeria de fotos precisa ser flexível o suficiente para se adaptar a cada tamanho de tela. Dessa forma, seus visitantes terão uma melhor experiência de usuário.

Mais importante ainda, um design responsivo é crucial para otimização de mecanismos de busca (SEO).

Mecanismos de busca como o Google consideram a usabilidade móvel um fator ao classificar seu site nos resultados de pesquisa. Adicionar imagens de galeria responsivas ao seu site pode ajudá-lo a obter melhores classificações e, por sua vez, gerar mais tráfego orgânico para sua pequena empresa.

No final, aprender como tornar uma galeria do WordPress responsiva pode ajudar muito no crescimento do seu negócio. Com isso em mente, aqui estão 2 métodos fáceis que você pode seguir.

O WordPress Torna as Imagens da Galeria Responsivas Automaticamente?

Sim. O WordPress gera automaticamente vários tamanhos de imagem e adiciona atributos srcset e sizes a cada imagem da galeria que você carrega, tornando-as responsivas por padrão.

A maioria dos temas modernos lida com isso nativamente. Mas galerias baseadas em plugins oferecem controle de layout, personalização de colunas e configurações de exibição específicas para dispositivos móveis que o bloco de galeria padrão não possui.

Qual é a Maneira Mais Fácil de Tornar uma Galeria do WordPress Amigável para Celulares?

Abaixo, você encontrará 2 maneiras de adicionar uma galeria de imagens responsiva ao seu site WordPress. Primeiro, usaremos o SeedProd, um construtor de sites "arrasta e solta" com ferramentas de galeria integradas. Segundo, usaremos um dos melhores plugins de galeria de imagens responsivas para WordPress do mercado.

Clique em qualquer um dos métodos abaixo para ver as etapas de como adicionar uma nova galeria.

Método 1. Use o Bloco de Galeria Avançada SeedProd para WordPress

Para a primeira solução, usaremos o SeedProd, o melhor construtor de sites do WordPress. Com seu construtor "arrasta e solta", modelos responsivos e blocos personalizáveis do WordPress, é de longe a maneira mais fácil de personalizar seu site sem código HTML, PHP ou CSS personalizado.

Você pode usar os Blocos do WordPress do SeedProd para adicionar galerias ao seu tema WordPress, páginas e áreas prontas para widgets. É tão simples quanto arrastar, soltar e clicar para criar galerias que funcionam com qualquer tamanho de tela.

Os recursos fáceis de usar do SeedProd incluem:

• Construtor de Temas WordPress
• Kits de Sites Pré-fabricados
• Construtor de Landing Pages
• Modelos de página de destino responsivos
• 4 modos de página: Em Breve, Manutenção, 404 e Login
• Integrações de marketing por e-mail
• Gerenciamento de assinantes
• Suporte WooCommerce
• Controles de acesso
• Texto dinâmico
• Mapeamento de domínio
• E mais.

Siga as etapas abaixo para criar galerias WordPress responsivas com o SeedProd.

Passo 1. Instale e Ative o SeedProd

Primeiro, acesse o site do SeedProd e baixe o plugin. Sugerimos obter a versão Pro do SeedProd para seguir este tutorial, pois ela oferece os melhores recursos com preços competitivos.

Em seguida, faça login na sua conta SeedProd e clique na guia Downloads para baixar o arquivo do plugin para o seu computador. Você também pode copiar sua chave de licença ao mesmo tempo, que precisará em breve.

Agora, carregue e ative o plugin no seu site WordPress. Se precisar de ajuda com esta etapa, você pode seguir este guia sobre como instalar um plugin do WordPress (abre em uma nova aba).

Após instalar e ativar o SeedProd, navegue até SeedProd » Configurações no seu painel do WordPress e cole a chave de licença que você copiou anteriormente. Certifique-se de clicar no botão Verificar Chave e, em seguida, passe para a próxima etapa.

Passo 2. Crie um Tema WordPress ou Página de Destino

Como este plugin oferece 2 maneiras de usar seu construtor "arrasta e solta", a próxima etapa é criar um tema WordPress ou uma página de destino.

O Theme Builder é a maneira mais fácil de criar um tema WordPress personalizado sem contratar um desenvolvedor. Ele substitui seu tema atual por modelos totalmente personalizáveis para cada parte do seu site.

Alternativamente, o construtor de páginas de destino é uma ótima maneira de criar páginas individuais visualmente sem alterar seu tema WordPress.

Você pode seguir estes tutoriais passo a passo sobre como criar um tema WordPress e como criar uma landing page com o SeedProd. Em seguida, após escolher um modelo e criar suas páginas iniciais, você pode seguir o passo 3 deste guia para adicionar uma galeria responsiva ao seu site.

Observação: Para este guia, estamos usando o método Theme Builder.

Etapa 3. Adicione o Bloco de Galeria Avançada do WordPress

Para esta etapa, abra qualquer página com o SeedProd para personalizá-la com o construtor de arrastar e soltar. Por exemplo, você pode abrir o modelo da Página Inicial no painel do Theme Builder para adicionar galerias responsivas à sua página inicial.

Se você estiver criando uma landing page, vá para SeedProd » Landing Pages e clique em Editar no design escolhido.

Ao abrir seu design, você verá um layout semelhante ao abaixo:

À esquerda estão os blocos e seções para adicionar conteúdo ao seu design, e à direita está uma pré-visualização ao vivo. Clicar em qualquer elemento na sua pré-visualização abrirá suas configurações à esquerda, e quaisquer alterações que você fizer acontecerão automaticamente em tempo real.

Alguns dos blocos que você pode usar incluem:

• Botões de compartilhamento social
• Ícones de perfis de mídia social
• Bloco de vídeo (Link para um vídeo do YouTube ou Vimeo)
• Carrossel de depoimentos
• Formulários de contato
• E mais

Para este guia, usaremos o bloco Galeria Avançada.

Criando uma única galeria WordPress responsiva

Vamos supor que você queira adicionar uma única galeria responsiva para exibir os melhores exemplos do seu portfólio. Para fazer isso, escolha o bloco Galeria Avançada no painel esquerdo e arraste-o para o design da sua página.

A partir daí, você pode abrir as opções da galeria e ajustar as configurações até que sua galeria fique exatamente como você deseja. Você pode alterar o número de colunas e o espaçamento ou vincular sua galeria ao arquivo de imagem, a um link personalizado ou a nenhum.

Por exemplo, a opção Arquivo de Mídia exibirá sua galeria em um lightbox de imagem em tamanho real e responsivo quando os visitantes clicarem nela.

Você também pode alterar a proporção das miniaturas das suas imagens e definir o tamanho da imagem como miniatura, médio ou grande.

Quer adicionar algumas informações a cada imagem da galeria? Então clique na aba Overlay, onde você pode adicionar uma cor de sobreposição de fundo, efeito de hover, títulos e descrições a cada imagem.

Sempre que um visitante do site passar o mouse sobre uma imagem, ela escurecerá e mostrará uma descrição de sua escolha.

Criando múltiplas galerias dinâmicas do WordPress

Você também pode usar o bloco Galeria Avançada em qualquer outra página do seu site. Por exemplo, você pode criar uma página de portfólio e adicionar várias galerias de imagens que os usuários podem filtrar por parâmetros específicos.

Para fazer isso, clique no menu suspenso Tipo e escolha a opção Múltiplo. Em seguida, você pode começar a adicionar quantas galerias quiser.

Se precisar de mais opções de personalização, você pode clicar na aba Avançado. A partir daí, você pode alterar as cores das abas de filtro, tipografia, sombras, bordas de imagem e muito mais.

Tornando sua galeria WordPress responsiva

Qualquer galeria que você criar com o SeedProd é responsiva por padrão. No entanto, você pode verificar a compatibilidade com dispositivos móveis de suas galerias com a opção de visualização móvel.

Clique no ícone de visualização móvel na barra de ferramentas inferior e você verá como sua galeria fica em dispositivos móveis.

Você pode então editar seu design para que ele fique ótimo em qualquer dispositivo.

Na aba Visibilidade do Dispositivo, você também pode ocultar elementos específicos no celular ou desktop para melhorar a experiência móvel.

Quando estiver satisfeito com sua galeria de imagens, clique no botão Salvar no canto superior direito da página.

Etapa 4. Publique sua Galeria de Imagens Responsiva

Agora você está pronto para publicar sua galeria. Para fazer isso, volte ao painel do Theme Builder e ative a opção "Ativar Tema SeedProd" para a posição "Sim".

Alternativamente, para páginas de destino, clique na seta suspensa no botão Salvar e clique em Publicar.

Agora você pode visualizar sua galeria responsiva para ver como ela fica.

Método 2. Use o Plugin Envira Gallery para WordPress

Usaremos o Envira Gallery para criar uma galeria responsiva do WordPress para o próximo método. Ao contrário de outros plugins de galeria do WordPress, o Envira Gallery é rápido, responsivo e leve, mas ainda oferece recursos extensos e fáceis de usar.

Por exemplo, ele oferece opções de redimensionamento de imagem, slideshows, layouts flexíveis e múltiplas fontes de imagem.

Primeiro, instale e ative o plugin Envira Gallery em seu site WordPress. Em seguida, vá para Envira Gallery » Adicionar Nova para criar uma nova galeria de imagens.

Para adicionar imagens à sua galeria, clique em um dos botões mostrados abaixo:

A primeira opção permite que você carregue arquivos de imagem do seu computador, enquanto o segundo botão permite que você escolha imagens da sua biblioteca de mídia do WordPress.

Após escolher suas imagens, você pode reordená-las com arrastar e soltar. Você também pode clicar no ícone do olho para colocar imagens específicas em modo de rascunho e ocultá-las de sua galeria publicada.

Além disso, clicar no ícone de lápis permite editar os metadados de sua imagem. Por exemplo, você pode alterar o título da imagem, texto alternativo e legenda, e editar o URL de origem da página de anexo.

Em seguida, clique na aba Configuração onde você pode:

• Alterar o número de colunas da galeria
• Ativar o carregamento preguiçoso de imagens
• Mostrar descrições da galeria
• Exibir legendas e títulos
• Definir o tamanho em pixels, a posição de corte da imagem e o espaçamento
• Alterar os modelos de galeria

Na aba Lightbox, você pode ativar um lightbox responsivo quando os usuários clicam em uma imagem. Ele também permite ajustar as configurações para alterar seu tema de lightbox, exibir legendas, adicionar efeitos de transição e muito mais.

Além das configurações acima, o Envira Gallery tem uma aba de configurações de galeria móvel. Este painel permite que você gere automaticamente imagens específicas para dispositivos móveis.

Você pode definir dimensões personalizadas de imagem para celular e alturas de linha, e até mesmo ajustar as configurações de lightbox para celular.

Quando estiver satisfeito com o design da sua galeria, clique no botão Publicar no canto superior direito.

Para adicionar sua galeria otimizada para dispositivos móveis ao seu site, crie ou edite uma postagem ou página, em seguida, clique no ícone de adição (+) dentro do editor de blocos do WordPress para adicionar um novo bloco.

Pesquise até ver o bloco Envira Gallery e, em seguida, clique nele para adicioná-lo à sua página.

No menu suspenso, selecione a galeria que você acabou de criar para incorporá-la no editor do WordPress.

Agora você pode clicar no botão Atualizar ou Publicar para tornar sua galeria ativa em seu site.

Observação: Se você ainda estiver usando o editor clássico do WordPress, poderá copiar seu shortcode da Envira Gallery e colá-lo em uma postagem ou página.

Em seguida, visualize sua página e veja como sua nova galeria responsiva do WordPress fica.

Como Tornar uma Galeria de Produtos WooCommerce Responsiva

Se você administra uma loja WooCommerce, suas galerias de imagens de produtos também precisam ter uma ótima aparência em dispositivos móveis. Os blocos WooCommerce integrados do SeedProd tornam as galerias de imagens de produtos responsivas por padrão, portanto, não é necessário um plugin de galeria separado.

Ao criar suas páginas de produtos WooCommerce com o SeedProd, as imagens são dimensionadas automaticamente para se ajustarem a qualquer tamanho de tela. Você pode personalizar layouts de colunas e tamanhos de imagem diretamente no editor de arrastar e soltar.

Para um guia passo a passo, consulte nosso guia sobre como criar uma galeria de imagens de produtos no WooCommerce.

Perguntas Frequentes sobre Responsividade de Galerias WordPress

Como tornar uma imagem responsiva no WordPress?

O WordPress adiciona automaticamente os atributos srcset e sizes às imagens, o que informa ao navegador qual tamanho de imagem carregar com base na largura da tela. Para a maioria dos sites, isso funciona sem problemas se você estiver usando um tema moderno. Se as imagens estiverem transbordando de seu contêiner, adicionar max-width: 100%; height: auto; ao seu CSS o corrigirá.

Por que minha galeria não está clicável no WordPress?

A maioria dos plugins de galeria tem comportamento de link padrão desativado, o que significa que as imagens não abrirão quando clicadas. No SeedProd, vá para as configurações do seu bloco de galeria e altere a opção Link Para para Arquivo de Mídia ou URL Personalizada. Na Envira Gallery, ative a lightbox na guia Lightbox para tornar as imagens clicáveis.

Posso tornar a galeria padrão do WordPress responsiva sem um plugin?

Sim. O bloco de galeria nativo do WordPress já gera imagens responsivas usando srcset, e a maioria dos temas modernos lida com o dimensionamento automaticamente. Se as imagens ainda estiverem com problemas em dispositivos móveis, adicionar max-width: 100%; height: auto; como CSS personalizado geralmente o corrige sem a necessidade de um plugin.

Uma galeria responsiva deixará meu site lento?

Não se você ativar o carregamento lento (lazy loading) em seu plugin de galeria. Na Envira Gallery, ative o carregamento lento na guia Configuração. As galerias SeedProd também suportam carregamento lento por padrão. Manter as imagens abaixo de 200KB e usar o formato WebP reduzirá ainda mais os tempos de carregamento.

Ao tornar sua galeria do WordPress responsiva, suas fotos ficam ótimas em todos os dispositivos e o SEO do seu site melhora ao mesmo tempo. Ambos os métodos neste guia oferecem um design pronto para dispositivos móveis em minutos.

Comece a usar o SeedProd e tenha sua galeria responsiva ativa hoje mesmo.

Você também pode gostar dos seguintes tutoriais do WordPress enquanto estiver aqui:

• Como Adicionar uma Galeria a Páginas e Posts do WordPress
• Landing Page vs. Microsite: Qual é o Melhor para Sua Marca
• Como Personalizar Trechos de Posts do WordPress (Sem Código)
• Como Adicionar um Botão de Tweet ao WordPress (3 Maneiras)

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.