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.
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.
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.
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.
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.
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 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.
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. 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).
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 com 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.
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.
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.
Ao visualizar sua página, a galeria deve ser semelhante a este exemplo:
Em seguida, você pode clicar em qualquer imagem para visualizá-la em uma galeria lightbox responsiva como esta:
É 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:
- 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, 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.
