O bloco de Hotspot permite transformar qualquer imagem estática em uma experiência interativa e clicável, colocando marcadores de hotspot diretamente sobre ela. Quando os visitantes passam o mouse ou clicam em um hotspot, um tooltip aparece com seu conteúdo personalizado — tornando-o uma maneira poderosa de destacar recursos do produto, anotar diagramas, exibir designs de ambientes ou guiar os visitantes por qualquer visual.
Cada hotspot é totalmente personalizável com seu próprio ícone, cor, posição, conteúdo do tooltip e link. Você pode adicionar quantos hotspots precisar e controlar o estilo de animação tanto para os marcadores quanto para os popups de tooltip.
Adicionando o Bloco de Hotspot às Suas Páginas
Siga estas etapas para adicionar um bloco de Hotspot à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Hotspot na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionado, clique no bloco de Hotspot para abrir suas configurações. A aba Conteúdo é organizada em três seções: Imagem, Hotspot e Tooltip.
Imagem:
- Imagem: Faça o upload ou selecione a imagem de fundo sobre a qual seus hotspots serão colocados.
- Texto Alternativo: Insira um texto alternativo descritivo para a imagem para melhorar a acessibilidade e o SEO.
- Tamanho da Imagem: Defina a largura e a altura da imagem em pixels (px) ou como uma porcentagem (%).
- Alinhamento: Defina o alinhamento horizontal do bloco de Hotspot dentro de sua seção — Esquerda, Centro ou Direita. Suporta valores por dispositivo para desktop, tablet e celular.
Hotspot:
A seção Hotspot lista todos os marcadores de hotspot adicionados à sua imagem. Cada linha de hotspot mostra seu ícone e uma prévia do conteúdo do tooltip. Você pode arrastar os hotspots para reordená-los, duplicá-los ou excluí-los. Clique em uma linha de hotspot para expandir suas configurações individuais:
- Orientação Horizontal: Defina a posição horizontal do marcador de hotspot na imagem como uma porcentagem de 0 a 100.
- Orientação Vertical: Defina a posição vertical do marcador de hotspot na imagem como uma porcentagem de 0 a 100.
- Conteúdo do Tooltip: Insira o conteúdo que aparece dentro do popup do tooltip quando o hotspot é acionado. Suporta formatação de texto rico, incluindo negrito, itálico, links e cores inline.
- Cor: Defina a cor do marcador do ícone do hotspot.
- Configurações Avançadas: Ative para revelar opções adicionais por hotspot, incluindo Rótulo, Link (com opções Abrir em Nova Janela e No Follow), Posição do Ícone (Esquerda ou Direita), seletor de Ícone, alternância de Tamanho Personalizado do Ícone e controle deslizante de Tamanho do Ícone (10–150px, visível quando o Tamanho Personalizado do Ícone está ativado).
Clique em + Adicionar Hotspot na parte inferior da lista para adicionar um novo marcador de hotspot à sua imagem.
Abaixo da lista de hotspots, o menu suspenso Animação do Hotspot define o estilo de animação contínua aplicado a todos os marcadores de hotspot — escolha entre Nenhum, Batida Suave ou Expandir.
Tooltip:
- Posição: Escolha onde o tooltip aparece em relação ao marcador do hotspot — Superior, Direita, Inferior ou Esquerda.
- Gatilho: Defina qual ação abre a dica — Nenhuma, Passar o mouse ou Clicar.
- Animação: Escolha o estilo de animação usado quando a dica aparece — Fade, Grow, Swing, Slide ou Fall.
- Duração: Defina o tempo da animação de abertura/fechamento da dica em milissegundos (0–10.000ms).
- Mostrar Seta: Ative ou desative a pequena seta direcional na bolha da dica.
- Largura Máxima: Defina a largura máxima do popup da dica em pixels (0–1000px).
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a estilização da imagem e o espaçamento do seu bloco Hotspot.
Estilos:
- Sombra da Imagem: Adicione uma sombra projetada atrás da imagem. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, X Grande ou 2X Grande.
- Borda da Imagem: Adicione uma borda ao redor da imagem. Defina o Estilo da Borda (Sólida, Pontilhada ou Tracejada), Cor da Borda, Largura da Borda (Superior, Direita, Inferior, Esquerda) e Raio da Borda para arredondar os cantos.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco Hotspot (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e mobile.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco Hotspot (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e mobile.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Hotspot, criado automaticamente pelo SeedProd para estilização personalizada ou segmentação de JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco Hotspot em telas de desktop.
- Ocultar no Tablet: Oculte o bloco Hotspot em dispositivos tablet.
- Ocultar no Mobile: Oculte o bloco Hotspot em dispositivos móveis.
Etapa 4: Salve Suas Alterações
Após terminar de configurar o bloco Hotspot e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Hotspot à sua página! Ao transformar imagens estáticas em experiências interativas, você pode guiar a atenção dos visitantes, destacar detalhes importantes e aumentar o engajamento. Experimente diferentes animações de hotspot, posições de dica e estilos de ícone para criar uma experiência que se adapte à sua marca e mantenha os visitantes explorando seu conteúdo.