Como criar imagens interativas: revisão do WP Draw Attention

Você quer melhorar a experiência do usuário e aumentar as conversões? Não procure mais! As imagens interativas são uma excelente ferramenta para cativar seu público e destacar seu site. Neste post, mostraremos como você pode criar imagens interativas.

As imagens interativas permitem que você mostre informações de forma atraente e envolvente, fornecendo clareza e contexto ao seu conteúdo. Hoje em dia, os usuários tendem a passar o mouse e clicar nas imagens interativas porque isso lhes proporciona uma experiência divertida, pois podem descobrir o que está por trás de cada seção e explorar diferentes áreas de interação.

Esses tipos de imagens são uma maneira eficaz de focar a atenção do público em uma ideia específica ou em uma informação importante que você deseja destacar, especialmente quando você tem uma grande quantidade de conteúdo para classificar.

Criando Imagens Interativas com o WP Chame a Atenção

Se você deseja criar mapas, esquemas, fotografias ou qualquer outro tipo de imagem, o plugin Draw Attention é a solução perfeita. É uma ferramenta amigável que permite desenhar seções clicáveis ​​em qualquer imagem, sem alterar seu formato, e personalizar seu comportamento de interação, cor e detalhes de exibição. Além disso, suporta blocos Gutenberg, facilitando a exibição de imagens interativas em suas postagens, páginas e produtos.

Criar imagens interativas com o plugin Draw Attention é muito fácil. Carregue sua imagem, crie áreas clicáveis ​​e preencha as informações relacionadas a cada seção. Personalize sua imagem com as opções disponíveis e pronto! Copie o shortcode ou use o bloco Gutenberg para exibir sua imagem interativa em seu site.

Chamar a atenção é uma ferramenta freemium. A versão gratuita inclui todos os recursos, mas o número de imagens interativas que você pode criar é limitado. Se você precisa criar mais imagens e deseja suporte prioritário, deve optar pelas versões premium que oferecem imagens interativas ilimitadas, áreas clicáveis ​​e 20 esquemas de cores predefinidos. A versão de site único custa 99 USD e, se você quiser adicionar sites ilimitados, o preço é de 149 USD.

Em conclusão, se você deseja levar seu site para o próximo nível e fornecer uma experiência de usuário única e envolvente, o plug-in Draw Attention é o caminho a seguir.

Visão geral do plug-in WP Draw Attention

WP Draw Attention é um dos melhores plugins para criar imagens interativas. É muito fácil de usar e seu desempenho é excelente.

Você simplesmente carrega qualquer imagem (png, jpg ou qualquer outro formato de imagem) e o plug-in a tornará interativa e permitirá que você desenhe seções clicáveis. Há também uma ampla gama de opções que você pode aplicar a uma única interação de imagem, destacando cores, exibindo detalhes e comportamento do mouse. Você também pode exportar e importar imagens.

Depois de tornar uma imagem interativa, você deve inserir um shortcode para exibi-la no front-end. O shortcode não faz diferença para a imagem ao carregar, apenas inclui a interação.

Depois de criar a imagem interativa, você pode usá-la em postagens, páginas de produtos e em qualquer lugar onde possa adicionar um shortcode. Ele também suporta blocos Gutenberg, fornecendo um bloco personalizado para exibir imagens interativas.

Preços

Chamar a atenção é uma ferramenta freemium. A versão gratuita inclui todos os recursos, mas o número de imagens interativas que você pode criar é limitado. Se você precisa criar mais imagens e deseja suporte prioritário, deve optar pelas versões premium que oferecem imagens interativas ilimitadas, áreas clicáveis ​​e 20 esquemas de cores predefinidos. A versão de site único custa 99 USD e, se você quiser adicionar sites ilimitados, o preço é de 149 USD.

Resumindo, estes são os planos que a Draw Attention oferece:

• Livre
• Único site: $ 99
  • 1 ano de atualizações e suporte
• Sites ilimitados $ 149 USD
  • 1 ano de atualizações e suporte prioritário

Ambas as versões Premium incluem

