Como Adicionar Zoom de Ampliação para Imagens no WordPress

Você quer adicionar um zoom de ampliação semelhante ao da Amazon para imagens no WordPress? Um zoom de ampliação é mais do que apenas um recurso sofisticado, é uma ferramenta útil que permite aos seus visitantes ver pequenos detalhes em imagens que eles não conseguem ver normalmente. 

Recomendamos fortemente adicionar um recurso de zoom para lojas online, onde os clientes querem ver a textura e a qualidade dos itens. Também é útil para sites de fotografia, onde os espectadores querem ver cada detalhe em uma imagem.

Ao adicionar um zoom de ampliação às suas imagens, você pode melhorar a experiência do usuário, manter os usuários interessados por mais tempo e até mesmo aumentar as vendas.

Neste artigo, mostraremos como adicionar facilmente um zoom de ampliação para imagens no WordPress.

Por que Adicionar um Zoom de Ampliação para Imagens?

Adicionar um recurso de zoom de ampliação em seu site WordPress permitirá que os visitantes vejam os detalhes intrincados das imagens com clareza.

Se você tem um site de fotografia, então adicionar um recurso de ampliação permitirá que os usuários ampliem suas fotografias para ver os detalhes mais finos.

Da mesma forma, se você administra uma loja online, seus clientes poderão ampliar as imagens dos produtos.

Muitos grandes sites de comércio eletrônico já usam zoom de ampliação para imagens de produtos. Isso permite que os clientes examinem o produto e cria uma melhor experiência de compra em sua loja.

Dito isso, mostraremos como adicionar facilmente um zoom de ampliação para imagens no WordPress usando três métodos diferentes. Você pode usar os links abaixo para pular para o método de sua preferência.

• Método 1: Adicionar um Zoom de Ampliação para Imagens no WordPress com Envira Gallery (Recomendado)
• Método 2: Adicionar um Zoom de Ampliação para Imagens do WordPress com WP Image Zoom
• Method 3: Add a Magnifying Zoom for Images in WordPress with WPCode

Método 1: Como Adicionar um Zoom de Ampliação para Imagens no WordPress com Envira Gallery (Recomendado)

Envira Gallery é o melhor plugin de galeria para WordPress. Você pode usá-lo para criar facilmente belas galerias de imagens para o seu site WordPress. Ele também vem com um Addon de Zoom, que permite adicionar funcionalidade de zoom às suas imagens de galeria.

Outros recursos poderosos do Envira incluem um construtor de arrastar e soltar, temas de galeria pré-fabricados, pop-ups Lightbox, compressão de imagem, proteção de imagem e muito mais.

Para começar, você precisa instalar e ativar o plugin Envira Gallery. Para mais detalhes, você pode seguir nosso tutorial sobre como instalar um plugin do WordPress.

Após a ativação, você precisa ir para a página Envira Gallery » Configurações e inserir sua chave de licença. Você pode encontrar a chave de licença na área da sua conta Envira Gallery.

Depois disso, clique no botão ‘Verificar Chave’.

Em seguida, você precisa ir para Envira Gallery » Addons. A partir daqui, role para baixo para encontrar o Zoom Addon e clique no botão ‘Instalar’.

Assim que o Zoom Addon for instalado, você também precisa ativá-lo alternando o interruptor.

O próximo passo é adicionar uma nova galeria. Para fazer isso, vá para Envira Gallery » Adicionar Nova no painel do WordPress.

A partir daqui, você pode inserir um nome para sua galeria e clicar no botão ‘Selecionar Arquivos do Seu Computador’ para fazer upload de imagens para sua galeria.

Você também pode clicar no botão ‘Selecionar Arquivos de Outras Fontes’ para adicionar imagens da biblioteca de mídia do WordPress à sua galeria.

Depois de fazer o upload das imagens para sua galeria, você pode reorganizá-las arrastando e soltando as miniaturas no lugar.

Existem também outras opções para personalizar sua galeria de imagens. Por exemplo, você pode selecionar um layout de galeria, adicionar títulos de imagem e textos alternativos, habilitar o lightbox da galeria, mostrar legendas de imagem, editar dimensões de imagem e muito mais.

Para mais detalhes, consulte nosso guia sobre como criar galerias de imagens responsivas com Envira.

Configurar Configurações de Zoom de Imagem

