Widget de imagem de elementor gratuito com troca, fita e inclinação do Hover
Advanced Image é um widget gratuito de Master Addons que adiciona extras a uma única imagem Troque para uma segunda imagem no hover, coloque uma fita Simples, de Canto ou Cruzada em qualquer canto, abra a imagem em uma caixa de luz com um botão de adição opcional e adicione um efeito de inclinação que segue o cursor ou uma sombra colorida Enquanto a imagem carrega você pode mostrar um espaço reservado desfocado ou um spinner Estilo normal e hover estados com borda, fundo e sombra de caixa.
Como adicionar uma troca de imagem do Hover no Elementor
Você precisa do Elementor e do plugin gratuito Master Addons do WordPress.org.
- Verifique se a Imagem Avançada está ligada em Complementos mestres, widgets.
- No editor Elementor, procure por Imagem Avançada e arraste-o para a página.
- Escolha a imagem principal e um link de imagem, se necessário.
- Ligar Exibir imagem do Hover e escolha a segunda imagem, idealmente do mesmo tamanho.
- Adicione uma faixa de opções, caixa de luz, inclinação ou sombra colorida das seções Conteúdo e Configurações A Sombra Colorida não funciona em conjunto com a imagem do hover.
- Estile os estados Normal e Hover na guia Estilo.
Cada configuração é coberta pelo Configurações avançadas de widgets de imagem.
Imagem Hover & Efeitos Inteligentes
Crie comparações instantâneas de “antes e depois do” ou revelações simples de hover Carregue sua imagem principal e, em seguida, habilite o Hover Image para fazer upload de uma segunda imagem. Quando os visitantes pairam, a imagem muda perfeitamente Adicione uma camada de sofisticação com o Efeito de Inclinação, que faz a imagem inclinar-se ligeiramente à medida que o mouse se move sobre ela, adicionando uma sensação sutil de 3 D. Para profundidade extra, permita que o Colorized Shadow coloque uma sombra suave e colorida atrás da imagem, fazendo-a sair da página.
- Comparações interativas: Perfeito para mostrar um produto antes e depois, ou uma visão dia/noite de uma propriedade.
- Efeito de inclinação envolvente: adiciona uma camada moderna e interativa que responde ao movimento do cursor.
- Profundidade Visual: Use a Sombra Colorida para criar separação e foco sem elementos extras de design.
Fitas e etiquetas personalizáveis
Destaque suas imagens com fitas profissionais Ative o recurso Ribbon para adicionar um rótulo como “NEW DESIGN,” “BESTSELLER,” ou “SOLD OUT.” Escolha entre diferentes Estilos de Fita (como Canto ou Cruz ou Simples) e defina a Posição (Top/Bottom, Esquerda/Direita) Personalize totalmente as cores, tipografia e espessura da fita para garantir que ela complemente sua imagem e marca perfeitamente.
- Destaque as principais informações: comunique instantaneamente o status, a promoção ou a categoria diretamente na imagem.
- Posicionamento Flexível: Coloque a fita em qualquer canto para evitar cobrir partes importantes da imagem.
- Controle de estilo completo: combine o plano de fundo, a cor do texto e a fonte da fita com o idioma de design do seu site.
Adicionar Link & Integração Lightbox
Adicionar um Link de imagem para enviar visitantes a um produto ou página, ou ligue Abra em lightbox então um clique mostra a imagem em tamanho real O Botão icônico opção adiciona um ícone de mais sobre a imagemLigar Pré-carregar imagem para mostrar um espaço reservado enquanto a imagem carrega: uma visualização desfocada, uma caixa de progresso ou um girador azul, claro ou escuro.
- Link para uma página de produto ou abra uma lightbox em tamanho real.
- Alinhamento esquerdo, central ou direito em sua coluna.
- Um espaço reservado de carregamento para imagens grandes.
Controle detalhado de estilo e dimensionamento
Obtenha controle completo do design sobre a apresentação da sua imagem Defina a Largura Máx exata e a Altura Máx. Aplique o Raio de Fronteira individualmente em cada canto para formas exclusivas Estilo os estados Normal e Hover separadamente com bordas, fundos e sombras de caixa Isso garante que sua imagem pareça perfeita em todos os contextos e durante cada interação.
- Dimensionamento Responsivo: Controle as dimensões da imagem com precisão sem depender de um dimensionamento automático imprevisível.
- Formas personalizadas: crie imagens circulares, retângulos arredondados ou bordas assimétricas exclusivas.
- Estilo específico do estado: adicione uma borda ou sombra apenas ao passar o mouse para indicar visualmente que a imagem é interativa.
Perguntas frequentes para imagens avançadas
O efeito Hover Image é compatível com telas sensíveis ao toque móveis?
Sim, mas funciona um pouco diferente Em dispositivos de toque, o primeiro toque geralmente acionará o efeito hover (trocando a imagem), se você não ativou a lightbox Mas se você ativou a lightbox, então lightbox terá mais prioridade e ao tocar a primeira imagem abrirá na lightbox.
O widget Imagem Avançada é gratuito?
Sim. Advanced Image faz parte do plugin gratuito Master Addons com a imagem hover, fitas, lightbox, inclinação, sombra colorida e todas as opções de estilo.
Como isso é diferente do widget básico de imagem do Elementor?
O widget básico do Elementor permite adicionar uma imagem, um link, uma legenda e algum estilo simples O elemento Advanced Image adiciona um conjunto de recursos profissionais: Hover Image swap, Ribbons/Labels, Tilt Effect, Colorized Shadow, estilo de estado Normal/Hover separado e controles de lightbox mais granulares Ele foi projetado para criar apresentações de imagens mais envolventes e interativas.
Posso usar o recurso de fita sem uma imagem hover ou outros efeitos?
Absolutamente! cada recurso é independente Você pode ter apenas uma imagem com uma fita, ou apenas uma imagem com um efeito de inclinação Você pode misturar e combinar recursos como quiser Habilite apenas aqueles que você precisa para o seu objetivo de design específico.
O que faz a configuração Preload Image?
A imagem de pré-carregamento mostra um espaço reservado enquanto a imagem é carregada, para que os visitantes não vejam um espaço vazio Escolha em branco, uma imagem de espaço reservado desfocada, uma animação de caixa em andamento ou um spinner de carregamento azul, claro ou escuro É mais útil para imagens grandes.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
