Como Adicionar Hotspots de Imagem no WordPress (Do Jeito Fácil) 

Imagine uma foto estilizada de um quarto onde cada item (a luminária, a estrutura da cama, a almofada) tem uma etiqueta clicável que leva à sua página de produto. Isso é um hotspot de imagem, e pode substituir uma grade de produtos inteira por uma única imagem.

Eu mesmo usei o bloco Hotspot do SeedProd em páginas de produtos e tive dicas ativas em cerca de 10 minutos. Neste tutorial, mostrarei como adicionar hotspots de imagem no WordPress passo a passo, sem necessidade de código.

Aqui estão alguns usos no mundo real:

• Montagem de produtos de e-commerce: Marque cada item em uma foto de ambiente (estrutura da cama, luminária, almofadas) com um link para cada página de produto. Uma imagem substitui uma grade de produtos inteira.
• Diagramas de e-learning: Rotule gráficos de anatomia, mapas históricos ou esquemas técnicos sem sobrecarregar a imagem com texto.
• Tours virtuais de imóveis: Adicione hotspots a fotos de ambientes com dimensões, características ou atrações próximas rotuladas.
• Fotografia de eventos: Identifique pessoas em uma foto de grupo marcando nomes ou identificadores de redes sociais.

Adicionar hotspots de imagem ao seu site WordPress é uma ótima maneira de torná-lo mais interativo. Quando os visitantes interagem com seus mapas de imagem, eles passam mais tempo em seu site, o que ajuda a reduzir sua taxa de rejeição.

Além disso, criar imagens de hotspot interativas pode melhorar a experiência do usuário, o que, por sua vez, pode aumentar suas taxas de conversão.

Agora que você sabe o que são hotspots de imagem, provavelmente tem algumas perguntas. Como você cria imagens de hotspot e qual é a maneira mais fácil de adicioná-las ao seu site WordPress?

Mostraremos como fazer isso a seguir.

Como Adicionar Hotspots de Imagem no WordPress

Existem várias maneiras de adicionar hotspots de imagem ao seu site WordPress. Você pode usar um plugin de hotspot de imagem para WordPress, um tema WordPress com funcionalidade de hotspot como o Divi, ou codificar um você mesmo com HTML e CSS personalizado.

A maneira mais fácil de adicionar hotspots de imagem ao seu site WordPress é com um construtor de sites de arrastar e soltar como o SeedProd.

Observação: O bloco Hotspot requer SeedProd Pro ou superior. Se você estiver no plano gratuito, existem plugins gratuitos de hotspot de imagem no WordPress.org que suportam até 6 hotspots por imagem sem custo.

O bloco Hotspot do SeedProd gerencia o posicionamento, as dicas e a animação por meio de arrastar e soltar. Nenhum shortcode ou CSS é necessário.

Neste guia, usarei o SeedProd para adicionar hotspots de imagem ao WordPress. Siga as etapas abaixo para começar.

Passo 1. Instale e Ative o SeedProd

Primeiro, acesse o site do SeedProd e baixe o plugin. Embora o SeedProd tenha uma versão gratuita, usaremos o SeedPod Pro para este tutorial, pois ele inclui o bloco Hotspot de Imagem.

Depois de escolher seu plano de preços e baixar o arquivo zip do plugin, você precisará instalá-lo e ativá-lo em seu site WordPress. Você pode consultar este guia sobre como instalar um plugin do WordPress se precisar de ajuda com esta etapa.

Após adicionar o SeedProd ao seu site WordPress, navegue até a página SeedProd » Configurações e insira sua chave de licença do produto.

Você pode encontrar a chave na seção de downloads do painel da sua conta SeedProd.

Depois de inserir sua chave, clique no botão Verificar Chave para desbloquear seus recursos premium.

Etapa 2. Escolha um Tema do WordPress ou um Modelo de Página de Destino

Agora que você confirmou as configurações de sua licença, está pronto para começar a criar com o SeedProd. Para fazer isso, você precisará primeiro decidir qual tipo de layout deseja criar.

No SeedProd, você pode criar páginas de destino individuais ou sites WordPress completos com seu construtor de temas. A partir daí, você pode personalizá-los com o mesmo editor de arrastar e soltar.

Para este guia, criaremos uma página de destino autônoma. No entanto, você pode seguir este guia sobre como criar um tema personalizado do WordPress se preferir essa abordagem, e depois voltar à etapa 3 deste tutorial para aprender a adicionar hotspots de imagem.

Como estamos criando um layout de página de destino, vamos para SeedProd » Páginas de Destino, então role para baixo após a seção de modos de página de destino e clique no botão Adicionar Nova Página de Destino.

Isso o levará à biblioteca de modelos de página de destino pré-fabricados, onde você pode escolher um design que melhor atenda às necessidades do seu negócio. Cada modelo é 100% responsivo para dispositivos móveis, com designs para vários casos de uso, incluindo fitness, imóveis, marketing digital e muito mais.

Não se preocupe se não encontrar algo adequado. Você pode personalizar cada centímetro do modelo até que ele fique do jeito que você deseja. Portanto, vá em frente e escolha um modelo pairando o mouse sobre um e clicando no ícone de marca de seleção.

Na próxima tela, você pode dar um nome e URL à sua página e, em seguida, clicar no botão Salvar e Começar a Editar a Página para abri-la no editor visual do SeedProd.

Etapa 3. Adicione o Bloco Hotspot do WordPress

O construtor de páginas da SeedProd é super fácil de navegar. Você verá diferentes seções e blocos no painel esquerdo e uma prévia da página em tempo real à direita.

