Como adicionar LightBox no WordPress com Elementor

Ao integrar um recurso LightBox no seu site WordPress, você pode transformar a maneira como os visitantes se envolvem com seu conteúdo visual. Esta solução elegante é perfeita para exibir imagens de alta qualidade, criar galerias cativantes e apresentar informações detalhadas do produto, sem interromper a experiência do usuário. De fato, pode elevar a experiência do usuário a novas alturas.

Seja você um fotógrafo que procura exibir seu portfólio ou um proprietário do site de comércio eletrônico que deseja exibir detalhes do produto, o recurso Lightbox pode ser uma ótima opção. Se o seu site for construído com o Elementor, a adição de caixas de luz está a apenas um passo.

Neste artigo, forneceremos um guia abrangente e passo a passo sobre como adicionar LightBox no WordPress com Elementor. Certifique -se de ler até o final para aproveitar ao máximo essa ferramenta poderosa!

O que é uma caixa de luz no WordPress?

Uma caixa de luz é uma sobreposição pop -up. Ele exibe imagens, vídeos e outros visuais de mídia em um site em uma visão maior e mais focada. Sempre que os usuários clicam em um botão, link ou miniatura relacionados, o recurso Lightbox mostra os visuais anexados em uma visão maior enquanto escurecem o plano de fundo.

Ajuda a destacar o conteúdo. Esse recurso é ideal para galerias, portfólios e exibições de produtos que podem ser melhor vistas de uma aparência mais de perto. Ao incorporar o recurso LightBox, você não pode apenas tornar seu conteúdo visual envolvente, mas também faz com que seu público permaneça no site por um longo tempo.

Benefícios de adicionar LightBox a um site

Antes de entrar no tutorial, dê uma rápida olhada em alguns dos principais benefícios de adicionar o recurso Lightbox a um site dos pontos discutidos abaixo.

• Experiência aprimorada do usuário

Uma caixa de luz mostra conteúdo para usuários sem interromper a sessão de navegação no site. Os visitantes podem se concentrar no conteúdo em destaque, porque ele aparece no topo de outros elementos do site. Explore os segredos da melhoria da experiência do usuário.

• Apelo visual aprimorado

As caixas de luz usam animações suaves e layouts contemporâneos que fazem os sites parecerem mais atraentes para os usuários. Isso torna um site mais profissional.

• Navegação mais fácil para imagens e vídeos

As caixas de luz permitem que os usuários visualizem itens multimídia em uma única página com navegação suave e transições fáceis entre eles. Se você estiver sofrendo com seus arquivos de mídia, use o HappyMedia para gerenciar sua biblioteca e arquivos de mídia.

• Aumenta o engajamento e a interação

As caixas de luz ajudam os usuários a ver melhor o conteúdo visual, o que pode fazê -los querer explorar mais seu site. Suas sessões crescentes podem passar um sinal positivo para o mecanismo de pesquisa.

• Permite uma melhor apresentação de conteúdo

As caixas de luz ajudam você a exibir o conteúdo melhor sem fazer com que suas páginas da web pareçam ocupadas. Isso é ótimo para apresentar conteúdo como gráficos e coleções de eventos ao lado de fotos de produtos.

Como adicionar LightBox no WordPress com Elementor

Agora estamos na parte do tutorial. Nesta seção, mostraremos como adicionar uma caixa de luz no WordPress com Elementor. Para começar com o tutorial, você precisa garantir que os seguintes plugins sejam instalados e ativados no seu site.

• Elementor
• Happyaddons

Happyaddons é um complemento proeminente do plug -in da Elementor. Ele vem com mais de 130 widgets adicionais e dezenas de recursos que podem ajudar a embelezar ainda mais seu site. Quando estiverem prontos em seu site, comece a seguir os tutoriais explicados abaixo.

Etapa 01: arraste e solte o widget da caixa de luz para a tela

Abra uma postagem ou página com a tela elementar. Encontre o widget da caixa de luz no painel Elementor. Arraste e solte -o para a tela.

Por padrão, o widget da caixa de luz é adicionado à tela como um botão.

Etapa 02: Selecione um tipo de caixa de luz

O widget vem com dois tipos de caixa de luz - botão e imagem . Escolha o tipo de caixa de luz que você deseja para o widget. Para este tutorial, estamos indo com o tipo de botão.

