FB
Grátis domínio, hospedagem e e-mail!

Como inserir um mapa Google Maps com DIVI

por | 15/03/21 14:47 | Criar site, Notícias

Os módulos de mapas facilitam a incorporação do Google Maps personalizado em qualquer lugar da sua página. Você pode até adicionar pinos ilimitados ao mapa e definir um local inicial da porta de visualização personalizada. Os módulos de mapas também vêm em um formato Full Width , então não deixe de conferir também!

Continue lendo

Nós temos a solução

Tenha uma equipe profissional pronta para te ajudar rapidamente

Google Maps

Chave de API do Google Maps

Uma chave de API é necessária para usar o módulo de mapas. Para obter uma chave de API, faça login no Google Developers Console, que orientará você pelo processo. E ative a API JavaScript do Google Maps e quaisquer serviços relacionados automaticamente. A primeira coisa que você será solicitado a fazer é criar um novo projeto.

Em seguida, você será solicitado a nomear seu projeto. Você pode nomear o projeto como quiser. Neste exemplo, eu simplesmente o chamei de “Mapas”. Você também pode inserir o nome de domínio do seu site (adicionar um * na frente dele, se você permitir o acesso de ambos os domínios, www.dominio.com e domain.com) para certificar-se de outros sites.
Depois de ter criado um nome para seu projeto, você será presenteado com uma chave de API que você pode usar.
Depois de obter uma chave de API, você deve copiá-la / colá-la no painel de opções do tema, navegando até:
Divi >> Opções de tema >> Configurações gerais >> Chave da API do Google Maps.

Como adicionar um módulo de mapa à sua página

Antes de poder adicionar um módulo de mapa à sua página, primeiro você precisa pular para o Divi Builder. Uma vez que o Divi Theme tenha sido instalado em seu site, você notará um botão Usar Divi Builder acima do editor de postagens toda vez que você estiver construindo uma nova página. Clicar neste botão permitirá ao Divi Builder, dar acesso a todos os módulos do Divi Builder. Em seguida, clique no botão Usar o Visual Builder para iniciar o construtor no Modo Visual. Você também pode clicar no botão Usar o Visual Builder ao navegar pelo seu site no front end se estiver logado no seu Painel do WordPress.

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página.
Novos módulos só podem ser adicionados dentro de linhas. Se você estiver iniciando uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.
Localize o módulo do mapa na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra “mapa” e depois clicar em enter para encontrar e adicionar automaticamente o módulo do mapa! Uma vez que o módulo tenha sido adicionado, você será saudado com a lista de opções do módulo. Essas opções são separadas em três grupos principais: conteúdo, design e avançado.

Exemplo de caso de uso: adicionar um módulo de mapa a uma página de contato

Um módulo de mapa é uma ótima maneira de mostrar a localização da sua empresa na sua página de contato. E a capacidade de adicionar vários pinos ao mapa para exibir diferentes locais e informações da empresa é um recurso útil e envolvente.

Para este exemplo, adicionarei um módulo de mapa para mostrar a localização e as informações da empresa adicionando um alfinete personalizado ao mapa.

Importante: verifique se uma chave de API do Google válida foi inserida dentro do painel Opções do tema Divi. O Módulo de Mapa não funcionará sem ele.

Usando o Visual Builder, adicione uma seção padrão à parte inferior da página de contato. Em seguida, insira o módulo Map em sua nova seção. Na guia Conteúdo das Configurações do Mapa, insira o endereço da empresa na opção Endereço do Centro de Mapeamento. O Endereço do Centro de Mapas é para o ponto central do mapa.

Em seguida, clique em + Adicionar novo item para criar seu primeiro pin. Atualize o seguinte:

Título: [introduza o título da sua localização]
Conteúdo: [introduza o conteúdo do seu PIN (ex. Endereço e número de telefone)]
Endereço do mapa: [introduza o endereço para esta localização específica]

Salvar configurações

É isso aí. Agora você tem um módulo de mapa dinâmico na parte inferior da página de contato com um pino clicável que exibe informações da empresa.

Opções de Conteúdo do Mapa

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nessa guia.

+ Adicionar novo item

É aqui que você adiciona novos pinos (ou locais) ao seu Módulo do Mapa. Clicar em “adicionar novo item” abrirá uma lista completamente nova de configurações de design (incluindo Conteúdo, Design, Avançado) para o seu novo pin. Veja abaixo as configurações individuais de pinos.

Depois de adicionar seu primeiro pin, você verá uma barra cinza com o título do seu pino exibido como um marcador. A barra cinza também possui três botões que permitem editar, duplicar ou excluir o PIN.

Chave de API do Google

O módulo Maps usa a API do Google Maps e exige uma chave de API do Google válida para funcionar. Antes de usar o módulo de mapas, certifique-se de ter adicionado sua chave de API dentro do painel Opções de Tema Divi. Saiba mais sobre como criar sua chave de API do Google aqui.

Endereço do centro do mapa

Digite um endereço para o ponto central do mapa e o endereço será geocodificado e exibido no mapa abaixo. Isso é útil se você tiver vários pinos e quiser que o mapa seja ampliado para um local específico mais focalizado.
Você pode simplesmente digitar um endereço em um formato padrão, como “1235 Sunny Road, Some City, State, 88343.”

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Ao usar a visualização WireFrame no Visual Builder, essas etiquetas aparecerão no bloco do módulo na interface do Divi Builder.

Opções de Design de Mapa

