Como mapear uma imagem no WordPress

Quando se trata de sites, pode ser verdade que uma imagem valha mais que mil palavras. Hoje em dia, muitos consumidores online preferem conteúdo visual a grandes quantidades de texto. Mapas de imagens interativos atraentes podem ser uma adição útil e atraente para o seu site.

A boa notícia é que você não precisa ser um web designer habilidoso para criar visuais interativos e úteis. Com um plugin como WP draw attention e algumas etapas simples, você pode estar no caminho certo para criar um mapa de imagens impressionante.

Nesta postagem, daremos uma introdução aos Mapas de Imagens e como você pode usá-los em seu site. Em seguida, mostraremos como adicionar esse recurso ao seu site WordPress com o WP Draw Attention. Vai!

Introdução aos Mapas de Imagens

Um mapa de imagem é uma foto ou gráfico que contém áreas clicáveis. Você pode usá-los para adicionar elementos visuais interativos ao seu site. Você provavelmente já encontrou mapas de imagens em algum momento ao navegar na web, pois eles são uma ferramenta versátil.

Um uso generalizado de mapas de imagens é para dar aos usuários uma visão mais detalhada de um edifício ou propriedade. Por exemplo, ele Centro de Simulação Clínica de Las Vegas fornece aos visitantes do site uma planta interativa de suas instalações:

Uma planta interativa.

Outro exemplo é Voltcave, que destaca configurações de jogo excepcionais. Clicar nos componentes individuais abre novas janelas onde os usuários podem comprar os itens mostrados na foto:

Uma análise do produto Voltcave como mapeamento de imagem

Mapas de imagem se prestam bem para quebrar processos complicados. Soluções de liquidação corporativa ilustra a jornada de fechamento da casa com um diagrama interativo e informativo:

Um mapa de imagens.

Você pode usar mapas de imagens para ensinar facilmente conceitos difíceis, destacar recursos do produto ou fazer um tour virtual de uma propriedade. Não importa para que você use seu site, provavelmente você pode pensar em algumas maneiras divertidas de incluir um mapa de imagem.

Como criar um mapa de imagem WordPress (em 7 etapas)

Agora que você viu como algumas organizações usam mapas de imagens em seus sites, vamos mostrar como criar o seu próprio.

Etapa 1: baixe e instale WP draw attention

O Plugin WP draw attention  permite que você adicione um mapa de imagem ao seu site WordPress facilmente. Os mapas de imagens que você cria com essa ferramenta são responsivos, amigáveis ​​para otimização de mecanismos de pesquisa (SEO) e personalizáveis.

Mostraremos a versão gratuita do plugin, mas se você atualizar para o premium, ele desbloqueará ainda mais opções. Para instalá-lo a partir do painel de administração, navegue até Plugins> Adicionar Novo. Em seguida, encontre “Get Attention” e clique no botão instale agora botão:

O plugin Draw Attention de mapeamento de imagens

Assim que terminar de instalar o plugin, clique no Ativar botão. Isso deve levar você a Editar imagem tela.

Leia Também:  Como conduzir o funil por meio do marketing de conteúdo e do link building

Etapa 2: selecione uma imagem para a base do seu mapa

A primeira etapa na criação de seu mapa de imagem é adicionar a foto ou gráfico que você usará como base. Se você ainda não está nele Editar imagem tela, você pode acessá-la clicando em Chamar a atenção no menu do lado esquerdo do painel do WordPress:

Editando uma imagem com o plugin de mapeamento

Primeiro, dê à sua imagem um título descritivo. Este título ficará visível para os visitantes do seu site, portanto, deixe-o claro e descritivo. Então olhe para o Foto área à direita da tela:

Enviando uma nova imagem.

Se você tem seu arquivo de imagem armazenado em sua área de trabalho, você pode simplesmente arrastar e soltar no Foto área. Alternativamente, você pode clicar no Enviar Imagem , localize o arquivo no seu computador e carregue-o.

Se sua imagem já estiver em sua biblioteca de mídia WordPress, clique no Biblioteca de mídia botão. Em seguida, localize e selecione a imagem desejada e clique no Definir imagem em destaque botão:

Configurando uma imagem em destaque.

Se você mudar de ideia sobre a imagem que deseja usar, sempre poderá passar o mouse sobre ela. Foto área, clique no Remova a imagem e selecione um novo arquivo.

Etapa 3: desenhe um ponto de acesso para a imagem

A próxima etapa é designar um ‘ponto de acesso’ em sua imagem. Esta é uma área onde os usuários podem clicar e interagir. Quando um visitante passa o mouse sobre um ponto de acesso, um destaque aparecerá para mostrar que é clicável.

Você criará e definirá ações para seus pontos de acesso no Áreas de hotspots seção. Você pode encontrá-lo na parte inferior da tela:

A seção Áreas de Hotspot.

Primeiro, clique no Área clicável n. 1 desça para abrir sua imagem. Se for grande, pode ser necessário rolar para ver a imagem completa. Clique em qualquer lugar em sua imagem para colocar seu primeiro ponto.

Você pode mover um ponto clicando nele e arrastando-o. Quando você adiciona um segundo ponto, uma linha aparecerá conectando os dois. Quanto mais pontos você adicionar, mais precisa será sua forma. Continue adicionando e manipulando pontos ao redor do perímetro de sua área clicável até que esteja satisfeito com a cobertura:

