Componente Hotspot
O bloco Hotspot foi pensado para transformar uma imagem numa área interativa com pontos de destaque que revelam conteúdo contextual. Permite combinar imagem principal, vários hotspots, texto, imagem de apoio, botão e link com controlos estruturais como Skin, Full Width, Block ID, Extra Class, Button Style, espaçamentos e animação.
Informações gerais
O bloco Hotspot é uma solução visual para apresentar uma imagem principal com vários pontos interativos distribuídos sobre a composição. Cada ponto pode abrir conteúdo complementar e ajudar o utilizador a explorar detalhes, produtos, zonas específicas de um espaço ou informações contextuais sem sair da mesma área visual.
Este bloco pode incluir:
- uma imagem principal que serve de base à experiência interativa
- vários hotspots posicionados sobre a imagem
- conteúdo por ponto com Título, Texto e Imagem com ALT e TÍTULO
- ações opcionais através de Label Button e URL
- controlo estrutural com Skin, Disabled block, Full Width, Block ID e Extra Class
- ajustes de Button Style, Margin, Padding e animação
Utiliza este componente quando a imagem precisa de ganhar uma camada de exploração adicional e quando faz sentido guiar a atenção para pontos concretos da composição. É especialmente útil para produto, decoração, arte, espaços físicos, mapas visuais e contextos em que o detalhe beneficia de navegação pontual.
Exemplos visuais do bloco
Três leituras possíveis do mesmo componente
O bloco Hotspot pode assumir leituras diferentes conforme a imagem base, a forma como os pontos são distribuídos e o tipo de conteúdo associado a cada interação. O slideshow abaixo mostra três momentos úteis para perceber o papel deste componente.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para destacar detalhes específicos de uma imagem sem fragmentar a composição
- Para explicar zonas de produto, peças de decoração, obras, plantas ou mapas visuais
- Para criar uma exploração guiada com pontos clicáveis e conteúdo complementar
- Para combinar imagem principal com informação adicional sem obrigar o utilizador a sair do contexto visual
Quando evitar
- Quando a imagem é demasiado pequena ou já está visualmente muito densa
- Quando existem pontos a mais e a experiência fica confusa ou difícil de tocar em mobile
- Quando o conteúdo é mais linear e seria melhor comunicado com Lista, Acordeão ou Imagem + Texto
Como usar na prática
Estrutura de trabalho recomendada
Preparar a imagem base
- Escolher uma imagem suficientemente legível e com áreas onde os pontos possam respirar
- Garantir que a composição continua clara em desktop e em mobile
Definir os hotspots
- Distribuir os pontos de forma equilibrada sobre a imagem
- Evitar sobreposições, zonas de clique demasiado pequenas ou uma densidade excessiva
Preencher o conteúdo
- Adicionar Título, Texto, imagem de apoio com ALT e TÍTULO e, se necessário, Label Button e URL
- Manter o texto curto, objetivo e coerente com o detalhe que o hotspot está a explicar
Ajustar e validar
- Definir Skin, Full Width, Block ID, Extra Class e Button Style
- Testar a interação no preview para confirmar posicionamento, legibilidade e comportamento do clique
Boas práticas de conteúdo
Clareza, hierarquia e usabilidade
Posicionamento e densidade
- Distribui os hotspots de forma equilibrada para não concentrar tudo na mesma zona da imagem
- Evita colocar pontos em áreas com detalhe excessivo ou demasiado perto das extremidades
- Se houver muitos detalhes para explicar, pode ser melhor dividir a informação por mais do que uma imagem
Clareza do conteúdo
- Usa títulos curtos e texto objetivo para que cada ponto responda rapidamente à expectativa criada
- Se existir botão, o rótulo deve explicar bem a ação e a URL deve corresponder ao contexto do hotspot
- Testa sempre a leitura em mobile, sobretudo quando o conteúdo interno inclui imagem adicional ou CTA
Configurações avançadas do componente Hotspot
Estrutura, botão, espaçamentos e animação
Estas opções controlam a forma como o hotspot entra no layout: variante visual, largura, identificação estrutural, estilo de botão, espaçamentos e animação.
Estrutura do bloco
- Skin define a variante visual base do componente
- Disabled block permite desativar o bloco sem o remover
- Full Width permite dar maior presença à imagem dentro da composição
Identificação e botão
- Block ID ajuda em âncoras, navegação interna e referência técnica
- Extra Class permite acrescentar uma classe adicional para ajustes específicos
- Button Style define a linguagem visual do CTA associado aos hotspots
Espaçamentos e animação
- Margin e Padding afinam a relação do bloco com o restante layout
- Animation on/off ativa ou desativa a entrada animada do bloco
- Scroll animation type define a linguagem de movimento aplicada no frontend
- Usa animação apenas quando ela reforça a descoberta visual e não dificulta a leitura da imagem
Configuração do conteúdo principal
Imagem base, hotspots e conteúdo de cada ponto
Na configuração principal do bloco defines a imagem base do hotspot e o conteúdo individual de cada ponto interativo.
Imagem principal
- O campo Hotspot Images recebe a imagem principal onde os pontos serão posicionados
- É importante que a imagem tenha boa leitura e espaço suficiente para acomodar os pontos interativos
- Convém validar no preview se o enquadramento continua eficaz em vários ecrãs
Conteúdo de cada hotspot
- Cada item pode incluir um seletor inicial, Título, Texto e uma Imagem complementar com ALT e TÍTULO
- Este conteúdo deve esclarecer o detalhe que o ponto está a destacar, sem repetir informação em excesso
- Se a imagem de apoio não acrescentar contexto real, pode ser melhor simplificar o item
Ação e navegação
- Os campos Label Button e URL permitem ligar cada hotspot a uma ação complementar
- O botão só deve existir quando há um destino claro e coerente com a expectativa criada no ponto
- Testa sempre o clique, o rótulo e a hierarquia visual do conteúdo antes de publicar
Guias relacionados
Documentação complementar para navegação visual