Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo Divi Full Screen Card

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 completos da placa Divi facilitar a integração de cartões 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 do mapa também estão no formato Largura normal, portanto, verifique também!

fullwidth-map-overview.png

Chave da API do Google Maps

Uma chave de API é requisitos para usar o módulo Mapas. 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.

criar uma chave de API do Google

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 do seu site (adicione um * na frente deste se você permitir o acesso de www.domain.com e domain.com) para garantir que sua chave de API seja permitida.

adicionar uma chave de API a um project.jpg

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

docs de imagem

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 de tema >> Configurações gerais >> Chave da API do Google Maps

Como adicionar o módulo Divi Full Screen Card

Antes de adicionar um módulo de mapa em tela cheia à 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 Ativar o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

usar o construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Os novos módulos de largura total só podem ser adicionados dentro das seções de largura total.

seção completa divi builder.png

Se você estiver iniciando uma nova página, não se esqueça de adicionar uma seção de largura total à sua página primeiro.

mapa completo screen.png

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]

Localize o módulo de mapa de largura total 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 em tela cheia" e, em seguida, clicar em entrar para pesquisar e adicionar automaticamente o módulo de mapa de largura total! 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: Adicione um módulo de mapa de largura total a uma página de contato

Um módulo de mapa de largura total é 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 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 de largura total para apresentar as informações de localização e empresa, adicionando um alfinete personalizado ao mapa.

adicione um mapa de largura total divi builder.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 Fullwidth na parte inferior da página de contato. Em seguida, insira o módulo Fullwidth Map em sua nova seção. Na guia Conteúdo das configurações do mapa de largura total, insira o endereço da sua empresa na opção Endereço do centro de cartões. O endereço do centro do mapa é o ponto central do mapa.

adicione um mapa divi example.jpg

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

Título: [insira o título do seu local] Conteúdo: [insira o conteúdo do seu distintivo de lapela (endereço e número de telefone)] Endereço do Mapa: [informe o endereço deste local]

adicionar detalhes mapa de largura total divi.jpg

Salvar configurações

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

resultado mapa de largura total divi.jpg

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]

Opções de conteúdo do módulo de mapa de largura total

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 conteúdo divi builder full width map module.png

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".

Rótulo de Administração

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 mapa de largura total

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 possui uma longa lista de parâmetros de design que você pode usar para alterar qualquer coisa.

módulo de design de opção full width map.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 de mapas avançados de largura total

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 seção cartão de largura total 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 conteúdo do mapa de largura total

cartão de módulo de parâmetro de pino full width.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
17 ações
ação10
chilrear3
Enregistrer4
Whatsapp