L’ajout d’une carte Google à votre site Web est un excellent moyen d’afficher votre emplacement, de fournir des directions vers votre emplacement physique et d’améliorer l’optimisation de votre moteur de recherche local. Heureusement, il est facile d’utiliser Google Maps avec Divi. Cet article décrit trois façons d’ajouter Google Maps à votre site Web Divi.

Restez jusqu’à la fin et découvrez un plugin sympa qui propose de nombreux styles prédéfinis gratuits pour google maps.

1. Intégrez le code Google Maps – sans clé API

Vous pouvez intégrer une carte Google entièrement interactive sur votre site Web en collant du code intégré que vous pouvez utiliser à partir de n’importe quelle carte Google. Aller à Google Maps Trouvez le lieu que vous souhaitez cartographier, puis effectuez un zoom avant sur le lieu jusqu’à ce que vous voyiez la carte exacte souhaitée. Dans cet exemple, je cherchais le zoo de San Diego. Choisir partager dans la liste des options sur la gauche.

Cela ouvrira un modal que vous pourrez utiliser pour envoyer un lien ou intégrer la carte. Cliquez sur Incorporer une carte. Ici, vous pouvez ajuster encore plus le zoom et la carte. Lorsque vous avez exactement la carte souhaitée, cliquez sur Copier le HTML. La carte a la même apparence que la carte modale, y compris les directions, le zoom et la vue satellite.

Ensuite, collez le code dans votre contenu. Si vous utilisez Gutenberg pour créer la page ou l’article, mettez en surbrillance et sélectionnez la zone de contenu dans laquelle vous souhaitez placer un bloc HTML.

Insérer dans votre html et enregistrez-le.

Cela placera la carte intégrée dans votre contenu comme indiqué dans l’exemple ci-dessus.

Vous pouvez également l’utiliser dans les widgets. Il suffit de déposer un Widget HTML personnalisé dans votre barre latérale et Insérer le HTML.

Voici la carte intégrée à mon contenu et à ma barre latérale.

Vous pouvez également le placer dans vos mises en page Divi. Dans cet exemple, j’ai collé le code d’intégration dans un Module de texte Divi dans l’onglet de texte. Vous pouvez également coller le code dans un Module de code.

API Google Maps

Avant de pouvoir utiliser Google Maps avec Divi, vous devez créer une clé API Google Maps.

le Plateforme Google Maps offre un Clé API pour utiliser Google Maps avec votre site Web. Utilisez le bouton pour intégrer des cartes statiques ou dynamiques, afficher une vue de rue et ajouter des fonctionnalités pour les itinéraires et les emplacements. Le service nécessite des frais, mais pour de nombreuses utilisations, vous recevrez un crédit avant que les frais ne soient facturés. Il existe de nombreuses options pour créer exactement le type de carte que vous souhaitez. Cliquez sur A débuté pour créer votre compte et choisir votre forfait.

Sélectionnez les produits que vous souhaitez utiliser avec la plate-forme Google Maps. Vous avez 3 options:

  • cartes – Cette option vous permet d’afficher des cartes avec des vues de dessus et de rue.
  • Itinéraires – Permet à vos utilisateurs de choisir leur chemin de n’importe où.
  • Puts – montre aux utilisateurs d’autres lieux qu’ils souhaitent visiter.

Choisissez vos industries. De cette façon, Google en apprend davantage sur la manière dont votre entreprise est catégorisée. Vous pouvez ignorer cela si vous préférez.

Choisissez ce que vous voulez construire. Cela comprend certaines listes de l’industrie et des fonctionnalités publicitaires pour aider votre entreprise à se démarquer.

Une fois la configuration terminée, vous recevrez un Clé API. Cette clé fonctionne avec de nombreux plugins disponibles et avec Divi.

2. Module Divi Map

Divi comprend un module de carte que vous pouvez placer n’importe où dans vos mises en page Divi. Il s’agit de la vue de Visual Builder. Le module contient des broches pour ajouter une adresse, une carte pour ajouter votre clé API Google et de nombreuses options pour le style et le contrôle de la carte.

Divi n’affichera pas la carte correctement tant que vous n’aurez pas saisi la clé API. Ouvrez la carte déposée dans l’onglet Contenu et entrez votre clé ou ajoutez-la aux options de thème.

Divi a également une carte pleine largeur qui fonctionne en sections pleine largeur. Elle a les mêmes fonctions que la carte normale mais est automatiquement affichée en pleine largeur.

Clé API

Pour utiliser Google Maps avec Divi, vous devez ajouter votre clé API Google Maps au Options de thème Divi dans l’onglet Général. Cela placera automatiquement la clé API dans vos modules Divi Map sur votre site Web.

