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
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.
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.
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.
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.
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.
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]
É 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