Para adicionar um zoom de ampliação às suas imagens da galeria, clique na aba ‘Zoom’. Em seguida, marque a caixa para habilitar a funcionalidade de zoom.

Assim que a funcionalidade de zoom estiver habilitada, as configurações para adicionar zoom às suas imagens aparecerão.

Você pode configurar configurações como zoom ao passar o mouse, efeito de zoom, tipo de zoom, posição da janela de zoom, tamanho da janela de zoom, cor de tonalidade e muito mais.

Quando estiver satisfeito com as configurações de zoom, clique no botão ‘Publicar’ para salvar suas alterações e tornar esta galeria disponível.

Incorporando Sua Galeria de Imagens com Zoom de Ampliação

Agora que sua galeria está pronta, você pode adicioná-la diretamente a qualquer página ou postagem no WordPress.

Do editor de conteúdo do WordPress, clique no botão ‘+’ para adicionar o bloco Envira Gallery. Em seguida, clique no menu suspenso dentro do bloco Envira Gallery para escolher qual galeria exibir.

Em seguida, você verá uma prévia da sua galeria de imagens no editor de blocos do WordPress. Se você estiver satisfeito com a aparência, pode publicar a postagem ou página.

Agora você pode visitar seu site para ver o recurso de zoom de lupa em ação.

O Envira Gallery é um ótimo plugin para adicionar funcionalidade de zoom a sites de fotografia. Mas, ele também funciona perfeitamente para lojas online.

Para saber mais, veja nosso guia sobre como criar uma galeria de imagens de produtos WooCommerce.

Método 2: Como Adicionar um Zoom de Lupa para Imagens no WordPress com WP Image Zoom

O WP Image Zoom é um plugin gratuito do WordPress que permite criar facilmente uma lupa em suas imagens.

Primeiro, você precisa instalar e ativar o plugin WP Image Zoom. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Usaremos a versão gratuita neste tutorial, mas se você quiser mais opções de personalização, talvez queira conferir o WP Image Zoom Pro. Você pode aprender mais sobre o plugin em nossa análise do WP Image Zoom.

Após a ativação, você precisa ir para a página WP Image Zoom » Zoom Settings na barra lateral de administração do WordPress.

Em seguida, você precisa configurar as configurações do efeito de zoom alternando para a aba ‘Zoom Settings’ e escolhendo um formato de lente que deseja usar.

Você pode escolher entre os formatos de lente círculo, quadrado e janela de zoom. Você pode até escolher a opção ‘No Lens’ (⨯) se não quiser usar um formato para o efeito de ampliação.

Após escolher sua lente preferida, você precisa rolar para baixo até a próxima etapa, onde pode visualizar uma imagem com a lente selecionada para ver como ela funciona. O plugin tem uma imagem de pré-visualização que você pode usar para testar suas alterações.

Em seguida, você precisa alternar para a aba ‘General’.

A partir daqui, você pode selecionar um tipo de cursor, definir um efeito de animação, habilitar o zoom ao passar o mouse ou ao clicar com o mouse e definir um nível de zoom.

Se você quiser ainda mais opções, alguns dos recursos estão disponíveis apenas para a versão pro do plugin WP Image Zoom.

Após fazer suas escolhas de acordo, basta ir para a aba ‘Lens’ (Lente) no topo.

Agora você pode configurar configurações como tamanho da lente, cor da lente, opções de borda da lente e mais, se você selecionou a lente ‘círculo’ ou ‘quadrado’ na Etapa 1.

Se você selecionou a Lente de Janela de Zoom, então você precisa mudar para a aba de configuração ‘Zoom Window’ (Janela de Zoom).

A partir daqui, você pode alterar a largura e a altura da janela de zoom, posicionamento, distância da imagem principal, cores da borda e mais.

Em seguida, você só precisa clicar em ‘Save Changes’ (Salvar Alterações) para armazenar suas configurações.

Depois disso, tudo o que você precisa fazer é configurar algumas configurações gerais.

Configurar Configurações Gerais do Plugin

Em seguida, você precisa mudar para a aba General Settings (Configurações Gerais) nas configurações do plugin.

A partir daqui, você pode agora habilitar recursos como zoom em imagens de produtos do WooCommerce, miniaturas, dispositivos móveis, páginas de anexos, páginas de categorias de produtos e mais.