stylo

Divi peut ajouter une épingle pour mettre en évidence un emplacement spécifique. Cliquez pour créer une nouvelle épingle Ajouter une nouvelle épingle. Ici vous pouvez voir un champ pour le texte et un champ pour la carte. Dans cet exemple, j’ai ajouté un titre et un contenu à la zone de texte.

ouvrir carte et entrez l’adresse du code PIN de la carte dans le champ. La carte est affichée dans les paramètres et vous montre où la broche sera placée.

Voici la carte pleine largeur dans une mise en page Divi. Il montre l’adresse PIN. Il montre mon contenu lorsque je déplace la souris sur le stylet. J’ai cliqué sur l’épingle pour voir le contenu que j’ai créé, qui comprend du texte et une image. Ajoutez autant d’épingles que vous le souhaitez avec n’importe quel type de contenu que vous souhaitez.

Contrôle et style

L’onglet Conception contient les paramètres des commandes et du style de carte. Vous pouvez activer avec les commandes Zoom de la molette de la souris (Personnellement, je désactive toujours cette option car la carte s’arrête et effectue un zoom lorsque je fais défiler la page) et traînable sur le téléphone.

Les paramètres de la carte vous permettent d’ajuster la teinte, la saturation, la luminosité, le contraste, l’inversion, le sépia, l’opacité, le flou et le mode de fusion. Dans cet exemple, j’ai ajusté les paramètres de luminosité, de contraste et d’inversion.

3. Plug-in Google Maps

Il existe de nombreux plugins WordPress pour intégrer Google Maps. Voici un aperçu d’un plugin de carte populaire et celui que nous souhaitons utiliser pour concevoir des cartes intégrées dans des plugins.

WP Google Maps

WP Google Maps est le plugin gratuit Google Maps le plus populaire du référentiel WordPress. Collez votre clé API Google, puis créez votre carte.

Créer le design de la carteSélectionnez un sujet, activez les itinéraires (nécessite la version Pro), configurez le localisateur de magasin, sélectionnez les types de trafic et d’autres paramètres avancés, et configurez les options de liste de contrôle.

Configurez vos marqueurs. Cela inclut la conception de l’adresse et de l’étiquette. Les options de conception nécessitent la version Pro.

Pour utiliser la carte avec des pages ou des publications Gutenberg, Collez le shortcode dans un bloc de code court.

Voici à quoi ressemble la carte dans le frontend.

Voici à quoi cela ressemble dans une mise en page Divi. j’ai a collé le shortcode dans un module de code. Vous pouvez également utiliser un module de texte.

Voici un autre exemple. Il comprend les options pour afficher la carte et le satellite, basculer en mode plein écran, faire glisser la carte et zoomer. j’ai a placé le shortcode dans un module de texte. La ligne contient une image d’arrière-plan.

Envoyer des cartes

Envoyer des cartes est un Styler de carte. Il a de nombreux modèles préconçus que vous pouvez utiliser sur vos cartes. Les styles s’appliquent à vos cartes existantes ajoutées avec des plugins.

Choisissez les styles que vous souhaitez. Vous avez le choix entre près de 24 000 styles. Parcourez les styles, filtrez par favoris, couleur, tag, popularité, âge, etc. Une fois qu’un style est activé, vos cartes utiliseront ce style. Il affiche le nom du style, le nom du créateur, le nombre de vues et le nombre de favoris.

Vous pouvez Enregistrez plusieurs styles et activez celui que vous voulez. Dans cet exemple, j’ai enregistré 3 styles de carte.

Voici la mise en page Divi utilisant la carte du plugin WP Google Maps. J’ai appliqué un style Snazzy Maps.

Voici un style différent pour la même carte. Il est facile de basculer entre les styles.

Dans cet exemple, j’ai choisi un style violet qui correspond à certaines des couleurs de l’image d’arrière-plan.

Arrêtez de penser

Alors, voici trois façons d’ajouter Google Maps à votre site Web Divi. Google Maps est un excellent moyen d’afficher votre position, de fournir des itinéraires et d’améliorer l’optimisation de votre moteur de recherche local. Google Maps peut également renforcer votre crédibilité, ce qui augmente la confiance dans votre entreprise. Heureusement, ajouter une carte google à votre site Web Divi est facile. Les 3 méthodes que nous avons couvertes ici sont faciles à utiliser. Si vous suivez l’une de ces méthodes, vous aurez une carte google sur votre site Web en un rien de temps.

Nous voulons de vos nouvelles. Avez-vous utilisé l’une de ces méthodes pour ajouter une carte google à votre site Web Divi? Faites-nous part de votre expérience dans les commentaires ci-dessous.



Source link

Recent Posts