Pode ser frustrante gastar tempo capturando belas fotos, apenas para vê-las exibidas em uma galeria básica que não faz jus a elas. A galeria padrão do WordPress muitas vezes parece sem graça e faz com que os usuários cliquem para ver uma versão maior.
Um efeito lightbox resolve isso permitindo que os visitantes vejam suas imagens em uma sobreposição impressionante sem sair da página. Aqui no WPBeginner, usamos o Envira Gallery em nossos sites de teste e projetos de clientes porque é a maneira mais fácil e confiável de criar galerias com aparência profissional.
Neste artigo, vamos guiá-lo pelos passos simples para adicionar um efeito lightbox às suas próprias galerias do WordPress.
Aqui está uma visão geral rápida do que você aprenderá neste tutorial.
- Por que adicionar o efeito Lightbox em Galerias do WordPress?
- Como adicionar uma galeria do WordPress com efeito Lightbox
- Alternativa: Use o NextGen Gallery para criar portfólios e galerias de imagens no WordPress
- Perguntas frequentes sobre galerias Lightbox do WordPress
Por que adicionar o efeito Lightbox em Galerias do WordPress?
Ao adicionar um efeito lightbox responsivo às galerias do seu site WordPress, você pode exibir suas imagens de forma mais profissional. Esse efeito permite que você exiba suas fotos em uma janela pop-up no seu site quando um usuário clica nelas.
Lightboxes ajudam a criar uma experiência de visualização mais imersiva para seus visitantes e até facilitam o compartilhamento de suas imagens nas redes sociais ou o download em seus computadores.
Se você tem um site de fotografia, adicionar um efeito lightbox permitirá que os usuários vejam suas imagens de alta resolução em um modo sem distrações, aumentando o engajamento.
Da mesma forma, se você tem uma loja WooCommerce, adicionar um efeito lightbox às suas galerias de produtos pode ajudar os clientes a ver o produto de perto e tomar uma decisão informada.
Dito isso, vamos ver como adicionar facilmente uma galeria de imagens WordPress com um efeito lightbox, passo a passo.
Como adicionar uma galeria do WordPress com efeito Lightbox
A maneira mais fácil de adicionar uma galeria lightbox é usando o Envira Gallery. É o melhor plugin de galeria WordPress do mercado e o que usamos em nossos próprios projetos.
Ele vem com um construtor de arrastar e soltar, modelos profissionais e recursos poderosos como compartilhamento social, marca d'água e, claro, lightboxes. Para uma análise completa de seus recursos, você pode ler nossa análise completa do Envira Gallery.
O Envira Gallery também é super rápido e possui um construtor de arrastar e soltar, modelos de galeria profissionais e muitos recursos, incluindo a adição de tags, áudio, compartilhamento social e lightboxes.
Primeiro, você precisa instalar e ativar o plugin Envira Gallery. Para instruções detalhadas, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Observação: O Envira Gallery também tem um plugin gratuito que você pode usar para este tutorial. No entanto, fazer o upgrade para o plano pago lhe dará acesso a mais recursos.
Após a ativação, visite a página Envira Gallery » Configurações na barra lateral de administração do WordPress para inserir a chave de licença.
Você pode obter essas informações em sua conta no site do Envira Gallery.
Depois disso, visite a página Envira Gallery » Adicionar Nova no painel do WordPress para começar a criar sua própria galeria.
A partir daqui, digite um título para a galeria de imagens. Em seguida, clique no botão ‘Selecionar Arquivos do Seu Computador’ para fazer upload de imagens. Se você quiser adicionar imagens da biblioteca de mídia à sua galeria, clique no botão ‘Selecionar Arquivos de Outras Fontes’.
Isso abrirá a biblioteca de mídia de onde você pode fazer upload de imagens para a galeria. Lembre-se que você só pode fazer upload de uma imagem da biblioteca de mídia por vez.
Depois de fazer isso, role para baixo até a seção ‘Atualmente na sua Galeria’. Aqui, você verá uma prévia da sua galeria à direita com as configurações na coluna da esquerda.
Agora, clique no ícone de lápis em cima de cada imagem para abrir o prompt ‘Editar Metadados’ na tela.
A partir daqui, você pode adicionar a legenda, o status, título e o texto alternativo para imagens individuais.
Depois disso, não se esqueça de clicar no botão ‘Salvar Metadados’ para armazenar suas configurações.
Em seguida, mude para a aba ‘Configuração’ na coluna da esquerda para alterar o layout da sua galeria de acordo com seu gosto. A partir daqui, você pode selecionar um layout, número de colunas, tamanho da imagem, dimensões, temas e mais.
Para instruções detalhadas, consulte nosso guia para iniciantes sobre como criar uma galeria de imagens no WordPress.
Depois de fazer isso, mude para a aba ‘Lightbox’ na coluna da esquerda e marque a opção ‘Ativar Lightbox?’.
Depois disso, selecione um tema de lightbox no menu suspenso ‘Tema do Lightbox da Galeria’. Se você escolher a opção ‘Legado’, o prompt do efeito lightbox terá um layout mais antigo.
Ao escolher a opção ‘Base (Escuro)’, o prompt do lightbox terá uma base escura como seu layout.
Em seguida, você deve selecionar se deseja exibir o título da imagem ou sua legenda no prompt do lightbox. Você também pode exibir ambos ou nenhum deles, se desejar.
Depois de fazer isso, escolha o tamanho da imagem para o lightbox no menu suspenso.
Depois disso, marque a opção ‘Ativar Setas da Galeria’. O prompt do lightbox agora mostrará duas setas que os espectadores podem usar para alternar para imagens diferentes em sua galeria.
Você também pode configurar outras configurações para seu lightbox, incluindo seu efeito de transição, efeito de abrir/fechar, ativar supersize do lightbox e mais.
Quando terminar, não se esqueça de clicar no botão ‘Publicar’ na parte superior para armazenar suas alterações.
Para adicionar sua galeria de imagens a uma página/post do WordPress, abra a página no editor de blocos.
Aqui, você precisa clicar no botão ‘+’ para adicionar bloco no canto superior esquerdo da tela para abrir o menu de blocos. Em seguida, adicione o bloco Envira Gallery à página/post.
Depois disso, selecione a galeria de imagens que você acabou de criar no menu suspenso no próprio bloco. Por fim, clique no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas configurações.
Agora, você pode visitar seu blog WordPress para ver a galeria de imagens e, em seguida, clicar em qualquer imagem para ver o efeito lightbox.
Alternativa: Use o NextGen Gallery para criar portfólios e galerias de imagens no WordPress
O Envira Gallery é a melhor opção para adicionar imagens em lightbox ao seu site WordPress. Alternativamente, você pode usar o NextGEN Gallery para criar galerias e portfólios totalmente responsivos e visualmente agradáveis em seu site WordPress.
O NextGEN Gallery é a melhor alternativa ao Envira Gallery porque suporta uma ampla gama de tipos de galeria, possui recursos relacionados a eCommerce e permite que você adicione marcas d'água, lightboxes, comentários de imagem e muito mais.
Além disso, o NextGEN Gallery permite que você aceite pagamentos online via Stripe ou PayPal, facilitando a venda de suas imagens online.
É um plugin de galeria avançado com recursos para fotógrafos profissionais, designers gráficos e artistas visuais, tornando-o um dos melhores plugins de portfólio WordPress do mercado.
Para instruções detalhadas, você pode consultar nosso tutorial sobre como adicionar um portfólio ao seu site WordPress.
Perguntas frequentes sobre galerias Lightbox do WordPress
Aqui estão as respostas para algumas das perguntas mais comuns que recebemos sobre como adicionar um efeito lightbox às galerias do WordPress.
O que é um efeito lightbox no WordPress?
Um efeito lightbox é um recurso que exibe suas imagens em uma sobreposição que preenche a tela. O restante do conteúdo da página fica escurecido em segundo plano.
Isso permite que os visitantes visualizem a mídia em um tamanho maior sem navegar para uma nova página, criando uma experiência de usuário mais focada.
Qual é o melhor plugin de galeria lightbox para WordPress?
Em nossa experiência, Envira Gallery é o melhor plugin do WordPress para criar galerias lightbox. É incrivelmente fácil para iniciantes, rápido e repleto de recursos poderosos.
Para fotógrafos profissionais que precisam de recursos mais avançados de portfólio e prova, NextGEN Gallery é outra excelente alternativa.
Posso adicionar um lightbox à galeria padrão do WordPress sem um plugin?
O bloco de galeria padrão do WordPress não possui um recurso de lightbox integrado. Embora você possa adicionar um usando código personalizado, isso requer conhecimento de CSS e JavaScript.
Para a maioria dos usuários, usar um plugin dedicado é o método mais simples e seguro para obter um resultado profissional sem tocar em nenhum código.
Uma galeria lightbox vai deixar meu site mais lento?
Um plugin bem otimizado como o Envira Gallery é construído para velocidade e não deve deixar seu site mais lento. Ele usa recursos de desempenho como carregamento preguiçoso para imagens.
No entanto, você deve sempre otimizar suas imagens para a web antes de carregá-las no WordPress para garantir os tempos de carregamento mais rápidos possíveis.
Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente uma galeria do WordPress com um efeito lightbox. Você também pode querer ver nosso guia para iniciantes sobre como fazer edição básica de imagens no WordPress e nossas melhores escolhas para as melhores ferramentas para criar imagens melhores para seus posts de blog.
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.
Jiří Vaněk
Obrigado por recomendar o Envira Gallery. Eu crio sites no Elementor e, além do Elementor, eu só conhecia o NextGen gallery, que não atende completamente aos meus requisitos. Com certeza darei uma chance ao plugin e provavelmente o substituirei pelo NextGen Gallery que tenho usado.
Muhammad Danial Emran
Olá, quero perguntar se usar um efeito lightbox afetará a velocidade do meu site.
WPBeginner Support
Não deve causar lentidão no seu site.
Admin
Ahmed Omar
obrigado pela postagem, mas aqui uma pergunta faria diferença se eu usasse o Editor de Blocos do WordPress para adicionar galeria de fotos em vez de usar o Envira?
WPBeginner Support
Envira has more tools and customization options than the default gallery
Admin
E
Fico tão feliz por ter encontrado este artigo e este site. Amo vocês agora!
Lynsey
Eu amo vocês! Existe alguma maneira de diminuir as miniaturas?
Equipe Editorial
Sim. Vá em Configurações > Mídia. Edite o tamanho da miniatura. Em seguida, baixe um plugin chamado Regenerate thumbnails. Execute esse plugin e pronto.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
Admin
Sandeep Singh
Sou muito grato pela sugestão de adicionar o efeito Lightbox à galeria. Realmente aprecio esse tipo de suporte e espero o mesmo para o futuro.
Mike
Olá,
Isso é ótimo, uma pergunta: existe algum plugin ou algo assim que transforme a galeria em um slideshow? Por exemplo, a primeira imagem anexada aparece grande e abaixo estão as miniaturas de todas as imagens na galeria, e você pode clicar em uma imagem para mudar a imagem grande em vez de um efeito lightbox.
Obrigado,
Mike
Equipe Editorial
Não tenho certeza se existe um plugin assim.
Admin
Renee
Tenho quase certeza que o plugin Fancybox faz isso. Você pode ativar ou desativar o lightbox e as miniaturas.
Emma Beatty Howells
Obrigado por uma ótima solução. Sou novo em tudo isso e estou tentando descobrir a maneira mais fácil de gerenciar galerias de fotos online – isso mantém tudo simples e elegante! Algo mais que achei útil foi um aplicativo que adiciona marca d'água às fotos com o mínimo de esforço… ‘ImageBucket’.
Tiaan
Obrigado, funciona que é uma maravilha!
Michael
Parece fácil o suficiente. Existe uma maneira de ter legendas sob cada imagem? Além disso, quando abre para um lightbox, existe uma maneira de ter um texto descritivo no lightbox com a imagem?
Equipe Editorial
Este plugin deve ser capaz de fazer o que você procura: http://wordpress.org/extend/plugins/gallery-and-caption/
Admin
Alex
Tenho um banner no topo do meu site que exibe uma imagem. Quando abre o lightbox, o banner ainda aparece sobre ele. Existe alguma maneira, um código ou algo assim, que impeça isso?
Obrigado
Alex
Equipe Editorial
Provavelmente está acontecendo porque seu banner tem um valor z-index muito alto. Diminua esse valor no seu CSS. Existem muitos tutoriais de CSS cobrindo z-index na web.
Admin
JulieBozza
Esta é uma solução muito legal, obrigado! Muito mais rápido e organizado do que o que eu estava fazendo…
Há alguma maneira, no entanto, de escolher qual das imagens aparece como miniatura principal? Ou seja, a miniatura que aparece no ‘feed’ antes de você abrir a postagem individual.
Obrigado desde já!
wpbeginner
@JulieBozza A miniatura da postagem é selecionada usando o recurso Imagem em Destaque. No editor da sua postagem, olhe no lado direito, abaixo do botão de publicar, deve haver uma caixa nessa linha chamada Imagem em destaque.
JulieBozza
@wpbeginner Olá! Obrigado pela resposta. Infelizmente, quando faço isso, muda a imagem do banner, mas não tem efeito na miniatura da postagem. Estou usando o tema Twenty Eleven do WordPress, então talvez ele esteja dando prioridade ao banner, por assim dizer.
wpbeginner
@JulieBozza Você está se referindo a estas imagens de miniatura da galeria, certo???
JulieBozza
@wpbeginner LOL! Sim. Criei a postagem da galeria exatamente como descrito acima.
Não sei se ajudaria visitar a postagem em si, mas aqui está o URL. Lembre-se que o site é um trabalho em progresso!
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza A galeria funciona como deveria.
http://rupertfyoung.com/category/gallery/ << Se você está se referindo à imagem em miniatura aqui, então isso é controlado pela sua Imagem Destacada ou pelo primeiro anexo, acredito. Faça o upload de uma imagem destacada que tenha pouca largura (tamanho de miniatura ou algo assim)... E ela não dominará a imagem do cabeçalho.
wpbeginner
@ukdazza O problema está no seu site e não neste plugin. Problemas de jQuery como estes são muito comuns. Existe outro jQuery que está fazendo com que este plugin não funcione. Você teria que mudar as posições do outro código jQuery.
Este é um jogo de tentativa e erro quando você encontra problemas como estes.
ukdazza
Estou tendo um problema onde estamos usando o plugin slickr flickr para criar galerias de miniaturas com recursos de lightbox. No entanto, o lightbox não está funcionando nada. De acordo com as notas que encontrei online sobre este tipo de problema com este plugin, é provável que haja mais de um lightbox ou mais de um jQuery em execução – fazendo com que ele não funcione corretamente.
O Lightbox não funciona. Se você clicar em uma miniatura, a imagem abre no navegador, o que é péssimo.
Alguma ideia? Eu esperava que você ou alguém pudesse ter uma ideia porque tentei instalar este plugin e ele disse que o destino já estava ocupado.
TGA
Uau. Muito obrigado MESMO. Eu estava usando o NextGEN gallery, mas não podia deixar meu cliente ter galerias com miniaturas de tamanhos variados. (Burrice). Então percebi que usando a galeria nativa isso seria possível, mas o Highslide não criaria um visualizador de miniaturas como faria com o NextGEN. O ponto é que isso foi uma salvação! Pode não ser perfeito, mas é UMA solução e agora posso seguir com o projeto!
wpbeginner
@TejSanusi✔ Este plugin tem uma forma para os usuários visualizarem a próxima imagem como parte da mesma lightbox.
TejSanusi✔
Existe alguma maneira de criar uma galeria lightbox que seja ativada a partir de uma única miniatura. Quando o usuário clica na miniatura, a lightbox é criada, com uma série de imagens da galeria?
cata
É bastante interessante o plugin mencionado no artigo. Eu também testei com bons resultados este aqui http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Obrigado pela ótima explicação. Achei isso extremamente útil. Tenho uma pergunta, no entanto. E se eu tivesse uma galeria bem grande, com cerca de 40 ou 50 fotos e eu quisesse que apenas uma delas fosse exibida no post e então, quando alguém clicasse nela, pudessem percorrer a galeria inteira? Isso é possível? Eu preferiria não ter todas as 40 fotos exibidas no meu post e acho que isso seria útil.
Obrigado!
Keith Davis
Bom trabalho, rapazes.
Nunca soube que o WordPress tinha uma função de galeria… vocês sabem de tudo?
Talvez eu use isso um dia.
jonathan perrodin
Ei, obrigado por isso, eu queria colocar isso no meu site, mas estava com preguiça de procurar um plugin que fizesse isso de forma simples. Isso foi perfeito.
Mike Roberts
Sou artista e ilustrador e continuo decepcionado com as opções para exibir uma galeria de imagens no WordPress. Vivo na esperança de que, em breve, algum programador brilhante atenda ao meu apelo!
Gretchen
Eu não percebi o quão difícil era encontrar um plugin de lightbox que usasse a função nativa de galeria do WordPress até começar a procurar um! Acabei com http://wordpress.org/extend/plugins/lightbox-plus/ por causa da sua capacidade de especificar via shortcode em cada galeria de post/página se ela deveria usar a configuração de lightbox ou não. Na verdade, eu gosto de usar as páginas de anexo às vezes, e precisava de um plugin de lightbox que me permitisse escolher quando usá-lo. Eu ficaria curioso para saber se mais alguém encontrou outro plugin de lightbox com esse recurso.
Bronson
Obrigado pela informação.
É ótimo poder aplicar o efeito lightbox a galerias nativas em vez de ter que recriá-las manualmente.
Sonu
Como isso funciona? E precisamos de uma classe lightbox para cada imagem na galeria?
Equipe Editorial
Não, você não precisa adicionar a classe lightbox a cada imagem da galeria. Ele faz isso automaticamente para todas as imagens da galeria. A classe deve ser adicionada a qualquer outra imagem que você tenha, além da galeria.
Admin
Binoy
O problema aqui é que todas as imagens no post aparecem na galeria. Alguma opção para selecionar imagens?
Equipe Editorial
Não, isso ainda não é possível.
Admin
Leo
Oi! Para selecionar as imagens a serem exibidas na galeria, experimente este plugin: Múltiplas Galerias, você pode encontrá-lo aqui > http://goo.gl/kNFer
Tchau!
Equipe Editorial
Thanks for sharing this plugin. Updating the article to add this
Preston
Cada imagem deve ter algum tipo de número do WordPress associado a ela. Eu excluo imagens na galeria com este código, espero que funcione para você:
[gallery link="file" exclude="Foto#, Foto#, Foto#"]