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.

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.

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:

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).

Depois disso, navegue até SeedProd ” Landing Pages.

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

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.

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.

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).

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.

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.

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.

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.

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”.

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.

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.

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.

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).

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.

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).

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.

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.

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.

Quando terminar, basta clicar no botão “Save” (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, no desktop e no tablet para ver se ela está boa em todos os dispositivos.

Veja como é o nosso hotspot de imagem interativo:

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).

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”.

Com isso concluído, vamos adicionar sua imagem.

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

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.

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.

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”.

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.

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.

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”.

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.

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).

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”.

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.

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.

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:

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:

• Como adicionar rolagem infinita ao seu site WordPress (passo a passo)
• Como criar um Sitemap 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 Click-to-Call 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 com rolagem no WordPress

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.