Eléments sociaux Chapitre 8

ÉLÉMENTS SOCIAUX

CHAPITRE 8 : CARTE

MODULE 7

Le module Appel à l'action

Les modules de cartes permettent d'intégrer facilement des cartes Google Maps personnalisées n'importe où sur votre page.

Vous pouvez même ajouter un nombre illimité d'épingles à la carte et définir un emplacement de départ personnalisé.

Les modules de cartes sont également disponibles en format Full Width, alors n'oubliez pas de vérifier cela aussi! Clé API Google Maps

Une clé API est nécessaire pour utiliser le module Cartes.

Pour obtenir une clé API, connectez-vous à la Console des développeurs Google, qui vous guidera tout au long du processus et activera automatiquement l'API JavaScript Google Maps et tous les services associés.

La première chose qu'on vous demandera de faire est de créer un nouveau projet.

Ensuite, on vous demandera de nommer votre projet. Vous pouvez nommer le projet comme bon vous semble. Dans cet exemple, je l'ai simplement appelé "Maps". Vous pouvez également entrer le nom de domaine de votre site Web (ajoutez un * devant celui-ci si vous autorisez l'accès depuis www.domain.com et domain. com) pour vous assurer que les autres sites Web sont autorisés à accéder à votre clé API.

Une fois que vous avez créé un projet nommé, vous recevez une clé API que vous pouvez utiliser.

Après avoir obtenu une clé API, vous devez la copier/coller dans le panneau des options du thème en naviguant vers: Divi>>Options du thème>>Réglages généraux>>Clé API Google Maps

Comment ajouter un module de carte à votre page

Avant de pouvoir ajouter un module de carte à votre page, vous devez d'abord sauter

Cliquez sur ce bouton pour activer le Divi Builder, vous donnant accès à tous les modules du Divi Builder.

Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode Visual.

Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.

Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page.

Les nouveaux modules ne peuvent être ajoutés qu'à l'intérieur des rangées.

Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page. Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.

Localisez le module de carte dans la liste des modules et cliquez dessus pour l'ajouter à votre page. La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper le mot "map" et cliquer sur "enter" pour trouver et ajouter automatiquement le module map!

Une fois le module ajouté, vous serez accueilli avec la liste d'options du module. Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.

Exemple d'utilisation: Ajouter un module de carte à une page Contact

Un module de carte est un excellent moyen de présenter l'emplacement de votre entreprise sur votre page de contact.

Pour cet exemple, je vais ajouter un module de carte pour afficher l'emplacement et les informations de l'entreprise en ajoutant une épingle personnalisée à la carte.

Important

Dans l'onglet Contenu des Para- mètres de la carte, saisissez l'adresse de votre entreprise sous l'option Adresse du centre de la carte. L'adresse du Map Center est le point central de la carte.

Cliquez ensuite sur + Ajouter un nouvel élément pour créer votre première broche. Mettez à jour ce qui suit:

Titre:[inscrivez le titre de votre emplacement

Contenu:[entrez le contenu de votre code PIN (ex. adresse et numéro de téléphone)]. Map Pin Address:[entrer l'adresse de cet emplacement spécifique][entrer l'adresse].

Sauvegarder les paramètres

Voilà, c'est ça.

Vous disposez maintenant d'un module cartographique dynamique en bas de la page de contact avec une épingle cliquable qui affiche les informations de l'entreprise.

Options du contenu de la carte

Ajouter un nouvel élément

Clé API Google

Adresse du centre de la carte

Étiquette Admin

Le module Cartes utilise l'API Google Maps et nécessite une clé API Google valide pour fonctionner.

Avant d'utiliser le module de carte, assurez-vous que vous avez ajouté votre clé API dans le panneau Options du thème Divi.

Pour en savoir plus sur la création de votre clé API Google, cliquez ici.

C'est ici que vous ajoutez de nouvelles broches (ou emplacements) à votre module de carte.

En cliquant sur "Ajouter un nouvel élément", vous ouvrirez une toute nouvelle liste de paramètres de conception (incluant le contenu, le design et les options avancées) pour votre nouvelle broche.

Voir ci-dessous pour les réglages individuels des broches.

Après avoir ajouté votre première épingle, vous verrez apparaître une barre grise avec le titre de votre épingle comme étiquette.

La barre grise comporte également trois boutons qui vous permettent d'éditer, de dupliquer ou de supprimer la broche.

Ceci changera l'étiquette du module dans le constructeur pour une identification facile.

Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.

Entrez une adresse pour le point central de la carte, et l'adresse sera géocodée et affichée sur la carte ci-dessous.

C'est utile si vous avez plusieurs broches, et que vous souhaitez que la carte soit agrandie à un endroit spécifique, plus ciblé.

Vous pouvez simplement ta- per une adresse dans un format standard, tel que "1235 Sunny Road, Some City, State, 88343".

Options de conception de la carte

Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.

Zoom sur la molette de la souris

Zoom mobile

Utiliser le filtre en niveaux de gris

Ici, vous pouvez choisir si la carte sera glissée ou non sur les appareils mobiles.

Ici, vous pouvez choisir si le niveau de zoom sera contrôlé par la molette de la souris ou non.

Souvent, il est préférable de désactiver cette option pour que les visiteurs ne soient pas perturbés lorsqu'ils font défiler la page et que leur molette de souris est coincée dans l'iframe de la carte.

Ceci est particulièrement vrai pour les modules de carte pleine largeur.

Si vous activez cette option, votre carte deviendra une image en niveaux de gris.

Options avancées de la carte

Vous pouvez également appliquer des classes CSS et des identifiants personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style. css de votre thème enfant.

CSS ID

Entrez un ID CSS optionnel à utiliser pour ce module. Un ID peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

Options d'épingles à carte individuelles

Intitulé

Contenu

Adresse de l'axe de la carte

Lors de la création d'une nouvelle broche, vous pouvez affecter un bloc de texte de contenu.

Ce texte apparaîtra dans la boîte lorsque vous survolerez l'épingle sur la carte.

Lors de la création d'une nouvelle broche, vous pouvez attribuer un Titre.

Ce titre apparaîtra dans la boîte en survolant l'épingle sur la carte.

Il s'agit de l'endroit précis sur la carte où apparaîtra votre nouvelle épingle.

Vous pouvez saisir l'adresse dans un format standard.

MERCI