Principais conclusões
- Um hotspot de imagem Elementor é um marcador fixado em uma foto que abre um rótulo curto ao passar o mouse ou tocar, e o widget Master Addons Image Hotspot adiciona um marcador para cada item em sua lista de Hotspots.
- O widget Image Hotspot precisa do Elementor e do Master Addons Pro, porque o Elementor gratuito não possui widget de hotspot e o Elementor Pro envia seu próprio widget de Hotspot separado.
- Cada marcador de Hotspot de imagem é colocado com controles deslizantes de posição horizontal e vertical em porcentagem da imagem, e essa posição se aplica em desktop, tablet e telefone.
- As dicas de ferramentas do Image Hotspot mostram apenas texto simples, uma vez que texto em negrito, links, imagens e códigos de acesso digitados na caixa Conteúdo da dica de ferramenta são removidos quando a página é renderizada.
- Acionar em Clique na seção Dicas de ferramentas do ponto de acesso de imagem faz com que os marcadores funcionem em telefones, mas o link de um marcador é seguido apenas quando as dicas de ferramentas se abrem ao passar o mouse.
- O widget Image Hotspot pode servir como um mapa de imagem simples com marcadores de pontos vinculados, embora não possa desenhar formas clicáveis ou contornar a sala da mesma forma que um plugin de mapa de imagem SVG.
Um hotspot de imagem Elementor é um pequeno marcador fixado em uma foto que mostra um rótulo curto quando um visitante paira ou toca nele Elementor livre não tem widget para isso, então este guia usa o Widget de ponto de acesso de imagem de complementos mestre, que adiciona marcadores a qualquer imagem do painel Elementor sem código personalizado Você precisa do Master Addons Pro para isso.
As etapas abaixo levam você de um contêiner vazio para uma imagem interativa publicada: colocando marcadores por porcentagem, escrevendo o rótulo para cada um e estilizando os marcadores para desktop e telefones As seções posteriores cobrem os limites para saber antes de construir, como usar hotspots como um mapa de imagem simples e como o widget se compara ao widget Hotspot no Elementor Pro.
Índice
O que é um hotspot de imagem no Elementor
Um hotspot de imagem é um marcador colocado em um ponto de ajuste em uma imagem Cada marcador carrega seu próprio rótulo curto e, se você quiser, um link Em uma área de trabalho o rótulo aparece em um hover Em um telefone o visitante toca no marcador.
Uma foto de produto pode ter um marcador em cada recurso Uma planta baixa pode marcar quartos ou mesas Uma captura de tela pode apontar para os botões que um novo usuário precisa A imagem permanece a mesma, e os marcadores permitem que os visitantes a explorem sem rolar para baixo para uma lista separada de especificações ou uma legenda.
O Elementor Livre não possui widget de hotspot O Elementor Pro possui um chamado Hotspot, e o Master Addons Pro adiciona o Image Hotspot, que também pode usar uma pequena imagem como marcador Este guia cobre o widget Master Addons.
Se você quiser apenas uma dica de hover em um botão ou cabeçalho, um hotspot é a ferramenta errada. O Widget de dica de ferramenta lida com isso sem Master Addons Pro e o Dicas de ferramentas extensão (Pro) adiciona uma dica a um elemento que já está na página.
Quer vê-lo funcionando antes de construir? O Página do widget do Hotspot de imagem possui demos ao vivo, a lista completa de configurações e lado a lado com o Elementor Pro Hotspot.
Como adicionar um hotspot de imagem no Elementor
A configuração leva cerca de cinco minutos para uma imagem com quatro ou cinco marcadores.
Passo 1: Instale Master Addons e ative Pro
No seu painel do WordPress, vá para Plugins, Adicionar Novo e procure por “Master Addons” Instale-o e ative-o, depois insira o seu Licença PRO sob Master Addons, License. Image Hotspot só aparece no painel Elementor uma vez Pro está ativo Ele funciona com Elementor livre.
Passo 2: Arraste o widget Image Hotspot para a página
Abra a página no editor Elementor e procure no painel Elements por “hotspot” O resultado com o emblema MA é Image Hotspot Se você também vir um widget Hotspot com cadeado ao lado dele, esse pertence ao Elementor Pro. Arraste o Hotspot de Imagem para um contêiner.
Passo 3: Escolha sua imagem
Na guia Conteúdo, abra a seção Imagem e clique em Escolher imagem Defina a resolução da imagem como completa ou grande se a foto tiver detalhes finos, porque os marcadores ficam na imagem renderizada e uma cópia reduzida faz com que cada pino pareça aproximado O alinhamento coloca a imagem à esquerda, no centro ou à direita em sua coluna.
Passo 4: Adicione pontos de acesso e defina sua posição
Abra a seção Hotspots Cada item da lista é um marcador, então clique em Adicionar item uma vez para cada ponto que você deseja marcar Não há limite no número de itens.
Cada item tem guias Conteúdo, Estilo e Posição Na guia Posição, mova os controles deslizantes Posição horizontal (%) e Posição vertical (%) para colocar o marcador Os valores são uma porcentagem da imagem, então 50 e 50 colocam o marcador no centro Você não pode arrastar marcadores na tela, e novos itens começam todos no canto superior esquerdo até movê-los, então três itens novos podem parecer um.
Uma posição se aplica em cada tamanho de tela Um marcador com 22% de diâmetro e 52% de inatividade fica na mesma parte da foto em um laptop e em um telefone.
Na lista, Desativar efeito de pulso? desliga o anel pulsante em torno de cada marcador no widget.
Passo 5: Escolha o tipo de marcador e escreva o rótulo
Na guia Conteúdo de cada item, o Tipo define o que aparece dentro do marcador: Nenhum (um ponto simples), Texto (um sinal de mais por padrão ou um número ou uma palavra que você digita), Ícone (qualquer ícone Font Awesome) ou Imagem (uma imagem pequena).Misturar tipos em uma imagem funciona bem.
O campo Link envia o visitante para outra página quando ele clica no marcador Ele é seguido quando as dicas de ferramentas se abrem no hover Com o Trigger on Click ligado (etapa 6), um clique abre a dica de ferramenta e o link é ignorado.
Tooltip Content é a linha que aparece na dica de ferramenta hotspot A caixa parece um editor de texto completo, mas a dica mostra texto simples: negrito, itálico, links, imagens e códigos de acesso são todos removidos quando a página renderiza Escreva uma linha curta.
Passo 6: Escolha como os marcadores se abrem
De volta à guia Conteúdo, a seção Dicas de ferramentas controla todos os marcadores do widget de uma só vez.
- Mostrar Posição escolhe o lado em que a dica de ferramenta abre: superior, inferior, esquerdo ou direito Um marcador pode substituí-lo pela opção Mostrar para em sua guia Posição.
- A animação define o efeito de revelação: Shift-Away, Shift-Toward, Fade, Scale ou Perspective.
- A seta adiciona um ponteiro da dica de ferramenta ao marcador.
- Deslocamento e distância movem a ponta da ferramenta ao longo do marcador e para longe dele.
- Trigger on Click abre dicas de ferramentas em um clique ou toque Os telefones não têm hover, então ligue isso se muitos visitantes usarem um telefone.
Etapa 7: Visualizar e publicar
Clique em Publicar e abra a página em uma nova guia Passe o mouse sobre cada marcador para verificar o texto e o lado da dica de ferramenta, depois redimensione a janela para a largura do telefone e verifique se os marcadores não cobrem um ao outro.
Estilize os marcadores e a imagem
O estilo acontece em dois lugares: a guia Estilo do próprio marcador e a guia Estilo principal do widget.
Estilo por marcador
A guia Estilo dentro de um item de hotspot possui configurações padrão e de pairar para cor, fundo e opacidade. Use-o para dar a um marcador uma cor diferente, como um item de venda na foto de um produto.
Escolha uma cor de marcador que contraste com a foto atrás dela. Um marcador silenciado em uma foto movimentada se perde e os visitantes não perceberão que há algo para pairar.
Imagem
A seção Imagem da guia Estilo principal controla a foto: opacidade, borda, raio de borda, sombra de caixa e filtros CSS. Um raio e uma sombra suave ajudam a imagem a ficar dentro de um layout de cartão.
Pontos de acesso
A seção Hotspots estiliza cada marcador de uma só vez: tamanho, preenchimento, raio da borda, opacidade, cor e fundo, cada um com uma versão hover As configurações em um marcador individual vencem estes.
Dicas de ferramentas
A seção Dicas de ferramentas estiliza a dica de ferramenta do hotspot: alinhamento de texto, preenchimento, raio da borda, fundo, cor do texto, cor da seta e tipografia.
Construa uma imagem interativa no Elementor
Uma imagem interativa é uma foto que responde a perguntas quando um visitante aponta para ela No Elementor você constrói uma com o Image Hotspot seguindo as etapas acima: um marcador por ponto, uma dica de ferramenta de uma linha em cada um e Acionador ao clicar se o seu tráfego é principalmente móvel.
Emparelhar a imagem com uma pequena lista ao lado funciona bem O visitante pode passar o mouse sobre um marcador ou ler a lista, e ambos apontam para os mesmos itens O compre esta demonstração de quarto usa marcadores numerados em uma foto da sala de estar com uma lista de preços ao lado.
Outros layouts adequados a uma imagem interativa incluem um relógio ou gadget com um marcador em cada parte, uma listagem de carros com marcadores nas luzes e rodas, uma foto de propriedade com etiquetas em cada recurso e uma foto de equipe com um nome em cada pessoa.
Use hotspots de imagem como um mapa de imagem simples
Um mapa de imagem torna partes de uma imagem clicáveis O Image Hotspot cobre o caso comum: um marcador em cada ponto com um Link para outra página, que é seguido quando as dicas de ferramentas se abrem no hover Ele coloca marcadores de ponto apenas Ele não desenha formas clicáveis, então uma planta baixa onde cada contorno de sala deve ser clicável precisa de um plugin de mapa de imagem dedicado, como Mapa de imagem Pro, que desenha formas vetoriais na imagem (em novembro de 2026).
Para pinos em um mapa do campus, um layout de loja ou um piso de ginástica, os marcadores são suficientes e mais rápidos de configurar O demonstração do mapa da zona do ginásio marca cinco zonas em uma foto, e cada marcador tem links para a página de reserva dessa zona.
Hotspots de imagem em telefones e tablets
As posições do marcador são uma porcentagem da imagem, de modo que cada marcador permanece na mesma parte da foto em todos os tamanhos de tela Não há posição separada para tablet ou telefone.
Os marcadores mantêm seu tamanho à medida que a imagem diminui, cerca de 40 px por padrão Em um telefone, uma imagem com muitos marcadores fica lotada Use menos marcadores, diminua o tamanho sob estilo, pontos de acesso ou dê aos visitantes do telefone uma imagem mais simples.
Os telefones não têm hover, então ligue o Trigger on Clique na seção Dicas de ferramentas Os visitantes tocam em um marcador para abrir sua dica de ferramenta Tenha em mente que, com o modo de clique ligado, um toque abre a dica de ferramenta e o Link do marcador não é seguido, portanto, se os links importam mais do que as dicas de ferramentas, deixe o Trigger ligado Clique desligado.
O que você precisa para usar hotspots de imagem
| Configuração | Widget de ponto de acesso que você obtém |
|---|---|
| Elementor grátis por conta própria | Nenhum. Core Elementor não possui widget de hotspot. |
| Elementor Pro | Widget Hotspot próprio da Elementor, com conteúdo de dica de ferramenta formatada e animações de marcadores próprios. |
| Adições Master sem Pro | Sem Hotspot de Imagem Muitos outros widgets estão incluídos. |
| Com Master Addons Pro | Hotspot de imagem, a extensão Tooltips e o restante dos mais de 80 widgets e extensões. |
Master Addons instala a partir do Diretório de plugins WordPress. Hotspot de imagem precisa de um Licença Master Addons Pro em cima dele Todo controle está listado no Guia de configurações do Hotspot de imagem.
Dicas para trabalhar com hotspots de imagem
- Marcadores de espaço para fora Se dois sentarem-se próximos, envie suas dicas de ferramentas para lados opostos com a opção Mostrar para na guia Posição de cada marcador ou solte um.
- Mantenha cada rótulo em uma linha A dica de ferramenta é renderizada como texto simples, portanto, coloque detalhes mais longos em uma página e use o Link do marcador.
- Teste na largura do telefone antes de publicar A mesma posição percentual se aplica em todos os lugares e os marcadores não encolhem, portanto, um marcador que pareça bom em uma área de trabalho pode cobrir um pequeno detalhe em um telefone.
- Use uma cor Hover nos marcadores para que os visitantes possam saber em qual deles estão.
- Marcadores de linha para cima com números exatos Digitar valores nos campos de porcentagem é mais rápido do que deslizar deslizantes quando os marcadores devem sentar-se em pequenas partes de um diagrama ou captura de tela.
Perguntas frequentes
O que é um hotspot de imagem no Elementor?
Um hotspot de imagem é um pequeno marcador colocado em cima de uma imagem Quando um visitante paira ou toca nele, um rótulo curto aparece para essa parte da foto Elementor Pro tem seu próprio widget Hotspot, e Master Addons Pro adiciona um widget Image Hotspot que também pode usar pequenas imagens como marcadores.
Quantos hotspots posso adicionar a uma única imagem?
Não há limite rígido Cinco a sete marcadores por imagem mantém as coisas legíveis, e menos em imagens que serão vistas em telefones, porque os marcadores não encolhem com a imagem Se você precisar de mais, divida o conteúdo em duas imagens.
Os hotspots de imagem funcionam no celular?
Sim. Os telefones não têm hover, então ligue o Trigger on Click e os visitantes tocam em um marcador para abrir sua dica As posições são uma porcentagem da imagem e iguais em todas as telas, então verifique se os marcadores não se aglomeram na largura do telefone.
Posso vincular um hotspot a outra página?
Sim. Todo marcador tem um campo Link O link é seguido quando as dicas de ferramentas se abrem no hover, então um visitante lê a dica de ferramenta no hover e vai para a página no clique Com o Trigger on Click on, um clique abre a dica de ferramenta em vez disso e o link não é seguido.
Posso colocar texto, links ou imagens em negrito dentro de uma dica de ferramenta de hotspot?
Não. A caixa Conteúdo da dica de ferramenta é um editor rico, mas texto em negrito, links, imagens e códigos de acesso são removidos quando a página é renderizada, portanto, a dica mostra texto simples Escreva uma linha curta e use o Link do marcador para conteúdo mais longo.
Preciso do Master Addons Pro para o Image Hotspot?
Sim. Image Hotspot é um widget Master Addons Pro, e funciona com Elementor livre Ele aparece no painel Elementor uma vez a Licença PRO está ativo.
Como o Image Hotspot é diferente do widget Elementor Pro Hotspot?
Elementor Pro Hotspot permite conteúdo de dica de ferramenta formatada, possui animações de marcadores Soft Beat, Expand e Overlay e abre no hover, clicando ou não. Master Addons Image Hotspot usa dicas de ferramentas de texto simples, um efeito de pulso em marcadores e cinco animações de dica de ferramenta e pode usar uma pequena imagem como marcador.
Pensamentos finais
O Image Hotspot transforma uma foto plana em uma imagem interativa: quatro tipos de marcadores, posições definidas em porcentagem, uma linha de texto simples por marcador e cinco animações de revelação, todas do painel Elementor Mantenha os marcadores poucos nas imagens que os telefones verão e ligue o Trigger on Click quando a maior parte do tráfego estiver móvel.
Para mais widgets de imagem, consulte Comparação Imagem e Efeitos de Hover de Imagem. Se você precisar de dicas de hover em botões ou texto em vez de imagens, o Tutorial de widget de dica de ferramenta cobre isso e a lista completa de Widgets e extensões Master Addons mostra o que mais vem com o plugin.
Obtenha Master Addons Pro para adicionar o Image Hotspot e o restante dos mais de 80 widgets e extensões ao Elementor.
