Mit Kartenmodulen können Sie ganz einfach benutzerdefinierte Google Maps überall auf Ihrer Seite integrieren. Sie können der Karte sogar unbegrenzte Stecknadeln hinzufügen und einen benutzerdefinierten Startort festlegen. Kartenmodule sind auch in voller Breite erhältlich. Schauen Sie sich das also auch an!
Google Maps API-Schlüssel
Ein API-Schlüssel ist Bedarf um das Kartenmodul zu verwenden. Melden Sie sich bei an, um einen API-Schlüssel zu erhalten Google EntwicklerkonsoleDies führt Sie durch den Prozess und aktiviert automatisch die Google Maps JavaScript-API und alle zugehörigen Dienste. Als erstes werden Sie aufgefordert, ein neues Projekt zu erstellen.
Als nächstes werden Sie aufgefordert, Ihr Projekt zu benennen. Sie können das Projekt beliebig benennen. In diesem Beispiel habe ich es einfach „Maps“ genannt. Sie können auch die eingeben Domain-Namen Ihrer Website (fügen Sie ein * davor hinzu, wenn Sie den Zugriff von www.domain.com und domain.com zulassen), um sicherzustellen, dass Ihr API-Schlüssel autorisiert ist.
Nachdem Sie ein benanntes Projekt erstellt haben, wird ein API-Schlüssel angezeigt, den Sie verwenden können.
Nachdem Sie einen API-Schlüssel erhalten haben, müssen Sie ihn kopieren / in das Design-Optionsfeld einfügen. Gehen Sie dazu zu: Divi >> Designoptionen >> Allgemeine Einstellungen >> Google Maps API-Schlüssel
So fügen Sie Ihrer Seite ein Kartenmodul hinzu
Bevor Sie Ihrer Seite ein Kartenmodul hinzufügen können, müssen Sie zuerst zu Divi Builder wechseln. Einmal die Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.
Nachdem Sie Visual Builder eingegeben haben, können Sie auf das graue Pluszeichen klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen.
Suchen Sie das Kartenmodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar. Sie können also auch das Wort "Karte" eingeben und dann auf die Eingabetaste klicken, um das Kartenmodul automatisch zu suchen und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .
Beispiel für einen Anwendungsfall: Fügen Sie einer Kontaktseite ein Kartenmodul hinzu
Ein Kartenmodul ist eine großartige Möglichkeit, Ihren Unternehmensstandort auf Ihrer Kontaktseite zu präsentieren. Und die Möglichkeit, Ihrer Karte mehrere Stecknadeln hinzuzufügen, um verschiedene Standorte und Geschäftsinformationen hervorzuheben, ist eine nützliche und attraktive Funktion.
In diesem Beispiel füge ich ein Kartenmodul hinzu, um Standort- und Unternehmensinformationen anzuzeigen, indem ich der Karte eine benutzerdefinierte Stecknadel hinzufüge.
Wichtig : Stellen Sie sicher, dass ein gültiger Google-API-Schlüssel im Optionsfeld des eingegeben wurde Divi-Thema. Ohne sie funktioniert das Kartenmodul nicht.
Fügen Sie mit Visual Builder unten auf der Kontaktseite einen Standardabschnitt hinzu. Fügen Sie dann das Kartenmodul in Ihren neuen Abschnitt ein. Geben Sie auf der Registerkarte Inhalt der Karteneinstellungen Ihre Firmenadresse unter der Option Card Center-Adresse ein. Die Adresse der Kartenmitte ist der Mittelpunkt der Karte.
Dann klicken Sie + Fügen Sie einen neuen Artikel hinzu um deinen ersten Pin zu erstellen. Aktualisieren Sie Folgendes:
Titel: [Geben Sie den Titel Ihres Standorts ein]
Inhalt: [Geben Sie den Inhalt Ihres Pins ein (Adresse und Telefonnummer)]
Kartenadresse: [Geben Sie die Adresse für diesen bestimmten Ort ein]
Einstellungen speichern
Das ist alles. Jetzt haben Sie ein dynamisches Kartenmodul am unteren Rand der Kontaktseite mit einem anklickbaren Pin, der Unternehmensinformationen anzeigt.
Kartenmodul-Inhaltsoptionen
Auf der Registerkarte Inhalt finden Sie den gesamten Inhalt des Moduls, z. B. Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer auf dieser Registerkarte.
+ Füge einen neuen Artikel hinzu
Hier fügen Sie Ihrem Board-Modul neue Pins (oder Steckplätze) hinzu. Wenn Sie auf "Neues Element hinzufügen" klicken, wird eine ganz neue Liste der Designeinstellungen (einschließlich Inhalt, Design, Erweitert) für Ihre neue PIN geöffnet. Unten finden Sie die einzelnen Pin-Einstellungen.
Nachdem Sie Ihren ersten Pin hinzugefügt haben, wird ein grauer Balken mit Ihrem Pin-Titel als Tag angezeigt. Die graue Leiste enthält außerdem drei Schaltflächen, mit denen Sie den Stecknadel bearbeiten, duplizieren oder löschen können.
Google API-Schlüssel
Das Maps-Modul verwendet die Google Maps API und erfordert einen gültigen Google API-Schlüssel, um zu funktionieren. Stellen Sie vor der Verwendung des Kartenmoduls sicher, dass Sie Ihren API-Schlüssel im Optionsfeld des Moduls hinzugefügt haben Divi-Thema.
Adresse des Kartencenters
Geben Sie eine Adresse für den Mittelpunkt der Karte ein. Die Adresse wird geokodiert und auf der Karte unten angezeigt. Dies ist nützlich, wenn Sie mehrere Pins haben und die Karte an einer bestimmten und genaueren Stelle vergrößert werden soll. Sie können einfach eine Adresse in einem Standardformat eingeben, z. B. "1235 Sunny Road, Some City, State, 88343".
Administrator-Label
Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.
Kartenmodul-Design-Optionen
Auf der Registerkarte Design finden Sie alle Stiloptionen für das Modul, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie beliebige Änderungen vornehmen können.
Mausrad Zoom
Hier können Sie wählen, ob die Zoomstufe vom Mausrad gesteuert werden soll oder nicht. Oft ist es am besten, diese Option zu deaktivieren, damit Besucher nicht gestört werden, wenn sie die Seite nach unten scrollen und das Mausrad in den Karten-Iframe stecken. Dies gilt insbesondere für Kartenmodule in voller Breite.
Ziehbarer Zoom
Hier können Sie auswählen, ob die Karte auf mobilen Geräten verschoben werden kann.
Verwenden Sie den Graustufenfilter
Wenn Sie diese Option aktivieren, wird Ihre Karte in ein Graustufenbild umgewandelt.
Erweiterte Kartenoptionen
Auf der Registerkarte "Erweitert" finden Sie Optionen, die erfahrene Webdesigner möglicherweise als nützlich erachten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei Ihres untergeordneten Themas anpassen können.
CSS-ID
Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.
CSS-Klasse
Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann zum Erstellen eines benutzerdefinierten CSS-Stils verwendet werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Ihrer Website mithilfe der Divi-Designoptionen oder der Einstellungen auf der Divi Builder-Seite hinzufügen.
Benutzerdefiniertes CSS
Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons getrennten CSS-Regeln ein.
Sichtbarkeit
Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.
Individuelle Kartenstiftoptionen
Titel
Beim Erstellen eines neuen Pins können Sie einen Titel zuweisen. Dieser Titel wird im Feld angezeigt, wenn Sie mit der Maus über die Stecknadel auf der Karte fahren.
Inhalt
Beim Erstellen einer neuen PIN können Sie einen Inhaltstextblock zuweisen. Dieser Text wird im Feld angezeigt, wenn Sie mit der Maus über die Stecknadel auf der Karte fahren.
Kartenadresse
Dies ist die genaue Stelle auf der Karte, an der Ihre neue Stecknadel angezeigt wird. Sie können die Adresse in einem Standardformat eingeben.
[vc_row center_row=“yes“][vc_column width=“1/2″][vcex_button target=“blank“ layout=“expanded“ align=“center“ font_family=“Raleway“ font_weight=“700″ style=“flat“ custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI THEMA HERUNTERLADEN [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=“https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials“ target=“blank“ layout=“expanded“ align=“center“ font_family = „Raleway“ font_weight=“700″ style=“flat“ custom_background=“#c4226e“ custom_hover_background=“#8d184f“ custom_color=“#ffffff“ custom_hover_color=“#ffffff“ icon_right=“fa fa-download“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andere Divi Tutorials
- 5 Websites, die Divi Restaurant Thema verwenden
- Wie man Text auf einem Divi WooCommerce Produkt hinzufügt
- So ändern Sie die Menüfarbe zwischen Divi-Seiten
- So personalisieren Sie die Gitter eines Blogs mit Divi
- Wie die Rolle Divi-Editor auf Wordpress verwenden
- So erstellen Sie einen Divi-Schieberegler im Vollbildmodus
- So ändern Sie die Farbe von Menüs zwischen Divi-Seiten
- Funktionen, die Sie wahrscheinlich nicht über Divi kennen
- Wie man Divi Builder auf WordPress benutzt
- Wie benutzt man das Divi Video-Scroll-Modul?
- Wie benutze ich das Divi Builder Flip Modul?
- So fügen Sie ein Testimonial-Modul in Divi Builder hinzu
- Wie benutzt man das Divi-Textmodul?
- So erstellen Sie einen Schieberegler auf Divi
- So bearbeiten Sie eine Divi-Benutzerrolle
- Wie benutzt man das Divi Social Media Modul?
- So verwenden Sie das Shop-Modul zum Thema WordPress Divi
- So verwenden Sie das Divi-Sidebar-Modul
- Wie benutzt man das Divi Preistabellen Modul?
- Wie verwende ich das Titelmodul von Divi-Publikationen?
- So fügen Sie ein Video-Modul von Divi hinzu
- Wie man das Artikelnavigationsmodul benutzt
- Wie benutzt man das Divi-Suchmodul?
- So verwenden Sie das Divi-Wallet-Modul
- Wie man das Personenmodul im Divi Builder benutzt
- Wie man das Geldbörsenmodul mit Divi-Filter verwendet
- So verwenden Sie das Schiebermodul mit voller Breite
- Wie benutzt man das Divi Builder Image Modul?
- So verwenden Sie das vollständige Navigationsmodul von Divi Builder
- So verwenden Sie das Bildergalerie-Modul
- So verwenden Sie das Divi Builder Kartenmodul mit voller Breite
- So verwenden Sie das Divi Full Width Portfolio-Modul
- So verwenden Sie das Divi-Header-Modul in voller Breite
- Wie benutze ich das Divi Counter Modul?
- So verwenden Sie den Artikel-Schieberegler in Divi Builder
- Wie benutze ich das Divi Email Optin Modul?
