Es ist neu. Es ist kostenlos. Es ist leistungsstark.

Geben Sie diesem KOSTENLOSEN WordPress-Plugin maximal 90 Tage Zeit und es wird Ihren Umsatz wie NIE ZUVOR steigern!

Vergessen Sie all Ihre aktuellen Marketingstrategien (E-Mail-Marketing, Gastbeiträge, Banner, Bewertungen usw.). Sie sind alle überholt. Brouavo ist ein Game Changer, der 30 % Ihres „schlafenden“ Traffics in ein garantiertes Einkommen verwandelt. Es ist das perfekte Tool, um Ihre Partnerprogramme zu bewerben oder Ihre eigenen Produkte zu verkaufen.

Abhängig von Ihrer Leistung bieten wir Ihnen auch eine Pro-Lizenz für WordPress-Plugins wie: Elementor Pro, TranslatePress, Divi Builder & Ai, All-in-One SEO Pro, kostenpflichtige Mitgliederabonnements

Die Vollbild-Kartenmodule von Divi ermöglichen die Integration personalisierter Google Maps überall auf Ihrer Seite. Sie können der Karte sogar unbegrenzte Stecknadeln hinzufügen und einen benutzerdefinierten Startort festlegen. Modulkarten haben auch das Format "Normale Breite". Schauen Sie sich das also auch an!

voller Breite-map-overview.png

Google Maps API-Schlüssel

Ein API-Schlüssel ist Bedarf um das Maps-Modul 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.

Erstellen Sie einen Google.jpg-API-Schlüssel

Als Nächstes werden Sie aufgefordert, Ihrem Projekt einen Namen zu geben. Sie können es beliebig benennen. In diesem Beispiel habe ich es einfach „Maps“ genannt. Sie können auch den Domänennamen Ihrer Website eingeben (fügen Sie ein * davor, wenn Sie den Zugriff sowohl von www.domain.com als auch von domain.com zulassen), um sicherzustellen, dass diese für Ihren API-Schlüssel autorisiert sind.

Fügen Sie einem project.jpg einen API-Schlüssel hinzu

Nachdem Sie ein benanntes Projekt erstellt haben, wird ein API-Schlüssel angezeigt, den Sie verwenden können.

Bilddokumente

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 das Divi Full Screen Card-Modul hinzu

Bevor Sie Ihrer Seite ein Vollbild-Kartenmodul hinzufügen können, müssen Sie zunächst den Divi Builder öffnen. Sobald das Divi-Theme auf Ihrer Website installiert ist, sehen Sie einen Button 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 Aktivieren Sie den visuellen Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Verwenden Sie Divi Builder

Sobald Sie Visual Builder aufgerufen haben, können Sie auf die graue Plus-Schaltfläche klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module mit voller Breite können nur innerhalb von Abschnitten mit voller Breite hinzugefügt werden.

vollständiger Abschnitt divi builder.png

Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst einen Abschnitt mit voller Breite hinzuzufügen.

vollständige Karte screen.png

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 kann durchsucht werden. Sie können also auch das Wort "Vollbildkarte" eingeben und dann auf die Eingabetaste klicken, um das Kartenmodul mit voller Breite automatisch zu finden 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: 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.

Für dieses Beispiel füge ich ein Kartenmodul in voller Breite hinzu, um den Standort und die Informationen des Unternehmens anzuzeigen, indem ich der Karte eine benutzerdefinierte Stecknadel hinzufüge.

Fügen Sie eine vollständige Karte divi builder.jpg hinzu

Wichtig : Stellen Sie sicher, dass im Divi-Theme-Optionsfeld ein gültiger Google-API-Schlüssel eingegeben wurde. Ohne diesen funktioniert das Kartenmodul nicht.

Fügen Sie mit Visual Builder unten auf der Kontaktseite einen Abschnitt mit voller Breite hinzu. Fügen Sie dann das Fullwidth Map-Modul in Ihren neuen Abschnitt ein. Geben Sie auf der Registerkarte Inhalt der Karteneinstellungen in voller Breite Ihre Firmenadresse unter der Option Kartencenteradresse ein. Die Adresse der Kartenmitte ist der Mittelpunkt der Karte.

füge eine Karte divi example.jpg hinzu

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 Ihrer PIN ein (Adresse und Telefonnummer)] Kartenadresse: [Geben Sie die Adresse für diesen bestimmten Standort ein]

Details hinzufügen Karte in voller Breite divi.jpg

Einstellungen speichern

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

Ergebnis Karte in voller Breite divi.jpg

Optionen des Kartenmoduls für die volle Breite

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.

Optionsinhalt divi builder volle Breite map module.png

Google API-Schlüssel

Das Kartenmodul verwendet die Google Maps API und benötigt einen gültigen Google API-Schlüssel. Bevor Sie das Kartenmodul verwenden, stellen Sie sicher, dass Sie Ihren API-Schlüssel im Divi-Theme-Optionsfeld 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 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".

Administrationsetikett

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.

Optionen für die vollständige Kartengestaltung

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 Änderungen vornehmen können.

Option Design Modul volle Breite map.png

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 in voller Breite

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.

Abschnitt Vorlaufmodul Vollbreite Karte Divi.png

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 Kartenoptionen für die gesamte Breite

Pin-Parameter-Modul-Karte volle width.png

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 = "erweitert" 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] [/ width_column] [»vc_col] vc_column] 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 "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andere Divi Tutorials

Autor-Avatar
Blair Jersyer
WordPress-Entwickler und leidenschaftlich über alles, was mit neuen technologischen Trends zu tun hat. Autoren von Plugins, WordPress-Themes und anderen Webanwendungen. Autor bei BlogPasCher.com.

Pin It auf Pinterest