O bloco Google Maps permite incorporar um mapa interativo do Google diretamente em qualquer página do SeedProd. Quer você queira mostrar a localização do seu negócio, um local de reunião ou uma área de serviço, este bloco facilita a exibição de um mapa em tempo real exatamente onde seus visitantes precisam.
Com controles para localização, nível de zoom, dimensões e alinhamento, você pode adaptar o mapa para que ele se encaixe perfeitamente no layout da sua página — sem necessidade de códigos de incorporação ou configuração de API.
Adicionando o Bloco Google Maps às Suas Páginas
Siga estas etapas para adicionar um bloco Google Maps à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Google Maps na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco Google Maps para abrir suas configurações. Na aba Conteúdo, configure a localização do mapa e as dimensões de exibição.
Google Maps:
- Localização: Insira o endereço ou nome do local que você deseja que o mapa exiba. Você pode usar um endereço completo, nome de cidade, nome de empresa ou qualquer local reconhecível pelo Google Maps.
- Zoom: Defina o nível de zoom do mapa de 0 (visão mundial) a 20 (detalhe em nível de rua). Um valor de 10 mostra uma visão em nível de cidade, enquanto valores mais altos aproximam a visualização do local especificado.
- Largura (%): Defina a largura do mapa como uma porcentagem de seu contêiner, de 0 a 100%.
- Altura (px): Defina a altura do mapa em pixels, de 0 a 470px.
- Alinhamento: Defina o alinhamento horizontal do mapa dentro de sua seção — Esquerda, Centro ou Direita.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual e o espaçamento do seu bloco Google Maps.
Estilos:
- Sombra: Adicione uma sombra projetada ao redor do mapa incorporado. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extra Grande ou 2X Grande para adicionar profundidade e separação visual do conteúdo circundante.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco Google Maps (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
- Preenchimento: Ajuste o espaçamento interno do seu bloco Google Maps (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Google Maps, criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco Google Maps em telas de desktop.
- Ocultar no Tablet: Oculte o bloco Google Maps em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco Google Maps em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha um efeito de animação que seja reproduzido quando o bloco Google Maps rolar para a visualização, como Bounce, Fade In, Zoom In, Rotate In e muitos outros.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco do Google Maps e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco do Google Maps à sua página! Incorporar um mapa interativo facilita para os visitantes encontrarem sua localização, obterem direções e entenderem onde você está localizado — tudo isso sem sair da sua página. Experimente os níveis de zoom e as dimensões para encontrar o layout que melhor se adapta ao seu design.