Como criar imagens interativas no WordPress e por que você deveria

Se você sempre quis usar imagens interativas para envolver os visitantes do seu site, hoje é o dia para começar. É mais fácil do que nunca criar mapas clicáveis, plantas baixas e até infográficos. Atraia visitantes para qualquer imagem, tornando-a interativa em minutos.

Se você estava desenvolvendo sites na década de 1990, provavelmente está familiarizado com mapas de imagens. São coordenadas (geralmente chamadas de “pontos de acesso”) mapeadas na parte superior de uma imagem. As coordenadas possibilitaram o link para outras páginas clicando em determinadas áreas da imagem.

Os mapas de imagens modernos funcionam com os mesmos princípios básicos, mas há muito mais opções disponíveis hoje. Você ainda pode criar links para páginas, mas agora temos efeitos de foco e janelas pop-up que realmente sobrecarregam os mapas de imagens.

Usaremos o Chamar atenção plugin para criar imagens interativas que irão envolver e entreter seus visitantes.

Instalando o plug-in Chamar atenção

Faça login no painel de administração do WordPress.

Na navegação da coluna esquerda, passe o mouse sobre o link “Plugins” e clique no link “Adicionar Novo”.

Na caixa “Pesquisar plug-ins…”, digite “Chamar atenção”.

Depois de localizar o plugin, clique no botão “Instalar agora”.

Clique no botão “Ativar”.

Configurando Chamar Atenção

Nenhuma configuração de plug-in é necessária para criar imagens jpg, png ou gif interativas usando o Draw Attention. Mapearemos as interações da imagem e depois incluiremos a imagem em uma página ou postagem usando códigos de acesso.

Ler:  Como usar o complemento Ooohboi Steroids para WordPress Elementor

Como tornar uma imagem clicável

Na navegação da coluna esquerda, passe o mouse sobre o link “Chamar atenção” e clique no link “Editar imagem”.

A primeira coisa que faremos é dar um título à imagem. O título ficará visível quando exibirmos a imagem e ajuda a gerenciar várias imagens no sistema.

A seguir, na caixa “Imagem” na coluna da direita, selecione uma imagem. Você pode escolher uma imagem da sua biblioteca de mídia ou fazer upload de uma nova. Faremos upload de uma nova imagem para este tutorial.

Agora role para baixo até a seção “Áreas de hotspot”.

Para desenhar nossas primeiras coordenadas, clicaremos no link “Área Clicável #1”.

Isso adiciona a imagem que carregamos na seção “Coordenadas”.

Para simplificar esta demonstração, escolhi uma imagem infográfica com formas básicas para delinear. Você também pode delinear formas mais complexas depois de aprender a usar o plug-in.

Para começar, basta clicar na imagem onde deseja o primeiro ponto. Em seguida, clique no restante dos pontos para completar a forma.

Clicar nos dois primeiros pontos cria uma linha.

Clicar no terceiro ponto cria a caixa do ponto de acesso.

Depois, basta clicar no restante dos pontos para completar a forma.

Se você cometer um erro e quiser remover um ponto, mantenha pressionada a tecla Ctrl e clique no ponto. Para remover todos os pontos de um hotspot, clique no botão “Reset” logo abaixo da imagem.

Por enquanto, vamos apenas criar um único ponto de acesso para que possamos seguir todas as etapas.

Role para baixo até a seção “Título” (abaixo da imagem à qual você acabou de adicionar um ponto de acesso) e insira um título. Este será o título do hotspot que acabamos de desenhar.

Ler:  Como eliminar recursos de bloqueio de renderização no WordPress

A seção “Ação” é onde você escolhe o que acontece quando um visitante clica no ponto de acesso da imagem. Existem duas opções, “Mostrar mais informações” e “Ir para URL”.

Mostrar mais informações

Escolher “Mostrar mais informações” permite inserir texto no campo “Descrição” e uma imagem no campo “Imagem detalhada”.

Vamos dar uma olhada mais de perto no que essa opção faz.

  • Adicione um título para o ponto de acesso.
  • Selecione “Mostrar mais informações” como “Ação”.
  • Insira uma “Descrição”.
  • Faça upload de uma “imagem detalhada” que queremos exibir quando o ponto de acesso for clicado.

Role de volta até o topo e clique no botão “Atualizar”.

Agora clique no link “Ver postagem”.

Agora você pode ver a imagem interativa. Passe o mouse sobre o ponto de acesso e você verá a sobreposição e o título do ponto de acesso.

E se você clicar no hotspot, as informações “Mostrar mais informações” serão exibidas à esquerda.