• Imagens interativas ilimitadas
• Áreas clicáveis ​​ilimitadas
• 20 esquemas de cores predefinidos
• Opções de layout personalizadas (altere a posição da caixa de mais informações ou use uma caixa de luz ou uma dica de ferramenta)

Como criar uma imagem interativa usando o plugin Draw Attention

A imagem interativa é tecnicamente uma sobreposição sobre uma imagem normal. Essa sobreposição é definida por seções que correspondem às seções da imagem de fundo, portanto, quando um usuário clica em uma seção, ele aciona um evento relacionado a essa seção específica.

Para criar uma imagem interativa com o plugin WP Draw Attention, você precisa ter uma imagem e as informações relacionadas a ela.

1) Carregue a imagem

Primeiro, carregue a imagem na galeria do WordPress da mesma forma que faria com qualquer outra imagem. Neste ponto, essa é uma imagem como qualquer outra. Você pode adicionar o arquivo diretamente nas opções do painel do plug-in, acessando Chamar a atenção > Adicionar novo .

Em seguida, carregue uma imagem na biblioteca de mídia usando a caixa de imagem, que você encontrará na barra lateral direita:

2) Crie a interação com a imagem

Agora você precisa criar áreas clicáveis ​​para que os usuários possam interagir com elas. Clique em Adicionar novo novamente da mesma forma que você fez na etapa anterior para começar a trabalhar em uma imagem.

Isso o levará à interface interativa do editor de imagens. Aqui, você pode alterar o estilo de comportamento da interação, entre outras personalizações.

Agora adicione uma imagem carregando-a ou escolhendo uma da biblioteca de mídia. Digite um título e clique em Publicar . Você também pode salvá-lo como rascunho para começar a editar a imagem.

Uma nova seção ficará visível agora no editor de imagens. A seção Hotspot Areas é onde você começará a definir as zonas de interação desenhando-as sobre a imagem.

Chamar a atenção oferece algumas opções para ajudá-lo a desenhar os pontos de acesso. Você pode ampliar a imagem para obter mais precisão, usar um polígono, círculo ou retângulo para desenhar sobre os pontos de acesso e editar, salvar ou cancelar a qualquer momento.

Depois de definir uma zona clicável na imagem, você precisa inserir as informações relacionadas a ela, como título, descrição e assim por diante.

Agora, repita o processo com todas as áreas clicáveis ​​da imagem e preencha os detalhes de cada uma delas.

Desenhe a zona sobre a imagem usando as opções disponíveis. Isso permitirá que você desenhe polígonos, retângulos ou círculos. Você precisa combinar o mais precisamente possível com a forma das seções.

Depois disso, você pode personalizar a imagem com várias opções disponíveis.

Na barra lateral, você pode alterar o comportamento da interação clicando ou passando o mouse, selecionando um esquema de cores e definindo o layout em que as informações serão exibidas.

3) Exiba a imagem

Depois de terminar a edição, a etapa final é exibir a imagem interativa no front-end. Basta copiar o shortcode na parte inferior da barra lateral direita da página do editor e colá-lo onde quiser colocar a imagem.

Como alternativa, você pode usar um bloco de Gutenberg se se sentir mais confortável com esta opção. O Draw Attention fornece um bloco Gutenberg para exibir qualquer uma das imagens interativas sem a necessidade de um shortcode.

Conclusão

Em suma, o Draw Attention é um ótimo plugin para criar imagens interativas e melhorar o UX do seu site. Imagens interativas são ótimas para melhorar o engajamento do usuário e destacar seu site.

Este plug-in fornece uma maneira intuitiva e eficiente de criar imagens interativas e vem com um conjunto completo de opções de personalização, permitindo que você estilize as imagens de acordo com o estilo do seu site. Além disso, oferece uma opção gratuita com todos os recursos, para que você possa testar o plugin sem precisar pagar nada.

Você já experimentou o Draw Attention ou qualquer outro plugin para criar imagens interativas? Como foi? Deixe-nos saber nos comentários abaixo!