Tudo o que você precisa fazer é simplesmente marcar as caixas ao lado dessas opções.

Você também pode remover o efeito lightbox, para que os usuários possam dar zoom suavemente nas imagens.

No entanto, você precisaria da versão Pro do plugin para este recurso.

Se você não for remover o lightbox para imagens, então você precisa rolar para baixo até a opção ‘Enable inside a Lightbox’ (Habilitar dentro de um Lightbox) e marcar a caixa ao lado dela.

Nota: Você pode ver os lightboxes suportados para garantir que o zoom funcione bem dentro de um lightbox em seu site.

Assim que terminar de ajustar as configurações, não se esqueça de clicar no botão ‘Salvar Alterações’ para armazenar suas configurações.

O zoom de ampliação agora estará habilitado para produtos WooCommerce.

Você pode visitar sua loja online para conferir nosso recurso de zoom.

No entanto, se você quiser habilitar o zoom para imagens em posts e páginas do WordPress, você precisa seguir o passo abaixo.

Habilitar Zoom de Ampliação para Imagens no Editor de Blocos

Por padrão, o zoom de ampliação não está habilitado para imagens em seus posts e páginas. Você precisa fazer isso manualmente após adicionar uma imagem ao seu conteúdo.

Primeiro, você precisa abrir um post que deseja editar no editor de blocos.

Em seguida, você precisa carregar uma imagem para esse post a partir da biblioteca de mídia ou do seu computador.

Depois de fazer isso, basta clicar na imagem para abrir o painel de Configurações do Bloco no canto direito da tela.

A partir daqui, basta ir para a aba ‘Estilos’ e clicar no botão ‘Com Zoom’ para aplicar o zoom de ampliação à sua imagem.

Depois disso, basta clicar no botão ‘Atualizar’ ou ‘Publicar’ no topo para armazenar suas configurações.

O recurso de zoom ficará assim no seu site:

Observação: Você precisará repetir este passo cada vez que quiser adicionar o efeito de zoom a uma imagem individual.

Método 3: Como Adicionar um Zoom de Ampliação para Imagens no WordPress com WPCode

Você também pode adicionar um recurso de zoom de ampliação às suas imagens no WordPress usando o plugin gratuito WPCode.

O WPCode é o melhor plugin de snippets de código do mercado, permitindo que você adicione código personalizado ao seu site de forma segura e fácil. Ele vem com mais de 393 snippets de código prontos que você pode adicionar em apenas alguns cliques, incluindo uma lupa para imagens.

Para começar, você precisa instalar e ativar o plugin gratuito WPCode. Se precisar de ajuda, consulte nosso tutorial sobre como instalar um plugin do WordPress.

Após a ativação, vá para Snippets » Biblioteca no seu painel do WordPress.

Isso o levará à Biblioteca de Snippets, onde você pode ver todos os diferentes snippets que você pode adicionar ao seu site.

A partir daqui, basta procurar pelo snippet ‘Lupa para Imagens’ na biblioteca.

Assim que encontrá-lo, passe o mouse sobre ele e clique no botão ‘Usar snippet’.

O WPCode adicionará automaticamente o código para você, além de selecionar o método de inserção correto.

Agora, tudo o que você precisa fazer é alternar o interruptor de ‘Inativo’ para ‘Ativo’ e, em seguida, clicar no botão ‘Atualizar’.

É isso! Ao visitar seu site WordPress, você verá que todas as suas imagens terão uma lupa que aparece quando você passa o mouse sobre elas.

Observação: Recomendamos o uso de imagens de alta qualidade para que o recurso de zoom fique ótimo. Imagens de alta qualidade normalmente são maiores em tamanho de arquivo e levam mais tempo para carregar, o que afetará a velocidade e o desempenho do seu site.

Para resolver esse problema, você precisa otimizar suas imagens para a web antes de carregá-las no WordPress.

Tutorial em Vídeo

Se você não é fã de tutoriais escritos, pode assistir ao nosso tutorial em vídeo:

Inscreva-se no WPBeginner

Esperamos que este artigo tenha ajudado você a aprender como adicionar zoom de lupa para imagens no WordPress. Você também pode querer ver nosso guia sobre como otimizar imagens para mecanismos de busca e nossas principais escolhas para os melhores plugins de compressão de imagem.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.