Pessoalmente, não adoro a exibição padrão. A versão paga do plugin oferece mais opções de layout para que a caixa de informações adicionais possa ser movida. Mas algumas partes da aparência podem ser alteradas com CSS na versão gratuita.

E, claro, as páginas são exibidas de forma diferente em cada tema. Na verdade, é apenas uma questão estética subjetiva. Sua experiência pode variar.

Ir para URL

A outra opção de “Ação” é Ir para URL. Vamos mapear outro hotspot e ver como isso funciona.

Volte para a página de edição de imagens e role para baixo até a seção “Áreas de hotspot”.

Clique no botão “Adicionar outra área”.

Mapeie o segundo ponto de acesso.

Role para baixo e adicione um título para o ponto de acesso.

Para “Ação”, escolha “Ir para URL”.

Insira o URL ao qual deseja vincular no campo “URL”.

Ler:  Tudo o que você precisa saber para desenvolver uma estratégia de marketing de comércio eletrônico

Marque a caixa “Abrir em nova janela” se desejar que o link seja aberto em uma nova janela.

Role para cima e clique no botão “Atualizar” na parte superior da página.

Agora, ao clicar no link “Ver postagem”, você pode ver que a imagem interativa possui outro ponto de acesso.

Clicar no ponto de acesso nos leva à página à qual vinculamos.

Marcamos a caixa “Abrir em nova janela”, mas uma nova janela não abre quando o hotspot é clicado.

A única maneira que encontrei de corrigir isso foi voltar para a imagem, abrir aquele ponto de acesso, marcar a caixa “Abrir em nova janela” (novamente) e salvar a imagem novamente. Isso fez com que o link do ponto de acesso abrisse uma nova janela.

Adicionando a imagem a uma página ou postagem

Até agora, visualizamos a imagem em sua própria página. Então, como podemos adicioná-lo a uma página ou postagem no site?

Na seção de edição de imagens, role para baixo e procure a caixa “Copiar Shortcode” na coluna da direita.

Copie esse shortcode, [drawattention]e cole-o em uma página ou postagem.

Atualize a página ou postagem e a imagem será adicionada.

Como você pode ver, a exibição ainda é problemática. Mas, novamente, isso dependerá do tema e certos elementos podem ser ajustados com alterações de CSS.

Se você não tiver certeza de como adicionar CSS personalizado a um site WordPress, temos algumas dicas para ajudá-lo.

Personalização Adicional

O esquema de cores usado para os pontos de acesso é personalizável. Primeiro, na seção “Estilo de destaque”, onde o mouse sobre as cores e a opacidade podem ser alterados.

Em seguida, você também pode alterá-lo na seção “Estilo da caixa de mais informações”, que controla a barra de informações adicionais exibida ao lado da imagem.

Ler:  Como testar a velocidade do Moodle

A seção “Mais informações padrão” permite adicionar texto que será mostrado antes de qualquer interação do ponto de acesso.

A versão gratuita do plugin permite criar apenas uma imagem interativa. Isso o torna mais um plugin de demonstração do que uma ferramenta útil para o dia a dia.

Mas se gostar da forma como funciona, você pode adquirir uma licença. Isso desbloqueia a capacidade de criar várias imagens, bem como as opções adicionais de layout de que falamos anteriormente.

O que acontece se você desinstalar o plug-in Chamar atenção?

Se você desinstalar o plugin, páginas e postagens que usaram o plugin vai ser afetado. Os problemas incluem o seguinte:

  • As imagens interativas criadas pelo plugin ainda estarão presentes, mas os recursos interativos não funcionarão mais.
  • Os códigos de acesso do plug-in irão parar de funcionar, então os próprios códigos de acesso serão exibidos em qualquer lugar em que foram usados.

Imagens interativas atingiram a maioridade

Os mapas de imagens eram como uma espécie de magia negra da web mundial quando apareceram em cena. Mas eram primitivos (e muitas vezes mal implementados) em comparação com o que podemos fazer agora.

Você viu que criar um ponto de acesso de imagem no WordPress pode ser feito de forma rápida e fácil. E percorremos as etapas para criar alguns tipos diferentes de pontos de acesso e como implementá-los.

Com esses blocos de construção, você pode levar suas imagens interativas ainda mais longe. Se você pode imaginar isso, provavelmente poderá fazer acontecer.

Você já experimentou mapas de imagens, pontos de acesso e interação com imagens em seu site? Você conhece algum uso interessante que não mencionamos? Deixe-me saber nos comentários!

Novas publicações:

Recomendação