Algumas imagens precisam de um pouco de explicação, como uma foto do produto, uma planta baixa ou um mapa. O Hotspot de imagem widget em Complementos Mestres para Elementor alinha marcadores clicáveis em qualquer lugar de uma imagem, e cada um mostra uma dica de ferramenta com texto ou um link quando um visitante paira ou toca nela.
Você carrega uma imagem, solta pontos de acesso onde quiser, adiciona o texto da dica de ferramenta, depois estiliza os marcadores e define como as dicas de ferramentas se comportam Este guia cobre todas as configurações do widget.
O que o widget Image Hotspot faz #
O widget coloca marcadores em cima de uma única imagem Cada hotspot tem sua própria posição, ícone e dica de ferramenta, para que você possa rotular partes de uma foto ou vinculá-las a outras páginas Passe o mouse ou clique em um marcador e sua dica de ferramenta aparece ao lado dele.
Três guias o executam. Conteúdo contém a imagem, os pontos de acesso e o comportamento da dica de ferramenta. Estilo lida com a imagem, as cores do marcador e a aparência da dica de ferramenta. Avançado é o espaçamento e visibilidade usuais 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 e os rótulos ou links que você deseja que cada hotspot mostre.
Como adicionar o widget Image Hotspot #
No editor Elementor, abra o Elementos painel e pesquisa Hotspot de imagem, ou vá até a seção Master Addons (os widgets carregam um emblema MA roxo).Arraste-o para a página e ele carrega com uma imagem de amostra e marcadores que você pode editar.
Escolha a imagem #
Abrir o Conteúdo guia. O Imagem seção é onde você carrega a imagem base em que os pontos de acesso ficam.
- Escolha Imagem: escolha a foto na biblioteca de mídia.
- Resolução de imagem: o tamanho servido, como Grande ou Completo.
- Alinhamento: esquerda, centro ou direita dentro de sua coluna.
Adicionar pontos de acesso #
Abrir o Pontos de acesso seção. é um repetidor, então cada marcador é seu próprio item Use Adicionar Item para adicionar marcadores e arrastá-los para o lugar na imagem.
- Adicionar item: adicione quantos pontos de acesso a imagem precisar.
- Desativar efeito de pulso: desligue a animação pulsante nos marcadores.
- Arraste para a posição: mova cada marcador na imagem ou defina coordenadas exatas.
Configure cada hotspot #
Clique em um hotspot para abrir suas configurações. O Conteúdo tab define o tipo de marcador, seu texto de dica de ferramenta e um link opcional.
- Tipo: não mostrar nada, um ícone ou uma imagem dentro do marcador.
- Texto e Link: um rótulo curto e um URL para o marcador.
- Conteúdo da dica de ferramenta: o texto completo mostrado no hover, editado em uma caixa WYSIWYG.
Estilo cada hotspot #
O Estilo a guia em um hotspot define suas cores Você obtém uma cor e um fundo para o estado normal e um conjunto separado para pairar, além de um controle deslizante de opacidade.
- Cor e fundo padrão: o marcador em repouso.
- Cor e fundo do Hover: como ele muda ao passar o mouse.
- Opacidade: quão sólido o marcador parece.
Controlar as dicas de ferramentas #
De volta à guia Conteúdo principal, o Dicas de ferramentas a seção controla como cada dica de ferramenta se comporta: onde ela fica, como é animada e se ela abre ao passar o mouse ou clicar.
- Mostrar posição e seta: de que lado a dica de ferramenta se abre e se tem um ponteiro.
- Animação: o efeito de revelação, como Shift-Toward.
- Acionador no clique: abra as dicas de ferramentas ao clicar em vez de passar o mouse, melhor para o toque.
Estilize a imagem e as dicas de ferramentas #
Abrir o Estilo guia no widget. O Imagem a seção define a opacidade, a borda e os filtros da imagem e separa Pontos de acesso e Dicas de ferramentas as seções estilizam os marcadores e as caixas de dicas de ferramentas.
- Imagem: opacidade, raio de borda, sombra de caixa e filtros CSS.
- Pontos de acesso: tamanho e cor globais para os marcadores.
- Dicas de ferramentas: o fundo da dica de ferramenta, a cor do texto e a tipografia.
Casos de uso comum #
- Produto imagens fixando recursos ou especificações em partes da foto.
- Mapas e plantas baixas marcando salas, estandes ou locais.
- Infográficos adicionando detalhes sem desordenar a imagem.
- Fotos da equipe ou do escritório rotulagem de pessoas ou áreas.
- Tutoriais apontando etapas ou peças em uma captura de tela.
Dicas para trabalhar com o widget Image Hotspot #
- Mantenha os pontos de acesso legíveis. Espace-os para que os marcadores e as dicas de ferramentas não se sobreponham em telas menores.
- Use clique no celular. Ative o gatilho Clique para que os usuários do touch possam abrir dicas de ferramentas, pois não há hover em um telefone.
- Contraste os marcadores. Escolha uma cor de marcador que se destaque da imagem atrás dela, ou uma foto ocupada irá engoli-la.
- Mantenha o texto da dica de ferramenta curto. Uma ou duas linhas são melhores do que um parágrafo enfiado em uma caixa flutuante.
- Defina posições exatas. Use a guia Posição para posicionamento preciso em vez de observar o arrasto.
Assista ao tutorial em vídeo #
Prefere acompanhar na tela? o tutorial em vídeo abaixo percorre o elemento Image Hotspot do início ao fim, mostrando como a imagem, os pontos de acesso, as dicas de ferramentas e o estilo funcionam no editor Elementor.
Perguntas frequentes #
O que é o widget Image Hotspot em Master Addons?
É um widget Elementor que fixa marcadores interativos em uma imagem Cada hotspot tem sua própria posição, ícone e dica de ferramenta com texto ou link, mostrado ao passar o mouse ou clicar. Tudo é definido a partir do painel Elementor sem código.
Como adiciono mais hotspots a uma imagem?
Abra a seção Hotspots na guia Conteúdo e use Adicionar item para criar outro marcador Cada novo hotspot obtém seu próprio conteúdo, estilo e posição, e você pode arrastá-lo para o lugar na imagem ou definir coordenadas exatas na guia Posição.
Posso adicionar um link para um hotspot?
Sim. Cada hotspot tem um campo Link em sua guia Conteúdo, para que um marcador possa apontar para qualquer URL. Isso permite que uma imagem atue como um mapa clicável, enviando visitantes para uma página de produto, uma seção ou um site externo a partir de um pino na foto.
Os hotspots de imagem funcionam no celular?
Sim, mas o hover não existe no toque Ative o gatilho ao clicar na seção Dicas de ferramentas para que os usuários móveis possam tocar em um marcador para abrir sua dica de ferramenta Você também pode ocultar dicas de ferramentas abaixo de um ponto de interrupção e usar o link do marcador.
Posso usar um ícone ou imagem personalizada como marcador?
Sim. Cada hotspot tem uma opção Tipo na sua guia Conteúdo onde você pode mostrar um ícone ou uma imagem dentro do marcador em vez do padrão Dessa forma os marcadores podem corresponder à sua marca ou ao assunto da imagem.
Embrulhando #
O widget Image Hotspot transforma uma imagem plana em interativa: carregue a imagem, fixe os marcadores, adicione dicas de ferramentas e, em seguida, estilize os marcadores e defina o comportamento da dica de ferramenta. Para widgets relacionados, consulte o Widget de comparação de imagens e o Widget de efeitos de passagem de imagem, navegue por completo Widgets e extensões Master Addons, e verifique o página preços para o que cada plano inclui.
