Como Criar Imagens Interativas no WordPress

Encontrar a imagem perfeita para o seu post no WordPress é um ótimo começo, mas muitas vezes é uma rua de mão única. Seus visitantes veem uma imagem estática e podem perder os detalhes importantes que você deseja destacar.

Isso pode ser frustrante, especialmente quando você está tentando mostrar recursos de produtos ou guiar os usuários por um processo. E se suas imagens pudessem fazer mais e engajar ativamente seu público?

É exatamente isso que as imagens interativas fazem. Após testarmos vários plugins aqui no WPBeginner, encontramos um método direto que permite a qualquer pessoa adicionar áreas clicáveis às suas imagens sem precisar de nenhum código.

Neste guia, mostraremos como transformar facilmente suas imagens estáticas em experiências envolventes e interativas para seus visitantes.

Neste guia, vamos guiá-lo por todo o processo. Aqui está uma visão geral rápida do que você aprenderá.

1. O que é uma Imagem Interativa?
2. Como Adicionar Imagens Interativas ao Seu Conteúdo do WordPress
3. Como Importar/Exportar Imagens Interativas para Outros Sites WordPress
4. Perguntas Frequentes Sobre Imagens Interativas

O que é uma Imagem Interativa?

Uma imagem interativa pode ter áreas de hotspot, destaques, links, botões clicáveis, cores, conteúdo audiovisual e muito mais.

Imediatamente, isso é muito mais envolvente do que uma imagem padrão e simples que você carrega para o seu site WordPress.

Imagens interativas podem chamar a atenção do visitante para recursos e conteúdos específicos e, em seguida, mostrar informações adicionais.

Por exemplo, você pode mostrar um pop-up quando o visitante passar o mouse sobre uma barra específica em um gráfico.

Essa interação pode incentivar os visitantes a explorar suas imagens com mais detalhes, o que os manterá na página por mais tempo. Também pode criar uma experiência mais interativa e interessante, o que pode aumentar suas visualizações de página e reduzir a taxa de rejeição no WordPress.

Imagens interativas também podem mostrar aos visitantes os próximos passos que eles devem seguir. Por exemplo, você pode adicionar links para outras partes do seu site ou mostrar um botão de call to action.

Dito isso, vamos ver como você pode criar imagens interativas para o seu site WordPress.

Observação: Se você quiser adicionar imagens animadas ao seu site em vez disso, siga nosso guia passo a passo sobre como adicionar GIFs animados no WordPress.

Como Adicionar Imagens Interativas ao Seu Conteúdo do WordPress

A maneira mais fácil e amigável para iniciantes de adicionar áreas clicáveis ou hotspots interativos é usando o Draw Attention. Este plugin permite que você mostre um pop-up de 'mais informações' ou abra um novo URL quando o usuário interagir com uma imagem.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Draw Attention. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para Draw Attention » Edit Image no painel do WordPress. Isso o levará a uma tela onde você pode criar diferentes interações e, em seguida, adicioná-las a uma imagem como áreas clicáveis.

Para começar, digite um título para a imagem interativa.

Isso aparecerá ao lado da imagem em seu site WordPress. Por exemplo, na imagem a seguir, estamos usando o título ‘Recursos do OptinMonster’.

Após digitar um título, role até a seção ‘Imagem’ e escolha a imagem que deseja usar.

Você pode selecionar uma imagem da biblioteca de mídia ou fazer o upload de uma nova imagem.

Após escolher uma imagem, você pode adicionar cores e links, criar áreas clicáveis e mais, rolando para baixo até a seção ‘Áreas de Hotspot’.

O plugin cria uma Área Clicável 1 por padrão, então clique para expandir esta seção.

Para começar, você precisará destacar a área que deseja tornar interativa.

Draw Attention tem algumas formas diferentes que você pode usar para o destaque, então simplesmente clique na forma que deseja usar. Na imagem a seguir, selecionamos um retângulo.

Agora, simplesmente clique e arraste para destacar a área que você deseja usar como hotspot da imagem.

Draw Attention agora mostrará algumas novas configurações para esta área clicável. Para começar, digite um nome no campo ‘Título’.

Isso aparecerá como uma dica quando o visitante passar o mouse sobre o hotspot, então é uma boa ideia usar algo descritivo.

Na imagem a seguir, transformamos a área de contagem regressiva em um hotspot e adicionamos o título da imagem ‘Temporizador de Contagem Regressiva’.

Depois de fazer isso, abra o menu suspenso ‘Ação’ e escolha o que acontecerá quando um visitante clicar nesta área. O Draw Attention pode abrir um link ou exibir uma caixa de ‘mais informações’.

Você verá configurações diferentes dependendo das opções que selecionar. Por exemplo, se você escolher ‘Ir para URL’, precisará adicionar um link e especificar se ele deve abrir em uma nova aba.

Se você selecionar ‘Mostrar Mais Informações’, precisará digitar as informações que aparecerão quando o visitante clicar no hotspot.

Você também pode adicionar uma imagem ou URL de detalhe opcional, que será incluída na caixa de informações.

Na imagem a seguir, adicionamos algum texto à caixa de mais informações.

Também adicionamos o logotipo OptinMonster como uma imagem de detalhe.

