Imagem Avançada
Uma imagem no seu site deve fazer mais do que apenas sentar lá O elemento Advanced Image sobrecarrega a imagem básica com recursos inteligentes e interativos Crie efeitos atraentes de hover “antes e depois do”, adicione fitas elegantes “NEW” ou “SALE”, aplique efeitos de inclinação dinâmica no movimento do mouse e até mesmo adicione sombras coloridas Com controle total sobre lightboxes, links e todos os aspectos do estilo, você pode transformar qualquer imagem em um conteúdo envolvente que orienta os visitantes e aumenta a interação perfeita para vitrines de produtos, portfólios ou banners em destaque.
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
Cada imagem pode ser um gateway Vincule sua imagem diretamente a um URL, como uma página de produto ou seu plano de preços Alternativamente, habilite um Lightbox para permitir que os espectadores se concentrem na imagem em um pop-up bonito em tela cheia Escolha entre diferentes ícones da lightbox (como um botão de mais) e controle seu alinhamento Para desempenho, use a opção Preload Image para garantir um carregamento rápido, especialmente para efeitos de hover.
- Chamadas Diretas para Ação: Vincule imagens a páginas importantes, transformando o interesse visual em tráfego direto.
- Experiência aprimorada na galeria: permite que os usuários visualizem imagens em detalhes com uma elegante caixa de luz.
- Desempenho otimizado: pré-carregue imagens de hover para evitar um atraso ou “flash” na primeira interação.
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.
Usar o Efeito de Inclinação e a Sombra Colorida irá desacelerar minha página?
Estes efeitos usam CSS, que é geralmente leve No entanto, usá-los em um número muito grande de imagens em uma única página (como em uma grade densa e 100 + imagens) poderia contribuir para uma carga mais pesada no dispositivo do usuário usá-los seletivamente em imagens-chave para o melhor desempenho e impacto.
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.
Qual é o melhor uso para a configuração 'Pré-carregar imagem'?
Habilite a Imagem de Pré-carregamento (definida como 'On') quando estiver usando o recurso Imagem Hover Isso força o navegador a carregar a segunda imagem quando a página é carregada, mesmo que esteja oculta Isso evita um atraso perceptível ou um flash em branco na primeira vez que um usuário paira sobre a imagem, garantindo uma experiência de usuário suave.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
