Le bloc Google Maps vous permet d'intégrer une carte Google interactive directement sur n'importe quelle page SeedProd. Que vous souhaitiez afficher l'emplacement de votre entreprise, un lieu de rencontre ou une zone de service, ce bloc facilite l'affichage d'une carte en direct là où vos visiteurs en ont besoin.
Avec des contrôles pour l'emplacement, le niveau de zoom, les dimensions et l'alignement, vous pouvez adapter la carte pour qu'elle s'intègre parfaitement à la mise en page de votre page — aucun code d'intégration ou configuration d'API requis.
Ajouter le bloc Google Maps à vos pages
Suivez ces étapes pour ajouter un bloc Google Maps à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Google Maps dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Google Maps pour ouvrir ses paramètres. Dans l'onglet Contenu, configurez l'emplacement de la carte et les dimensions d'affichage.
Google Maps :
- Emplacement : Entrez l'adresse ou le nom du lieu que vous souhaitez afficher sur la carte. Vous pouvez utiliser une adresse postale complète, un nom de ville, un nom d'entreprise ou tout emplacement reconnaissable par Google Maps.
- Zoom : Définissez le niveau de zoom de la carte de 0 (vue du monde) à 20 (détail au niveau de la rue). Une valeur de 10 affiche une vue au niveau de la ville, tandis que des valeurs plus élevées zooment sur l'emplacement spécifié.
- Largeur (%) : Définissez la largeur de la carte en pourcentage de son conteneur, de 0 à 100 %.
- Hauteur (px) : Définissez la hauteur de la carte en pixels, de 0 à 470 px.
- Alignement : Définissez l'alignement horizontal de la carte dans sa section — Gauche, Centre ou Droite.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle et l'espacement de votre bloc Google Maps.
Styles :
- Ombre : Ajoutez une ombre portée autour de l'intégration de la carte. Choisissez parmi Aucune, Fine, Petite, Moyenne, Grande, Très grande ou 2x Grande pour ajouter de la profondeur et une séparation visuelle du contenu environnant.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Google Maps (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Google Maps (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Google Maps, créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l’élément d’encapsulation du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Google Maps sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Google Maps sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Google Maps sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez un effet d'animation qui se joue lorsque le bloc Google Maps défile dans la vue, tel que Rebond, Fondu, Zoom avant, Rotation avant, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé la configuration du bloc Google Maps et la personnalisation de son apparence, assurez-vous d’enregistrer votre travail.
Vous avez ajouté avec succès un bloc Google Maps à votre page ! L’intégration d’une carte en direct permet à vos visiteurs de trouver facilement votre emplacement, d’obtenir des itinéraires et de comprendre où vous êtes basé, le tout sans quitter votre page. Expérimentez avec les niveaux de zoom et les dimensions pour trouver la mise en page qui convient le mieux à votre design.