Mit dem Google Maps-Block können Sie eine interaktive Google Map direkt in jede SeedProd-Seite einbetten. Ganz gleich, ob Sie Ihren Unternehmensstandort, einen Tagungsort oder einen Servicebereich anzeigen möchten – mit diesem Block können Sie ganz einfach eine Live-Karte genau dort anzeigen, wo Ihre Besucher sie benötigen.
Mit Steuerelementen für Standort, Zoomstufe, Abmessungen und Ausrichtung können Sie die Karte perfekt an Ihr Seitenlayout anpassen – ganz ohne Einbettungscodes oder API-Konfiguration.
Hinzufügen des Google Maps-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Google Maps-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Google Maps -Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Google Maps-Block, um dessen Einstellungen zu öffnen. Konfigurieren Sie auf der Registerkarte „Inhalt“ den Standort der Karte und die Anzeigeabmessungen.
Google Maps:
- Standort: Geben Sie die Adresse oder den Ortsnamen ein, den die Karte anzeigen soll. Sie können eine vollständige Straßenadresse, einen Ortsnamen, einen Firmennamen oder jeden anderen Ort verwenden, der von Google Maps erkannt wird.
- Zoom: Stellen Sie den Zoomfaktor der Karte von 0 (Weltansicht) bis 20 (Straßenansicht) ein. Der Wert 10 zeigt eine Stadtansicht, während höhere Werte näher an den angegebenen Standort heranzoomen.
- Breite (%): Legt die Breite der Karte als Prozentsatz ihres Containers fest, von 0 bis 100 %.
- Höhe (px): Legen Sie die Höhe der Karte in Pixeln fest, von 0 bis 470px.
- Ausrichtung: Legen Sie die horizontale Ausrichtung der Karte innerhalb ihres Abschnitts fest – links, mittig oder rechts.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild und den Abstand Ihres Google Maps-Blocks anpassen.
Stile:
- Schatten: Fügen Sie einen Schlagschatten um die eingebettete Karte hinzu. Wählen Sie zwischen „Keine“, „Haarfein“, „Klein“, „Mittel“, „Groß“, „X Groß“ oder „2X Groß“, um Tiefe und visuelle Trennung vom umgebenden Inhalt zu erzielen.
Abstand:
- Rand: Steuere den äußeren Abstand um deinen Google Maps-Block herum (oben, rechts, unten, links). Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Google Maps-Blocks an (oben, rechts, unten, links). Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Google Maps-Block an, die von SeedProd automatisch für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt wurde.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Google Maps-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Google Maps-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Google Maps-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie einen Animationseffekt aus, der abgespielt wird, wenn der Google Maps-Block in den Bildausschnitt scrollt, z. B. „Hüpfen“, „Einblenden“, „Vergrößern“, „Eindrehen“ und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Google Maps-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Google Maps-Block zu Ihrer Seite hinzugefügt! Durch das Einbetten einer Live-Karte können Besucher mühelos Ihren Standort finden, Wegbeschreibungen abrufen und verstehen, wo Sie sich befinden – und das alles, ohne Ihre Seite zu verlassen. Experimentieren Sie mit Zoomstufen und Abmessungen, um das für Ihr Design am besten geeignete Layout zu finden.