Deseja criar uma lightbox no WordPress sem deixar seu site lento ou escrever código?
Uma lightbox permite que os visitantes cliquem em uma imagem ou vídeo e o visualizem em um pop-up sem distrações, em vez de uma nova guia. Isso faz com que suas galerias pareçam mais profissionais, melhora a experiência do usuário e mantém as pessoas no site por mais tempo.
Neste guia, mostrarei duas maneiras simples de adicionar uma lightbox do WordPress, passo a passo, para que você possa escolher o método mais adequado para o seu site.
Etapas rápidas para criar uma lightbox no WordPress:
O que é uma Lightbox no WordPress?
Uma lightbox é uma janela pop-up que aparece na parte superior de sua página quando um visitante clica em uma imagem, vídeo ou link. O restante da página é escurecido em segundo plano, tornando o conteúdo dentro da lightbox o foco principal.
Esse recurso é popular porque:
- Permite que os usuários visualizem versões maiores das imagens sem sair da página
- Reduz as distrações mantendo o plano de fundo acinzentado
- Cria uma experiência de galeria mais profissional e refinada
As lightboxes são frequentemente usadas para galerias de imagens, fotos de produtos, vídeos e até mesmo formulários de opt-in. Quando os visitantes terminam, eles simplesmente clicam no botão Fechar para retornar à página principal.
Quando você deve usar uma Lightbox no WordPress?
Uma lightbox é uma boa opção sempre que você quiser que os visitantes se concentrem em uma parte do conteúdo sem sair da página. Isso é especialmente útil se você quiser manter as pessoas envolvidas e reduzir o carregamento de páginas extras.
Os usos comuns de uma lightbox do WordPress incluem:
- Apresentação de portfólios de fotografia ou criativos
- Exibição de imagens de produtos com mais detalhes
- Destacar capturas de tela, modelos de design ou exemplos de trabalho
- Reproduzir vídeos do YouTube ou do Vimeo sem distrações
Você também pode usar lightboxes para formulários de inscrição ou anúncios importantes. Como o restante da página escurece no plano de fundo, é mais provável que os visitantes percebam e interajam com a mensagem.
Como criar uma caixa de luz no WordPress usando o SeedProd
Primeiro, mostraremos a você como criar uma lightbox de imagem no WordPress com o SeedProd, o melhor construtor de sites do WordPress.
| Ferramenta: Construtor de páginas do WordPress |
| Preços: Varia (opções gratuitas e pagas disponíveis) |
| Versão gratuita: Sim |
| Recursos de destaque: 🔹 Editor visual de arrastar e soltar 🔹 Fácil alternância de lightbox de imagem 🔹 Rápido e amigável para iniciantes |
| Ideal para: Iniciantes que desejam uma maneira sem código para adicionar uma lightbox do WordPress |
O SeedProd vem com kits de sites pré-fabricados e modelos de páginas de destino que permitem criar um design de site do WordPress com apenas alguns cliques. Em seguida, é possível personalizar o site com o construtor de páginas de arrastar e soltar e com os blocos e seções personalizáveis do WordPress.
Com o bloco Image do SeedProd, você pode ativar uma lightbox para mostrar versões grandes das imagens da galeria do WordPress, e é esse recurso que mostraremos no tutorial a seguir.
Antes de prosseguirmos, veja o que mais você pode fazer com o SeedProd:
- Criar páginas de destino que convertem, incluindo (404, vendas, squeeze, webinar, agradecimento e login)
- Crie um site WooCommerce personalizado para sua loja on-line
- Controle quem pode ignorar sua página de lançamento em breve ou de modo de manutenção
- Personalize suas páginas de destino com texto dinâmico
- Aumente sua lista de e-mails com as integrações de marketing por e-mail e o painel de gerenciamento de assinantes
- E muito mais.
Etapa 1. Instalar e ativar o SeedProd
Primeiro, vá para a página de preços do SeedProd, escolha um plano de licença e crie sua conta SeedProd. Quando estiver no painel da sua conta, vá para a guia Downloads e faça o download do arquivo do plug-in do SeedProd para o seu computador.
Enquanto estiver lá, copie a chave de licença, pois você precisará dela em breve.
Depois de fazer o download do plug-in, instale-o e ative-o em seu site do WordPress. Você pode seguir este tutorial sobre como instalar um plug-in do WordPress se nunca tiver feito isso antes.
Quando o plug-in SeedProd estiver ativo em seu site, navegue até SeedProd " Settings e cole a chave de licença que você copiou anteriormente no campo relevante. Agora, clique no botão Verify Key (Verificar chave ) e passe para a próxima etapa.
Etapa 2. Criar um tema WordPress ou uma página de destino
A próxima etapa é começar a criar o tema do WordPress ou a página de destino. O plug-in SeedProd permite que você faça as duas coisas, mas se você não tiver certeza de qual opção usar, aqui está uma explicação:
- Theme Builder - Com o Theme Builder, você pode substituir seu tema atual do WordPress por um novo tema personalizado. Você pode escolher entre vários kits de sites pré-fabricados e instalar seu design com um clique. Em seguida, o SeedProd criará todas as partes do seu tema, permitindo que você as personalize visualmente com o construtor de páginas.
- Landing Page Builder - O Landing Page Builder permite criar páginas de destino independentes que funcionam junto com o seu tema atual do WordPress. Você pode escolher entre vários modelos de página de destino responsivos e, em seguida, personalizá-los com o construtor de páginas de arrastar e soltar.
Ambas as soluções permitem que você adicione lightboxes de imagem ao seu design, portanto, escolha a que melhor atenda às suas necessidades. Se precisar de ajuda para começar, aqui estão alguns tutoriais sobre a criação de um tema personalizado do WordPress e a criação de uma página de destino com o SeedProd.
Depois de escolher seus modelos e criar a estrutura para sua landing page ou tema, você pode seguir a etapa 3 abaixo para adicionar uma lightbox de imagem ao seu design.
Etapa 3. Decida onde adicionar seu Image Lightbox
Agora é hora de decidir onde você deseja adicionar sua lightbox de imagem do WordPress.
Para este guia, estamos criando um site de design de interiores com uma página de portfólio personalizada usando o construtor de temas, portanto, editaremos a página com o SeedProd para abrir o construtor de arrastar e soltar.
Ao abrir o design, você verá um layout de duas colunas com blocos e seções à esquerda e uma visualização do design à direita. Você pode mover elementos em sua visualização clicando, arrastando e soltando.
Vamos começar adicionando uma nova coluna para as imagens do nosso portfólio. Na barra lateral, arraste o bloco Columns para sua página e escolha um design de layout.
Em seguida, arraste o bloco Image para cada coluna na seção da página.
A partir daí, você pode clicar em cada bloco de imagem e carregar uma imagem do seu computador ou da biblioteca de mídia do WordPress.
Agora você pode adicionar uma lightbox a cada imagem de sua galeria. Para fazer isso, basta clicar em qualquer bloco de imagem, localizar o título "Link Type" e selecionar a opção Media - Lightbox no menu suspenso.
Repita isso para cada link de imagem em sua galeria e, em seguida, clique no botão Save (Salvar ) no canto superior direito para salvar suas alterações.
Etapa 4. Publique suas alterações
A etapa final é publicar sua galeria lightbox responsiva em seu site do WordPress. Para fazer isso em um tema personalizado do WordPress, acesse SeedProd " Theme Builder em seu administrador do WordPress e coloque a opção "Enable SeedProd Theme" (Ativar tema do SeedProd) na posição "Yes" (Sim).
Se estiver publicando uma landing page, abra-a no construtor de páginas, clique na seta suspensa do botão Salvar e selecione Publicar.
Agora você pode visualizar seu novo design para ver como ele ficou.
E quando você clicar em qualquer imagem da sua galeria, abrirá uma lightbox de imagem responsiva em tela cheia.
Como criar uma Lightbox de imagem usando um plug-in de galeria
Outra maneira de adicionar uma lightbox de imagem ao seu site WordPress é com um plug-in de galeria de imagens do WordPress. Para esse método, usaremos o Envira Gallery, um dos plug-ins de galeria mais populares para WordPress.
| Ferramenta: Plugin Envira Gallery |
| Preços: A partir de US$ 26/ano |
| Versão gratuita: Sim |
| Recursos de destaque: 🔹 Criador de galeria de arrastar e soltar 🔹 Configurações de lightbox incorporadas 🔹 Modelos responsivos para dispositivos móveis |
| Ideal para: Usuários que precisam de personalização avançada da galeria |
Com esse plug-in leve de galeria de imagens de arrastar e soltar, você pode criar galerias de imagens otimizadas para posts, páginas, áreas de widgets e barras laterais. O plug-in também é fácil de usar e tem velocidade otimizada, de modo que suas imagens serão carregadas rapidamente para os visitantes do site.
Comece instalando e ativando o plug-in Envira Gallery em seu site WordPress. Em seguida, navegue até Envira Gallery " Add New para criar uma nova galeria de imagens.
Você pode adicionar imagens à sua galeria clicando no botão Select Files from Your Computer (Selecionar arquivos do seu computador ). No entanto, se quiser usar imagens da sua biblioteca de mídia, clique no botão Select Files from Other Sources (Selecionar arquivos de outras fontes).
Depois de adicionar imagens à sua galeria, você pode reorganizá-las arrastando e soltando as miniaturas.
Agora, clique na guia Configuration (Configuração) para definir as configurações da galeria.
Nessa tela, você pode:
- Alterar o número de colunas da galeria
- Ativar o carregamento lento para imagens
- Exibir a descrição da galeria
- Habilitar títulos e legendas
- Definir o tamanho da imagem e a posição de corte
- Alterar o tema da galeria
- Ajuste as margens e os preenchimentos
Em seguida, clique na guia Lightbox, que serve para personalizar as configurações da lightbox.
Primeiro, verifique se a opção Enable Lightbox está marcada e, em seguida, ajuste as configurações para alterar o tema da lightbox, exibir legendas, adicionar efeitos de transição e muito mais.
Quando estiver satisfeito com as configurações da galeria, clique no botão Publish (Publicar ) no canto superior direito.
Para exibir sua galeria aos visitantes do site, crie ou edite um post ou uma página e clique no ícone de mais (+) dentro do editor de blocos do WordPress para adicionar um novo bloco do WordPress.
Pesquise ou role a tela até ver o bloco Envira Gallery e clique nele para adicioná-lo à sua página.
Em seguida, escolha sua galeria no menu suspenso para visualizar sua galeria lightbox.
Em seguida, você pode clicar no botão Atualizar ou Publicar para salvar suas alterações.
Quando você visualizar sua página, sua galeria deverá ser semelhante a este exemplo:
Em seguida, você pode clicar em qualquer imagem para visualizá-la em uma galeria lightbox responsiva como esta:
Bônus: adicione a Envira Gallery às páginas do SeedProd
Se estiver criando suas páginas do WordPress com o SeedProd, você poderá adicionar facilmente as galerias lightbox da Envira Gallery diretamente em qualquer página ou modelo. Isso simplifica a exibição de suas imagens de forma profissional sem usar códigos de acesso ou etapas extras.
- Abra sua página ou modelo do SeedProd no editor de arrastar e soltar.
- Procure o bloco Envira Gallery na barra lateral e arraste-o para sua página.
- Escolha sua galeria no menu suspenso e ajuste as configurações de exibição.
Essa integração permite combinar o construtor de páginas flexível do SeedProd com os recursos avançados de lightbox da Envira Gallery, para que você possa criar galerias de imagens bonitas e de alta conversão em qualquer página do seu site.
Perguntas frequentes sobre a criação de uma caixa de luz no WordPress
Adicionar uma lightbox ao seu site WordPress é uma das maneiras mais fáceis de fazer com que suas imagens, vídeos ou galerias tenham uma aparência mais profissional. Isso mantém os visitantes concentrados em seu conteúdo e evita que eles saiam da página desnecessariamente.
Quer você use um construtor de páginas ou um plug-in de galeria, a configuração leva apenas alguns minutos. Escolha o método que melhor se adapta ao seu site, siga as etapas e você terá uma lightbox do WordPress pronta para funcionar.
Aqui estão alguns outros tutoriais úteis que você pode gostar:
- Como adicionar uma galeria a posts e páginas do WordPress
- Como criar guias no WordPress para obter um conteúdo impressionante com guias
- Como adicionar um botão Tweet ao WordPress (3 maneiras)
- Como adicionar um botão personalizado Add-to-Cart no WooCommerce
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
