Quer tornar suas imagens do WordPress mais interativas e envolventes? Hotspots de imagem transformam fotos estáticas em conteúdo dinâmico, adicionando áreas clicáveis que revelam informações adicionais.
Nós mesmos experimentamos com eles para mostrar pontos em um mapa, marcar membros da equipe em uma fotografia e destacar recursos de produtos. Com base em nossa pesquisa, encontramos 2 maneiras fáceis de adicionar hotspots de imagem no WordPress.
Pronto para aprimorar a experiência visual do seu site? Vamos começar.
Quando Adicionar Hotspots às Suas Imagens no WordPress
Hotspots de imagem são pontos clicáveis que podem transformar imagens simples em conteúdo interativo que os visitantes podem explorar. Mas quando você deve pensar em adicionar hotspots às suas imagens?
Um bom momento para usar hotspots é quando você quer mostrar diferentes partes de uma imagem de produto.
Digamos que você esteja vendendo um novo telefone. Você pode adicionar hotspots para destacar sua câmera, tela e outros recursos. Isso ajuda os clientes a aprenderem sobre o produto sem ler longas descrições.
Muitos sites de artigos para casa também usam anotações de imagem para destacar os detalhes do produto de itens exibidos em fotos encenadas.
Hotspots também são ótimos para criar infográficos e tornar a visualização de dados mais envolvente. Em vez de sobrecarregar uma imagem com todas as informações, você pode ocultar detalhes extras atrás de hotspots. Quando as pessoas clicam em diferentes partes do infográfico, elas podem ver mais fatos e números.
Se você gerencia um site de eLearning, os hotspots podem melhorar a experiência do usuário e tornar suas aulas mais interativas. Por exemplo, você pode adicionar hotspots a um mapa, permitindo que os alunos cliquem para aprender sobre diferentes países ou marcos.
Com isso em mente, vamos ver como adicionar facilmente hotspots de imagem ao seu site WordPress. Criamos 2 métodos, e você pode usar os links rápidos abaixo para navegar pelo artigo:
- Método 1: Adicionar Hotspots de Imagem com SeedProd (Para Landing Pages/Temas Personalizados)
- Método 2: Adicionar Hotspots de Imagem com o Plugin Image Hotspot (Gratuito, mas Limitado)
- Mais Dicas de Design para WordPress que Você Deveria Saber
Método 1: Adicionar Hotspots de Imagem com SeedProd (Para Landing Pages/Temas Personalizados)
Este primeiro método usa o SeedProd, um construtor de páginas arrastar e soltar, para adicionar hotspots de imagem ao seu site WordPress. Recomendamos este método se você estiver criando uma página de destino personalizada ou um tema WordPress personalizado e quiser usar uma plataforma com um bloco de hotspot de imagem.
Já testamos outros construtores de páginas no passado, como Divi e WPBakery, mas o SeedProd sempre se destaca.
O que amamos no SeedProd é que ele oferece mais de 350 modelos de página de destino e kits de temas para diferentes categorias de setores, desde boutiques online e serviços de limpeza até empresas de SaaS. Portanto, há uma opção para cada tipo de site.
Uma coisa que você deve considerar é que, se você quer apenas uma solução gratuita para criar hotspots de imagem, então este método pode não ser para você. Isso ocorre porque o bloco de hotspot do SeedProd está disponível apenas nas versões pagas do SeedProd. Nesse caso, recomendamos seguir com o método 2.
Para mais informações sobre os recursos e preços do plugin, confira nossa análise do SeedProd.
Assim que você comprar um plano do SeedProd, poderá baixar e instalar o plugin do WordPress na sua área de administrador. Depois disso, vá para SeedProd » Configurações e insira sua chave de licença. Você pode encontrar essas informações na sua página de conta do SeedProd.
Assim que terminar, basta clicar em ‘Verificar Chave’.
Depois disso, navegue até SeedProd » Landing Pages.
Em seguida, clique em ‘Adicionar Nova Landing Page’.
Agora você verá todos os modelos que o SeedProd oferece. Existem opções para uma landing page viral de lista de espera, uma landing page de anúncio do Google, uma página de em breve e muito mais.
Certifique-se de rolar pelas opções e visualizá-las uma por uma para que você possa escolher a que melhor atende às suas necessidades.
Assim que decidir por um modelo, basta passar o mouse sobre sua seleção.
Em seguida, clique no botão de marca de seleção laranja.
Agora, um novo pop-up aparecerá, pedindo para você nomear a página e inserir seu slug de URL.
Depois de fazer isso, clique em ‘Salvar e Começar a Editar a Página’.
Isso abrirá o editor de arrastar e soltar do SeedProd.
Ele funciona de forma semelhante ao editor de blocos do WordPress, onde você pode arrastar e soltar blocos na página e clicar neles para personalizá-los como quiser.
Para criar hotspots de imagem, você pode encontrar o bloco ‘Hotspot’ na barra lateral esquerda.
Em seguida, basta arrastá-lo e soltá-lo na sua página.
Em seguida, você precisa carregar a imagem do WordPress à qual deseja adicionar hotspots.
Você pode fazer isso clicando no bloco ‘Hotspot’ e escolhendo ‘Usar Sua Própria Imagem’ ou ‘Usar uma Imagem de Estoque’ para selecionar uma imagem.
A primeira opção abrirá a biblioteca de mídia onde você pode escolher uma imagem existente ou carregar uma nova. Se o tamanho for muito grande, você pode conferir nosso guia sobre como carregar imagens grandes no WordPress.
Depois de carregar uma imagem, você pode inserir um texto alternativo (alt text) para descrever a imagem para mecanismos de busca e ferramentas de leitura de tela.
Você também pode personalizar o tamanho e o alinhamento da imagem.
Depois disso, você pode rolar para baixo para começar a adicionar seus hotspots.
Você pode fazer isso clicando no botão ‘+ Adicionar Hotspot’.
Um ponto laranja aparecerá agora na sua imagem. Você pode ajustar sua posição arrastando as barras de orientação horizontal e vertical.
Adicionalmente, você pode inserir o texto que deve aparecer quando o cursor de um usuário pairar sobre o hotspot.
Descendo, você pode alterar a cor do hotspot.
Simplesmente clique nas configurações de ‘Cor’ para escolher uma cor que combine com sua marca e o design do seu site.
Se você continuar rolando para baixo, poderá ativar o alternador ‘Configurações Avançadas’.
Aqui você pode adicionar um link ao texto da dica de ferramenta do seu hotspot para que os usuários possam ser redirecionados para a página desejada.
Além disso, você pode escolher um ícone personalizado para substituir a forma circular padrão.
Para fazer isso, basta clicar no botão ‘Escolher Ícone’.
Uma janela pop-up aparecerá onde você pode escolher vários ícones da biblioteca do SeedProd. Você também pode escolher ícones do Font Awesome se precisar de mais opções.
Para usar um ícone, basta clicar nele.
Depois de escolher um ícone, você pode arrastar a barra ‘Tamanho do Ícone’ para tornar a forma menor ou maior, dependendo de suas preferências.
Você pode então repetir os passos para criar mais hotspots de imagem interativos.
Abaixo, você pode adicionar um efeito animado aos seus hotspots de imagem. Existem 2 opções: ‘Batida Suave’ e ‘Expandir’.
Agora, vamos descer para a seção ‘Dica’.
Aqui, você pode alterar a posição da dica (direita, esquerda, acima ou abaixo do hotspot) e alterar o gatilho.
Se você selecionar ‘Clicar’, isso significa que a dica será exibida quando o usuário clicar no hotspot. Por outro lado, ‘Passar o mouse’ significa que a dica aparecerá quando o cursor passar sobre ela.
Em seguida, você pode alterar a duração da dica.
Isso se refere apenas a quanto tempo levará para a dica aparecer depois que o usuário passar o mouse ou clicar no hotspot. Se você quiser que o texto apareça instantaneamente, basta defini-lo como 0.
Você também pode desativar a seta da dica, dependendo de suas preferências.
Agora, se você mudar para a aba ‘Avançado’, poderá personalizar ainda mais a aparência da imagem.
Por exemplo, você pode adicionar uma sombra de caixa ou ajustar o preenchimento e margem.
Quando terminar, basta clicar no botão ‘Salvar’ no canto superior direito.
Em seguida, clique em ‘Publicar’ para tornar a página ativa.
E é isso! Certifique-se de visualizar a página no celular, desktop e tablet para ver se ela fica boa em todos os dispositivos.
Veja como fica nosso hotspot de imagem interativo:
Método 2: Adicionar Hotspots de Imagem com o Plugin Image Hotspot (Gratuito, mas Limitado)
Se você estiver usando um construtor de páginas e trocar de tema parecer um pouco demais, você pode usar o plugin gratuito do WordPress Image Hotspot em vez disso. É um dos melhores plugins de hotspot de imagem que já experimentamos e é uma ótima alternativa ao método 1.
No entanto, observe que a versão gratuita permite adicionar apenas até 6 hotspots em uma única imagem.
Para usar o Image Hotspot, você pode instalar e ativar o plugin do WordPress em sua área de administrador. Em seguida, vá para Image Map Hotspot » All Image Map Hotspot e clique no botão ‘Add New’.
Agora, dê um nome ao seu novo hotspot de mapa de imagem. Em seguida, selecione um dos tipos de exibição de tooltip. Você pode fazer com que os tooltips do hotspot interativo apareçam ao passar o mouse ou ao clicar.
Quando terminar, clique em 'Salvar'.
Com isso concluído, vamos adicionar sua imagem.
Para fazer isso, basta clicar no botão ‘Upload Image’.
Isso abrirá a biblioteca de mídia, onde você pode fazer upload de uma nova imagem ou selecionar uma existente.
Em seguida, você pode adicionar hotspots ao seu mapa de imagem. Simplesmente clique no botão ‘Add Point’ para fazer isso.
Uma janela pop-up aparecerá agora para você configurar seu hotspot de imagem interativo.
Primeiro, navegue até a aba ‘Marker’. É aqui que você pode personalizar a aparência da imagem do hotspot. Para alterar os ícones, você pode clicar no sinal ‘+’ ao lado dos campos ‘Icons’ e/ou ‘Hover Icons’.
‘Icons’ refere-se ao símbolo padrão do hotspot quando ele não está sendo clicado ou com o mouse sobre ele. Enquanto isso, ‘Hover Icons’ é o símbolo que aparece quando o usuário está clicando ou passando o mouse sobre o hotspot.
Agora, selecione um ícone para substituir a opção padrão atual. O plugin tem muitas opções para escolher.
Assim que você fizer sua escolha, basta clicar nela e apertar o botão ‘Fechar’.
Com suas imagens de hotspot configuradas, você pode alterar as cores dos ícones.
O plugin permite que você defina a cor padrão do ícone do hotspot como diferente da cor ao passar o mouse sobre o ícone. Dessa forma, os usuários podem dizer facilmente se um hotspot está ativo quando clicam ou passam o mouse sobre ele.
Para alterar a cor, basta clicar no botão quadrado de seleção de cor e escolher a cor que você gostaria de usar.
Você pode então clicar em qualquer lugar da página para passar para outra configuração.
Você também pode personalizar o tamanho do ícone do hotspot no desktop. Quanto maior o número, maior será o ícone.
Assim que estiver satisfeito com a aparência do ícone, basta clicar em 'Salvar'.
Agora, role para cima e mude para a aba 'Conteúdo'. É aqui que você pode personalizar o texto e a aparência da dica.
O plugin oferece 4 modelos para você escolher, para que você possa selecionar o que melhor se adapta ao design do seu site.
Além disso, certifique-se de substituir o conteúdo do título padrão pelo seu próprio texto.
E dependendo do design do seu site, você pode querer aumentar o tamanho da fonte e alterar a cor do texto para melhorar sua legibilidade.
Quando estiver satisfeito com as configurações, basta clicar em 'Salvar'.
A última aba é 'link'. Aqui, você tem a opção de tornar o texto da sua dica um hiperlink, para que os usuários possam ser redirecionados para uma página diferente.
Se você quiser fazer isso, selecione 'Sim' na configuração 'Você Linka o Título?'.
Depois disso, insira a URL do seu título de link no campo apropriado e escolha se deseja que o link abra em uma nova aba ou não.
Finalmente, clique em 'Salvar'.
Agora, um novo hotspot deve aparecer na sua imagem, que você pode arrastar para a posição desejada.
Você também pode repetir os mesmos passos anteriores para criar mais hotspots de imagem.
Assim que o seu mapa de imagem estiver configurado, você pode clicar no botão 'Salvar' novamente.
Para adicionar o hotspot de imagem em qualquer uma de suas páginas, posts e/ou widgets, você pode copiar o shortcode acima da imagem.
Depois disso, basta colar o shortcode em um bloco de shortcode em seu widget, página ou post no editor de blocos. Você pode aprender mais sobre como fazer isso em nosso guia passo a passo sobre como adicionar e usar shortcodes no WordPress.
Veja como fica nosso hotspot de imagem interativo:
Mais Dicas de Design para WordPress que Você Deveria Saber
Além de criar hotspots de imagem interativos, há muitas outras maneiras de tornar o design do seu site envolvente. Aqui estão alguns guias para ajudar você:
- Elementos Chave de Design para um Site WordPress Eficaz
- Como Adicionar Rolagem Infinita ao Seu Site WordPress (Passo a Passo)
- Como Adicionar Rolagem Infinita ao Seu Site WordPress (Passo a Passo)
- Como Criar um Mapa do Site Visual no WordPress (Passo a Passo)
- Como Criar uma Barra de Rodapé Flutuante Fixa no WordPress
- Como Adicionar um Redimensionador de Fonte no WordPress para Acessibilidade
- Como Adicionar um Botão de Clique para Ligar no WordPress (Passo a Passo)
- Como Adicionar uma Barra de Rolagem Personalizada no WordPress
- Como Adicionar uma Barra de Progresso em Seus Posts do WordPress
- Como Criar um Divisor de Forma Personalizado no WordPress
- Como Adicionar um Ticker de Notícias Rolante no WordPress
Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente hotspots de imagem no WordPress. Você também pode querer conferir nosso guia definitivo de truques de barra lateral do WordPress para obter resultados máximos e nossas escolhas de especialistas dos melhores construtores de temas WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Tem alguma pergunta ou sugestão? Por favor, deixe um comentário para iniciar a discussão.