Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como adicionar pontos de acesso de imagem no WordPress (a maneira mais fácil)

Às vezes, adicionar imagens e recursos visuais por si só não é suficiente para atrair a atenção dos visitantes.

É aí que os hotspots de imagem podem ajudar. Essas áreas clicáveis podem transformar uma simples imagem em uma experiência envolvente e informativa para seus visitantes. Nós mesmos fizemos experiências com elas para mostrar pontos em um mapa, marcar membros da equipe em uma fotografia e destacar recursos de produtos.

Se estiver se perguntando como fazer o mesmo, você está no lugar certo. Este guia mostrará dois métodos simples para criar um ponto de acesso de imagem para seu site WordPress sem nenhum código.

How to Add Image Hotspots in WordPress

Quando adicionar pontos de acesso às suas imagens no WordPress

Os 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 pontos de acesso é quando você deseja exibir diferentes partes da imagem de um produto.

Digamos que você esteja vendendo um novo telefone. Você pode adicionar pontos de acesso para destacar a câmera, a tela e outros recursos. Isso ajuda os clientes a conhecer o produto sem ler longas descrições.

Muitos sites de artigos para casa também usam pontos de acesso de imagem para destacar os detalhes do produto de itens exibidos em fotos encenadas.

IKEA's image hotspot example

Os hotspots também são ótimos para tornar os infográficos e a visualização de dados mais envolventes. Em vez de amontoar todas as informações em uma única imagem, você pode ocultar detalhes extras atrás dos hotspots. Quando as pessoas clicam em diferentes partes do infográfico, elas podem ver mais fatos e números.

Se você administra 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 pontos de referência.

Com isso em mente, vamos ver como adicionar facilmente hotspots de imagem ao seu site WordPress. Apresentamos dois métodos, e você pode usar os links rápidos abaixo para navegar pelo artigo:

Dica de especialista: Não tem tempo ou vontade de criar seu próprio site? Considere usar nossos serviços profissionais de design para WordPress. Nossos designers especializados podem criar um site incrível a um preço acessível, dando vida ao seu próximo projeto!

Método 1: Adicionar pontos de acesso de imagem com o SeedProd (para páginas de destino/temas personalizados)

Esse primeiro método usa o SeedProd, um construtor de páginas do tipo arrastar e soltar, para adicionar pontos de acesso de imagem ao seu site do WordPress. Recomendamos esse método se você estiver criando uma página de destino personalizada ou um tema personalizado do WordPress e quiser usar uma plataforma com um bloco de pontos de acesso de imagem.

O que mais gostamos no SeedProd é que ele oferece mais de 350 modelos de página de destino e kits de temas para diferentes categorias do setor, desde butiques on-line 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 quiser apenas uma solução gratuita para criar pontos de acesso de imagem, esse método pode não ser para você. Isso ocorre porque o bloco de pontos de acesso do SeedProd está disponível somente nas versões pagas do SeedProd. Nesse caso, recomendamos usar o método 2.

Para obter mais informações sobre os recursos e o preço do plug-in, confira nossa análise do SeedProd.

Depois de adquirir um plano do SeedProd, você poderá fazer download e instalar o plug-in do WordPress em sua área de administração. Depois disso, vá para SeedProd “ Settings e insira sua chave de licença. Você pode encontrar essas informações na página da sua conta do SeedProd.

Depois disso, basta clicar em “Verify Key” (Verificar chave).

Enter your license key

Depois disso, navegue até SeedProd ” Landing Pages.

Em seguida, clique em “Add New Landing Page” (Adicionar nova página de destino).

Adding a new landing page in SeedProd

Agora você verá todos os modelos que o SeedProd oferece. Há opções para uma página de aterrissagem de lista de espera viral, uma página de aterrissagem de anúncio do Google, uma página de lançamento em breve e muito mais.

Certifique-se de percorrer as opções e visualizá-las uma a uma para que você possa escolher a que melhor atenda às suas necessidades.

