Você gostaria de criar um mapa com vários locais no WordPress com Elementor e complementos essenciais?
Suponha que você tenha uma empresa que já possui várias filiais na cidade e deseja criar um mapa digital que mostre a localização dessas filiais. Se você tiver um site baseado em WordPress, poderá criar esse mapa sem esforço. Existe um ótimo plug-in que você pode usar para criar um mapa de vários locais: Complementos essenciais.
Complementos essenciais é um complemento Elementor premium, então você também precisa instalar Elementor antes de poder usá-lo. Você pode usar a versão gratuita do Elementor para criar um cartão com o módulo Essential Addons.
La versão gratuita de complementos essenciais também está disponível. No entanto, o widget para criar um mapa está disponível apenas na versão paga. Você pode baixar a versão paga do Essential Addons em seu website oficial.
Usaremos a plataforma Google Maps para criar um mapa em seu WordPress usando complementos essenciais. Antes de começar, certifique-se de instalar o Elementor e os complementos essenciais.
Integre o Google Maps com o módulo Essential Addons
Antes de adicionar um mapa do Google Maps com complementos essenciais, você deve primeiro integrá-los. Você precisa de uma chave de API para integrar o Google Maps com os módulos Essential Addons.
Primeiro, visite o Console de APIs do Google e faça login com sua conta do Google. Crie um novo projeto clicando no menu suspenso na parte superior e clique em NOVO PROJETO.
Dê um nome ao seu novo projeto e clique no botão CRIAR .
Depois que seu novo projeto for criado, selecione-o no menu suspenso e clique em biblioteca no painel esquerdo.
O Google divide a API da plataforma Google Maps em 17 tipos. Você pode vê-los clicando no link MOSTRAR TUDO na seção Cartes. Você precisa habilitar APIs dependendo do que deseja realizar.
Descubra também: Como criar um modelo de produto único personalizado no WooCommerce com Elementor
No nosso caso, você precisa ativar as seguintes APIs para adicionar um mapa do Google Maps usando complementos essenciais.
- API de rotas
- API de geocodificação
- API JavaScript do Google Maps
- API do Google Places
Para ativar uma API, selecione a API que deseja ativar (clicando nela) e clique no botão ATIVAR.
Depois de concluir a ativação das APIs necessárias, retorne ao painel principal do Google API Console e clique em identificadores no painel esquerdo. Clique no botão Crie credenciais e selecione Chave de API. Copie a chave API no pop-up que aparece.
Faça login no painel do WordPress e clique em Complementos essenciais no painel esquerdo. Clique na guia elementos e role para baixo na seção Mapa avançado do Google. Clique em Configurações e cole a chave de API que você acabou de copiar.
Clique no botão SALVAR CONFIGURAÇÕES para aplicar a nova alteração.
Comece a criar o mapa
Depois que o Google Maps e os complementos essenciais estiverem integrados, você poderá começar a criar o mapa. Para fazer isso, crie uma nova página (Páginas – > Adicionar ) ou um novo artigo (Itens – > Adicionar) e edite-o com Elementor.
Antes de criar a página, defina o layout clicando no ícone de engrenagem no canto inferior esquerdo para abrir o painel Configurações. Defina o layout no menu suspenso.
Crie uma nova seção clicando no botão de adição na caixa de edição. Para ter uma área mais ampla para o mapa, você pode selecionar a estrutura de coluna única. Arraste o widget EA Google Maps do painel esquerdo para a área de edição.
Vá para o painel esquerdo e defina o tipo de cartão para marcador múltiplo.
Abra a seção Configurações do marcador de mapa e clique no marcador de mapa existente para editá-lo. Cole a latitude e a longitude do primeiro local que deseja adicionar ao mapa. Defina também o título e a descrição.
Para obter a latitude e longitude de um local, abra o Google Maps e procure o local (lugar) cuja latitude e longitude você deseja obter. Uma vez encontrado, clique com o botão direito do mouse e com o botão esquerdo no número que aparece no menu contextual.
Esta ação, portanto, permite copiar a latitude (o primeiro valor) e a longitude (o segundo valor).
Quando terminar de adicionar a latitude e longitude do primeiro local, clique no botão ADICIONE UM ELEMENTO para adicionar outro local ao seu mapa.
Abra o Google Maps novamente e encontre o novo local que deseja adicionar ao mapa e copie a longitude, bem como a longitude e cole-as nos respectivos campos como o acima. Repita as etapas acima para adicionar mais locais ao mapa.
Leia também: Como usar o widget de postagens do Elementor
Quando terminar de adicionar locais, abra o bloco Controles de mapa para ativar/desativar os comandos que deseja fornecer em seu cartão. Você também pode definir o nível de zoom aqui.
Você também pode abrir o bloco Tema do mapa para selecionar o tema do Google Maps que deseja usar.
Até agora você criou com sucesso um mapa com vários locais. Você pode abrir a guia Style para definir a altura, bem como a largura do mapa.
Se você deseja ter um mapa de largura total, defina a seção que contém o mapa para largura total. Para fazer isso, clique na alça da seção.
Na aba e no bloco Layout definir a largura do conteúdo para largura completar e a lacuna da coluna em Sem desvio
Clique no botão PUBLICADOSER na parte inferior do painel esquerdo para publicar sua página.
Incorporar o mapa em uma página ou postagem
Se por algum motivo você preferir incorporar seu mapa em uma página/postagem (a página/postagem criada com o editor padrão do WordPress — Gutenberg), você pode usar o WordPress Plugin Elementor Blocks para Gutenberg. Este plug-in converterá um modelo Elementor em um bloco Gutenberg.
Para salvar o mapa que você acabou de criar como modelo Elementor, clique no ícone de seta ao lado do botão PUBLICAR / ATUALIZAR e selecione Guardar como modelo.
Dê um nome à sua modelo e clique no botão REGISTRO.
Em seguida, crie uma nova página ou postagem (certifique-se de ter instalado o Plugin Elementor Blocos para Gutenberg). Adicione um novo bloco e selecione Biblioteca Elementor e selecione o modelo que você acabou de criar.
Nota: Se você vir uma mensagem "Apenas para fins de desenvolvimento" ao adicionar um cartão, certifique-se de ativar o faturamento do Google Cloud. A nova política do Google exige que os desenvolvedores ativem a conta de cobrança (você ainda pode usar a API do Google Maps gratuitamente).
Obtenha o Elementor Pro agora !!!
Conclusão
Então ! É isso para este artigo que mostra como criar um mapa com vários locais com Elementor. 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.
...
