Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo Map

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Os módulos de cartão facilitam a integração de Google Maps personalizado em todos os lugares da sua página. Você pode até adicionar pinos ilimitados ao mapa e definir um local inicial personalizado. Os módulos de cartão também vêm em um formato de largura total, então não deixe de verificar isso também!

mapa divi apercu.png

Chave da API do Google Maps

Uma chave de API é requisitos para usar o módulo de cartão. Para obter uma chave de API, efetue login Google Developers Console, que o guiará pelo processo e ativará automaticamente a API JavaScript do Google Maps e todos os serviços associados. A primeira coisa que você será perguntado é criar um novo projeto.

registre uma API Google.jpg

Então você será solicitado a nomear seu projeto. Você pode nomear o projeto como quiser. Neste exemplo, eu simplesmente chamei de "Cards". Você também pode digitar o nome de domínio seu site (adicione um * na frente deste se você permitir acesso de www.domain.com e domain.com) para garantir que sua chave de API esteja autorizada.

para nomear um projeto Google API.jpg

Depois de criar um projeto nomeado, uma chave de API que você pode usar é exibida.

criar um credentials.jpg de aplicativo de mapa do Google

Depois de obter uma chave de API, você deve copiá-la / colá-la no painel de opções do tema, indo para: Divi >> Opções do tema >> Configurações gerais >> Chave da API do Google Maps

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

Antes de adicionar um módulo de mapa à sua página, primeiro você deve pular para o Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

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ê iniciar 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, em seguida, clicar em entrar para pesquisar e adicionar automaticamente o módulo do mapa! Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

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

Um módulo de cartão é uma ótima maneira de apresentar a localização do seu negócio em sua página de contato. E a capacidade de adicionar vários pinos ao seu mapa para destacar diferentes locais e informações da empresa é um recurso útil e envolvente.

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

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

mapa de apresentação google map company.jpg

importante Certifique-se de que uma chave de API do Google válida tenha sido inserida no painel Opções do tema Divi. O módulo de cartão não funcionará sem ele.

Usando o Visual Builder, adicione uma seção padrão na parte inferior da página de contato. Em seguida, insira o módulo de cartão em sua nova seção. Na guia Conteúdo das configurações do cartão, insira o endereço da sua empresa em Endereço do Card Center. O endereço do centro do mapa é o ponto central do mapa.

adicione um mapa de opções divi.jpg

Em seguida, clique em + Adicionar um novo item para criar seu primeiro pin. Atualize os seguintes itens:

Título: [insira o título da sua localização]
Conteúdo: [insira o conteúdo do seu distintivo de lapela (endereço e número de telefone)]
Endereço do Mapa: [digite o endereço para este local específico]

digite um endereço para um lugar precis.jpg

Salvar configurações

Isso é tudo. Agora você tem um módulo de mapa dinâmico na parte inferior da página de contato com um pino de clique que exibe as informações da empresa.

pino divi módulo card.jpg

Mapear opções de conteúdo do módulo

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 nesta aba.

opção content module map.png

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

+ Adicionar um novo artigo

É aqui que você adiciona novos pinos (ou slots) ao seu módulo de cartão. Clicar em "adicionar novo item" abrirá uma nova lista de parâmetros 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 pin como marcador. A barra cinza também possui três botões que permitem editar, duplicar ou excluir o bug.

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 Map, certifique-se de ter adicionado sua chave de API no painel Opções do tema Divi.

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 cartão seja ampliado para um local específico e mais específico. Você pode simplesmente digitar um endereço em um formato padrão, como "1235 Sunny Road, Some City, State, 88343".

Etiqueta do Administrador

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Opções de design de módulo de mapa

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho 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 parâmetros de design que você pode usar para alterar o que deseja.

module map ongle design.png

Roda do mouse Zoom

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 perturbados quando rolarem na página e bloquearem a roda do mouse no iframe do cartão. Isto é especialmente verdadeiro para módulos de cartão de largura total.

Zoom arrastável

Você pode escolher aqui se o cartão pode ser movido 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.

Opções avançadas de mapas

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 um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

módulo de avanço de tabulação divi.png

ID CSS

Digite um identificador CSS opcional para usar neste 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 as classes CSS opcionais para usar neste 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 em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops 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 de cartões

opção de fechar divi.png

Título

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

Conteúdo

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

Endereço do mapa

Este é o ponto exato no mapa onde seu novo pin aparecerá. Você pode inserir o endereço em um formato padrão.

Outros tutoriais Divi

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
13 ações
ação8
chilrear1
Enregistrer4
Whatsapp