Há algumas semanas, precisei incorporar um Google Map no WordPress para a landing page de um cliente local. Eles queriam que os clientes pudessem encontrar facilmente a loja física, mas eu não queria deixar o site lento ou ter que lidar com código.
Se você já passou pela mesma situação, sabe como pode ser frustrante. É por isso que neste tutorial, mostrarei três maneiras simples de adicionar Google Maps ao WordPress. Usei cada método em projetos reais, então vou guiá-lo pelo que funciona melhor para landing pages, posts de blog e incorporações pontuais.
Resumo dos métodos para incorporar Google Maps no WordPress:
Antes de começarmos, quais são os benefícios de incorporar mapas interativos em seu site?
Por que Incorporar Google Maps no WordPress é Importante
Você já sabe que incorporar Google My Maps em seu site é uma excelente maneira de torná-lo interativo. Mas existem vários outros benefícios que podem ajudar seu negócio a crescer.
Por exemplo, um mapa do Google incorporado pode:
- Ajudar os clientes a encontrar uma loja perto de onde moram com o Street View
- Mostrar aos participantes a localização física de um evento
- Ilustrar posts de blog que discutem locais específicos
- Mostrar a localização da sua sede
Com um pouco de criatividade, você pode usar os mapas interativos do Google para dar vida ao seu site. E, como resultado, servir tanto ao crescimento do seu negócio quanto aos seus potenciais clientes.
Você Precisa de uma Chave de API do Google Maps?
Antes de incorporar um mapa do Google em seu site WordPress, é uma boa ideia criar uma chave de API do Google Maps, que o Google agora exige. Para obter uma chave de API do Google, siga as etapas abaixo.
1. Vá para o Google Cloud Platform Console. Você pode criar uma conta gratuita se ainda não tiver uma.
2. Selecione um projeto existente ou crie um novo projeto
3. Escolha a Maps Embed API e clique em Ativar na tela seguinte.
4. Agora navegue até a barra lateral de Credenciais, clique na opção +Criar Credenciais e selecione Chave de API.
Agora você deve ter uma chave de API ativa para o Google Maps.
Como Incorporar Google Maps no WordPress (3 Métodos)
Agora vamos mergulhar em como incorporar Google Maps no WordPress.
Método 1: Incorporar Google Maps em Landing Pages do WordPress com SeedProd
O primeiro método neste tutorial mostra como incorporar mapas do Google em uma landing page no WordPress. Landing pages são a melhor maneira de converter tráfego direcionado em leads e vendas.
E o melhor plugin de landing page do WordPress para essa tarefa é o SeedProd.
SeedProd é um construtor de landing pages de arrastar e soltar que permite criar landing pages e temas do WordPress de alta conversão sem escrever código. Ele vem com centenas de modelos de landing page responsivos que você pode personalizar facilmente no editor visual front-end.
Além disso, o SeedProd tem toneladas de blocos de conteúdo inteligentes para adicionar conteúdo amigável à sua página, incluindo:
- Mapas do Google
- Formulários de contato
- Botões de call-to-action
- Tabelas de preços
- Carrosséis de imagens
- Depoimentos
- Acordeões de FAQ
- Texto dinâmico
- Títulos animados
- Formulários de optin
- E mais
Como resultado, você pode criar páginas de destino rapidamente sem contratar um desenvolvedor.
Siga as etapas abaixo para aprender como incorporar Google Maps em páginas de destino do WordPress com o SeedProd.
1. Baixe o Plugin de Página de Destino SeedProd
O primeiro passo é baixar o plugin SeedProd para o seu computador. Embora o SeedProd ofereça uma versão gratuita para criar páginas de destino gratuitas no WordPress, usaremos a versão pro – SeedProd Pro. Dessa forma, podemos usar os blocos de conteúdo avançados que mencionamos anteriormente.
Então, clique no botão abaixo para começar.
Em seguida, instale e ative o SeedProd em seu site. Se precisar de ajuda com isso, você pode seguir este guia passo a passo para instalar plugins do WordPress.
Depois de instalar o SeedProd, você verá uma tela de boas-vindas solicitando sua chave de licença.
Você pode encontrar sua chave fazendo login na sua conta SeedProd e clicando no link Ver Chave de Licença, Detalhes e Downloads.
Após copiar sua chave, cole-a no campo Chave de Licença na sua tela de boas-vindas do SeedProd e clique no botão Verificar Chave.
2. Crie uma Nova Landing Page
Agora você pode começar a criar sua primeira página, então role a tela de boas-vindas para baixo e clique no botão Criar Sua Primeira Página. Após clicar nesse botão, você será direcionado para o painel de páginas de destino do SeedProd.
Nesta página, você verá primeiro os diferentes modos de página de destino disponíveis no SeedProd, incluindo:
- Em Breve
- Modo de Manutenção
- Entrar
- 404
Os modos de página do SeedProd permitem que você ative diferentes páginas de destino com um único clique rapidamente.
Por exemplo, você pode ativar rapidamente uma tela de manutenção quando estiver realizando pequenas atualizações. Ou você pode ativar uma tela de login personalizada do WordPress para receber os usuários registrados.
O principal benefício dos modos de página é que você não precisará instalar plugins do WordPress separados para obter essa funcionalidade. O SeedProd tem tudo integrado em um único plugin compacto.
Abaixo da seção de modos de página, há uma lista de todas as páginas que você cria com o SeedProd. Por enquanto, você não verá nenhuma página listada.
Para criar sua primeira página, clique no botão Criar Nova Página de Destino.
Clicar no botão leva você para a tela de modelos de página de destino do SeedProd. Aqui você verá centenas de modelos projetados profissionalmente que você pode usar como base para o design da sua página.
Na parte superior, há diferentes abas para filtrar os designs, como:
- Em Breve
- Modo de Manutenção
- Página 404
- Vendas
- Webinar
- Lead Squeeze
- Obrigado
- Entrar
Passe o mouse sobre qualquer design que você gostar e clique no ícone de visto para importar esse modelo.
Usaremos o modelo Oportunidades para este guia, que você pode encontrar sob o título Lead Squeeze.
Após clicar no ícone de visto para importar seu modelo, você verá um pop-up pedindo para você inserir um nome para a página de destino. Como o nome da sua página é atribuído automaticamente à sua URL da página de destino, nomeie-a de algo que faça sentido para seus visitantes.
Você pode facilmente alterar essa configuração mais tarde se cometer um erro. Então, vá em frente e clique no botão Salvar e Iniciar Edição da Página.
3. Personalize o Design da Sua Página
Ao importar seu design, ele será aberto no editor visual de páginas do SeedProd. O editor tem um design de 2 painéis fácil de usar para tornar a personalização da sua página super fácil:
- Painel esquerdo: Blocos e seções de página para construir e personalizar sua página
- Painel direito: Prévia de como sua página de destino fica em tempo real
Ao longo do topo do editor, há um menu de navegação para alternar rapidamente entre seu design, integrações e configurações da página.
E na parte inferior do painel esquerdo, há vários outros ícones para ajudá-lo a navegar em sua página, incluindo:
- Configurações Globais: Controle as cores, fontes e o plano de fundo da sua página globalmente
- Navegação de Layout: Navegue rapidamente para diferentes partes do seu design
- Histórico de Revisões: Visualize e restaure uma versão mais antiga do seu design
- Desfazer e Refazer: Desfaça alterações de design ou refaça-as rapidamente
- Visualização Mobile: Visualize o design mobile da sua página de destino
As configurações acima facilitam a personalização do seu modelo para se adequar à sua marca, conteúdo e objetivos de marketing.
Por exemplo, clicar em um título de página permite que você altere a cor do texto e veja as alterações em tempo real mais rapidamente.
Ou, se você quiser alterar as imagens padrão, pode simplesmente clicar em uma imagem para ver as configurações à esquerda. Em seguida, você pode substituí-la por uma do seu computador, da biblioteca de mídia ou escolher uma foto gratuita.
4. Incorpore o Bloco de Página de Destino do Google Maps
Adicionar um widget de mapas do Google à sua página de destino é simples.
No painel esquerdo, clique no bloco Google Maps. Em seguida, você pode arrastá-lo para a seção da página onde deseja que ele vá.
Clicar nas configurações do bloco Google Map permite que você insira rapidamente o local que deseja mostrar. Você pode então escolher o nível de zoom do mapa, alterar o alinhamento e ajustar a largura do mapa.
Selecionar a aba Avançado permite que você escolha diferentes estilos de borda e ajuste o espaçamento ao redor do seu mapa personalizado.
Continue personalizando sua página de destino até ficar satisfeito com a aparência. Lembre-se de clicar no botão verde Salvar no canto superior direito para armazenar suas alterações.
5. Configure Suas Configurações
Com seu design no lugar, há algumas configurações que você pode configurar antes de publicar sua página de destino.
O SeedProd permite que você conecte sua página de destino à sua lista de e-mail facilmente. Portanto, clique em Conectar na parte superior da tela para ver serviços populares de marketing por e-mail. Isso facilita pedir aos usuários para se inscreverem em sua newsletter e adicioná-los automaticamente à sua lista de e-mail.
Após conectar sua lista de e-mail, clique na aba Configurações da Página para mais opções.
O SeedProd oferece 5 configurações que você pode configurar, mas isso geralmente depende do tipo de página que você cria e do seu plano atual do SeedProd.
- Geral: Edite o nome e a URL da sua página ou alterne entre publicado e rascunho.
- SEO: Configure suas configurações de SEO com um plugin de SEO para WordPress.
- Analytics: Acompanhe o desempenho da sua página com um plugin do Google Analytics.
- Scripts: Adicione scripts personalizados ao cabeçalho, corpo e rodapé da sua página, como pixels de rastreamento e retargeting.
- Domínio Personalizado: Dê a qualquer página de destino um domínio personalizado que não esteja conectado ao seu site existente.
Após configurar suas configurações, salve suas alterações e clique de volta na guia Design.
6. Publique sua Página de Destino
Antes de publicar sua página, é importante garantir que seu design seja compatível com dispositivos móveis. Se não for, os usuários de dispositivos móveis terão dificuldade em navegar em sua página, e você poderá perder leads e conversões.
Felizmente, o SeedProd inclui uma opção de visualização para dispositivos móveis para verificar se sua página é compatível com dispositivos móveis. Basta clicar no ícone de celular na parte inferior da tela.
A partir daí, você pode ver como sua página fica em dispositivos móveis e alterar qualquer coisa que não pareça ou funcione corretamente.
Quando tudo estiver certo, 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 prévia ao vivo, prossiga e clique no botão Ver Página ao Vivo.
E aqui está uma prévia de como seu mapa do Google fica:
Ótimo trabalho! Agora você sabe como adicionar um mapa do Google à sua página de destino do WordPress.
Mas e se você precisar adicionar o mapa aos seus posts do WordPress? Mostraremos como fazer isso a seguir.
Método 2: Adicionar Mapas do Google em Posts e Páginas do WordPress Usando um Plugin
Recomendamos o uso deste método se os mapas desempenham um papel importante em seu negócio e você precisa usá-los em vários posts e páginas em seu site. Novamente, usaremos um plugin do WordPress, e desta vez, usaremos o MapPress Maps for WordPress, um dos plugins gratuitos do Google Maps para wp.
Portanto, prossiga e instale e ative o plugin em seu painel do WordPress para começar. Em seguida, clique em editar no post ou página onde você gostaria de incorporar o mapa.
Dentro do seu post ou página, clique no ícone mais (+) no editor de blocos (Gutenberg) para adicionar um novo bloco do WordPress. A partir daí, pesquise pelo bloco MapPress Map e clique nele para adicionar o mapa ao seu post.
Agora clique no botão Biblioteca de Mapas e, na tela seguinte, selecione Adicionar Novo.
Na próxima tela, você pode digitar o local do mapa preferido na barra de pesquisa e clicar em Salvar.
Em seguida, clique no link Inserir no Post para adicionar seu mapa ao seu editor do WordPress.
Agora você pode usar o painel Configurações do Mapa no lado direito para alterar o tamanho e o zoom do seu mapa do Google.
Depois, clique em Atualizar ou Publicar para salvar suas alterações e visualizar como seu novo mapa fica.
Método 3: Incorporar Manualmente um Mapa do Google no WordPress Usando um iFrame
Você pode, é claro, adicionar um mapa do Google ao seu site WordPress sem usar um plugin. Você precisa visitar o site do Google Maps e pesquisar o local que deseja exibir para fazer isso, como o localizador de sua loja.
A partir daí, clique no ícone de compartilhamento e clique na guia Incorporar um mapa que aparece na janela pop-up. Em seguida, clique no botão Copiar HTML.
Agora clique em editar em qualquer post ou página no WordPress. Dentro do editor de blocos do WordPress, clique no ícone mais (+) para adicionar um novo bloco e escolha a opção HTML personalizado, que permite adicionar código como iframes, shortcodes e muito mais.
Em seguida, cole o código de incorporação do Google Maps dentro do bloco HTML personalizado e clique em Atualizar para salvar o post.
Ao visualizar seu post, seu mapa deve ficar semelhante ao exemplo abaixo.
Perguntas Frequentes Sobre a Incorporação de Google Maps no WordPress
Agora você conhece três maneiras simples de incorporar Google Maps no WordPress. Você pode usar um construtor de landing page, um plugin ou uma incorporação manual com um iframe.
Se você deseja a maneira mais rápida de colocar um mapa em seu site e controlar o design, recomendo usar o SeedProd. É a mesma ferramenta que uso para todas as landing pages dos meus clientes porque é rápida, flexível e funciona com qualquer tema do WordPress.
Pronto para experimentar? Comece com o SeedProd hoje e adicione um Google Map totalmente com a marca do seu site em minutos, sem tocar em código.
Se você gostou deste artigo, talvez também goste deste guia sobre como editar o rodapé do seu WordPress. Alternativamente, confira estes principais provedores de hospedagem WordPress.
Obrigado por ler. Por favor, siga-nos no YouTube, Twitter e Facebook para mais conteúdo útil para fazer seu negócio crescer.