Etapa 03: selecione o tipo de conteúdo que você deseja exibir

O widget Lightbox permite exibir uma imagem ou conteúdo de vídeo. Escolha o tipo de conteúdo que você deseja exibir na opção marcada abaixo.

Se a opção de vídeo for selecionada, você poderá adicionar conteúdo de vídeo de três fontes- YouTube, Vimeo e auto-hospedado .

Se a fonte do YouTube ou Vimeo for escolhida, você poderá adicionar o link de vídeo desejado à respectiva caixa mostrada na captura de tela anexada abaixo.

Você pode até ativar o tipo de imagem para a caixa de luz e fazer upload de uma imagem para ela.

Etapa 04: Adicione uma cópia ao botão Lightbox

Escreva uma cópia adequada que torne o botão realmente significativo e interessa aos usuários a clicar nele.

Etapa 05: Configurar configurações para o widget de caixa de luz

Além dos acima, use as outras opções para otimizar o widget. Por exemplo, alinhe -o centralmente ou onde quer que pareça bonito.

Etapa 06: estilizar o widget da caixa de luz

Agora, venha para a guia Style . A partir desta guia, você pode personalizar o preenchimento, o tipo de borda, o raio de borda, a sombra da caixa, a tipografia, a cor e a cor de fundo do widget. Faça isso você mesmo conforme necessário.

Etapa 07: Visualize a caixa de luz

Basta clicar no botão. Se a caixa de luz aparecer como o videoclipe anexado abaixo, tudo bem. Você pode ver que nossa caixa de luz está funcionando absolutamente bem.

Etapa 08: Torne o widget de LightBox Mobile Responsive

Clique no ícone do modo responsivo no rodapé do painel Elementor. Isso mostrará uma barra superior na tela com opções para alternar entre diferentes tamanhos de tela.

Verifique se o widget fica bem em todos os dispositivos, alternando a tela entre diferentes tamanhos de tela. Se não ficar bem em um tamanho de tela específico, você poderá personalizá -lo apenas para o tamanho da tela.

Assim, você pode criar uma caixa de luz no WordPress usando o plug -in do Elementor.

Coisas a considerar ao criar uma caixa de luz no WordPress

Espero que você tenha gostado deste tutorial. Agora, nesta seção, abordaremos os pontos que você deve considerar ao criar uma caixa de luz no WordPress para obter os melhores resultados.

• Propósito da caixa de luz

Decida a função LightBox que você precisa na caixa de luz, como mostrar imagens, vídeos, formas ou galerias. Planeje o conteúdo que ajuda a alcançar as metas do seu site e atende às necessidades dos visitantes.

• Compressa imagens

Adicionar imagens pesadas pode desacelerar a velocidade da sua web. Portanto, certifique -se de comprimir todas as suas imagens antes de adicioná -las à caixa de luz. Use HappyMeida para compactar arquivos de mídia.

• Adicione o texto alterador s

Adicionar textos alternativos às imagens pode aumentar a pontuação de SEO das suas imagens de caixa de luz. Além disso, adicione uma cópia envolvente ao botão LightBox ou link.

• Funcionalidade de saída

A funcionalidade de saída é crucial para a experiência do usuário. Dê aos usuários maneiras fáceis de sair da caixa de luz, mostrando um botão visível e deixando -os fechar.

• Testes e solução de problemas

Verifique como o LightBox executa em vários navegadores, dispositivos e tamanhos de exibição da Internet para confirmar que funciona em todas as plataformas. Não o publique sem testar e experimentar.

Conclusão

Uma caixa de luz aprimora o envolvimento do usuário exibindo mídia em uma sobreposição na parte superior da página principal. Isso permite que os visitantes se concentrem no conteúdo sem navegar. Embora existam inúmeros plugins disponíveis no wordpress.org para criar caixas de luz, o Elementor se destaca como uma das opções mais simples e fácil de usar. Se você é fã de construtores de páginas, ele definitivamente vale a pena considerar.

Além do widget da LightBox, você também pode explorar a ampla gama de recursos e widgets oferecidos pelo plug -in do Happyaddons . Essa ferramenta poderosa permite adicionar ainda mais funcionalidade ao seu site e a torna mais dinâmica e interativa.

Se você achou este tutorial útil, gostaríamos de ouvir de você! Sinta -se à vontade para compartilhar seus pensamentos ou perguntas na caixa de comentários abaixo.