Divi Tutorial: So verwenden Sie das Divi Vollbildkartenmodul

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

DOWNLOAD

TEMPLATES

Mit den voll ausgestatteten Divi-Kartenmodulen können Sie ganz einfach benutzerdefinierte Google Maps an einer beliebigen Stelle auf Ihrer Seite integrieren. Sie können der Karte sogar eine unbegrenzte Anzahl von Stecknadeln hinzufügen und einen benutzerdefinierten Startort festlegen. Die Kartenmodule haben auch das Format "Normale Breite". Überprüfen Sie dies auch!

Google Maps API-Schlüssel

Ein API-Schlüssel ist Bedarf um das Kartenmodul zu verwenden. Melden Sie sich an, um einen API-Schlüssel zu erhalten Google Entwicklerkonsole, der Sie durch den Vorgang führt und die JavaScript-API von Google Maps und alle zugehörigen Dienste automatisch aktiviert. Als Erstes werden Sie aufgefordert, ein neues Projekt zu erstellen.

Anschließend werden Sie aufgefordert, Ihr Projekt zu benennen. Sie können das Projekt wie gewünscht benennen. In diesem Beispiel habe ich es einfach "Karten" genannt. Sie können auch den Domainnamen Ihrer Website eingeben (ein * voranstellen, wenn Sie den Zugriff über www.domain.com und domain.com zulassen), um sicherzustellen, dass Ihr API-Schlüssel zulässig 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 >> Themenoptionen >> Allgemeine Einstellungen >> Google Maps API-Schlüssel

So fügen Sie das Divi Full Screen Card-Modul hinzu

Bevor Sie Ihrer Seite ein Vollbild-Kartenmodul hinzufügen können, müssen Sie zunächst zu Divi Builder wechseln. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. 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 Aktivieren Sie den visuellen Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Nachdem Sie Visual Builder aufgerufen haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Die neuen Module mit voller Breite können nur innerhalb der Abschnitte mit voller Breite hinzugefügt werden.

Wenn Sie eine neue Seite erstellen, vergessen Sie nicht, Ihrer Seite zuerst einen Abschnitt mit voller Breite hinzuzufügen.

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

DOWNLOAD

PLUGINS

Suchen Sie das Kartenmodul in voller Breite in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, dh Sie können auch das Wort "Vollbildkarte" eingeben und dann die Eingabetaste drücken, um das Kartenmodul in voller Breite zu suchen und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Hinzufügen eines Kartenmoduls in voller Breite zu einer Kontaktseite

Ein Kartenmodul in voller Breite ist eine hervorragende Möglichkeit, Ihren Unternehmensstandort auf Ihrer Kontaktseite zu präsentieren. Die Möglichkeit, Ihrer Karte mehrere Stecknadeln hinzuzufügen, um verschiedene Standorte und Unternehmensinformationen hervorzuheben, ist eine nützliche und ansprechende Funktion.

In diesem Beispiel füge ich ein Kartenmodul in voller Breite hinzu, um den Standort und die Informationen des Unternehmens darzustellen, indem der Karte eine benutzerdefinierte PIN hinzugefügt wird.

Wichtig Vergewissern Sie sich, dass im Optionsfeld des Divi-Themas ein gültiger Google API-Schlüssel eingegeben wurde. Das Kartenmodul wird ohne es nicht funktionieren.

Fügen Sie in Visual Builder am unteren Rand der Kontaktseite einen Abschnitt mit voller Breite hinzu. Fügen Sie dann das Vollbreiten-Kartenmodul in Ihren neuen Abschnitt ein. Geben Sie auf der Registerkarte Inhalt der Karteneinstellungen in voller Breite die Adresse Ihres Unternehmens unter der Option Adresse des Kartencenters ein. Die Kartenmitteladresse ist der Mittelpunkt der Karte.

Dann klicken Sie + Fügen Sie einen neuen Artikel hinzu um deinen ersten Pin zu erstellen. Aktualisieren Sie die folgenden Elemente:

Titel: [Geben Sie den Titel Ihres Standorts ein] Inhalt: [Geben Sie den Inhalt Ihrer Anstecknadel (Adresse und Telefonnummer) ein] Kartenadresse: [Geben Sie die Adresse für diesen Standort ein]

Einstellungen speichern

Das ist alles Sie haben jetzt ein dynamisches Kartenmodul in voller Breite am unteren Rand der Kontaktseite mit einer anklickbaren Stecknadel, die Unternehmensinformationen anzeigt.

Optionen des Kartenmoduls für die volle Breite

In der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, wie z. B. Text, Bilder und Symbole. All das kontrolliert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

DOWNLOAD

TEMPLATES

Google API Key

Das Google Maps-Modul verwendet die Google Maps-API und benötigt 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 Divi-Themas hinzugefügt haben.

Adresse des Kartencenters

Geben Sie eine Adresse für den Mittelpunkt der Karte ein. Die Adresse wird geokodiert und auf der Karte darunter angezeigt. Dies ist nützlich, wenn Sie mehrere Stecknadeln haben und die Karte auf einen bestimmten und genaueren Ort vergrößern möchten. Sie können einfach eine Adresse in einem Standardformat eingeben, z. B. "1235 Sunny Road, Some City, State, 88343".

Administrationsetikett

Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Optionen für die vollständige Kartengestaltung

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, z. B. Schriftarten, Farben, Größen und Abstände. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Konstruktionsparametern, mit denen Sie alles ändern können.

Mausrad Zoom

Hier können Sie wählen, ob die Zoomstufe mit dem Mausrad gesteuert werden soll oder nicht. Oft ist es besser, diese Option zu deaktivieren, damit die Besucher nicht gestört werden, wenn sie auf der Seite scrollen und das Mausrad im Iframe der Karte blockieren. Dies gilt insbesondere für Kartenmodule 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 in voller Breite

Auf der Registerkarte Erweitert finden Sie Optionen, die für erfahrene Webdesigner hilfreich sein könnten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf eines der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css 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 zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder in dem benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon getrennten CSS-Regeln ein.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

PLUGINS

TEMPLATES

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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Individuelle Kartenoptionen für die gesamte Breite

Titel

Beim Anlegen einer neuen Stecknadel können Sie einen Titel vergeben. Dieser Titel wird in der Box angezeigt, wenn Sie den Mauszeiger über die Stecknadel auf der Karte halten.

Inhalt

Beim Erstellen einer neuen Stecknadel können Sie einen Block mit Inhaltstext zuweisen. Dieser Text erscheint im Feld, wenn Sie über die Stecknadel auf der Karte fliegen.