Manipule pontos ao redor da área clicável.

Se você precisar deletar um ponto, você pode fazer isso clicando com o botão direito nele. Você também pode mover toda a forma clicável selecionando o ponto central e arrastando-o.

Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

Finalmente, dê um título ao seu ponto de acesso. Este título será exibido quando um usuário passar o mouse sobre o ponto de acesso, portanto, você deseja torná-lo contextualmente relevante.

Para adicionar mais pontos de acesso, basta clicar no Adicionar outra área na parte inferior da tela. Depois de adicionar mais de um, você pode usar o Apagar área para remover pontos de acesso desnecessários.

Etapa 4: configure sua ação de ponto de acesso

Agora você pode configurar a ação para seu ponto de acesso. Draw Attention oferece a opção de exibir mais informações sobre a imagem ou de abrir um URL em uma nova guia. Você pode encontrar essas duas opções no Açao seção:

A opção Mostrar mais informações.

Para fornecer a seus usuários mais informações, selecione Mostrar mais informações no menu suspenso. Escreva o texto que deseja no Descrição campo. Se você deseja exibir uma imagem adicional, pode enviá-la para o Detalhe Image seção:

A seção Detalhe da Imagem.

Você pode repetir essas etapas para qualquer outro ponto de acesso que criar. Quando um usuário clica no ponto de acesso, ele vê o texto e a imagem correspondentes:

O texto e a imagem correspondentes.

Se você deseja que seu ponto de acesso abra um novo URL ao clicar, selecione Ir para url no menu suspenso. Em seguida, insira o endereço da web desejado no campo URL. Você também pode verificar o Abrir em uma nova janela caixa se você preferir abrir a página em uma guia do navegador diferente:

Abrindo em uma nova janela.

Certifique-se de clicar no Atualizar botão no Para postar para salvar seu mapa de imagem sempre que fizer alterações nele.

Etapa 5: ajuste as configurações do mapa de imagem

Você pode então ajustar algumas das configurações de cor para o seu mapa de imagem. Ao manipular essas opções, você pode garantir que os elementos do mapa de imagem correspondam à marca do seu site. Você encontrará essas opções no Mais informações Box style área:

A área de estilo da caixa Mais informações.

Se sua imagem for pequena, o plugin irá colocá-la em um fundo colorido. Você pode alterar essa cor para corresponder ao resto do seu site clicando no Selecione a cor botão:

Definir a cor de fundo da imagem.

Você também pode ajustar as cores usadas no Mais informação caixa. Selecione as cores que deseja para o fundo e o texto da caixa clicando no Selecione a cor botões para cada opção. Ao escolher as cores, tenha em mente a acessibilidade e verifique se há contraste suficiente para manter o texto legível.

Leia Também:  Como conduzir o funil por meio do marketing de conteúdo e do link building

Para ajudar os visitantes do seu site a entender que sua imagem é interativa, você pode adicionar um texto a ser exibido no Mais informação caixa quando uma área clicável não é selecionada. Insira este conteúdo no Mais informações padrão caixa:

Um exemplo de um mapa de imagem.

Você pode usar este texto para fornecer mais informações sobre seu mapa de imagem ou para incentivar os usuários a interagir com ele.

Etapa 6: adicione cor aos seus pontos de acesso

Finalmente, você pode personalizar o estilo de seus pontos de acesso. Você pode fazer essas configurações no Destaque o estilo seção. Semelhante à forma como você selecionou as cores para sua caixa de informações, você pode selecionar a cor que gostaria que fossem os destaques de seus pontos de acesso. Você também pode ajustar a opacidade do realce usando o controle deslizante:

Ajustando a opacidade do iluminador.

Você pode então ajustar a borda do destaque. Novamente, você pode escolher a cor e a opacidade. Você também pode aumentar ou diminuir a espessura da borda:

Ajuste as configurações de borda.

Se você preferir que seu destaque não tenha uma borda, basta definir o Opacidade da borda aço. Salve suas alterações clicando no Atualizar botão.

Etapa 7: insira seu mapa de imagem em qualquer postagem ou página usando um código de acesso

Quando estiver satisfeito com seu mapa de imagem, você pode exibi-lo em qualquer postagem ou página em seu site WordPress usando o [drawattention] Código curto.

Se você atualizar para a versão premium do WP Draw Attention, poderá criar vários mapas de imagens. Nesse caso, cada um deles receberá seu próprio código de acesso, que você pode adicionar ao seu conteúdo conforme achar adequado.

Conclusão

Um mapa de imagem WordPress pode ser uma maneira atraente de se comunicar com os visitantes do seu site. Se você deseja mostrar os principais recursos de um produto ou simplesmente apresentar informações visualmente, um mapa de imagem pode ser a melhor ferramenta para o trabalho.

Usando o WP draw attention O plugin pode ajudá-lo a começar rapidamente. Depois de instalá-lo e ativá-lo, você terá acesso a um editor de mapa de imagem fácil de usar, onde poderá desenhar seus pontos de acesso de imagem e personalizar o estilo dos vários elementos. Para publicar seu mapa de imagem, basta adicionar o código de acesso correspondente a qualquer postagem ou página.

Para que você está planejando usar seu mapa de imagem? Compartilhe conosco na seção de comentários abaixo!

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: