Como adicionar facilmente efeitos de ampliação de imagem no WordPress

Com as telas dos dispositivos cada vez menores, fornecer aos visitantes a capacidade de ampliar imagens facilmente é mais importante do que nunca. Um ampliador de imagem permite “aumentar o zoom” em áreas específicas de uma imagem. O restante da imagem permanece no tamanho original, com apenas a área de interesse ampliada.

Há anos que temos a tecnologia necessária para ampliar imagens, mas implementar o efeito tem sido complicado e demorado. Se você está procurando um plugin WordPress de zoom de imagem para facilitar, você está com sorte. Nós vamos usar o Efeitos de foco de imagem finais plugin para obter o efeito em minutos.

Sem código, sem confusão, sem confusão! Vamos direto ao assunto.

Instalando o plug-in final do Image Hover Effects

Faça login no painel de administração do WordPress.

Na navegação da coluna esquerda, passe o mouse sobre o link “Plugins” e clique no link “Adicionar Novo”.

Na caixa “Pesquisar plug-ins…”, digite “Image Hover Effects Ultimate”.

Depois de localizar o plugin, clique no botão “Instalar agora”.

Por fim, clique no botão “Ativar”.

Ler:  Como alterar os preços no WooCommerce de acordo com o país

Amplie imagens usando o Image Hover Effects Ultimate

Da forma como o plugin funciona, você cria um “Estilo” de ampliação de imagem. O Estilo controla como funciona a ampliação da imagem, bem como outras opções de configuração. Você pode adicionar várias imagens a um estilo. Todas as imagens de um determinado estilo são exibidas juntas em uma coluna na página ou postagem.

Existem oito etapas envolvidas na configuração de um estilo para ampliar imagens, portanto esta seção é um pouco longa. Numerei as etapas para que você possa seguir em frente com calma.

1. Acesse a imagem flutuante

Na navegação da coluna esquerda, passe o mouse sobre o link “Image Hover” e clique no link “Image Hover”.

2. Use o ampliador de imagem

Clique no bloco “Ampliador de imagem”.

Você verá as três opções para ampliar imagens. Um exibe a imagem ampliada à direita, outro à esquerda e o outro exibe a parte ampliada da imagem sobre a imagem original.

Passe o mouse sobre as imagens de demonstração para escolher qual opção você gostaria de usar.

3. Crie o novo estilo

Clique no botão “Criar estilo”.

Um pop-up “Nova imagem flutuante” será aberto.

4. Nomeie e salve o estilo

Dê um nome ao estilo no campo “Nome”.

Escolha o estilo de ampliação desejado nos botões “Layouts”. (1º amplia para a direita, 2º amplia a imagem, 3º amplia para a esquerda.)

Clique no botão “Salvar”.

Uma página de configuração será aberta.

5. Abra um formulário

Clique no bloco “Abrir formulário de lupa”.

Um pop-up “Image Hover Form” será aberto.

6. Abra a biblioteca de imagens

Na seção “Tipo de mídia”, você tem a opção de escolher uma imagem da sua biblioteca de mídia ou um URL. Para esta demonstração, selecionaremos uma imagem existente da Biblioteca de Mídia.

Ler:  Quais links você deve usar Nofollow em seu site WordPress?

Na seção “Imagem”, passe o mouse sobre o título e clique no link “Escolher imagem”.

7. Escolha sua imagem

Sua biblioteca de mídia será aberta. Clique na imagem à qual deseja adicionar ampliação e clique no botão “Escolher imagem”.

8. Ajuste e envie

Agora estamos de volta ao pop-up “Image Hover Form”. Você deverá ver a imagem selecionada em sua biblioteca de mídia no painel de visualização.

Quero que a lupa fique no topo da imagem, então definirei a “Posição Magnifi” como “Nenhum”. (Não sei por que a configuração é “Nenhum” e não “Top”, mas é.)

Deixaremos a configuração “Posição Correta” de lado. Isso afeta onde a imagem ampliada aparece quando a ampliação é definida para um lado. Como não vamos ampliar as imagens para o lado, isso deve ficar em “0”.

Clique no botão “Enviar”.

Adicionando a imagem ampliada a uma página ou postagem

Ok, criamos um estilo e adicionamos uma imagem. Agora vamos inserir a imagem em uma página ou post.

