Gostaria de saber como criar uma imagem interativa com Hotspots no WordPress graças a Elementor e complementos essenciais?
A imagem é uma excelente ferramenta para transmitir informações. Todo mundo sabe que as informações transmitidas por meio da imagem – e da forma visual como um todo – são mais fáceis de entender e lembrar.
No contexto da web, você pode usar muitos formatos de imagem. Desde um infográfico, uma foto, uma história em quadrinhos, uma ilustração, etc….
Se você deseja criar conteúdo da Web, como a anatomia de algo, pontos de referência da cidade, mapas ou direções, a criação de imagens com pontos de acesso pode ser uma ótima ideia.
A ideia desse tipo de conteúdo é fornecer uma imagem interativa que facilite o entendimento de seus leitores sobre as informações que você está transmitindo. Você pode adicionar pontos de acesso em uma imagem que contém uma dica de ferramenta em cada ponto de acesso. Aqui está um exemplo.
Se você tem um site com base no WordPress, criar uma imagem com pontos de acesso não é muito difícil de fazer. Você pode criar um usando o módulo Complementos essenciais .
O que é o módulo Addons Essenciais?
Essential Addons é um complemento paraElementor. Este é um dos mods mais populares, com mais de 2 milhões de downloads. Este complemento adiciona cerca de 60 widgets adicionais ao seu Elementor.
Um dos widgets oferecidos por Essential Addons é Pontos de acesso de imagem da EA que você pode usar para criar uma imagem interativa. O Essential Addons em si é um addon freemium, mas você deve usar a versão pro para criar imagens com Hotspots porque o widget EA Image Hotspots está disponível apenas nesta versão.
Como usar o módulo Essential Addons para criar imagens com Hotspots
Primeiro, você precisa instalar os módulos Elementor e Essential Addons no seu WordPress. Você pode obter a versão pro do Essential Addons em seu site oficial. Considerando que para Elementor, você pode usar a versão gratuita.
Veja também: Como usar um widget global no Elementor
A versão gratuita do Elementor está disponível no diretório do WordPress Plugin para que você possa instalá-lo digitando “elementor” na caixa de pesquisa do instalador de plugins (Plugins – > Adicionar).
Depois que o Elementor e os complementos essenciais estiverem instalados, crie uma nova página (Páginas – > Adicionar) ou um novo artigo (Itens – > Adicionar) e edite-o com Elementor. Você será redirecionado para o editor Elementor após clicar no botão Editar com Elementor.
Antes de criar as imagens com pontos de acesso, você pode definir o layout primeiro. Para fazer isso, abra o painel de configurações da página clicando no ícone de engrenagem no canto inferior esquerdo do painel esquerdo.
Leia também: Como usar o widget de postagens do Elementor
Defina o layout no menu suspenso Layout
Adicione uma nova seção clicando no ícone de mais na caixa de edição e adicione o widget EA Image Hotspots no painel esquerdo.
Adicione sua imagem clicando no seletor de imagens no painel esquerdo.
abrir opção hotspots no painel esquerdo para adicionar os pontos de acesso. Por padrão, o widget EA Image Hotspots contém um ponto de acesso. Você pode clicar no ponto de acesso padrão para editar seu conteúdo.
Por padrão, o tipo de ponto de acesso é definido como ícone. Você pode alterá-lo para texto ou sair Vide se desejar.
Clique na aba POSIÇÃO para definir a posição do ponto de acesso. Defina as posições X e Y arrastando os controles deslizantes.
Clique na aba FERRAMENTA para adicionar o conteúdo da dica de ferramenta. Ative a dica de ferramenta e adicione seu conteúdo no editor. Você também pode definir a posição da dica de ferramenta, superior, inferior, esquerda ou direita.
Para adicionar mais Hotspots, basta clicar no botão ADICIONE UM ELEMENTO na seção hotspots e repita as etapas acima para definir a posição do ponto de acesso, o conteúdo da dica de ferramenta e a posição da dica de ferramenta.
Abra a seção Configurações da dica de ferramenta para definir o tamanho das dicas de ferramentas e o efeito de animação.
Agora vá para a guia Style para estilizar seus pontos de acesso, bem como dicas de ferramentas. Primeiro, abra a opção Imagem para definir o tamanho da imagem.
Abrir seção hotspot para personalizar hotpots. Você pode definir o tamanho, cor do ícone (ou texto, dependendo do tipo de ponto de acesso selecionado), cor de fundo, raio da borda, etc…
Descubra também: Como adicionar itens relacionados no Elementor
Abra a seção tooltip para personalizar dicas de ferramentas. Você pode definir a cor de fundo, cor do texto, tipografia (tamanho da fonte, família da fonte, estilo da fonte) e largura.
Até agora você criou com sucesso imagens com pontos de acesso. Você pode brincar com o painel esquerdo para personalizar suas imagens com pontos de acesso até ficar satisfeito com o resultado. Quando terminar, você pode clicar no botão PUBLICAR para publicar sua página.
Adicione imagens com pontos de acesso ao Gutenberg
Se você deseja adicionar imagens com pontos de acesso como material de suporte para o artigo em que está trabalhando, pode integrá-lo ao Gutenberg (o editor padrão do WordPress) usando o plug-in Elementor Blocks para Gutenberg. Este plug-in permite que você use um modelo Elementor como um bloco Gutenberg.
Para salvar as imagens com pontos de acesso acima como um modelo de seção Elementor, clique com o botão direito do mouse na alça da seção e selecione Guardar como modelo.
Dê um nome à sua modelo e clique no botão REGISTRO.
Abra o artigo onde deseja adicionar imagens com pontos de acesso. Adicione um novo bloco, selecione Biblioteca Elementor e selecione o modelo de imagem com pontos de acesso que você acabou de criar.
Obtenha o Elementor Pro agora !!!
Conclusão
Aqui ! É isso neste artigo que mostra como crie uma imagem interativa com Hotspots no WordPress graças a Elementor e Essential Addons. Se você tiver alguma dúvida sobre como chegar lá, informe-os no Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