SeedProd's template library

Depois de escolher um modelo, basta passar o mouse sobre sua seleção.

Em seguida, clique no botão de marca de seleção laranja.

Choosing a SeedProd template

Agora, uma nova janela pop-up será exibida, solicitando que você nomeie a página e insira o slug do URL.

Depois de fazer isso, clique em ‘Save and Start Editing the Page’ (Salvar e começar a editar a página).

Inserting the landing page details in SeedProd

Isso abrirá o editor de arrastar e soltar do SeedProd.

Ele funciona de forma semelhante ao editor de blocos do WordPress, no qual você pode arrastar e soltar blocos na página e clicar neles para personalizá-los como quiser.

The SeedProd drag-and-drop interface

Para criar hotspots de imagem, você pode encontrar o bloco “Hotspot” na barra lateral esquerda.

Em seguida, basta arrastá-lo e soltá-lo diretamente em sua página.

Choosing the SeedProd Hotspot block

Em seguida, você precisa carregar a imagem do WordPress à qual deseja adicionar pontos de acesso.

Você pode fazer isso clicando no bloco “Hotspot” e escolhendo “Use Your Own Image” ou “Use a Stock Image” para selecionar uma imagem.

A primeira opção abrirá a biblioteca de mídia, onde você poderá escolher uma imagem existente ou carregar uma nova. Se o tamanho for muito grande, consulte nosso guia sobre como fazer upload de imagens grandes no WordPress.

Uploading an image to the SeedProd Hotspot block

Depois de carregar uma imagem, você pode inserir um texto alternativo para descrever a imagem para mecanismos de pesquisa e ferramentas de leitura de tela.

Você também pode personalizar o tamanho e o alinhamento da imagem.

Adding an alt text to the image hotspot in SeedProd

Depois disso, você pode rolar para baixo para começar a adicionar seus pontos de acesso.

Você pode fazer isso clicando no botão “+ Add Hotspot”.

Adding a hotspot to the image in SeedProd

Um ponto laranja aparecerá agora em sua imagem. Você pode ajustar sua posição arrastando as barras de orientação horizontal e vertical.

Além disso, você pode inserir o texto que deve aparecer quando o cursor do usuário passar sobre o ponto de acesso.

Customizing the image hotspot settings in SeedProd

Movendo-se para baixo, você pode alterar a cor do ponto de acesso.

Basta clicar nas configurações de “Cor” para escolher uma cor que se adapte à sua marca e ao design do site.

Changing the hotspot color in SeedProd

Se você continuar rolando a tela para baixo, poderá ativar o botão de alternância “Configurações avançadas”.

É aqui que você pode adicionar um link ao texto da dica de ferramenta do seu ponto de acesso para que os usuários possam ser redirecionados para a página desejada.

Enabling the hotspot block's advanced settings in SeedProd

Além disso, você pode escolher um ícone personalizado para substituir a forma de círculo padrão.

Para fazer isso, basta clicar no botão “Choose Icon” (Escolher ícone).

Replacing the hotspot icon in SeedProd

Será exibida uma janela pop-up na qual você poderá escolher vários ícones da biblioteca do SeedProd. Você também pode escolher ícones da Font Awesome se precisar de mais opções.

Para usar um ícone, basta clicar nele.

Choosing an icon for the hotspot in SeedProd

Depois de escolher um ícone, você pode arrastar a barra “Icon Size” (Tamanho do ícone) para tornar a forma menor ou maior, dependendo de suas preferências.

Você pode repetir as etapas para criar mais pontos de acesso de imagem interativos.

Abaixo, você pode adicionar um efeito animado aos pontos de acesso da imagem. Há duas opções: “Soft Beat” (batida suave) e “Expand” (expandir).

Adding an animated effect to the hotspot block in SeedProd

Agora, vamos passar para a seção “Tooltip”.

Aqui, você pode alterar a posição da dica de ferramenta (direita, esquerda, acima ou abaixo do ponto de acesso) e alterar o acionador.

