As imagens estáticas podem parecer um pouco monótonas quando você está tentando mostrar um produto detalhado ou uma ideia complexa. Você tem algo interessante para compartilhar, mas uma simples imagem nem sempre conta toda a história.
Sempre desejei uma maneira mais interativa de orientar os visitantes pelos recursos sem sobrecarregar a página. Parece ser algo que exigiria um código personalizado ou um plug-in complicado para funcionar corretamente.
Mas isso não precisa ser difícil. Neste tutorial, mostrarei como adicionar imagens de hotspot ao WordPress, oferecendo uma maneira fácil de criar uma experiência rica e interativa para seus usuários.
O que é um ponto de acesso de imagem interativo?
As imagens de ponto de acesso são imagens estáticas, fotos ou ilustrações com áreas clicáveis que revelam um pop-up de dica de ferramenta. O conteúdo da dica de ferramenta fornecerá aos usuários informações adicionais sobre um aspecto específico da imagem.
Por exemplo, você pode usar pontos de acesso para identificar diferentes produtos em uma foto, rotular pratos em um menu ou até mesmo mostrar os identificadores de mídia social de diferentes pessoas em um evento.
Adicionar hotspots de imagens ao seu site WordPress é uma ótima maneira de torná-lo mais interativo. Quando os visitantes se envolvem com seus mapas de imagens, eles passam mais tempo no site, o que ajuda a reduzir a taxa de rejeição.
Além disso, a criação de imagens de hotspot interativas pode melhorar a experiência do usuário, o que, por sua vez, pode aumentar suas taxas de conversão.
Agora que você sabe o que são hotspots de imagem, provavelmente tem algumas perguntas. Como criar imagens de hotspot e qual é a maneira mais fácil de adicioná-las ao seu site WordPress?
A seguir, mostraremos como fazer isso.
Como adicionar imagens de pontos de acesso interativos ao WordPress
Há várias maneiras de adicionar hotspots de imagem ao seu site WordPress. Você pode usar um plug-in de hotspot de imagem do WordPress, um tema do WordPress com funcionalidade de hotspot, como o Divi, ou codificar um você mesmo com HTML e CSS personalizado.
A maneira mais fácil de adicionar um ponto de acesso de mapa de imagens ao seu site WordPress é com um plug-in de criação de páginas, como o SeedProd.
Por que escolher a SeedProd?
O SeedProd é o melhor construtor de páginas do WordPress, com mais de 1 milhão de usuários. Ele permite que você crie qualquer layout no WordPress, inclusive páginas de destino, cabeçalhos, rodapés, barras laterais e modelos, sem escrever código.
Semelhante aos módulos do Elementor, o SeedProd tem uma interface baseada em blocos que permite arrastar e soltar elementos de design da Web no lugar. Isso significa que você pode ver as alterações em tempo real à medida que cria seu layout personalizado.
Melhor ainda, o SeedProd tem um bloco de Hotspot dedicado que permite criar hotspots de imagem fáceis de usar com apenas alguns cliques.
Veja o que mais você pode fazer com esse poderoso plug-in do WordPress:
- Colocar o WordPress em modo de manutenção
- Adicionar widgets do WordPress em qualquer página
- Crie lojas on-line personalizadas com suporte ao WooCommerce
- Mostre e oculte elementos específicos no desktop e em dispositivos móveis
- Crie uma página de "Em breve
- Gerencie novos assinantes com o painel de assinantes integrado
- Criar temas personalizados do WordPress a partir do zero
- E muito mais
Neste guia, usarei o SeedProd para adicionar hotspots de imagem ao WordPress. Siga as etapas abaixo para começar.
- Etapa 1. Instalar e ativar o SeedProd
- Etapa 2. Escolha um tema WordPress ou um modelo de página de destino
- Etapa 3. Adicionar o bloco Hotspot do WordPress
- Etapa 4. Configure suas definições
- Etapa 5. Publique sua imagem de ponto de acesso no WordPress
- Perguntas frequentes sobre a adição de pontos de acesso de imagem no WordPress
Etapa 1. Instalar e ativar o SeedProd
Primeiro, acesse o site do SeedProd e faça o download do plug-in. Embora o SeedProd tenha uma versão gratuita, usaremos o SeedPod Pro para este tutorial porque ele inclui o bloco Hotspot Image.
Depois de escolher seu plano de preços e fazer o download do arquivo zip do plug-in, você precisará instalá-lo e ativá-lo em seu site do WordPress. Você pode consultar este guia sobre a instalação de um plug-in do WordPress se precisar de ajuda com essa etapa.
Depois de adicionar o SeedProd ao seu site WordPress, navegue até a página SeedProd " Settings e insira a chave de licença do produto.
Você pode encontrar a chave na seção de downloads do painel da sua conta SeedProd.
Depois de inserir sua chave, clique no botão Verify Key (Verificar chave ) para desbloquear seus recursos premium.
Etapa 2. Escolha um tema WordPress ou um modelo de página de destino
Agora que você confirmou suas configurações de licença, está pronto para começar a criar com o SeedProd. Para fazer isso, primeiro você precisa decidir que tipo de layout deseja criar.
No SeedProd, você pode criar páginas de destino individuais ou sites completos do WordPress com seu construtor de temas. A partir daí, você pode personalizá-los com o mesmo editor de arrastar e soltar.
Para este guia, criaremos uma página de destino autônoma. No entanto, você pode seguir este guia sobre a criação de um tema personalizado do WordPress se preferir essa abordagem e, em seguida, voltar à etapa 3 deste tutorial para aprender a adicionar pontos de acesso de imagem.
Como estamos criando um layout de página de destino, vamos acessar SeedProd " Landing Pages, passar pela seção de modos de página de destino e clicar no botão Add New Landing Page.
Isso o levará à biblioteca de modelos de página de destino predefinidos, onde você poderá escolher um design que melhor atenda às suas necessidades comerciais. Cada modelo é 100% responsivo a dispositivos móveis, com designs para vários casos de uso, incluindo fitness, imóveis, marketing digital e muito mais.
Não se preocupe se não conseguir encontrar algo adequado. Você pode personalizar cada centímetro do modelo até que ele fique do jeito que você quer. Portanto, vá em frente e escolha um modelo passando o mouse sobre um deles e clicando no ícone de marca de seleção.
Na próxima tela, você pode dar um nome e um URL à sua página e, em seguida, clicar no botão Save and Start Editing the Page (Salvar e começar a editar a página ) para iniciá-la no editor visual do SeedProd.
Etapa 3. Adicionar o bloco Hotspot do WordPress
O construtor de páginas do SeedProd é muito fácil de navegar. Você verá diferentes seções e blocos no painel à esquerda e uma visualização da página ao vivo à direita.
Clique em qualquer lugar da visualização para alterar o conteúdo de qualquer elemento. Por exemplo, clicar no bloco de texto abre um painel no qual você pode digitar sua própria mensagem de boas-vindas ou descrição.
E no bloco do formulário opt-in, você pode personalizar os campos do formulário, alterar a cor de fundo do botão Enviar e muito mais.
Antes de adicionar o widget de ponto de acesso de imagem à sua página, vamos encontrar o local perfeito, como a primeira imagem da página.
Você precisará remover esse bloco primeiro para abrir espaço para a imagem do ponto de acesso, portanto, passe o mouse sobre ele até ver uma borda laranja e, em seguida, clique no ícone da lixeira para excluí-lo.
Agora, você pode localizar o bloco Hotspot no painel Blocos avançados e arrastá-lo para o espaço em sua página.
Em seguida, abra as configurações de bloco e adicione uma imagem onde você gostaria de adicionar ícones de ponto de acesso.
Você pode carregar uma foto do seu computador ou da biblioteca de mídia do WordPress ou escolher entre milhares de imagens de banco de imagens (disponíveis nos planos SeedProd plus e superiores).
Depois de adicionar uma imagem, você pode criar seu primeiro ponto de acesso.
Basta expandir o espaço reservado do ponto de acesso e inserir a descrição do ponto de acesso. Isso é o que aparecerá quando os usuários clicarem ou passarem o mouse sobre o ícone do hotspot.
Você pode alterar a posição do ícone de ponto de acesso circular arrastando os controles deslizantes de orientação vertical e horizontal. Além disso, você pode alterar a cor e a animação do ícone para que ele se destaque mais.
Além disso, a ativação das Configurações avançadas permite que você escolha um rótulo, insira um link e selecione ícones e tamanhos personalizados da biblioteca Font Awesome.
Para tornar os pontos de acesso mais atraentes, abra a seção Tooltips (Dicas de ferramentas ) e escolha as configurações de acionamento e animação.
Em seguida, clicar na guia Advanced (Avançado ) permite que você escolha mais opções de formatação e estilo, incluindo tipografia, cores de texto, espaçamento e muito mais.
Para adicionar mais pontos de acesso à sua imagem, repita essa etapa quantas vezes quiser. Lembre-se de clicar no botão Save (Salvar) para preservar suas alterações.
Agora, continue personalizando sua página até que ela fique exatamente como você deseja.
Por exemplo, você pode usar o bloco Accordion para adicionar uma seção de perguntas frequentes à sua página, o bloco Video para exibir vídeos do YouTube ou do Vimeo, o bloco Google Maps para mostrar sua localização e muito mais.
Etapa 4. Configure suas definições
Agora, vamos ver algumas configurações que você pode alterar para aumentar o desempenho da sua página de destino.
Primeiro, você pode clicar na guia Connect (Conectar ) na parte superior da tela para integrar sua página ao serviço de marketing por e-mail de sua preferência.
Com a integração de e-mail, o endereço de e-mail de qualquer pessoa que se inscreva por meio de seu formulário de opt-in é automaticamente adicionado à sua lista.
Em seguida, clique na guia Page Settings (Configurações da página ). Nessa página, você pode gerenciar suas configurações gerais, de SEO, de análise e de script.
Por exemplo, você pode se conectar ao MonsterInsights, o melhor plug-in do Google Analytics para monitorar as métricas e o desempenho da sua página de destino.
Você também pode usar a configuração Custom Domain (planos Elite) para dar à sua página um nome de domínio exclusivo, separado do seu site principal, sem a necessidade de várias instalações do WordPress.
Etapa 5. Publique sua imagem de ponto de acesso no WordPress
Depois de definir suas configurações, você estará pronto para publicar sua página de destino e tornar sua imagem de hotspot ativa em seu site.
Para fazer isso, clique na seta do botão Salvar e selecione Publicar.
Agora, você pode visualizar sua página para ver os pontos de acesso da imagem em ação!
E aqui está uma olhada mais de perto na dica de ferramenta do ponto de acesso:
Perguntas frequentes sobre a adição de pontos de acesso de imagem no WordPress
Agora você sabe como adicionar imagens de hotspot ao WordPress sem usar códigos de acesso, CSS personalizado ou complementos desnecessários. Melhor ainda, leva apenas alguns minutos para criar hotspots de imagens interativas com o SeedProd.
Então, o que está esperando?
Se você gostou deste tutorial, talvez também goste dos seguintes guias do WordPress:
- Como adicionar um botão ao seu cabeçalho do WordPress
- Como criar contadores de números animados no WordPress
- Como adicionar controles deslizantes de fotos antes e depois ao WordPress
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
