O bloco Google Maps permite incorporar um mapa interativo do Google diretamente em qualquer página do SeedProd. Se você deseja mostrar a localização da sua empresa, um local de reunião ou uma área de serviço, este bloco facilita a exibição de um mapa ao vivo exatamente onde seus visitantes precisam.
Com controles para localização, nível de zoom, dimensões e alinhamento, você pode personalizar o mapa para se encaixar perfeitamente no layout da sua página — sem necessidade de códigos de incorporação ou configuração de API.
Adicionando o bloco do Google Maps às suas páginas
Siga estas etapas para adicionar um bloco do Google Maps à sua página SeedProd:
Passo 1: Adicione 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
Depois de adicionado, clique no bloco Google Maps para abrir suas configurações. Na guia 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 deseja que o mapa exiba. Você pode usar um endereço completo, o nome de uma cidade, o nome de uma empresa ou qualquer local reconhecível pelo Google Maps.
- Zoom: defina o nível de zoom do mapa de 0 (vista global) a 20 (detalhes ao nível da rua). Um valor de 10 mostra uma vista ao nível da cidade, enquanto valores mais elevados aproximam o zoom do local especificado.
- Largura (%): Defina a largura do mapa como uma porcentagem do seu contêiner, de 0 a 100%.
- Altura (px): Defina a altura do mapa em pixels, de 0 a 470 px.
- Alinhamento: defina o alinhamento horizontal do mapa dentro de sua seção — Esquerda, Centro ou Direita.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual e o espaçamento do seu bloco do Google Maps.
Estilos:
- Sombra: Adicione uma sombra ao redor do mapa incorporado. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande ou 2X Grande para adicionar profundidade e separação visual do conteúdo ao redor.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco do Google Maps (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
- Preenchimento: ajuste o espaçamento interno do seu bloco do Google Maps (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco do Google Maps, criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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 na área de trabalho: oculte o bloco do Google Maps nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco do Google Maps em dispositivos tablet.
- Ocultar no celular: oculte o bloco do 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 do Google Maps aparecer na tela, como Saltar, Aparecer gradualmente, Ampliar, Girar 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 ao vivo facilita aos visitantes encontrar sua localização, obter direções e entender onde você está baseado — tudo isso sem sair da sua página. Experimente diferentes níveis de zoom e dimensões para encontrar o layout que melhor se adapta ao seu design.