O efeito de caixa de luz é uma funcionalidade muito prática, especialmente quando é necessárioAmpliação da imagem no ecrãO Elementor proporciona-lhe uma forma fácil de criar imagens lightbox sem a utilização de outros plug-ins. Neste artigo, veremos em pormenor como adicionar um efeito de lightbox no Elementor e explicaremos os passos de configuração em pormenor.

O que é o efeito lightbox?

O efeito lightbox refere-se ao facto de que, quando um utilizador clica numa imagem, esta é apresentada no centro do ecrã como uma ampliação, enquanto o fundo é escurecido para permitir que o utilizador se concentre na imagem que está a ser visualizada. Este efeito é muito popular em muitos sítios Web, uma vez que proporciona uma experiência de utilizador mais envolvente.

Ler:Como adicionar uma apresentação de diapositivos de largura total no Elementor

Como criar um efeito de caixa de luz no Elementor

Passo 1: Crie ou edite uma página

Em primeiro lugar, é necessário criar uma nova página ou editar uma página existente para lhe adicionar um efeito de caixa de luz.
Passos:

1. Aceda ao painel de controlo do WordPress e clique em "página web">"Adicionar nova página" para criar uma nova página ou vá à lista "Páginas" e selecione a página que pretende editar.

2. Se pretender editar uma publicação, pode clicar em "escritos">"Adicionar novo artigo" para criar uma nova mensagem.

Passo 2: Mude para o Editor Elementor

Depois de criar ou selecionar uma página, clique em "Utilizar o Editor Elementor" para aceder à interface do editor Elementor. A partir daqui, pode utilizar o botãoArraste e largue widgetspara editar o conteúdo da página.

Passo 3: Adicione o widget de imagem

1. No editor do Elementor, localize e arraste a tag "imagens" para a posição na página onde o efeito de lightbox é apresentado.

2. Depois de colocar o widget de imagem na página, pode aceder às definições de imagem.

Passo 4: Adicionar uma imagem

Depois de adicionar um widget de imagem, tem de selecionar uma imagem da biblioteca multimédia ou carregar uma nova imagem.
Passos:

1. Clique no botão "Selecionar imagem"Botão.

2. Selecione as imagens que pretende apresentar na biblioteca multimédia ou carregue diretamente ficheiros de imagem locais.

Passo 5: Configure o efeito de lightbox

Em seguida, é necessário ativar o efeito de caixa de luz para a imagem.
Passos:

1. No widget de imagem "ligação (num sítio Web)", selecione a opção "ficheiro multimédia". Desta forma, assegurará que a imagem será apresentada ampliada quando clicar nela.

2. Ativar o efeito de caixa de luz: em "caixa de luz"Nas opções, substitua "caixa de luz"Defina para "ser". Uma vez configurado, o efeito lightbox será ativado quando clicar na imagem, a imagem será apresentada como uma ampliação e o fundo da página será escurecido.

Passo 6: Pré-visualize e publique a página

Depois de concluir os passos acima, pré-visualize a página para garantir que o efeito de lightbox foi aplicado com êxito.

1. Clique na imagem para ver se o efeito da caixa de luz está normal.
2. Se os resultados forem os esperados, a página pode ser guardada e publicada.

Na pré-visualização, se clicar na imagem, deverá ativar o efeito de lightbox e fazer com que a imagem seja apresentada ampliada. Se o efeito de lightbox funcionar corretamente, pode guardar ou publicar a página com segurança.

observações finais

A implementação de efeitos de lightbox no Elementor é muito simples e não requer a utilização de quaisquer plug-ins adicionais. Isto não só poupa recursos do plugin, como também melhora o desempenho do seu sítio. Se o seu sítio precisar de apresentar a capacidade de ampliar uma imagem, o efeito de caixa de luz é uma boa escolha e espero que os passos detalhados neste artigo o ajudem a implementar esta funcionalidade com êxito.