Como Adicionar Efeitos de Hover de Imagem no WordPress (5 Maneiras Fáceis)

Adicionar um efeito de hover ao seu site pode parecer um detalhe pequeno, mas pode melhorar a aparência e a usabilidade do site. Quando os visitantes passam o mouse sobre uma imagem ou botão e veem que ele muda ligeiramente, isso sinaliza que o elemento é interativo. 

Este movimento sutil melhorará o engajamento e ajudará a reduzir as taxas de rejeição. Os efeitos de hover são especialmente úteis no comércio eletrônico. Eles permitem que os compradores visualizem os produtos mais de perto, incentivando-os a explorar mais e prosseguir para a finalização da compra.

Existem muitas maneiras de adicionar efeitos de hover de imagem no WordPress, desde simples desaparecimentos até animações de virada atraentes. Abaixo, você encontrará vários métodos para começar!

Como Adicionar Efeitos de Hover de Imagem no WordPress

Neste artigo, reunimos cinco maneiras fáceis de adicionar efeitos de hover ao seu site. Escolha a que funciona melhor para você!

Método 1: Usando um Plugin

Um plugin economizará muito tempo e esforço, especialmente se você quiser usar vários efeitos hover no mesmo site.

Por exemplo, se você tiver várias galerias de imagens, pode aplicar animações diferentes a cada uma, como um zoom simples para miniaturas de blog ou um efeito de virar para imagens de produtos.

Usar um plugin como o Image Hover Effects Ultimate torna este processo muito mais fácil. Este plugin é gratuito para todos e oferece uma ampla gama de efeitos para cada elemento. Para começar, basta instalá-lo seguindo o tutorial abaixo: 

Instalando um Plugin

• Abra a área de administração do WordPress.
• Clique Adicionar Plugin no menu Plugins na barra lateral.

• Digite Image Hover Effects Ultimate na barra de pesquisa.

• Selecione o primeiro resultado e clique Instalar Agora para iniciar o download.
• Uma vez que a instalação esteja completa, clique no botão Ativar para começar a usar o plugin.

Usando o Plugin de Efeitos de Hover de Imagem do WordPress

• Uma vez que o plugin esteja instalado, você verá um novo menu Image Hover no seu painel de controle.

• Clique no menu para abrir as configurações do plugin. 

• Escolha qualquer efeito que você gostaria de usar. Para este tutorial, vamos experimentar o Image Magnifier.
• Depois de selecionar o efeito, você verá uma variedade de estilos de animação.

Quando você encontrar um que você gosta, clique em Criar Estilo.

• Um pop-up aparecerá. Insira um título no campo Nome e selecione um efeito do layout (1º, 2º ou 3º). Em seguida, clique em Salvar para continuar.
• Você será levado a uma nova página onde poderá personalizar as configurações, como altura, largura e opacidade. Brinque para ver o que parece melhor.

• Uma vez que você esteja satisfeito com as configurações, clique em Editar para personalizar sua imagem.

• Outro pop-up aparecerá. Aqui você pode personalizar a posição de magnificação. 

• Você também pode substituir a imagem clicando no botão Escolher Imagem.
• Depois de configurar tudo, clique Enviar para salvar seu efeito hover.

• Para aplicar o efeito ao seu site, copie e cole o shortcode no seu post ou página. 

• Agora seu efeito de hover de imagem simples está pronto para ser usado em qualquer parte do seu site. 

Método 2: Usando CSS

Você não precisa instalar nenhum plugin para este método. Usando CSS personalizado, você pode adicionar vários efeitos de hover ao seu tema.

Vamos começar com algo simples, como um efeito de hover de sublinhado. Se você quiser adicionar este efeito ao seu tema, siga os passos fáceis abaixo:

• Navegue até a postagem onde você deseja adicionar um efeito hover.
• Adicione uma imagem clicando no bloco Capa a partir do +.

• Insira seu conteúdo no bloco Capa. Aqui vamos adicionar um título e um botão.

• Defina a fonte e os estilos ao seu gosto.
• Salve a página como rascunho.
• Em seguida, vá para o menu Aparência no seu painel de controle.

• Em seguida, clique Personalizar e vá para CSS Adicional. Adicione o seguinte código:

