Elementor Image Hotspot Widget com Dicas de Ferramentas (Pro)
Image Hotspot é um widget Master Addons Pro que fixa marcadores em cima de uma imagem Um marcador pode ser um ponto simples, um rótulo de texto curto, um ícone Font Awesome ou uma imagem pequena, e cada um abre uma dica de ferramenta quando um visitante a passa o mouse ou toca uma vez que você liga o Trigger on Click. Ele se adapta a fotos do look, chamadas de produtos, plantas baixas, mapas do campus e diagramas rotulados Se o que você deseja é uma dica de hover em um botão ou título, o grátis Widget de dica de ferramenta ou o Extensão das dicas de ferramentas (Pro) é o ajuste mais próximo.
Como adicionar um ponto de acesso de imagem no elementor
Para adicionar um hotspot de imagem no Elementor, ative o Master Addons Pro, edite a página com o Elementor e pesquise no painel de widgets o Hotspot de Imagem Arraste-o, escolha sua imagem em Imagem, depois abra Hotspots e clique em Adicionar Item para cada marcador Defina o Tipo, Conteúdo e Posição da Dica de Ferramenta de cada marcador e, em seguida, publique.
Pesquise no painel por “hotspot” e dois resultados voltem O único emblemático MA é este widget O em cadeado ao lado dele é o próprio Hotspot da Elementor, que precisa de uma licença Elementor Pro, por isso vale a pena verificar qual você já possui antes de construir.
Coloque o widget, escolha sua imagem e defina Resolução de imagem to Full se a imagem carrega detalhes finos Os marcadores sentam-se na imagem renderizada, então uma fonte reduzida faz com que cada pino pareça aproximado Abra Pontos de acesso, clique em Adicionar item e repita uma vez por marcador Cada item carrega suas próprias guias de conteúdo, estilo e posição.
Duas coisas tropeçam as pessoas na primeira construção Os marcadores pousam no canto superior esquerdo até você tocar nos controles deslizantes Posição, então três itens frescos se empilham no que parece ser um E a caixa Conteúdo da dica de ferramenta é um editor completo, o que torna tentador colar um parágrafo Há uma razão para resistir a isso, coberto mais abaixo.
Exemplos trabalhados com fotos de produtos, mapas e diagramas ao vivo como adicionar hotspots de imagem no Elementor. Todo controle está listado no Guia de configurações de widget de hotspot de imagem.
Quatro tipos de marcadores em uma imagem
O Tipo o controle na guia Conteúdo de um marcador oferece quatro formas e você pode misturar todas as quatro dentro de uma única imagem.
Nenhum deixa um ponto de cor nua. É a opção mais limpa para diagramas densos onde os rótulos colidem entre si.
Texto imprime uma pequena string dentro do marcador Os números funcionam bem aqui, porque 01, 02 e 03 através de uma tomada de produto lida como uma visita guiada sem legenda para escrever Cordas mais longas transformam o ponto em uma pílula, que é o visual que você deseja para algo como “Colônia No. 5”.
Ícone pega qualquer ícone Font Awesome da biblioteca, para que uma folha possa substituir ingredientes e uma estrela para uma classificação.
Imagem troca o marcador por uma imagem da sua biblioteca de mídia As miniaturas e avatares do produto são os que são melhor lidos; qualquer coisa ocupada se transforma em mingau no tamanho do marcador.
Cada marcador também aceita um Link. Esse link dispara quando as dicas de ferramentas se abrem ao passar o mouse ou em pontos de interrupção onde você desligou as dicas de ferramentas. Ele não dispara enquanto o Trigger on Click estiver ativado, porque o toque já está ativado.
Coloque cada marcador por porcentagem
O Posição tab detém dois controles deslizantes, Posição horizontal e Posição vertical, ambos medidos em porcentagem da imagem A configuração 50 e 24 coloca um marcador a um quarto do meio Não há colocação de arrastar na tela, então você empurra os números e assiste à visualização.
Porcentagem é o que mantém os marcadores honestos em um telefone A imagem base é dimensionada com seu recipiente e cada marcador mantém seu ponto relativo, de modo que uma etiqueta fixada na tampa de uma garrafa ainda está na tampa da garrafa com 390 px de largura, onde um deslocamento de pixel teria se desviado.
A mesma guia carrega um por marcador Mostrar para, que substitui o lado global da dica de ferramenta para aquele marcador. Isso ajuda quando um marcador fica próximo à borda direita e sua dica de ferramenta sai da imagem: coloque-o à esquerda e deixe o resto no topo.
Os marcadores pulsam por padrão. O Desativar Efeito Pulso o interruptor na parte inferior da seção Hotspots desliga a animação para cada marcador de uma só vez, o que geralmente é o que uma planta baixa com quinze pinos precisa.
Posição da dica de ferramenta, animação e comportamento móvel
O Dicas de ferramentas a seção conduz todas as dicas de ferramentas no widget juntas: Mostrar posição (superior, inferior, esquerda ou direita), animação (Shift-Away, Shift-Toward, Fade, Scale ou Perspective), uma alternância de seta, além de deslocamento e distância para cutucadas finas.
Dicas de ferramentas abertas no hover Os telefones não têm hover, o que deixa duas opções honestas. Ligue Acionador em Clique e um toque abre a dica de ferramenta. Ou definir Desativar ligado para Mobile, ou Tablet & Mobile, que esconde dicas de ferramentas nessas telas e entrega o trabalho ao Link de cada marcador.
Uma limitação para planejar ao redor O conteúdo da dica de ferramenta é uma caixa WYSIWYG, mas o widget retira a marcação antes de renderizar, então negrito, links, imagens e códigos de acesso desaparecem e a dica de ferramenta mostra texto simples Mantenha cada um em uma única linha curta Quando você precisar de conteúdo de dica de ferramenta formatada, o widget Hotspot do Elementor Pro lida com rich text e esse widget não.
Estilizar a dica de ferramenta em si é o conjunto completo: alinhamento, preenchimento, raio, fundo, cor do texto, borda, cor da seta, tipografia e sombra da caixa A imagem base recebe filtros de opacidade, borda, raio, sombra da caixa e CSS.
Marcadores de estilo para padrão e Hover
O estilo do marcador fica em dois lugares, o que é mais simples do que parece quando você conhece a divisão.
O widget Estilo tab cobre cada marcador de uma só vez: Preenchimento de texto, Raio de borda, Tipografia, um grupo de transição e, em seguida, guias padrão e Hover contendo opacidade, tamanho, cor, cor de fundo, tipo de borda e sombra de caixa O tamanho é um multiplicador de escala de 0,5 a 2, portanto, definir Hover como 1,15 dá aos marcadores um leve levantamento sob o cursor sem alterar mais nada na página.
A guia Estilo dentro de um único marcador substitui a cor, o fundo e a opacidade desse marcador por padrão e pairar É assim que você faz um marcador vermelho em uma parede roxa, para marcar um item esgotado ou sinalizar o hotspot que você deseja notar primeiro.
Border Radius em 100 dá-lhe círculos e pílulas Deixe cair para 6 e marcadores de texto tornam-se tags quadradas, que lê melhor em um desenho arquitetônico do que uma fileira de bolhas.
Elementor Pro Hotspot vs Master Addons Imagem Hotspot
Elementor Pro envia seu próprio widget Hotspot Se você já paga pelo Elementor Pro, verifique primeiro, porque talvez você não precise deste.
| Característica | Ponto de acesso Elementor Pro | Hotspot de imagem de complementos mestres |
|---|---|---|
| Preço | Precisa do Elementor Pro | Precisa de Master Addons Pro |
| Tipos de marcadores | Texto da etiqueta e um ícone, com tamanho personalizado | Nenhum, Texto, Ícone ou Imagem |
| Animação marcador | Soft Beat, Expand ou Overlay, com animação sequenciada | Pulse ligado ou desligado |
| Conteúdo da dica de ferramenta | Texto rico com formatação | Apenas texto simples |
| Gatilho de dica de ferramenta | Passe o mouse, clique ou nenhum | Passe o mouse ou clique com o gatilho ao clicar |
| Animação tooltip | Desvanecer e slide estilos com uma configuração de duração | Shift-Away, Shift-Toward, Fade, Scale, Perspective, mais seta, deslocamento e distância |
| Móvel | Por posições do dispositivo | Desative as dicas de ferramentas no Tablet e Mobile ou Mobile |
Elementor Pro ganha em animações ricas de texto de dica de ferramenta e marcadores Master Addons é a escolha se você quiser marcadores de imagem ou já usar Master Addons Pro sem Elementor Pro. Relacionado: o gratuito Widget de dica de ferramenta, o Extensão das dicas de ferramentas (Pro), Comparação Imagem e Efeitos de Hover de Imagem.
Onde um Hotspot de Imagem Ganha o Seu Lugar
Fotografia de loja-o-olhar é o óbvio Um único tiro estilo de vida, um marcador de imagem por produto, uma dica de ferramenta nomeando cada item e um Link através de sua página de produto Ele funciona melhor do que uma grade de miniaturas, porque o visitante vê as peças estilizadas juntos antes de vê-los precificados.
Especificações sem tabela de especificações são o uso mais silencioso. Em corpos de câmeras, relógios e máquinas, marcadores numerados percorrem um leitor ao redor do objeto na ordem que você escolher, e ninguém precisa mapear a linha 4 de uma mesa de volta na foto.
Depois, há plantas baixas, mapas do campus e diagramas rotulados. Pontos com efeito de pulso desativado ativados, dicas de ferramentas configuradas para acionar no clique e um link em cada marcador apontando para a página inteira. Quinze pinos permanecem legíveis dessa forma; quinze comprimidos pulsantes não.
Perguntas frequentes para hotspot de imagens
O que acontece nos telemóveis onde não há hover?
Ative o Acionador em Clique na seção Dicas de ferramentas para que os visitantes toquem em um marcador para abrir sua dica de ferramenta Você também pode definir Desativar em Mobile ou Tablet & Mobile, que oculta dicas de ferramentas nessas telas e permite que o marcador Link leve os visitantes a mais informações.
Posso usar uma imagem personalizada em vez de um ícone para o marcador de hotspot?
Sim. Defina o tipo de ponto de acesso como imagem e escolha uma imagem da biblioteca de mídia. Uma imagem pequena e simples, como uma miniatura de produto ou avatar, é a que melhor lê o tamanho do marcador.
A imagem base em si é responsiva?
Sim. a imagem é dimensionada com sua coluna, e as posições dos marcadores são definidas em porcentagem, de modo que cada marcador permanece na mesma parte da imagem em todos os tamanhos de tela As dicas de ferramentas podem precisar de Acionar ao clicar ou desativar para telas pequenas.
O widget Image Hotspot é gratuito?
No. Image Hotspot faz parte de Master Addons Pro. O plugin gratuito possui o Widget de dica de ferramenta, que adiciona uma dica de hover a um único elemento, mas não fixa marcadores em uma imagem Os usuários do Elementor Pro também podem usar o próprio widget Hotspot do Elementor.
Posso desligar a animação de pulso?
Sim. Desativar efeito de pulso fica na parte inferior da seção Hotspots e desliga o pulso para cada marcador nesse widget Não há alternância de pulso por marcador, então use um segundo widget de hotspot de imagem se precisar de ambas as visualizações em uma página.
Por que a formatação na minha dica está desaparecendo?
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