Ainda estamos na página de edição de estilo, e abaixo do bloco onde adicionamos a imagem, há uma seção “Shortcode”. Em nosso exemplo, o shortcode é [iheu_ultimate_oxi id=”1″].

Copie o código de acesso.

Abra uma página ou postagem e insira um bloco de shortcode.

Cole o código de acesso da lupa no bloco. Se você estiver usando o editor clássico do WordPress, basta colar o código de acesso na página da mesma forma que colaria qualquer texto.

Clique no botão “Atualizar” para salvar a página.

Agora, ao visualizar a página, sua imagem é exibida onde o shortcode foi inserido. Passe o mouse sobre a imagem para ver o efeito de ampliação.

Ler:  Como conectar o controlador PS4 ao PS4 sem USB?

Não consigo demonstrar o efeito de ampliação da imagem ao passar o mouse em uma imagem estática, mas está funcionando. 😉

Amplie várias imagens adicionando outra imagem ao estilo

Na navegação da coluna esquerda, passe o mouse sobre o link “Image Hover” e clique no link “Shortcode”.

Esta página contém uma lista de seus estilos.

Na coluna “Nome”, você pode ver o nome que dei ao estilo quando o configuramos, “ImageMag”. O shortcode também pode ser copiado desta página. Também existe código PHP para oferecer aos usuários avançados a capacidade de inserir estilos em modelos.

Clique no botão “Editar”.

Agora estamos de volta à familiar página de edição.

Para adicionar uma segunda imagem, passe o mouse sobre o ícone do sinal de mais (+) na seção “Adicionar nova lupa”. Repita as etapas 5 a 8 acima para adicionar uma imagem.

Quando a segunda imagem for adicionada, role para baixo até a seção “Visualizar”. Você verá a segunda imagem abaixo da primeira imagem que adicionamos quando criamos o estilo.

Então, se você for para a página onde adicionamos o shortcode, você verá as duas imagens.

O plugin faz mais do que ampliar imagens no WordPress

Como você deve ter notado na seção “Efeitos de imagem” do plugin, ele faz mais do que apenas ampliar ou ampliar.

Existem inúmeras ferramentas de passar o mouse sobre imagens, a maioria delas envolvendo legendas. Existem animações de botões e a minha favorita, a função “Comparação de imagens”. Faça um favor a si mesmo e veja o que mais o plugin pode fazer.

O que acontece se você desinstalar o plugin Image Hover Effects Ultimate

Se você desinstalar o plugin, as páginas e postagens que usaram o plugin serão afetadas.

  • Os estilos que você criou serão excluídos.
  • Os códigos de acesso do plug-in irão parar de funcionar, então os próprios códigos de acesso serão exibidos em qualquer lugar em que foram usados.
Ler:  Como adicionar um widget no WordPress

Compatibilidade de tema

Devo dizer que tive problemas de compatibilidade de tema com este plugin. O que é estranho, considerando que foi atualizado há um mês.

Para cada tutorial que faço, começo com uma nova instalação da versão mais recente do WordPress. Isso inclui o tema padrão mais recente do WordPress (que neste caso era Twenty Twenty).

O efeito de ampliação não funcionou em Twenty Twenty. Ou o tema padrão anterior, Twenty Nineteen. Tive que voltar ao tema Twenty Seventeen para fazê-lo funcionar (não havia tema Twenty Eighteen).

Isso não significa que não funcionará no seu tema.

Mas quando estou testando plugins, limito-me aos temas que acompanham a instalação do WordPress. Então, estou informando como foi o desempenho nesses temas.

Dizem que os olhos são as janelas da alma

Não sei se isso é verdade, mas sei que somos criaturas visuais. Usamos imagens na web desde a primeira versão do navegador Mosaic (pergunte sobre isso aos seus avós).

Tudo o que pudermos fazer para melhorar a apresentação das imagens nos ajuda a reter visitantes. Assim, à medida que muitos de seus visitantes migram para telas menores, permitir que vejam os detalhes da imagem com mais facilidade é uma vantagem. O ampliador de imagem que falamos aqui hoje faz isso e muito mais.

Você usou versões manuais mais antigas de ampliadores de imagem em seu site? Você acha que um plugin WordPress como este encorajaria você a usar a ampliação de imagens com mais frequência? Deixe-me saber nos comentários.

Novas publicações:

Recomendação