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 réunion ou une zone de service, ce bloc vous permet d'afficher facilement une carte en direct là où vos visiteurs en ont besoin.
Grâce aux commandes permettant de régler l'emplacement, le niveau de zoom, les dimensions et l'alignement, vous pouvez adapter la carte à la mise en page de votre site, sans avoir besoin de codes d'intégration ni de configuration API.
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, glissez-déposez 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 voir apparaître sur la carte. Vous pouvez utiliser une adresse complète, le nom d'une ville, le nom d'une entreprise ou tout autre lieu reconnaissable par Google Maps.
- Zoom : définissez le niveau de zoom de la carte entre 0 (vue mondiale) et 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 permettent de zoomer davantage 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, entre 0 et 470 px.
- Alignement : définissez l'alignement horizontal de la carte dans sa section : à gauche, au centre ou à droite.
Étape 3 : Personnalisez 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 la carte intégrée. Choisissez parmi Aucune, Fine, Petite, Moyenne, Grande, Très grande ou Très très grande pour ajouter de la profondeur et créer une séparation visuelle avec le 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 les ordinateurs de bureau, les tablettes et les mobiles.
- Remplissage : ajustez l'espacement intérieur de votre bloc Google Maps (haut, droite, bas, gauche). Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
Attributs :
- Identifiant 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 à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur.
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Google Maps sur les écrans de bureau.
- Masquer sur tablette : masque le bloc Google Maps sur les 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 s'affiche lorsque le bloc Google Maps apparaît à l'écran, tel que Rebond, Fondu entrant, Zoom avant, Rotation vers l'intérieur, et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Google Maps et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Google Maps à votre page ! L'intégration d'une carte en direct permet aux visiteurs de trouver facilement votre emplacement, d'obtenir des itinéraires et de comprendre où vous êtes basé, le tout sans quitter votre page. Testez différents niveaux de zoom et dimensions pour trouver la mise en page qui convient le mieux à votre design.