corpo { exibir: flex; justificar-conteúdo: centro; alinhar-itens: centro; altura: 100vh; fundo: #0f0f0f; margem: 0; família-fonte: Arial, sem serifa; } .sublinhado-hover { tamanho-fonte: 2rem; cor: #ffffff; posição: relativa; exibir: bloco-inline; } .sublinhado-hover::depois, .sublinhado-hover::antes { conteúdo: ''; posição: absoluta; largura: 100%; altura: 2px; fundo: gradiente-linear(para direita, #ff0000, #00ffff); parte-inferior: -5px; esquerda: 0; transformar: escalaX(0); origem-transformação: direita; transição: transformar 0.4s saída-suave; } .sublinhado-hover::antes { topo: -5px; origem-transformação: esquerda; } .sublinhado-hover:hover::depois, .sublinhado-hover:hover::antes { transformar: escalaX(1); }
 

• Clique Publicar para salvar o código.

• Agora volte para a sua postagem e selecione o texto ao qual você deseja aplicar o efeito de sublinhado.
• Abra a seção Avançado na barra lateral do bloco e insira underline-hover no campo Classe(s) CSS adicional(is).

• Salve a página e visualize-a para ver o efeito. 

Existem tantos efeitos de hover para escolher, então escolha o que melhor se adequa ao seu estilo. Você pode aprender a escrever o CSS você mesmo ou encontrar exemplos da comunidade WordPress. Está tudo lá fora!

Método 3: Usando Construtores de Página (por exemplo, Elementor)

Um construtor de páginas como o Elementor permite que você construa seu site com muita criatividade. Ele tem efeitos de hover integrados, todos prontos para usar para dar vida ao seu site sem exigir qualquer codificação.

Você também pode usá-lo para criar efeitos de hover de imagem no WordPress. Nesta seção, vamos experimentar os efeitos de hover integrados dentro do próprio construtor de páginas.

Para configurar os efeitos:

• Abra o Elementor editor no painel de administração.
• Adicione sua imagem.

• Selecione sua imagem, em seguida, vá para a guia Estilo.
• Role para baixo e clique em Hover.

• No menu suspenso Animação ao passar o mouse, você encontrará uma variedade de efeitos prontos para uso.

• Aqui, escolhemos o efeito Crescer como exemplo. Você pode personalizar a duração da transição, opacidade e outras configurações para combinar com o design do seu site.

• Depois de concluído, você poderá ver o efeito imediatamente sem precisar pré-visualizá-lo. 

Método 4: Usando Plugins Flipbox

Se você está procurando um atalho, você pode instalar o plugin flipbox. Um efeito flipbox é quando uma imagem vira para revelar conteúdo na frente ou atrás quando você passa o mouse sobre ela.

Este efeito é ótimo para imagens de fotografia, onde você pode exibir a foto na frente e detalhes da câmera no verso. Mas as possibilidades são infinitas.

• A partir do seu painel do WordPress, clique no menu Plugins. Em seguida, selecione Adicionar Plugin.
• Digite Flipbox - Awesome Flip Boxes Image Overlay na barra de pesquisa.

• Clique Instalar agora, e Ative o plugin.

• Para criar um flipbox, vá para o menu Flip Box e clique em Criar Novo.
• Escolha qualquer animação que você goste. Uma vez que você tenha encontrado uma, clique Criar Estilo.

• Uma janela pop-up irá aparecer. Selecione o layout desejado (1º, 2º ou 3º) e insira um título. 

• Clique Salvar para continuar.
• Em seguida, você será levado ao menu de personalização onde você pode definir os efeitos e adicionar seu conteúdo.

• Role para baixo para encontrar a guia Pré-visualização. Clique em Editar para personalizar o conteúdo para a frente e para trás do flipbox.

• Uma vez que você tenha terminado, clique Enviar para salvar.

• Para adicionar este flipbox à sua página, simplesmente copie e cole o shortcode gerado em qualquer seção do seu site. 

• E pronto, aqui está o produto final! 

Método 5: Usando Blocos Gutenberg

Gutenberg é o editor de blocos padrão do WordPress que permite adicionar efeitos de hover diretamente dentro do editor.

Embora não ofereça efeitos de hover avançados, você pode melhorar as animações usando CSS personalizado.

Como exemplo, vamos fazer um efeito de fade simples ao passar o mouse. Aqui está o tutorial passo a passo:

• Navegue até a postagem ou página onde você deseja adicionar o efeito de hover.
• Clique no + para adicionar um novo bloco, então escolha o bloco Capa.

• Dentro do bloco Capa, adicione um bloco Parágrafo.

• Insira seu título e uma breve descrição.
• Personalize o tamanho da fonte, opacidade, alinhamento e cor conforme necessário.

• Em seguida, selecione o bloco Capa para adicionar uma classe CSS personalizada.
• Abra a Avançado seção na barra lateral direita.
• Insira fade-hover-effect no campo Classe CSS Adicional .

• Depois disso, salve a página como rascunho.

• Vá para o menu Plugins e selecione o plugin de snippet de código. Neste exemplo, estamos usando WPCode.
• Crie um novo snippet CSS, então cole o seguinte código:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Salve o snippet e ative-o.
• Agora, visualize sua página para ver o efeito de hover fade em ação.

Você pode reutilizar este efeito adicionando a classe fade-hover-effect a qualquer bloco ou imagem. Mas se você estiver lidando com muitas imagens, considere usar um plugin como WP Media Folder para organizar sua biblioteca de mídia em pastas. Isso torna mais fácil encontrar e reutilizar conteúdo relacionado.

O Uso Excessivo de Efeitos Afeta o Desempenho?

Sim, usar muitos efeitos de hover em seu site pode potencialmente afetar o desempenho, especialmente se não for otimizado corretamente. Isso ocorre porque alguns efeitos de hover exigem CSS adicional. O tamanho do CSS do seu site pode aumentar e diminuir os tempos de carregamento da página.

É melhor usar apenas efeitos de hover essenciais para melhorar a experiência do usuário sem sobrecarregar seu site.

Conclusão

Aprender a adicionar efeitos de hover em imagens no WordPress pode ajudar a impulsionar seu site, melhorando a interação do usuário e mantendo-os engajados.

Com várias maneiras de adicionar efeitos de hover, seja por meio de plugins, CSS personalizado ou construtores de página, você tem a liberdade de escolher o que funciona melhor para você. Experimente diferentes estilos para encontrar o que melhor se ajusta ao seu site!