ElementsKit é um complemento Elementor completo que oferece a capacidade definitiva de criar sites com WordPress. Com mais de 85 widgets e extensões altamente personalizáveis, este plug-in cobre quase tudo que você precisa para projetar sites WordPress sofisticados e elimina a necessidade de plug-ins individuais.

O Widget Elementor Image Hover Effect do ElementsKit é um recurso interativo que torna seu web design animado. Você pode adicionar animações instantâneas às imagens estáticas e torná-las interativas e envolventes para os usuários.

Ao usar efeitos de foco de imagem, animações aparecerão quando os usuários passarem o ponteiro do mouse sobre a imagem. O widget também suporta textos de sobreposição, portanto você pode mostrar texto em imagens de uma forma elegante usando o widget de efeito de foco de imagem Elementor.

Etapa 1: configurar o widget de efeito de foco de imagem Elementor #

Primeiro, abra o editor Elementor e arraste o widget de efeitos de foco de imagem do ElementsKit para o seu design. Em seguida, defina as configurações do efeito de foco da imagem do widget no guia de conteúdo.

1.1 Estilos de foco de imagem #

Na seção Estilo de movimentação da imagem, você pode configurar os estilos de efeito de fundo e estilos de conteúdo.

Para configurar Efeito de fundo estilos:

• Primeiro, escolha uma imagem você deseja adicionar efeitos de foco.
• Em seguida, selecione o Tamanho da imagem.
• Finalmente, Escolha o efeito nas opções fornecidas no menu suspenso.

Observação: Para alguns dos efeitos de foco, existem opções adicionais. Assim, para o efeito cego, você pode selecionar o estilo cego como horizontal ou vertical. Da mesma forma, para o efeito Tons de cinza, algumas opções de estilo estão disponíveis: Tons de cinza para cores e Cores para escala de cinza.

Depois disso, você pode adicionar texto no topo da imagem no Elementor. Para configurar Contente para pairar: 

• Introduzir um Título. Você pode usar um formato diferente para uma determinada parte do título (Título em Foco), colocando-os entre chaves {}.
• Decidir Mostrar título ao passar o mouse ou para torná-lo sempre visível.

Ao ativar a opção, o título só ficará visível quando você passar o mouse. Caso contrário, o título estará sempre visível na imagem.

• Introduzir um Descrição.
• Decidir Mostrar descrição ao passar o mouse ou para torná-lo sempre visível.

Ao ativar a opção, a descrição só ficará visível quando você passar o mouse. Caso contrário, a descrição estará sempre visível na imagem.

• Você tem a opção de Usar botão junto com o conteúdo. Se você decidir mostrar um botão, insira o Botão de texto e URL do link do botão. Também pode decidir Mostrar botão ao passar o mouse ou torná-lo sempre visível.

[Nota: o botão não está disponível para estilo de texto diagonal.]

• Depois disso, você pode definir o Alinhamento de conteúdo e Estilo de texto para o conteúdo da imagem.

1.2 Animação de conteúdo #

Nesta seção, você pode definir a animação de entrada de conteúdo, animação de foco e durações de animação.

• Escolher Animação de entrada estilo da opção fornecida no menu suspenso.
• Definir Duração da animação do título em segundos.
• Definir Descrição Duração da Animação em segundos.
• Definir Duração da animação do botão em segundos.
• Escolha o Animação flutuante estilo da opção fornecida no menu suspenso.
• Para animações flutuantes como Pulse, Push, Pop e Hang, você pode decidir mostrar a animação em um loop infinito ativando o Use contagem de animação infinita opção.

Etapa 2: personalizar estilos de efeito de foco de imagem #

Você tem a opção de personalizar estilos de foco de imagem na seção Aba Estilo. 

2.1 Personalizar o estilo do título #

Para personalizar o Estilo do título para efeitos de foco de imagem:

• Colocou o Tipografia do título.
• Colocou o Tipografia de título focada.
• Ajusta a Margem para o título.

• Escolher Cor do título e Cor do título em foco. Você pode definir a cor normal e a cor ao passar o mouse para ambos os títulos.

2.2 Personalizar estilo de descrição #

Para personalizar o Estilo de descrição para efeitos de foco de imagem:

• Colocou o Descrição Tipografia.
• Definir individual Cores para estados Normal e Hover.
• Ajusta a Margem entre o conteúdo.

2.3 Sobreposição de plano de fundo #

Para Sobreposição de fundo do efeito de foco da imagem:

• Escolha o Tipo de plano de fundo entre cor clássica ou cor gradiente.
• Definir Cores de fundo para sobreposição de fundo.

2.4 Personalizar estilos de botão #

Se você usar o botão no conteúdo da imagem instantânea, terá opções para personalizar Botão estilos. Para personalizar os estilos dos botões:

• Botão de configuração Tipografia.
• Definir individual Cores do texto para estado normal e em foco.
• Escolha diferente Tipos de plano de fundo e Cores para estados normais e flutuantes.
• Ajusta a Preenchimento e Raio da Fronteira para o botão.

Finalmente, você poderá adicionar um efeito de foco estiloso em uma imagem usando o ElementsKit Efeito de foco de imagem Elementor ferramenta.