Dentro da guia de design, você encontrará todas as opções de estilo do módulo, como fontes, cores, dimensionamento e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi tem uma longa lista de configurações de design que você pode usar para alterar praticamente qualquer coisa.

Zoom da roda do mouse

Aqui você pode escolher se o nível de zoom será controlado pela roda do mouse ou não. Muitas vezes, é melhor desativar essa opção para que os visitantes não sejam interrompidos enquanto rolam a página para baixo e colocam a roda do mouse presa dentro do iframe do mapa. Isto é especialmente verdadeiro para módulos de mapa de largura total.

Zoom arrastável

Aqui você pode escolher se o mapa será ou não arrastável em dispositivos móveis.

Use o filtro de escala de cinza

Ativar essa opção transformará seu mapa em uma imagem em tons de cinza.

Mapear opções avançadas

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a qualquer um dos muitos elementos do módulo. Você também pode aplicar classes e IDs CSS personalizadas ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css do tema filho.

ID CSS

Digite um ID CSS opcional a ser usado para este módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite classes CSS opcionais a serem usadas para este módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes separadas por um espaço. Essas classes podem ser usadas no seu Divi Child Theme ou no CSS personalizado que você adiciona à sua página ou ao seu site usando as opções Divi Theme ou Divi Builder Page Settings.

CSS customizado

O CSS personalizado também pode ser aplicado ao módulo e a qualquer um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual poderá adicionar CSS personalizado diretamente a cada elemento. As entradas CSS nessas configurações já estão agrupadas em tags de estilo, portanto, você só precisa inserir regras CSS separadas por ponto e vírgula.

Visibilidade

Esta opção permite controlar em quais dispositivos seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou computadores desktop individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Opções individuais de pinos do mapa

Título

Ao criar um novo pin, você pode atribuir um título. Esse título aparecerá na caixa ao passar o mouse sobre o marcador no mapa.

Conteúdo

Ao criar um novo pin, você pode atribuir um bloco de texto de conteúdo. Esse texto aparecerá na caixa ao passar o mouse sobre o alfinete no mapa.

Endereço do Pin do Mapa

Esta é a localização específica no mapa onde seu novo pin será exibido. Você pode inserir o endereço em um formato padrão.

Nós temos a solução

Tenha uma equipe profissional pronta para te ajudar rapidamente

Redação: Link Nacional
A Companhia Link Nacional atua na área de tecnologia da informação (TI). E é especializada em oferecer serviços e soluções para internet. Fundada em 2004 na cidade de Ribeirão Preto/SP, hoje ela expandiu as suas áreas de negócios por todo o Brasil.
0 0 votos
Vote no Artigo
Inscrever-se
Notificar de
guest

0 Comentários
Feedbacks embutidos
Ver todos os comentários
Como adicionar calendário em um site?

Como adicionar calendário em um site?

Como adicionar calendário em um site?Utilidades de um site com calendárioUm site com calendário facilita o agendamento de eventos, compartilha datas importantes e mantém visitantes informados e engajados.  Leia MaisComo adicionar calendário em um site? •...

O que é um estacionamento de domínio?

O que é um estacionamento de domínio?

O que é um estacionamento de domínio?O que é um estacionamento de domínio? Estacionar um domínio significa utilizar um domínio adicional e fazê-lo apontar para o conteúdo que está disponível em outro domínio principal. Leia maisRequisitos para estacionar um...

Conheça o Divi Theme

Conheça o Divi Theme

Conheça o Divi ThemeO que é o Divi Theme? O Divi é um tema premium para WordPress, desenvolvido pela Elegant Themes, que oferece um construtor visual intuitivo e vastas opções de personalização.Leia maisPrincipais funcionalidades do Divi Theme – Construtor...

Como adicionar conta de e-mail no Android?

Como adicionar conta de e-mail no Android?

Como adicionar conta de e-mail no Android?O que é uma conta de e-mail POP3? Uma conta de e-mail POP3 baixa mensagens do servidor para o dispositivo local, permitindo acesso offline e, geralmente, apagando-as do servidor após o download.Leia maisPor que configurar...

Como alterar a senha no WordPress?

Como alterar a senha no WordPress?

Como alterar a senha no WordPress?Por que alterar sua senha no WordPress? Alterar a senha no WordPress é crucial para a segurança. Além de evitar invasões, previne ataques de força bruta e controla o acesso ao seu site.Leia maisComo mudar a senha do WordPress?O...

DirectAdmin ou cPanel? Qual é o melhor?

DirectAdmin ou cPanel? Qual é o melhor?

DirectAdmin ou cPanel? Qual é o melhor?O que é o cPanel? O cPanel é um dos principais painéis de controle de hospedagem do mercado. Ele se caracteriza principalmente pela sua extensa gama de recursos e funcionalidades. leia maisO que é o DirectAdmin? Já...

Últimas postagens

Como criar site com calendário?

Como criar site com calendário?

Saber como criar site com calendário é uma solução eficiente para organizações, empresas e indivíduos que desejam gerenciar e compartilhar eventos de maneira...

Como receber doações internacionais?

Como receber doações internacionais?

O Brasil é um dos principais destinos do capital internacional quando falamos em doações para o terceiro setor, seja pela enorme desigualdade que temos no...

Como transferir hospedagem de sites?

Como transferir hospedagem de sites?

Está insatisfeito com sua hospedagem de sites atual? É hora de considerar uma migração! Transferir hospedagem de sites pode parecer assustador, mas, com as...