Algumas imagens precisam de um pouco de explicação, como uma foto do produto, uma planta baixa ou um mapa. O Widget de ponto de acesso de imagem em Complementos Mestres para Elementor é um widget Pro que fixa marcadores clicáveis em qualquer lugar de uma imagem. Cada um mostra uma pequena dica de ferramenta de texto e pode vincular a outra página 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 elementar instalado e ativo.
- Complementos mestres Pro instalado com uma licença ativa, uma vez que o Image Hotspot é um widget Pro. 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, em seguida, coloque cada um com os controles deslizantes em sua guia Posição.
- Adicionar item: adicione quantos pontos de acesso a imagem precisar.
- Desativar efeito de pulso: desligue a animação pulsante nos marcadores.
- Guia de posição: Posição horizontal e vertical em porcentagem para cada marcador.
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, texto curto, um ícone ou uma imagem dentro do marcador.
- Texto e Link: o texto dentro do marcador e uma URL, que funciona quando as dicas de ferramentas se abrem ao passar o mouse ou são desativadas nessa tela.
- Conteúdo da dica de ferramenta: o texto da dica de ferramenta É editado em uma caixa WYSIWYG, mas a dica de ferramenta mostra apenas texto simples.
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. Desativar ligado esconde dicas de ferramentas em Tablet & Mobile ou Mobile.
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 os controles deslizantes da guia Posição e visualize em um telefone para verificar cada marcador.
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 Master Addons Pro para Elementor que fixa marcadores interativos em uma imagem Cada hotspot tem sua própria posição, tipo de marcador, dica de ferramenta de texto simples e link opcional, 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ê o coloca com os controles deslizantes em sua 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. O link funciona quando as dicas de ferramentas se abrem ao passar o mouse ou são desativadas nessa tela 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, depois estilize os marcadores e defina o comportamento da dica de ferramenta. Para exemplos e uma comparação com o Hotspot do Elementor Pro, consulte o Widget de ponto de acesso de imagem do elementor página. 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.
