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 Abra a guia Posição de cada marcador e defina os controles deslizantes de posição Horizontal e Vertical, em porcentagem, para colocá-lo na imagem.
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), texto curto (um sinal de mais por padrão), um ícone ou uma pequena imagem O campo Texto é o texto mostrado dentro do marcador O campo Link adiciona uma URL, que funciona quando os rótulos se abrem ao passar o mouse ou são desligados para esse tamanho de tela.
O editor Tooltip Content é uma caixa WYSIWYG para o texto do rótulo, mas o próprio rótulo mostra texto simples Formatação, imagens e links são retirados, então escreva uma linha curta.
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, preenchimento de texto, raio da borda, tipografia, uma transição e cor, fundo, borda, opacidade e sombra de caixa para padrão e pairar As cores individuais do hotspot substituem-nas.
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 definir Desativar no celular ou Tablet & Mobile e deixar os links de marcadores 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 e extensão de dicas de ferramentas | O widget Tooltip é uma dica autônoma com seu próprio gatilho A extensão Tooltips anexa um rótulo de hover a um elemento Elementor existente, como um botão, ícone, bloco de texto ou seção. | 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 é construído para imagens e coloca marcadores por posição Se você precisar de marcadores em uma foto, use o Image Hotspot Para um rótulo de hover em um botão ou bloco de texto que já existe, use o Dicas de ferramentas extensão. Se você quiser uma dica independente, o Widget de dica de ferramenta faz isso.
O Image Hotspot e a extensão Tooltips precisam do Master Addons Pro, enquanto o widget Tooltip está no plugin gratuito Eles não compartilham seletores ou manipuladores de eventos, então você pode usá-los na mesma página.
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 | Dezenas de widgets gratuitos, como Dual Heading, Creative Button, Infobox, Advanced Accordion e o widget Tooltip. |
| Pro | Incluído | Todos os widgets gratuitos mais o Image Hotspot, a extensão Tooltips, as Condições de Exibição e o restante dos widgets e extensões 80+. |
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 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 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. As telas sensíveis ao toque não têm hover, portanto, habilite o Trigger on Click e os visitantes móveis tocam em um marcador para abrir seu rótulo O posicionamento baseado em porcentagem mantém os pontos de acesso fixados corretamente nos tamanhos das telas.
Posso vincular um hotspot a outra página?
Sim. Cada hotspot tem um campo Link O link funciona quando os rótulos se abrem no hover, ou em telas onde os rótulos são desligados, para que um marcador possa mostrar seu rótulo no hover e levar o visitante a uma página de produto ou URL externo no clique Com o Trigger on Click on, um clique abre o rótulo em vez disso.
O widget Image Hotspot é gratuito ou Pro?
O widget Image Hotspot é um recurso Pro. O plugin base Master Addons é gratuito, 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 é uma dica independente com seu próprio gatilho, e a extensão Tooltips anexa um rótulo de hover a um elemento existente, como um botão, texto ou ícone Use o Image Hotspot para fotos anotadas e as opções de 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 o restante dos mais de 80 widgets e extensões para Elementor.