Se você selecionar “Click”, isso significa que a dica de ferramenta será exibida quando o usuário clicar no ponto de acesso. Por outro lado, “Hover” significa que a dica de ferramenta aparecerá quando o cursor passar sobre ela.

Adding a tooltip trigger to the hotspot block in SeedProd

Em seguida, você pode alterar a duração da dica de ferramenta.

Isso se refere apenas ao tempo que levará para a dica de ferramenta aparecer depois que o usuário passar o mouse sobre o ponto de acesso ou clicar nele. Se você quiser que o texto seja exibido instantaneamente, basta definir esse valor como 0.

Você também pode desativar a seta da dica de ferramenta, dependendo de suas preferências.

Setting the tooltip duration for the hotspot block in SeedProd

Agora, se você mudar para a guia “Advanced” (Avançado), poderá personalizar ainda mais a aparência da imagem.

Por exemplo, você pode adicionar um sombreamento de caixa ou ajustar o preenchimento e a margem.

Configuring the SeedProd advanced block settings

Quando terminar, basta clicar no botão “Save” (Salvar) no canto superior direito.

Em seguida, clique em “Publicar” para tornar a página ativa.

Publishing a landing page with an image hotspot made with SeedProd

E é isso! Certifique-se de visualizar a página no celular, no desktop e no tablet para ver se ela está boa em todos os dispositivos.

Veja como é o nosso hotspot de imagem interativo:

An image hotspot example made with SeedProd

Método 2: Adicionar pontos de acesso de imagem com o plug-in de ponto de acesso de imagem (gratuito, mas limitado)

Se usar um construtor de páginas e trocar de tema parecer um pouco demais, você pode usar o plug-in gratuito WordPress Image Hotspot. Esse plug-in é uma ótima alternativa ao método 1, mas observe que a versão gratuita só permite adicionar até 6 pontos de acesso em uma única imagem.

Para usar o Image Hotspot, instale e ative o plug-in do WordPress em sua área de administração. Em seguida, vá para Image Map Hotspot ” All Image Map Hotspot e clique no botão “Add New” (Adicionar novo).

Adding a new image in the Image Hotspot plugin

Agora, vá em frente e dê um nome ao seu novo ponto de acesso do mapa de imagens. Em seguida, selecione um dos tipos de exibição de dica de ferramenta. Você pode fazer com que as dicas de ferramentas do hotspot apareçam ao passar o mouse ou ao clicar.

Quando terminar, clique em “Salvar”.

Saving a new image hotspot file in the Image Hotspot plugin

Com isso concluído, vamos adicionar sua imagem.

Para fazer isso, basta clicar no botão “Upload Image” (Carregar imagem).

Uploading a new image to the Image Hotspot plugin

Isso abrirá a biblioteca de mídia, onde você poderá carregar uma nova imagem ou selecionar uma já existente.

Em seguida, você pode adicionar pontos de acesso ao seu mapa de imagens. Basta clicar no botão “Add Point” (Adicionar ponto) para fazer isso.

Adding a hotspot to an image with the Image Hotspot plugin

Uma janela pop-up será exibida para que você configure seu ponto de acesso de imagem interativa.

Primeiro, navegue até a guia “Marker” (Marcador). É aqui que você pode personalizar a aparência da imagem do ponto de acesso. Para alterar os ícones, você pode clicar no sinal “+” ao lado dos campos “Icons” e/ou “Hover Icons”.

“Ícones” refere-se ao símbolo padrão do ponto de acesso quando ele não está sendo clicado ou quando se passa o mouse sobre ele. Enquanto isso, “Hover Icons” é o símbolo que aparece quando o usuário clica ou passa o mouse sobre o ponto de acesso.

Changing the default hotspot icon with the Image Hotspot plugin

Agora, vá em frente e selecione um ícone para substituir a opção padrão atual. O plug-in tem muitas opções de escolha.

