A adição de uma galeria com um efeito de caixa de luz exibe suas imagens de forma bonita, permitindo que elas sejam visualizadas em um formato maior.
Isso melhora a interação do usuário, pois os visitantes podem ver as imagens sem sair da página, e torna o conteúdo do seu site mais dinâmico.
No entanto, o bloco de galeria padrão do WordPress não oferece suporte a lightboxes.
Nos últimos anos, usamos o Envira Gallery para criar galerias de imagens com efeitos de lightbox em nossos sites de teste e na criação de sites de clientes.
Descobrimos que ele é incrivelmente amigável e confiável para iniciantes, facilitando a criação de galerias impressionantes para qualquer pessoa sem muito conhecimento técnico.
Neste artigo, mostraremos como adicionar facilmente uma galeria no WordPress com um efeito lightbox, passo a passo.
Por que adicionar o efeito Lightbox nas galerias do WordPress?
Ao adicionar um efeito de lightbox responsivo às galerias do seu site WordPress, você pode exibir suas imagens de forma mais profissional. Esse efeito permite exibir suas fotos em uma janela pop-up em seu site quando um usuário clica nelas.
As lightboxes ajudam a criar uma experiência de visualização mais imersiva para seus visitantes e até mesmo facilitam o compartilhamento de suas imagens nas mídias sociais ou o download delas em seus computadores.
Se você tiver um site de fotografia, adicionar um efeito de lightbox permitirá que os usuários visualizem suas imagens de alta resolução em um modo livre de distrações, aumentando o envolvimento.
Da mesma forma, se você tiver uma loja WooCommerce, adicionar um efeito de lightbox às 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 do WordPress com um efeito lightbox, passo a passo.
Como adicionar uma galeria do WordPress com um efeito Lightbox
Você pode adicionar facilmente uma galeria do WordPress com um efeito lightbox usando a Envira Gallery.
É o melhor plug-in de galeria do WordPress que permite criar galerias de imagens modernas e totalmente responsivas para o seu site.
O Envira Gallery também é super rápido e tem um construtor do tipo arrastar e soltar, modelos de galerias profissionais e muitos recursos, incluindo a adição de tags, áudio, compartilhamento social e lightboxes.
Primeiro, você precisa instalar e ativar o plug-in Envira Gallery. Para obter instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Observação: A Envira Gallery também tem um plug-in gratuito que você pode usar para este tutorial. No entanto, 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 da Envira Gallery.
Depois disso, visite a página Envira Gallery ” Add New no painel do WordPress para começar a criar sua própria galeria.
A partir daí, digite um título para a galeria de imagens. Em seguida, clique no botão “Select Files from Your Computer” (Selecionar arquivos do seu computador) para carregar imagens. Se quiser adicionar imagens da biblioteca de mídia à sua galeria, clique no botão “Select Files from Other Sources” (Selecionar arquivos de outras fontes).
Isso abrirá a biblioteca de mídia de onde você pode carregar as imagens da galeria. Lembre-se de que só é possível carregar uma imagem da biblioteca de mídia por vez.
Depois de fazer isso, role para baixo até a seção “Currently in your Gallery”. Aqui, você verá uma visualização da sua galeria à direita com as configurações na coluna da esquerda.
Agora, clique no ícone de lápis na parte superior de cada imagem para abrir o prompt “Edit Metadata” (Editar metadados) na tela.
A partir daqui, você pode adicionar a legenda, o status, o título e o texto alternativo para imagens individuais.
Depois disso, não se esqueça de clicar no botão “Save Metadata” (Salvar metadados) para armazenar suas configurações.
Em seguida, vá para a guia “Configuration” (Configuração) na coluna da esquerda para alterar o layout da galeria de acordo com sua preferência. Aqui, você pode selecionar um layout, o número de colunas, o tamanho da imagem, as dimensões, os temas e muito mais.
Para obter instruções detalhadas, consulte nosso guia para iniciantes sobre como criar uma galeria de imagens no WordPress.
Depois de fazer isso, vá para a guia “Lightbox” na coluna da esquerda e marque a opção “Enable Lightbox?” (Ativar Lightbox?).
Depois disso, selecione um tema de lightbox no menu suspenso “Gallery Lightbox Theme”. Se você escolher a opção “Legacy”, o prompt do efeito de lightbox terá um layout mais antigo.
Ao escolher a opção “Base (Dark)”, o prompt da lightbox terá uma base escura como layout.
Em seguida, você deve selecionar se deseja exibir o título da imagem ou sua legenda no prompt da lightbox. Você também pode exibir ambos ou nenhum deles, se desejar.
Depois de fazer isso, escolha o tamanho da imagem para a lightbox no menu suspenso.
Depois disso, marque a opção “Enable Gallery Arrows” (Ativar setas da galeria). O prompt da lightbox agora mostrará duas setas que os visualizadores podem usar para alternar para diferentes imagens em sua galeria.
Você também pode definir outras configurações para sua lightbox, inclusive o efeito de transição, o efeito de abrir/fechar, ativar o superdimensionamento da lightbox e muito mais.
Quando terminar, não se esqueça de clicar no botão “Publish” (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 “+” de 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 do próprio bloco. Por fim, clique no botão “Update” (Atualizar) ou “Publish” (Publicar) para armazenar suas configurações.
Agora, você pode visitar seu blog do WordPress para visualizar a galeria de imagens e clicar em qualquer imagem para ver o efeito de lightbox.
Alternativa: Use a NextGen Gallery para criar portfólios e galerias de imagens no WordPress
A Envira Gallery é a melhor opção para adicionar imagens lightbox ao seu site WordPress. Como alternativa, você pode usar a 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 oferece suporte a uma ampla variedade de tipos de galerias, possui recursos relacionados ao comércio eletrônico e permite adicionar marcas d’água, caixas de luz, comentários de imagens e muito mais.
Além disso, a NextGEN Gallery permite que você aceite pagamentos on-line via Stripe ou PayPal, facilitando a venda de suas imagens on-line.
É um plug-in de galeria avançado com recursos para fotógrafos profissionais, designers gráficos e artistas visuais, o que o torna um dos melhores plug-ins de portfólio do WordPress no mercado.
Para obter instruções detalhadas, consulte nosso tutorial sobre como adicionar um portfólio ao seu site WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente uma galeria do WordPress com um efeito lightbox. Talvez você também queira ver nosso guia para iniciantes sobre como fazer a edição básica de imagens no WordPress e nossas escolhas de especialistas sobre as melhores ferramentas para criar imagens melhores para as publicações do seu blog.
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.
Jiří Vaněk
Thanks for recommending Envira Gallery. I make websites on Elementor, and apart from Elemenotr, I only knew NextGen gallery, which does not completely meet my requirements. I will definitely give the plugin a try and probably replace the NextGen Gallery I’ve been using with it.
Muhammad Danial Emran
Hi, I want to ask if using a lightbox effect will affect my website speed.
WPBeginner Support
It should not cause your site to slow down.
Administrador
Ahmed Omar
thank you for the post, but here a question would it make difference if I used Using the WordPress Block Editor to add photo gallery than using Envira ?
WPBeginner Support
Envira has more tools and customization options than the default gallery
Administrador
E
I’m so glad I found this article and this website. Love you guys right now!
Lynsey
I love you! Is there any way to make the thumbnails smaller?
Editorial Staff
Yes. Go to Settings > Media. Edit the thumbnail size. Then download a plugin called Regenerate thumbnails. Run that plugin, and thats it.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
Administrador
Sandeep Singh
I am really Thankful for the suggestion to add Lightbox effect to the gallery. I really appretiate such kind of support and hope same for the future.
Mike
Hello,
This is great, one question though is there a plugin or anything that is out there to make the gallery into a slideshow. For example say the first attached images shows up large and below are the thumbs of all the image in the gallery and you can click on a image to change the large image rather than a lightbox effect.
Thanks,
Mike
Editorial Staff
Not sure if a plugin like that exists.
Administrador
Renee
Pretty sure that Fancybox plugin does that. You can enable or disable lightbox and thumbnails.
Emma Beatty Howells
Thanks for a great solution I am new to all this and am trying to work out the easiest way to manage photogalleries on line – this keeps it simple and elegant! Something else I found useful was an App that watermarks photos with the minimum of fuss… ‘ImageBucket’.
Tiaan
Thanks, works like a bomb!
Michael
Seems easy enough. Is there a way to have captions under each picture? Also, when it opens to a lightbox, is there a way to have descriptive text in the lightbox with the image?
Editorial Staff
This plugin should be able to do what you are looking for: http://wordpress.org/extend/plugins/gallery-and-caption/
Administrador
Alex
I have a banner at the top of my website which displays a picture. When it opens the lightbox, the banner still appears over it. Is there any way, a code or something, which will stop this?
Thanks
Alex
Editorial Staff
Probably happening because your banner has a very high z-index value set. Lower that value in your CSS. There are a lot of CSS tutorials covering z-index on the web.
Administrador
JulieBozza
This is a really cool solution, thank you! So much quicker and neater than what I was doing…
Is there a way, however, to choose which of the images appears as the main thumbnail? That is, the thumbnail that appears in the ‘feed’ before you open up the individual post.
Thank you in anticipation!
wpbeginner
@JulieBozza The thumbnail for the post is selected by using Featured Image feature. In your post editor, look at the right hand side, below publish button there should be a box in that line called Featured image.
JulieBozza
@wpbeginner Hello! Thanks for the reply. Unfortunately when I do that, it changes the banner image, but has no effect on the thumbnail in the post. I’m using the Twenty Eleven WordPress theme, so perhaps it’s giving the banner the priority, as it were.
wpbeginner
@JulieBozza You are referring to these gallery thumbnail images right???
JulieBozza
@wpbeginner LOL! Yes. I created the gallery post exactly as described above.
I don’t know if it would help to visit the post itself, but here’s the URL. Keep in mind that the site is a work in progress!
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza The gallery works like it should.
http://rupertfyoung.com/category/gallery/ << If you are referring to the thumbnail image here, then that is controlled by your Featured Image or the first attachment I believe. Upload a featured image that is low in width (thumbnail size or something)… And it will not take over the header image.
wpbeginner
@ukdazza The problem is with your site rather than this plugin. jQuery issues like these are very common. There is another jQuery that is causing this plugin to not work. You would have to change positions of the other jQuery code.
This is a game of trial and error when you encounter problems like these.
ukdazza
I’m having a problem where we’re using slickr flickr plugin to create thumbnail galleries with lightbox features. However the lightbox isn’t working at all. According to the notes I can find online about this kind of problem with this plugin, it is likely there is more than one lightbox or more than one jQuery running – causing it to not run properly.
Lightbox doesn’t work. If you click a thumbnail it opens the image in the browser, which is rubbish.
Any ideas? I hoped you or someone might have an idea because I tried to install this plugin and it said the destination was already taken.
TGA
Wow. Thank you SO much. I was using NextGEN gallery, but wasn’t allowed to let my client have galleries with thumbnails of various sizes. (Dumb). So I realized using the native gallery that would be possible, but then Highslide wouldn’t create a thumbnail viewer like it would with NextGEN. Point being, this was a lifesaver! It may not be perfect, but it’s A solution and now I can move on with the project!
wpbeginner
@TejSanusi✔ This plugin has a way for users to view the next image as part of the same lightbox.
TejSanusi✔
Is there anyway to create a lightbox gallery that is enabled from one thumbnail. When the user clicks on the thumbnail, the lightbox is created, with a series of gallery images?
cata
Is quite interesting the plugin mentioned in the article. I have also tested with good results this one http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Thanks for the great writeup. I found this extremely useful. I do have a question though. What if I had a pretty large gallery of about 40 or 50 pics and I only wanted one of them displayed in the post and then when someone clicks on it they’d be able to scroll through the entire gallery? Is this possible? I’d rather not have all 40 pics displayed in my post and I think this would be useful.
Thanks!
Keith Davis
Nice one boys.
Never knew that Wordpress had a gallery function… do you guys know everything?
Might actually use this one day.
jonathan perrodin
Hey thanks for this, I’ve been wanting to get this on my site, but was too lazy to look for a plugin that did it simply. This was perfect.
Mike Roberts
I am an artist and illustrator and I continue to be disappointed by the options for displaying a gallery of images in WordPress. I live in hope that, sometime soon, some bright coder will answer my plea!
Gretchen
I didn’t realize how hard it was to find a lightbox plugin that used the native WordPress gallery function until I started looking for one! I ended up with http://wordpress.org/extend/plugins/lightbox-plus/ because of its ability to specify via shortcode in each post/page gallery whether it was to use the lightbox setting or not. I actually like to use the attachment pages sometimes, and needed a lightbox plugin that would allow me to choose when to use it. I’d be curious to hear if anyone else has found another lightbox plugin with that feature.
Bronson
Thanks for the information.
It’s great to be able to apply the lightbox effect to native galleries trather than having to go and manually recreate them.
Sonu
How this works ? and do we need a lightbox class to every image on gallery ?
Editorial Staff
No you don’t need to lightbox class every image on the gallery. It automatically does that for all images in the gallery. The class should be added on any other image that you have aside from the gallery..
Administrador
Binoy
The problem here is all the images in post show up on gallery. Any options to select images?
Editorial Staff
No that is not possible yet.
Administrador
Leo
Hi! To select the images to show in the gallery try this plugin: Multiple Galleries, you can find it here > http://goo.gl/kNFer
Bye!
Editorial Staff
Thanks for sharing this plugin. Updating the article to add this
Preston
Each image should have some kind of wordpress number associated with it. I exclude images in the gallery with this code, hopefully it works for you:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]