Clique em qualquer lugar na prévia para alterar o conteúdo de qualquer elemento. Por exemplo, clicar no bloco de texto abre um painel onde você pode digitar sua própria mensagem de boas-vindas ou descrição.

E no bloco de formulário de opt-in, você pode personalizar seus campos de formulário, alterar a cor de fundo do botão de envio e muito mais.

Antes de adicionar o widget de hotspot de imagem à sua página, vamos encontrar o local perfeito, como a primeira imagem da página.

Você precisará remover este bloco primeiro para abrir espaço para a imagem do hotspot, então passe o mouse sobre ele até ver uma borda laranja e clique no ícone da lixeira para excluí-lo.

Agora, você pode encontrar o bloco Hotspot no painel de blocos avançados e arrastá-lo para o espaço em sua página.

Em seguida, abra as configurações do bloco e adicione uma imagem onde você gostaria de adicionar ícones de hotspot.

Você pode fazer upload de uma foto do seu computador ou da biblioteca de mídia do WordPress ou escolher entre milhares de imagens de banco de imagens (disponíveis nos planos SeedProd plus e superiores).

Após adicionar uma imagem, você pode criar seu primeiro hotspot.

Simplesmente expanda o espaço reservado do hotspot e insira sua descrição do hotspot. Isso é o que aparecerá quando os usuários clicarem ou passarem o mouse sobre o ícone do hotspot.

Você pode alterar a posição do ícone circular do hotspot arrastando os controles deslizantes de orientação vertical e horizontal. Além disso, você pode alterar a cor e a animação do ícone para destacá-lo mais.

Além disso, ativar as Configurações Avançadas permite que você escolha um rótulo, insira um link e selecione ícones personalizados e tamanhos da biblioteca Font Awesome.

Para tornar seus hotspots mais atraentes, você pode abrir a seção Tooltips e escolher as configurações de gatilho e animação.

Em seguida, clicar na aba Avançado permite que você escolha mais opções de formatação e estilo, incluindo tipografia, cores de texto, espaçamento e muito mais.

Para adicionar mais hotspots à sua imagem, repita esta etapa quantas vezes desejar. Apenas lembre-se de clicar no botão Salvar para preservar suas alterações.

Configurei o bloco Hotspot em uma página de produto e os tooltips ficaram ativos em cerca de 10 minutos. Os controles deslizantes de posicionamento são mais precisos do que eu esperava.

Agora, continue personalizando sua página até que ela fique exatamente como você deseja.

Por exemplo, você pode usar o bloco Acordeão para adicionar uma seção de Perguntas Frequentes à sua página, o bloco Vídeo para exibir vídeos do YouTube ou Vimeo, o bloco Google Maps para mostrar sua localização e muito mais.

Etapa 4. Configure Suas Configurações

Clique na aba Conectar na parte superior para integrar com seu serviço de marketing por e-mail, ou na aba Configurações da Página para configurar opções de SEO, análise e domínio personalizado. Estas são opcionais, mas valem a pena configurar antes de publicar.

Etapa 5. Publique Sua Imagem Hotspot no WordPress

Após configurar suas opções, você estará pronto para publicar sua landing page e tornar sua imagem de hotspot ativa em seu site.

Para fazer isso, clique na seta no botão Salvar e selecione Publicar.

Agora, você pode visualizar sua página para ver seus hotspots de imagem em ação!

E aqui está uma visão mais detalhada da dica de ferramenta do hotspot:

Perguntas frequentes sobre como adicionar hotspots de imagem no WordPress

Para que posso usar hotspots de imagem?

Lojas de e-commerce os usam para marcar produtos em fotos de estilo de vida, vinculando cada item diretamente à sua página de produto. Você também pode usar hotspots em diagramas de eLearning para rotular partes sem sobrecarregar a imagem, em fotos de imóveis para destacar características do cômodo ou em fotos de eventos para identificar pessoas em uma foto de grupo.

Hotspots de imagem funcionam em dispositivos móveis?

Sim. O bloco Hotspot do SeedProd é responsivo a dispositivos móveis, e as dicas de ferramenta podem ser acionadas por toque em telas sensíveis ao toque. Você também pode mostrar ou ocultar elementos específicos em desktop vs. mobile na aba Avançado nas configurações do bloco.

Existe um plugin gratuito para hotspots de imagem no WordPress?

Sim, existem plugins gratuitos de hotspot de imagem no WordPress.org. A maioria suporta até 6 hotspots por imagem no plano gratuito, e alguns têm limitações de compatibilidade de tema. Se você precisar de hotspots ilimitados ou quiser a flexibilidade de posicionamento e estilo de um editor visual completo, o SeedProd Pro vale a pena considerar.

Posso personalizar o design dos meus hotspots?

Sim. No SeedProd, você pode alterar a cor do ícone, o estilo da animação, a posição e a aparência da dica de ferramenta. As configurações avançadas permitem que você escolha ícones personalizados da biblioteca Font Awesome e adicione links a cada marcador.

Agora você sabe como adicionar imagens de hotspot ao WordPress sem usar shortcodes, CSS personalizado ou add-ons desnecessários. Melhor ainda, leva apenas alguns minutos para criar hotspots de imagem interativos com o SeedProd.

Então, o que você está esperando?

Se você gostou deste tutorial, talvez também goste dos seguintes guias do WordPress:

• Como Adicionar um Botão ao Cabeçalho do Seu WordPress
• Como Criar Contadores de N ilde{u}meros Animados no WordPress
• Como Adicionar Sliders de Fotos Antes e Depois ao WordPress

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.