Uma foto de produto com um parágrafo de especificações abaixo raramente é lida Uma planta baixa com uma legenda ao lado é ignorada O problema é sempre o mesmo: a imagem e a informação vivem em dois lugares diferentes, e a maioria dos visitantes nunca rola o suficiente para conectá-los.
Um hotspot imagem corrige que. Você fixa pequenos marcadores diretamente na foto, e cada um revela um rótulo curto quando alguém paira ou toca O Widget de ponto de acesso de imagem de Master Addons faz isso dentro do editor Elementor Carregue uma imagem, solte marcadores onde você quer, escreva um rótulo para cada um, e você está feito Sem CSS, sem código personalizado.
O que é um ponto de acesso de imagem no Elementor?
Um hotspot de imagem é um pequeno marcador interativo fixado em uma posição específica em uma imagem Cada marcador tem seu próprio rótulo, ícone ou link No desktop, pairar sobre o marcador mostra um painel flutuante com o conteúdo No celular, tocar nele faz a mesma coisa.
Uma foto de produto pode ter um marcador em cada recurso Uma planta baixa pode marcar quartos individuais Uma captura de tela pode apontar botões ou configurações com uma breve explicação A imagem em si não muda Os marcadores apenas dão aos visitantes uma maneira de explorá-la.
Elementor não possui um widget de hotspot integrado A versão Master Addons lida com tudo, desde o painel de widgets: posicionamento do marcador, conteúdo do rótulo, ícones, animações e estilo Você configura cada hotspot individualmente através do repetidor, e o widget cuida do posicionamento e da capacidade de resposta.
Por que usar pontos de acesso de imagem em seu site?
As imagens estáticas criam uma lacuna entre o que o visitante vê e o que ele precisa saber Os pontos de acesso fecham essa lacuna.
Em uma foto de produto, fixe um marcador em cada recurso para que os visitantes vejam as especificações sem rolar para uma lista separada Em uma planta baixa, marque salas ou estandes para que cada local abra com seu nome e detalhes Em um infográfico, mantenha o visual limpo e deixe os marcadores carregarem o contexto extra Em uma captura de tela, aponte botões ou configurações específicas para um tutorial ou fluxo de integração Em uma foto de equipe, rotule pessoas ou departamentos.
A estrutura é sempre a mesma: uma imagem, múltiplos marcadores, cada um revelando conteúdo quando interagido O visitante fica na imagem em vez de saltar entre a imagem e um bloco de texto abaixo dela.
Como adicionar um ponto de acesso de imagem no elementor (passo a passo)
Toda a configuração leva cerca de cinco minutos.
Passo 1: Instale complementos mestres e Ative o Pro
Vá para Plugins, Adicione Novo no seu painel WordPress e procure por “Master Addons.” Instale e ative o plugin gratuito Se você tiver um Licença PRO, insira-o em Master Addons, License O widget Image Hotspot só aparece depois que o Pro estiver ativo.
Passo 2: arraste o widget de ponto de acesso de imagem para sua página
Abra qualquer página no editor Elementor No painel Elementos à esquerda, procure por Hotspot de imagem ou role para a seção Master Addons (os widgets carregam um emblema MA roxo).Arraste-o para a página Ele carrega com uma imagem de amostra e alguns marcadores de espaço reservado que você pode editar.
Passo 3: Carregue sua imagem
Na guia Conteúdo, abra a seção Imagem Clique em Escolher imagem e escolha uma imagem da biblioteca de mídia Defina a resolução da imagem como completa ou grande para uma renderização nítida A opção Alinhamento posiciona a imagem dentro de sua coluna: esquerda, central ou direita.
Passo 4: Adicionar Hotspots à Imagem
Abra a seção Hotspots Cada item no repetidor é um marcador Clique em Adicionar item para criar um novo Você pode adicionar quantos a imagem precisar Arraste cada marcador na imagem para posicioná-lo, ou defina coordenadas horizontais e verticais exatas para uma colocação precisa.
Existe uma alternância Desativar Efeito de Pulso se você quiser marcadores estáticos em vez da animação pulsante padrão.
Passo 5: Defina o tipo de marcador e o conteúdo da etiqueta
Clique em um item de hotspot para abrir suas configurações Em Tipo, escolha o que aparece dentro do marcador: nada (apenas um ponto), um ícone ou uma pequena imagem O campo Texto contém o rótulo curto que aparece no painel flutuante O campo Link adiciona uma URL para que o marcador também navegue em algum lugar ao clicar.
O editor Tooltip Content é uma caixa WYSIWYG para o texto completo do rótulo Você pode usar formatação, imagens ou códigos de acesso lá.
Passo 6: Configurar o Comportamento do Marcador
De volta à guia Conteúdo principal, a seção Dicas de ferramentas controla como os rótulos se comportam em todos os marcadores:
- Mostrar posição: em qual lado do marcador o rótulo abre (superior, inferior, esquerdo, direito).
- Flecha: alterne um ponteiro entre o marcador e o rótulo.
- Animação: o efeito de revelação quando o rótulo aparece, como Shift-Toward.
- Acionador em Clique: muda de hover-to-reveal para click-to-reveal Este é o que você deseja para celular, uma vez que as telas sensíveis ao toque não têm hover.
Opções de estilo do marcador
Cada hotspot tem sua própria guia Estilo para a aparência do marcador:
- Cor padrão e Fundo padrão: o marcador em repouso.
- Cor Hover e Fundo Hover: como muda ao passar o mouse.
- Opacidade: quão sólido o marcador olha contra a imagem Valores mais baixos o tornam mais sutil.
Escolha uma cor de marcador que se destaque da imagem atrás dela Uma foto ocupada engolirá um marcador de baixo contraste e os visitantes não notarão os pontos de acesso.
Estilizando a imagem e os rótulos
A guia Estilo principal do widget possui três seções.
Painel Imagem
Controla a imagem em si: opacidade, raio de borda, sombra de caixa e filtros CSS Um raio de borda ou sombra ajuda a imagem a ficar dentro de um layout estilo cartão Os filtros CSS permitem ajustar o brilho, o contraste ou a saturação sem reexportar a imagem.
Painel Marcadores
Configurações globais para todos os marcadores: tamanho e cor padrão Os estilos de hotspot individuais substituem estes.
Painel Etiquetas
Controla o painel flutuante que aparece quando um marcador é interagido com: cor de fundo, cor do texto, tipografia, preenchimento, raio da borda e sombra.
Comportamento responsivo em dispositivos móveis
Os marcadores usam posicionamento baseado em porcentagem, para que permaneçam fixados no mesmo ponto da imagem, independentemente do tamanho da tela. Os rótulos redimensionam e reposicionam para permanecer na janela de visualização.
Os dispositivos de toque não têm hover, portanto, o botão Trigger on Click na seção Dicas de ferramentas alterna todo o widget para tocar para revelar Os visitantes tocam em um marcador para abrir o rótulo e tocam em outro lugar para fechá-lo Se o seu público estiver principalmente no celular, ligue isso desde o início.
Em telas muito pequenas, onde os rótulos começam a se sobrepor, você pode desativá-los abaixo de um determinado ponto de interrupção e deixar os links do marcador fazerem o trabalho em vez disso Cada marcador ainda navega para sua URL no toque.
Hotspot de imagem vs widget de dica de ferramenta: qual é a diferença?
Master Addons tem dois recursos que produzem rótulos flutuantes e as pessoas os misturam:
| Característica | O que faz | Melhor Para |
|---|---|---|
| Widget de ponto de acesso de imagem | Pinos marcadores interativos em posições x/y específicas em uma imagem Cada marcador abre um rótulo no hover ou clique. | Fotos anotadas, chamadas de produtos, plantas baixas, mapas interativos. |
| Widget de dica de ferramenta | Anexa um rótulo de hover a qualquer elemento Elementor: um botão, ícone, bloco de texto, seção ou widget. | Passe as dicas nos botões, ajude o texto nos campos do formulário, contexto adicional em qualquer elemento da página. |
O Image Hotspot é específico da imagem e baseado em posição A Tooltip funciona em qualquer widget Elementor Se você precisar de marcadores em uma foto, use o Image Hotspot Se precisar de um rótulo de hover em um botão ou bloco de texto, use o Widget de dica de ferramenta.
Ambos vêm com Master Addons Pro. Eles trabalham em elementos diferentes e não compartilham seletores ou manipuladores de eventos, para que você possa usá-los na mesma página sem problemas.
Dicas para trabalhar com pontos de acesso de imagens
- Marcadores espaciais fora. Marcadores sobrepostos tornam a imagem difícil de usar Se dois hotspots se sentam próximos, empurre seus rótulos para lados opostos ou solte um deles.
- Mantenha os rótulos curtos. Uma ou duas linhas lê melhor do que um parágrafo dentro de um painel flutuante Use o rótulo para um resumo rápido e link out para os detalhes completos.
- Ative o gatilho em Clique para celular. Mesmo que o hover funcione na área de trabalho, os usuários do touch precisam de um alvo de toque O widget lida com os dois modos ao mesmo tempo.
- Teste em telas diferentes. Marcadores que parecem bem espaçados em uma área de trabalho podem se agrupar em um telefone Verifique um telefone, um tablet e um monitor amplo antes de publicar.
- Compare os marcadores com a imagem. Um marcador brilhante em uma foto escura funciona Um marcador silenciado em um fundo ocupado desaparece Use o estado Hover para adicionar ênfase quando alguém se concentra em um marcador.
- Use a guia Posição quando o alinhamento for importante. Arrastar é rápido para posicionamento aproximado A guia Posição com valores percentuais exatos é melhor quando você precisa de marcadores para se alinhar com partes específicas de um diagrama ou captura de tela.
Grátis vs Pro: o que você obtém
| Plano | Hotspot de imagem | Outros Widgets |
|---|---|---|
| Grátis | Não incluído | Mais de 40 widgets, incluindo cabeçalho, botão, caixa de informações, acordeão e muito mais. |
| Pro | Incluído | Todos os widgets gratuitos mais Image Hotspot, Tooltip, Mega Menu e mais de 76 widgets e extensões totais. |
O plugin base é gratuito para instalação a partir do Repositório WordPress. O widget Image Hotspot requer especificamente a Licença PRO.
O que é um hotspot de imagem no Elementor?
Um hotspot de imagem é um pequeno marcador interativo colocado em cima de uma imagem Quando um visitante paira ou toca nele, um rótulo aparece com texto, uma descrição ou um link para essa área específica da foto Elementor não inclui um widget de hotspot embutido, então você precisa de um complemento como Master Addons para adicionar esse recurso.
Quantos hotspots posso adicionar a uma única imagem?
Não há limite de dificuldade Praticamente, 5 a 7 pontos de acesso por imagem mantêm as coisas legíveis Além disso, os marcadores começam a se sobrepor Se você precisar anotar mais áreas, divida o conteúdo em várias imagens.
Os hotspots de imagem funcionam no celular?
Sim. Em dispositivos de toque o widget muda de hover para tap-to-reveal Você pode ativar o Trigger on Click para que os visitantes móveis toquem em um marcador para abrir seu rótulo O posicionamento baseado em porcentagem mantém os pontos de acesso fixados corretamente nos tamanhos de tela.
Posso vincular um hotspot a outra página?
Sim. Cada hotspot tem um campo Link O link dispara ao clicar, para que um marcador possa mostrar informações em seu rótulo e navegar o visitante para uma página de produto, seção de documentação ou URL externo.
O widget Image Hotspot é gratuito ou Pro?
O widget Image Hotspot é um recurso Pro. O plugin base Master Addons é gratuito e inclui mais de 40 widgets, mas o widget hotspot requer um Licença PRO.
Qual é a diferença entre o widget Image Hotspot e o widget Tooltip?
O widget Image Hotspot fixa marcadores interativos em posições específicas em uma imagem, cada um mostrando uma etiqueta ao passar o mouse ou clicar. O Widget de dica de ferramenta anexa um rótulo de hover a qualquer elemento Elementor (botões, texto, ícones).Use o Hotspot de imagem para fotos anotadas; use a Dica de Ferramenta para dicas de hover em outros elementos da página.
Embrulhando
O widget Image Hotspot pega uma imagem plana e adiciona marcadores que revelam informações sobre hover ou clique Carregue a imagem, solte marcadores nas áreas que precisam de explicação, escreva um rótulo curto para cada uma e estilize os marcadores para combinar com seu design Tudo acontece dentro do editor Elementor.
Para mais informações sobre imagens no Elementor, consulte o Widget de comparação de imagens e o Widget de efeitos de passagem de imagem. Se você precisar passar os rótulos nos botões ou no texto em vez das imagens, o Tutorial de widget de dica de ferramenta cobre isso. E a lista completa de Widgets e extensões Master Addons vale a pena navegar se quiser ver o que mais está disponível.
Obtenha Master Addons Pro para desbloquear o widget Image Hotspot e mais de 76 widgets e extensões para Elementor.