Quando você estiver satisfeito com a aparência do hotspot, clique no botão ‘Adicionar Outra Área’.

Agora você pode configurar a área clicável seguindo o mesmo processo descrito acima.

Simplesmente repita essas etapas para adicionar todas as áreas clicáveis à imagem.

Com isso feito, você pode querer personalizar a aparência dos destaques e da caixa de mais informações. Por exemplo, você pode alterar a cor que o Draw Attention exibe quando os visitantes passam o mouse sobre uma área clicável usando as configurações de ‘Cor de Destaque’.

Você também pode alterar a opacidade do destaque e a largura da borda, adicionar uma borda e mais usando as configurações na seção ‘Estilização do Destaque’.

Depois disso, você pode rolar até ‘Estilização da Caixa de Mais Informações’ e ajustar a aparência da caixa. Por exemplo, você pode alterar a cor de fundo, a cor do texto e mais.

Draw Attention também vem com diferentes temas que você pode aplicar à sua imagem interativa.

Para dar uma olhada nesses temas, basta rolar até a caixa ‘Apply Color Scheme’ e abrir o menu suspenso. Você pode escolher entre Light, Dark e Draw Attention.

Todas essas opções são bastante diretas, então vale a pena experimentar diferentes configurações para ver o que fica melhor em seu site.

Ao experimentar as várias opções, você pode ter uma prévia de como elas ficarão em seu site WordPress clicando em ‘Preview Changes.’

Quando estiver satisfeito com a aparência e o funcionamento da imagem interativa, certifique-se de clicar em ‘Update’ para salvar suas alterações.

Agora você pode adicionar a imagem interativa a qualquer página, post ou área pronta para widgets usando o shortcode no bloco ‘Copy Shortcode’.

Para mais informações sobre como inserir o shortcode, consulte nosso guia sobre como adicionar um shortcode no WordPress.

Como Importar/Exportar Imagens Interativas para Outros Sites WordPress

Às vezes, você pode querer reutilizar a mesma imagem interativa em vários sites.

Por exemplo, se você é um afiliado, então você pode criar uma imagem interativa que promove um de seus produtos. Você pode então usar a mesma imagem interativa em todas as suas lojas de afiliados da Amazon e outros sites de marketing de afiliados.

Fazer upload da mesma imagem e recriar todas as interações manualmente pode levar muito tempo e esforço.

Em vez disso, recomendamos criar a imagem interativa uma vez e depois usar o recurso de importação/exportação do Draw Attention. Isso permite que você reutilize a mesma imagem em inúmeros sites ou lojas online.

Para fazer isso, você precisará instalar o plugin Draw Attention no site original que possui a imagem interativa e em todos os outros sites onde você deseja usar essa imagem.

Em seu site original, vá para Draw Attention » Importar / Exportar e marque a caixa ao lado de cada imagem que você deseja exportar.

Em seguida, clique no botão ‘Gerar Código de Exportação’. Após alguns momentos, o Draw Attention gerará um código.

Em uma aba diferente, faça login em seu outro blog WordPress ou site e vá para Draw Attention » Importar / Exportar.

Aqui, copie o código de exportação na caixa ‘Importar’ e clique no botão ‘Importar’.

O Draw Attention agora importará a imagem e todas as suas interações, prontas para você usar.

Simplesmente repita estas etapas em todos os sites onde você deseja usar a imagem interativa.

Perguntas Frequentes Sobre Imagens Interativas

Aqui estão as respostas para algumas das perguntas mais frequentes que recebemos sobre como adicionar imagens interativas no WordPress.

Qual é o melhor plugin para criar imagens interativas no WordPress?

Para iniciantes, recomendamos o plugin Draw Attention porque ele é fácil de usar e possui uma interface simples. A versão gratuita oferece todos os recursos básicos que você precisa, enquanto a versão pro desbloqueia opções mais avançadas, como múltiplos mapas de imagem e estilos extras para tooltips.

Imagens interativas são compatíveis com dispositivos móveis?

Sim, o plugin Draw Attention é totalmente responsivo. Isso significa que seus hotspots interativos e caixas de informações se ajustarão automaticamente para caber em qualquer tamanho de tela, proporcionando uma ótima experiência ao usuário em dispositivos móveis.

Posso adicionar vídeos ou animações a hotspots interativos?

Você pode usar a ação 'Ir para URL' para vincular um hotspot a um vídeo em uma plataforma como YouTube ou Vimeo. Embora a incorporação direta de vídeo no popup possa exigir a versão pro, o link é uma solução simples. Para imagens animadas, recomendamos seguir nosso guia sobre como adicionar GIFs animados ao WordPress.

Adicionar imagens interativas deixará meu site mais lento?

Como qualquer mídia, imagens interativas aumentam o peso da sua página. No entanto, o plugin Draw Attention é leve e bem codificado. O maior fator é o tamanho do arquivo da imagem original, por isso recomendamos sempre otimizar suas imagens para a web antes de carregá-las.

Esperamos que este artigo tenha ajudado você a aprender como criar imagens interativas no WordPress. Você também pode querer ver nosso guia sobre como criar overlays e hovers de flipbox de imagem no WordPress e nossas escolhas de especialistas dos melhores plugins de slider para 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.