O widget de imagem Elementor padrão mostra uma imagem e a vincula a algum lugar. O grátis Widget de imagem avançado em Complementos Mestres para Elementor faz mais: ele troca para uma segunda imagem no hover, deixa cair uma fita de canto na parte superior, abre em uma caixa de luz e adiciona uma inclinação 3 D ou sombra colorida, tudo sem tocar em CSS.
Você define a imagem principal, uma imagem opcional de hover, uma fita e um punhado de efeitos do painel Elementor Isso o torna um bom ajuste para fotos de produtos, miniaturas de portfólio ou qualquer imagem que precise de um rótulo ou um pouco de movimento Este guia percorre todas as guias e configurações.
Prefere assistir primeiro? este pequeno tutorial percorre o widget Imagem Avançada de ponta a ponta:
O que o widget Imagem Avançada faz #
Em seu núcleo mostra uma imagem, mas ele camadas extras no topo Uma imagem hover troca quando o cursor está sobre ele, uma fita chama um rótulo como “NEW,” e a guia Configurações adiciona uma caixa de luz, um efeito de inclinação, e uma sombra colorida Tudo é configurado a partir do painel, de modo que a mesma imagem pode fazer muito mais do que um simples.
O widget possui quatro guias: Conteúdo para as imagens e fita, Configurações para comportamento como lightbox e inclinação, Estilo para dimensionamento e cores e Avançado para as opções usuais de espaçamento e visibilidade do Elementor.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Uma imagem para mostrar e uma segunda se você quiser a troca de hover.
Como adicionar o widget Imagem Avançada #
No editor Elementor, abra o Elementos painel e pesquisa Imagem Avançada, ou vá até a seção Complementos Mestres Arraste-a para sua página, Ele começa com um espaço reservado, então o primeiro passo é escolher uma imagem.
Defina a imagem #
No Conteúdo guia, o Imagem seção contém o básico Clique na caixa de imagem para escolher uma da Biblioteca de Mídia, defina o Resolução de imagem WordPress deve servir e adicionar um Link de imagem se a imagem deve ligar em algum lugar.
Adicionar uma imagem de hover #
O Imagem Hover seção é onde o widget ganha seu nome Ligue Exibir imagem do Hover e escolha uma segunda imagem Na página ao vivo, o widget mostra a primeira imagem e faz crossfades para a segunda quando alguém paira, o que é útil para frentes e costas de produtos ou fotos de antes e depois.
Adicionar uma fita #
O Fita seção adiciona um banner de canto sobre a imagemLigar Fita Exibição, defina o texto e escolha sua aparência.
- Texto: o rótulo, como NOVO ou VENDA.
- Estilo da fita: Simples, de canto ou de cruz.
- Posição da fita: coloque-o em qualquer canto, como Cima Direita ou Parte Inferior Esquerda.
- Espessura e largura da fita: dimensione a banda para caber no texto.
Configurações: lightbox, tilt e shadow #
O Configurações tab é onde o comportamento vive Estes são os extras que diferenciam o widget de uma imagem simples.
- Abra na caixa de luz: clique na imagem para abri-la em tamanho real em um pop-up. ativá-la adiciona uma opção de botão icônico (como um ícone de mais) sobre a imagem.
- Alinhamento: à esquerda, centro ou direita dentro de seu bloco.
- Imagem de pré-carga: mostra um espaço reservado enquanto a imagem é carregada, como uma visualização desfocada, uma animação de caixa de progresso ou um spinner de carregamento.
- Efeito de inclinação: adiciona uma inclinação 3 D que segue o cursor para um pouco de movimento.
- Sombra colorida: deixa cair uma sombra tingida das próprias cores da imagem Note que ela não está disponível enquanto a imagem do hover estiver ativa.
Estilize a imagem e a fita #
O Estilo tab lida com dimensionamento e cores O Imagem seção define a aparência da própria imagem.
- Largura máxima e altura máxima: tampe o tamanho da imagem.
- Raio Fronteiriço: contornar os cantos.
- Estados normais e Hover: defina Box Shadow, Border e background separadamente para descansar e pairar.
O Fita a seção de estilo controla a aparência do banner: cor de fundo, cor do texto, tipografia, sombras, deslocamentos de posição e raio da borda.
O resultado na página #
Publique ou visualize e a imagem será renderizada com sua fita colocada e os efeitos ao vivo: passe o mouse para trocar imagens, passe o mouse para inclinar ou clique para abrir a caixa de luz, dependendo do que você ligou.
Casos de uso comum #
- Produto tiros com uma troca de pairar da frente para trás ou ângulo alternativo.
- Miniaturas de portfólio que abrem tamanho completo na caixa de luz.
- Imagens promocionais com uma fita NOVA ou VENDA no canto.
- Gráficos recurso com uma inclinação sutil para o movimento.
- Imagens herói usando a sombra colorida para profundidade.
Dicas para trabalhar com o widget Imagem Avançada #
- Use dimensões correspondentes para a troca de hover. Imagens do mesmo tamanho evitam que o crossfade salte.
- Escolha a resolução de imagem correta. Servir um arquivo em tamanho real em um pequeno slot retarda a página; um tamanho médio ou grande geralmente é suficiente.
- Mantenha o texto da fita curto. Uma palavra se encaixa na faixa de canto de forma limpa.
- Pule a sombra colorida ao usar o hover swap. Os dois não correm juntos, então escolha um por imagem.
- Vá com calma na inclinação. Um pequeno movimento chama a atenção; muita coisa parece enigmática.
Perguntas frequentes #
O que é o widget Imagem Avançada em Master Addons?
É um widget de imagem Elementor com extras embutidos: uma troca de imagem hover, uma fita de canto, uma lightbox, um efeito de inclinação 3 D e uma sombra colorida Você define tudo isso a partir do painel Elementor, para que uma única imagem possa fazer muito mais do que o widget de imagem padrão permite.
Como faço a mudança de imagem ao passar o mouse?
Abra a guia Conteúdo, expanda a seção Imagem do Hover e ative Exibir imagem do Hover Em seguida, escolha uma segunda imagem Na página ao vivo o widget mostra a primeira imagem e faz o crossfades para a segunda quando um visitante passa o mouse sobre ela.
Posso adicionar uma fita ou crachá à imagem?
Sim. Na guia Conteúdo, abra a seção Fita e ative a Fita de exibição Defina o texto, escolha um estilo simples, canto ou cruz e escolha o canto. A guia Estilo permite definir sua cor, tipografia e posição.
O que é o efeito de inclinação?
O efeito de inclinação, encontrado na guia Configurações, adiciona uma inclinação 3 D que segue o cursor à medida que ele se move sobre a imagem Ele dá a uma imagem plana uma sensação de profundidade e movimento Use-o com moderação para que permaneça sutil em vez de distrair.
O widget Imagem Avançada suporta uma lightbox?
Sim. ligue Abrir na lightbox na guia Configurações e os visitantes podem clicar na imagem para visualizá-la em tamanho real em um pop-up Você também pode adicionar um botão icônico, como um ícone de mais, que aparece sobre a imagem para sinalizar que ela é clicável.
Embrulhando #
O widget Imagem avançada tira uma única imagem e adiciona os toques que geralmente tomam código personalizado: uma troca de hover, uma fita, uma caixa de luz, uma inclinação e uma sombra colorida Defina as imagens, ligue os efeitos desejados e estilize o resultado do painel Para mais ferramentas de imagem, consulte o Efeitos de Hover de Imagem e Carrossel de Imagem widgets, navegue ao máximo Widgets e extensões Master Addons, e veja o Página avançada do widget de imagem para demos.
