Deseja adicionar vários Google Maps em uma página no WordPress?
A inclusão de mais de um mapa em uma página oferece aos visitantes uma visão geral de todos os seus locais físicos. Dessa forma, eles podem escolher o local mais próximo quando visitarem sua empresa.
Neste artigo, mostraremos como adicionar facilmente vários Google Maps em uma página no WordPress.
Por que adicionar vários Google Maps em uma página no WordPress?
Há muitos motivos para adicionar vários mapas ao seu site WordPress.
O motivo mais óbvio é listar vários locais, como lojas em diferentes regiões. Ou, se você organiza vários eventos, pode criar mapas para cada local de evento e mostrá-los na mesma página.
Você pode pensar que é difícil incorporar mais de um mapa em uma página do WordPress. Mas a verdade é que há vários métodos que facilitam o processo.
A seguir, compartilharemos dois métodos que até mesmo os iniciantes podem fazer facilmente. Então, vamos começar com a primeira opção.
Método 1. Adicionar vários Google Maps em uma página com o SeedProd
O primeiro método deste tutorial mostra como adicionar vários mapas do Google em uma página de destino no WordPress.
As páginas de destino são a melhor maneira de converter o tráfego direcionado em leads e vendas. Portanto, se você estiver promovendo um evento ou descontos em lojas locais, uma página de destino com vários mapas é a maneira ideal de fazer com que as pessoas passem pela porta.
E o melhor plugin de página de destino do WordPress para esse trabalho é o SeedProd.
O SeedProd é um construtor visual de páginas de destino do WordPress que permite criar páginas de alta conversão sem escrever código. Ele vem com centenas de modelos de página de destino responsivos que você pode personalizar no editor de arrastar e soltar.
Além disso, o SeedProd tem vários blocos de conteúdo inteligentes para adicionar conteúdo de fácil utilização à sua página, inclusive:
- Mapas do Google
- Botões de chamada para ação
- Tabelas de preços
- Carrosséis de imagens
- Depoimentos
- Texto dinâmico
- Títulos animados
- Formulários Optin
- E mais
Isso significa que você pode criar qualquer página rapidamente sem contratar um desenvolvedor.
Siga as etapas abaixo para saber como adicionar o Google Maps em uma página no WordPress com o SeedProd.
Tutorial em vídeo
Etapa 1. Faça o download do plug-in da página de destino do SeedProd
Primeiro, visite o site do SeedProd e faça o download do plug-in do SeedProd em seu computador.
Embora o SeedProd tenha uma versão gratuita, usaremos o SeedProd Pro para este tutorial. Dessa forma, poderemos usar o bloco do Google Maps.
Depois de fazer o download do plug-in, instale-o e ative-o em seu site. Se precisar de ajuda com essa etapa, siga este guia passo a passo para instalar plug-ins do WordPress.
Depois de instalar o SeedProd, você verá uma tela de boas-vindas solicitando sua chave de licença. Digite sua chave e clique no botão Verify Key (Verificar chave ) para ativar sua licença.
Observação: você pode encontrar sua chave fazendo login na sua conta SeedProd e clicando no link View License Key, Details, and Downloads (Exibir chave de licença, detalhes e downloads).
Etapa 2. Criar uma nova página de destino
Depois de ativar sua chave de licença, role a tela de boas-vindas para baixo e clique no botão Create Your First Page (Criar sua primeira página ).
A partir daí, você acessará o painel da página de destino do SeedProd.
Nessa página, há vários modos de página de destino, incluindo:
E com esses modos de página, você pode ativar diferentes páginas de destino com um único clique. Por exemplo, você pode ativar o modo de manutenção quando estiver realizando pequenas atualizações.
Abaixo da seção de modos de página, clique no botão Create New Landing Page (Criar nova página de destino ) para criar sua primeira página.
Na próxima tela, você pode escolher entre centenas de modelos de página de destino pré-criados. Basta clicar para selecionar um modelo e usá-lo como ponto de partida.
Depois de escolher um modelo, uma janela pop-up será aberta, solicitando que você dê um nome à sua página e insira o URL.
A partir daí, clique no botão Save and Start Editing the Page (Salvar e começar a editar a página ) para iniciar seu modelo.
Etapa 3. Personalize sua página de destino
Quando você iniciar seu design, ele será aberto no construtor de páginas do SeedProd. O editor tem um design de dois painéis de fácil utilização para facilitar a personalização da página:
- Painel esquerdo: Blocos e seções para criar e personalizar sua página
- Painel direito: Visualização ao vivo de sua página de destino em tempo real
Na parte superior do editor, há um menu de navegação para alternar rapidamente entre o design, as integrações e as configurações.
E na parte inferior do painel esquerdo há vários outros ícones para desfazer e refazer alterações, alternar para a visualização móvel e muito mais.
Essas configurações facilitam a personalização do design para atingir as metas da página de destino. Por exemplo, ao clicar em um título de página, você pode alterar o conteúdo e a cor e ver as alterações em tempo real.
Ou, para substituir as imagens padrão do modelo, você pode clicar em qualquer imagem e substituí-la por uma do seu computador, biblioteca de mídia ou escolher uma foto de estoque gratuita.
Continue personalizando o design até ficar satisfeito com a aparência. E não se esqueça de clicar no botão Save (Salvar ) no canto superior direito.
Etapa 4. Adicionar vários Google Maps à sua página de destino
Adicionar vários Google Maps à sua página de destino é fácil com o bloco integrado do Google Maps do SeedProd.
Primeiro, vamos adicionar algumas colunas para abrigar cada mapa. No painel esquerdo, clique no bloco Column (Coluna ) e arraste-o para uma seção da sua página.
Agora escolha quantas colunas você deseja exibir. Para este guia, escolhemos o layout de 3 colunas.
Agora você está pronto para adicionar o Google Maps a cada coluna.
Para fazer isso, clique no bloco do Google Maps e arraste-o para a primeira coluna.
Clicar nas configurações do bloco abre um painel no qual você pode inserir o local escolhido. Em seguida, você pode escolher o zoom do mapa, alterar o alinhamento e ajustar a largura.
Além disso, você pode escolher diferentes estilos de borda e ajustar o espaçamento em torno do mapa personalizado na guia Advanced (Avançado ).
Agora repita essa etapa para cada mapa que deseja adicionar à sua página de destino.
Etapa 5. Publique sua página de destino do Google Maps
Quando estiver satisfeito com a aparência de sua página de destino, clique na seta para baixo ao lado do botão verde Salvar e clique em Publicar.
Em seguida, você verá uma janela informando que sua página foi publicada. Para ver uma visualização ao vivo, clique no botão See Live Page (Ver página ao vivo ).
Método 2. Adicionar manualmente vários Google Maps em uma página no WordPress
O segundo método deste guia envolve copiar e colar o código de incorporação da API do Google Maps e colá-lo em um post ou página do WordPress em vez de usar um plug-in de mapas.
A desvantagem desse método é que você precisará encontrar o código incorporado para cada mapa que deseja exibir. Ele também exige que você alterne do seu site WordPress para o Google Maps e vice-versa.
Além disso, a incorporação de mapas diretamente no WordPress limita as opções de personalização. Portanto, você não terá o controle avançado de layout que obtém com um construtor de páginas do WordPress, como o SeedProd.
Aqui estão as etapas para incorporar vários mapas do Google Maps manualmente com o código de incorporação.
Etapa 1. Encontre e compartilhe sua localização no Google Maps
Primeiro, acesse o Google Maps e digite o primeiro endereço que você deseja incorporar.
Depois de encontrar sua localização, clique no ícone Compartilhar para exibir as configurações de compartilhamento do Google Maps.
Agora, clique na guia Incorporar, escolha um tamanho de mapa no menu suspenso e clique no link "Copiar HTML".
Etapa 2. Adicionar o código de incorporação no WordPress
Em seguida, acesse o painel do WordPress e crie uma nova página.
No editor do WordPress, clique no ícone de adição (+) para adicionar um novo bloco do WordPress e clique no bloco HTML personalizado.
Agora, cole o código de incorporação do Google Maps no bloco HTML. E se você clicar no botão Preview (Visualizar ), poderá ver a aparência do seu mapa.
Etapa 3. Incorporar mais Google Maps
Agora que você sabe como adicionar um mapa, adicione mais seguindo as mesmas etapas. Basta escolher um local de mapa diferente, copiar o código de incorporação e adicioná-lo em um novo bloco HTML em sua página do WordPress.
Depois de adicionar todos os seus mapas à página, clique em Publicar. Em seguida, ao visualizar a página, você verá cada mapa incorporado em uma única tela.
Como faço para adicionar vários locais a um mapa no WordPress?
Até agora, você já sabe como adicionar vários mapas do Google Maps em uma página no WordPress. Mas e se você quiser adicionar vários pinos em um único mapa e incorporá-lo ao seu site do WordPress?
Felizmente, você pode fazer isso com o método de incorporação de mapa que mencionamos anteriormente. No entanto, há mais algumas etapas que destacamos a seguir.
Etapa 1. Criar um mapa personalizado do Google
Primeiro, acesse o Google Maps, abra o menu e clique no link "Seus locais".
A partir daí, clique na guia Maps e clique em "Create Map" (Criar mapa) na parte inferior da página.
Clique no rótulo chamado "Untitled Map" (Mapa sem título) e dê um nome sensato ao seu mapa. Repita essa etapa para o título "Untitled layer" (Camada sem título).
Etapa 2. Fixe suas localizações no mapa
Agora você pode inserir sua localização na barra de pesquisa para procurá-la no mapa. Depois de encontrá-lo, clique no link + Adicionar ao mapa para colocar um marcador nesse local.
Repita essa etapa para cada local que deseja adicionar ao seu mapa.
Etapa 3. Compartilhe seu mapa
Para incorporar seu mapa no WordPress, primeiro você precisa torná-lo público; caso contrário, não será possível acessar o código de incorporação. Portanto, vá em frente e clique no ícone "Compartilhar".
Agora, alterne as seguintes configurações para a posição ativada:
- Qualquer pessoa com este link pode ver
- Permita que outras pessoas pesquisem e encontrem esse mapa na Internet
Depois de compartilhar seu mapa, clique nos três pontos no canto superior direito e selecione a opção "Embed on my site" (Incorporar no meu site).
A partir daí, você pode copiar o código de incorporação personalizado do Google Maps.
Etapa 4. Incorporar seu mapa no WordPress
A etapa final é adicionar seu mapa com vários locais a uma nova página do WordPress. Portanto, crie uma nova página, escolha o bloco HTML personalizado e cole seu código de incorporação.
Agora, quando você clicar em Publicar e visualizar sua página, verá apenas um mapa com vários marcadores personalizados.
E é isso!
Esperamos que este tutorial o tenha ajudado a aprender como adicionar vários Google Maps em uma página no WordPress. Talvez você também goste deste guia sobre como criar uma tabela de preços vertical no WordPress.
Obrigado pela leitura. Siga-nos no Twitter, no Facebook e no YouTube para obter mais conteúdo útil para expandir seus negócios.
