Como tornar uma galeria do WordPress responsiva (2 métodos) 

Deseja tornar uma galeria do WordPress responsiva em seu site?

Se você já usou a galeria padrão do WordPress, perceberá que ela carece de vários recursos importantes. Entretanto, muitos plugins responsivos de galeria do WordPress são difíceis de usar e podem afetar a velocidade e o tempo de carregamento do seu site.

É por isso que este artigo mostrará a você como tornar uma galeria do WordPress responsiva sem afetar o desempenho do seu site WordPress.

Como tornar a galeria do WordPress responsiva: 2 métodos fáceis

A seguir, você encontrará duas maneiras de adicionar uma galeria de imagens responsiva ao seu site WordPress. Primeiro, usaremos um poderoso construtor de páginas do WordPress com amplos recursos para aprimorar seu design da Web. Em segundo lugar, usaremos um dos melhores plug-ins de galeria de imagens responsivas para WordPress do mercado.

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

Método 1. Usar o bloco WordPress SeedProd Advanced Gallery

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

Você pode usar os Blocos do WordPress do SeedProd para adicionar galerias ao seu tema, páginas e áreas prontas para widgets do WordPress. É 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:

• Criador de temas para WordPress
• Kits de sites pré-fabricados
• Construtor de páginas de destino
• 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 ao WooCommerce
• Controles de acesso
• Texto dinâmico
• Mapeamento de domínio
• E mais.

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

Etapa 1. Instalar e ativar o SeedProd

Primeiro, acesse o site da site do SeedProd e faça o download do plug-in. Sugerimos que você obtenha 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 Downloadspara fazer o download do arquivo do plug-in para o seu computador. Você também pode copiar sua chave de licença ao mesmo tempo, o que será necessário em breve.

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

Depois de instalar e ativar o SeedProd, navegue até SeedProd " Settings (Configurações ) no administrador do WordPress e cole a chave de licença que você copiou anteriormente. Certifique-se de clicar no botão Verify Key (Verificar chave ) e, em seguida, passe para a próxima etapa.

Etapa 2. Criar um tema WordPress ou uma página de destino

Como esse plug-in oferece duas maneiras de usar seu construtor de arrastar e soltar, a próxima etapa é criar um tema do 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.

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

Você pode seguir estes tutoriais passo a passo sobre como criar um tema do WordPress e criar uma página de destino com o SeedProd. Em seguida, após escolher um modelo e criar suas páginas iniciais, você pode seguir as instruções na etapa 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. Adicionar o bloco WordPress Advanced Gallery

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

Se estiver criando uma página de destino, vá para SeedProd " Landing Pages e clique em Edit (Editar ) no design escolhido.

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

À esquerda, há blocos e seções para adicionar conteúdo ao seu design e, à direita, uma visualização ao vivo. Clicar em qualquer elemento na visualização abrirá suas configurações à esquerda, e todas as 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 perfil 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

Compre para este guia; usaremos o bloco Advanced Gallery.

Criação de uma única galeria responsiva no WordPress

Digamos que você queira adicionar uma única galeria responsiva para exibir os melhores exemplos do seu portfólio. Para fazer isso, escolha o bloco Advanced Gallery no painel esquerdo e arraste-o para o design de sua página.

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

Por exemplo, a opção Media File (Arquivo de mídia) exibirá sua galeria em uma lightbox img responsiva em tamanho real quando os visitantes clicarem nela.

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

Deseja adicionar algumas informações a cada imagem da galeria? Então, clique na guia Overlay, onde você pode adicionar um efeito de foco de cor de sobreposição de fundo, 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.

Criação de várias galerias dinâmicas no WordPress

Você também pode usar o bloco Advanced Gallery 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 Type (Tipo ) e escolha a opção Multiple (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 guia Advanced (Avançado ). A partir daí, você pode alterar as cores da guia de filtro, a tipografia, as sombras, as bordas da imagem e muito mais.

Como tornar sua galeria do WordPress responsiva

Qualquer galeria que você criar com o SeedProd será responsiva por padrão. No entanto, você pode verificar a compatibilidade de suas galerias com dispositivos móveis 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.

Em seguida, você pode editar seu design para que ele fique ótimo em qualquer dispositivo.

Na guia Device Visibility (Visibilidade do dispositivo ), você também pode ocultar elementos específicos no celular ou no desktop para melhorar a experiência móvel.

Quando estiver satisfeito com sua galeria de imagens, clique no botão Save (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 coloque a opção "Enable SeedProd Theme" (Ativar tema SeedProd) na posição "Yes" (Sim).

Como alternativa, 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. Usar o Envira GalleryWordPressPlugin

Usaremos o Envira Gallery para criar uma galeria responsiva no WordPress para o próximo método. Diferentemente de outros plug-ins de galeria do WordPress, o Envira Gallery é rápido, responsivo e leve, mas ainda assim oferece vários recursos fáceis de usar.

Por exemplo, ele oferece opções de redimensionamento de imagens, apresentações de slides, layouts flexíveis e várias fontes de imagens.

Primeiro, instale e ative o plugin Envira Gallery em seu site WordPress. Em seguida, acesse Envira Gallery " Add New 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 fazer upload de arquivos de imagem do seu computador, enquanto o segundo botão permite escolher imagens da biblioteca de mídia do WordPress.

Depois de escolher suas imagens, você pode reordená-las arrastando e soltando. Você também pode clicar no ícone de olho para colocar imagens específicas no modo de rascunho e ocultá-las de sua galeria publicada.

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

Em seguida, clique na guia Configuration (Configuração ), onde você pode:

• Alterar o número da coluna da galeria
• Ativar o carregamento lento de imagens
• Mostrar descrições da galeria
• Exibir legendas e títulos
• Defina o tamanho do pixel, a posição de corte da imagem e o espaçamento
• Alterar os modelos de galeria

Na guia Lightbox, você pode ativar uma lightbox responsiva quando os usuários clicarem em uma imagem. Ela também permite que você ajuste as configurações para alterar o tema da lightbox, exibir legendas, adicionar efeitos de transição e muito mais.

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

Você pode definir dimensões de imagem e alturas de linha personalizadas para dispositivos móveis e até mesmo ajustar as configurações do lightbox para dispositivos móveis.

Quando estiver satisfeito com o design de sua galeria, clique no botão Publish (Publicar ) no canto superior direito.

Para adicionar sua galeria compatível com dispositivos móveis ao site, crie ou edite um post ou uma página e clique no ícone de mais (+) no editor de blocos do WordPress para adicionar um novo bloco.

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

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

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

Observação: Se ainda estiver usando o editor clássico do WordPress, você poderá copiar o código de acesso da Envira Gallery e colá-lo em um post ou página.

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

Aí está!

Agora você sabe como tornar uma galeria do WordPress responsiva.

Esperamos que este artigo tenha sido útil para você. Talvez você também goste 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 postagens no WordPress (sem código)
• Como adicionar um botão Tweet ao WordPress (3 maneiras)

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.