Depois de fazer sua escolha, basta clicar nela e pressionar o botão “Fechar”.

Choosing a hotspot icon in the Image Hotspot plugin

Com as imagens do seu ponto de acesso configuradas, você pode alterar as cores dos ícones.

O plug-in permite que você torne a cor padrão do ícone do ponto de acesso diferente da cor do ícone ao passar o mouse. Dessa forma, os usuários podem saber facilmente se um ponto de acesso está ativo quando clicam ou passam o mouse sobre ele.

Customizing the Image Hotspot plugin's hotspot appearance settings

Para alterar a cor, basta clicar no botão quadrado de seleção de cores e selecionar a cor que deseja usar.

Em seguida, você pode clicar em qualquer lugar da página para passar para outra configuração.

Choosing a color for the default hotspot with the Image Hotspot plugin

Você também pode personalizar o tamanho do ícone do ponto de acesso na área de trabalho. Quanto maior o número, maior será o ícone.

Quando estiver satisfeito com a aparência do ícone, basta clicar em “Salvar”.

Changing the hotspot's icon size with the Image Hotspot plugin

Agora, role a tela para cima e vá para a guia “Content” (Conteúdo). É aqui que você pode personalizar o texto e a aparência da dica de ferramenta.

O plug-in oferece 4 modelos para você escolher, de modo que você pode escolher o que melhor se adapta ao design do seu site.

Configuring the hotspot's tooltip text with the Image Hotspot plugin

Além disso, certifique-se de substituir o conteúdo padrão do título por seu próprio texto.

E, dependendo do design do seu site, talvez você queira aumentar o tamanho da fonte e alterar a cor do texto para melhorar a legibilidade.

Quando estiver satisfeito com as configurações, basta clicar em “Save” (Salvar).

Saving the tooltip settings of the Image Hotspot plugin

A última guia é “link”. Aqui, você tem a opção de fazer com que o texto da dica de ferramenta tenha um hiperlink, para que os usuários possam ser redirecionados para uma página diferente.

Se quiser fazer isso, selecione “Yes” na configuração “Do you Link Title?”.

Depois disso, insira o URL do link do título no campo apropriado e escolha se deseja que o link seja aberto em uma nova guia ou não.

Por fim, clique em “Salvar”.

Adding a link to the hotspot's tooltip text with the Image Hotspot plugin

Agora, um novo ponto de acesso deve aparecer em sua imagem, que você pode arrastar para a posição desejada.

Você também pode repetir as mesmas etapas anteriores para criar mais pontos de acesso de imagem.

Dragging the newly created hotspot on the image with the Image Hotspot plugin

Depois de configurar o mapa de imagens, você pode clicar novamente no botão “Save” (Salvar).

Para adicionar o ponto de acesso da imagem a qualquer uma de suas páginas, posts e/ou widgets, você pode copiar o shortcode acima da imagem.

Copying the image hotspot's shortcode made with the Image Hotspot plugin

Depois disso, basta colar o shortcode em um bloco de shortcode em seu widget, página ou publicação no editor de blocos. Você pode saber mais sobre como fazer isso em nosso guia passo a passo sobre como adicionar e usar códigos de acesso no WordPress.

Esta é a aparência de nosso hotspot de imagem interativo:

Image hotspot example made with the Image Hotspot plugin

Descubra mais recursos de design interessantes para seu site WordPress

Além de criar pontos de acesso de imagens interativas, há muitas outras maneiras de tornar o design do seu site envolvente. Aqui estão alguns guias para ajudá-lo:

Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente hotspots de imagem no WordPress. Talvez você também queira dar uma olhada em nosso guia definitivo de truques da barra lateral do WordPress para obter o máximo de resultados e em nossas escolhas de especialistas dos melhores criadores de temas do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

Comentários

  1. Parabéns, você tem a oportunidade de ser o primeiro comentarista deste artigo.
    Tem alguma dúvida ou sugestão? Deixe um comentário para iniciar a discussão.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.