Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

Como criar facilmente uma Lightbox no WordPress para imagens 

Escrito por: avatar do autor Stacey Corrin
avatar do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: reviewer avatar Turner John
reviewer avatar Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

Deseja criar uma lightbox no WordPress para imagens individuais?

Com uma lightbox simples, você pode exibir imagens em tamanho real em seu site sem afetar o desempenho ou a velocidade da página. Neste artigo, mostraremos como adicionar uma lightbox para imagens ao WordPress, passo a passo.

O que é uma Lightbox no WordPress?

Uma lightbox é um pop-up sem distrações que se sobrepõe ao conteúdo do seu site. Ao abrir uma lightbox, o plano de fundo da página da Web fica esmaecido, ajudando os usuários a concentrar a atenção no conteúdo da lightbox até clicarem no ícone "X" para sair da sobreposição.

exemplo: criar uma caixa de luz no WordPress para imagens

Como a sobreposição fica na parte superior do seu site, os usuários não precisarão clicar em outra página para ver o conteúdo.

As sobreposições no estilo lightbox de imagens são uma excelente maneira de exibir imagens grandes sem afetar a velocidade do seu site. Você pode criar galerias de imagens com miniaturas ou imagens de tamanho pequeno que permitem que suas páginas da Web carreguem mais rapidamente e, em seguida, permitir que os usuários cliquem nas imagens pequenas para abrir e visualizar versões grandes e de alta resolução na lightbox.

Quando você deve usar uma Lightbox?

Há várias situações em que o uso de uma lightbox faz sentido para o site de sua empresa. Por exemplo, você pode usar uma lightbox no seu site de comércio eletrônico para permitir que os visitantes vejam mais detalhes do produto.

Aqui estão algumas outras instâncias em que você pode usar uma lightbox de imagem do WordPress:

  • Exiba um portfólio de fotografias
  • Destaque capturas de tela de seus exemplos de redação
  • Exibir detalhes do produto
  • Assista a umvídeo do YouTube/Vimeo

Você sabia que também pode usar um pop-up lightbox para gerar leads? Com uma poderosa ferramenta de geração de leads, como o OptinMonster, você pode criar pop-ups de lightbox responsivos para coletar endereços de e-mail do seu público-alvo quando ele estiver prestes a sair.

pop-up de intenção de saída do optinmonster

Aqui está um guia sobre como criar um pop-up de intenção de saída no WordPress.

Dito isso, vamos ver duas maneiras de criar uma lightbox no WordPress para imagens, passo a passo.

Como criar uma caixa de luz no WordPress com o SeedProd

Primeiro, mostraremos a você como criar uma lightbox de imagem no WordPress com o SeedProd, o melhor construtor de sites do WordPress.

Construtor de sites WordPress SeedProd

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:

Esse plug-in do construtor de sites é otimizado para velocidade e SEO, de modo que seu site sempre carregará rapidamente sem inchaço.

Agora, vamos nos aprofundar no tutorial completo.

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.

Localize sua chave de licença do SeedProd

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.

digite sua chave de licença

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 Bu ilder - 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.

Editar a página do portfólio com o SeedProd

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.

Construtor de páginas de arrastar e soltar

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.

Adicione o bloco SeedProd Column e escolha um layout

Em seguida, arraste o bloco Image para cada coluna na seção da página.

Adicione o bloco de imagem SeedProd a cada coluna

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.

Faça upload de uma imagem para cada bloco Image

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.

Escolha o tipo de link da lightbox de mídia

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.

Salvar suas alterações

Etapa 4. Publicar 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).

ativar o tema seedprod

Se estiver publicando uma landing page, abra-a no construtor de páginas, clique na seta suspensa do botão Salvar e selecione Publicar.

Publique sua página de destino

Agora você pode visualizar seu novo design para ver como ele ficou.

Exemplo de página de galeria do portfólio do SeedProd

E quando você clicar em qualquer imagem da sua galeria, abrirá uma lightbox de imagem responsiva em tela cheia.

Exemplo de lightbox de imagem única do SeedProd

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.

Página inicial da galeria Envira

Com esse plug-in leve de galeria de imagens do tipo 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.

Adicionar nova Galeria Envira

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.

Definições de configuração do Envira Gallery

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.

Configurações da lightbox da Envira Gallery

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.

Publique sua galeria Envira

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.

Adicionar o bloco da Envira Gallery a um post ou página do WordPress

Em seguida, escolha sua galeria no menu suspenso para visualizar sua galeria lightbox.

Incorpore sua Galeria Envira

Em seguida, você pode clicar no botão Atualizar ou Publicar para salvar suas alterações.

Ao visualizar sua página, a galeria deve ser semelhante a este exemplo:

Exemplo da Galeria Envira

Em seguida, você pode clicar em qualquer imagem para visualizá-la em uma galeria lightbox responsiva como esta:

Exemplo de galeria Envira lightbox

É isso aí!

Neste tutorial passo a passo, você aprendeu a criar uma lightbox no WordPress para obter galerias de imagens mais rápidas e de alta resolução. Pronto para criar sua próxima lightbox de imagem no WordPress?

Aqui estão alguns outros tutoriais úteis que você pode gostar:

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.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.