Möchten Sie eine Karte mit mehreren Standorten in WordPress mit erstellen Elementor und wesentliche Add-ons?
Angenommen, Sie haben ein Unternehmen, das bereits mehrere Filialen in der Stadt hat, und Sie möchten eine digitale Karte erstellen, die den Standort dieser Filialen zeigt. Wenn Sie eine WordPress-basierte Website haben, können Sie eine solche Karte mühelos erstellen. Es gibt ein großartiges Plugin, mit dem Sie eine Karte mit mehreren Standorten erstellen können: Wesentliche Addons.
Wesentliche Addons ist ein Zusatz Elementor Premium, daher müssen Sie es auch installieren Elementor bevor Sie es verwenden können. Sie können die kostenlose Version von Elementor verwenden, um eine Karte mit dem Essential Addons-Modul zu erstellen.
La kostenlose Version von Essential Addons ist ebenfalls verfügbar. Das Widget zum Erstellen einer Karte ist jedoch nur in der kostenpflichtigen Version verfügbar. Sie können die kostenpflichtige Version von Essential Addons auf seiner herunterladen offizielle Website.
Wir verwenden die Google Maps-Plattform, um mit Essential Addons eine Karte auf Ihrem WordPress zu erstellen. Bevor Sie beginnen, stellen Sie sicher, dass Sie Elementor und Essential Addons installieren.
Integrieren Sie Google Maps mit dem Essential Addons-Modul
Bevor Sie eine Google Maps-Karte mit Essential Addons hinzufügen können, müssen Sie diese zuerst integrieren. Sie benötigen einen API-Schlüssel, um Google Maps mit Essential Addons-Modulen zu integrieren.
Besuchen Sie zunächst die Google API-Konsole und melden Sie sich mit Ihrem Google-Konto an. Erstellen Sie ein neues Projekt, indem Sie oben auf das Dropdown-Menü klicken und auf klicken NEUES PROJEKT.
Geben Sie Ihrem neuen Projekt einen Namen und klicken Sie auf die Schaltfläche CREATE .
Sobald Ihr neues Projekt erstellt wurde, wählen Sie es aus dem Dropdown-Menü aus und klicken Sie auf Bibliothek auf der linken Tafel.
Google unterteilt die Google Maps Platform API in 17 Typen. Sie können sie sehen, indem Sie auf den Link klicken ALLE ANZEIGEN im Bereich Menükarte. Sie müssen APIs aktivieren, je nachdem, was Sie erreichen möchten.
Entdecken Sie auch: So erstellen Sie eine benutzerdefinierte Einzelproduktvorlage in WooCommerce mit Elementor
In unserem Fall müssen Sie die folgenden APIs aktivieren, um eine Karte von Google Maps mit Essential Addons hinzuzufügen.
- API-Anweisungen
- Geokodierungs-API
- Maps-JavaScript-API
- Places API
Um eine API zu aktivieren, wählen Sie eine API aus, die Sie aktivieren möchten (indem Sie darauf klicken) und klicken Sie auf die Schaltfläche AKTIVIEREN SIE.
Nachdem Sie die erforderlichen APIs aktiviert haben, kehren Sie zum Haupt-Dashboard der Google API-Konsole zurück und klicken Sie auf Identifiers auf der linken Tafel. Klicken Sie auf die Schaltfläche Anmeldedaten erstellen und wählen Sie API-Schlüssel. Kopieren Sie den API-Schlüssel im angezeigten Popup.
Melden Sie sich bei Ihrem WordPress-Dashboard an und klicken Sie auf Wesentliche Addons auf der linken Tafel. Klicken Sie auf die Registerkarte verschiedenste Komponenten und scrollen Sie im Abschnitt nach unten Erweiterte Google Map. Klicken Sie auf Einstellungen und fügen Sie den soeben kopierten API-Schlüssel ein.
Klicken Sie auf die Schaltfläche EINSTELLUNGEN SPEICHERN um die neue Änderung anzuwenden.
Beginnen Sie mit der Erstellung der Karte
Sobald Google Maps und die Essential Addons integriert sind, können Sie mit der Erstellung der Karte beginnen. Erstellen Sie dazu eine neue Seite (Seiten – > Hinzufügen ) oder ein neues Element (Artikel – > Hinzufügen) und bearbeiten Sie es mit Elementor.
Legen Sie vor dem Erstellen der Seite das Layout fest, indem Sie auf das Zahnradsymbol in der unteren linken Ecke klicken, um das Einstellungsfenster zu öffnen. Legen Sie das Layout aus dem Dropdown-Menü fest.
Erstellen Sie einen neuen Abschnitt, indem Sie im Bearbeitungsfeld auf die Plus-Schaltfläche klicken. Um einen größeren Bereich für die Karte zu haben, können Sie die einspaltige Struktur auswählen. Ziehen Sie das Widget EA GoogleMaps vom linken Bedienfeld zum Bearbeitungsbereich.
Gehen Sie zum linken Bereich und stellen Sie den Kartentyp auf ein Mehrfachmarker.
Öffnen Sie den Abschnitt Kartenmarkierungseinstellungen und klicken Sie auf die vorhandene Kartenmarkierung, um sie zu bearbeiten. Fügen Sie den Breiten- und Längengrad des ersten Standorts ein, den Sie der Karte hinzufügen möchten. Legen Sie auch den Titel sowie die Beschreibung fest.
Um den Breiten- und Längengrad eines Standorts abzurufen, öffnen Sie Google Maps und suchen Sie nach dem Standort (Ort), dessen Breiten- und Längengrad Sie abrufen möchten. Wenn Sie sie gefunden haben, klicken Sie mit der rechten Maustaste und dann mit der linken Maustaste auf die Nummer, die im Kontextmenü erscheint.
Mit dieser Aktion können Sie also den Breitengrad (erster Wert) und den Längengrad (zweiter Wert) kopieren.
Wenn Sie den Breiten- und Längengrad des ersten Standorts hinzugefügt haben, klicken Sie auf die Schaltfläche EIN ELEMENT HINZUFÜGEN , um Ihrer Karte einen weiteren Standort hinzuzufügen.
Öffnen Sie Google Maps erneut und suchen Sie den neuen Ort, den Sie der Karte hinzufügen möchten, kopieren Sie den Längengrad sowie den Längengrad und fügen Sie sie in die entsprechenden Felder wie das obige ein. Wiederholen Sie die obigen Schritte, um der Karte weitere Orte hinzuzufügen.
Lesen Sie auch: So verwenden Sie das Beitrags-Widget von Elementor
Wenn Sie mit dem Hinzufügen von Standorten fertig sind, öffnen Sie den Block Kartensteuerung um die Befehle zu aktivieren/deaktivieren, die Sie auf Ihrer Karte bereitstellen möchten. Hier können Sie auch die Zoomstufe einstellen.
Sie können den Block auch öffnen Kartenthema , um das Google Maps-Design auszuwählen, das Sie verwenden möchten.
Bisher haben Sie erfolgreich eine Karte mit mehreren Standorten erstellt. Sie können die Registerkarte öffnen Design um sowohl die Höhe als auch die Breite der Karte zu definieren.
Wenn Sie eine Karte in voller Breite haben möchten, stellen Sie den Abschnitt, der die Karte enthält, auf volle Breite ein. Klicken Sie dazu auf den Anfasser des Abschnitts.
In Tab und Block Layout Setzen Sie die Inhaltsbreite auf Gesamtbreiter und die Spaltenlücke an Keine Abweichung
Klicken Sie auf die Schaltfläche VERÖFFENTLICHTER unten im linken Bereich, um Ihre Seite zu veröffentlichen.
Betten Sie die Karte in eine Seite oder einen Beitrag ein
Wenn Sie es aus irgendeinem Grund vorziehen, Ihre Karte in einen Seiten-/Beitragseditor einzubetten (die Seite/den Beitrag, der mit dem standardmäßigen WordPress-Gutenberg-Editor erstellt wurde), können Sie den WordPress Plugin Elementor-Blöcke für Gutenberg. Dieses Plugin konvertiert eine Elementor-Vorlage in einen Gutenberg-Block.
Um die soeben erstellte Karte als Elementor-Vorlage zu speichern, klicken Sie auf das Pfeilsymbol neben der Schaltfläche VERÖFFENTLICHEN / AKTUALISIEREN und wählen Sie Als Vorlage speichern.
Gib deinem Modell einen Namen und klicke auf den Button AUFZEICHNUNG.
Erstellen Sie als Nächstes eine neue Seite oder einen neuen Beitrag (stellen Sie sicher, dass Sie die Elementor-Plugin Blöcke für Gutenberg). Fügen Sie einen neuen Block hinzu und wählen Sie ihn aus Elementor-Bibliothek und wählen Sie die soeben erstellte Vorlage aus.
Anmerkung: Wenn beim Hinzufügen einer Karte die Meldung „Nur für Entwicklungszwecke“ angezeigt wird, stellen Sie sicher, dass Sie Ihre Google Cloud-Abrechnung aktivieren. Die neue Google-Richtlinie erfordert, dass Entwickler das Rechnungskonto aktivieren (Sie können die Google Maps-API weiterhin kostenlos verwenden).
Holen Sie sich Elementor Pro jetzt!!!
Zusammenfassung
So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie mit Elementor eine Karte mit mehreren Standorten erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, teilen Sie es ihnen im mit commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
