Banner

Ausgewählte Links

1. Company XYZ-Dokumentation zum Banner-Block
2. Shopify-Dokumentation zu Abschnitten und Blöcken
3. Company XYZ-Dokumentation zur Verwendung von Videos
4. Company XYZ-Dokumentation zu Symbolen
5. Company XYZ-Dokumentation zu Banner-Farbeinstellungen
6. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
7. Shopify-Dokumentation zum Theme-Editor

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Verwenden Sie den Banner-Block, um alles von einem einfachen Ankündigungsstreifen bis hin zu einer visuelleren Promotion mit Hintergrundmedien, überlagertem Text und einer klaren Handlungsaufforderung zu erstellen. Er unterstützt separate mobile Medien, optionale Vordergrundbilder und eine farbliche Steuerung pro Block, sodass Sie jedes Banner an die Botschaft anpassen können, die es vermitteln soll. Eine Referenz auf Feldebene finden Sie in der Company XYZ-Dokumentation zum Banner-Block.

Für einen umfassenderen Überblick darüber, wie Blöcke im Editor funktionieren, siehe die Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Beginnen Sie mit der Auswahl des Seitenverhältnisses des Banners. Feste Verhältnisse sind nützlich, wenn Sie eine stärker gestaltete, bildorientierte Form wünschen, während Default am besten funktioniert, wenn der Inhalt selbst die Höhe bestimmen soll.

Sie können ein separates mobiles Verhältnis festlegen, wenn die Desktop-Form auf kleineren Bildschirmen zu hoch, zu niedrig oder zu eng wirkt. Wenn das mobile Verhältnis bei Default bleibt, folgt es der Hauptverhältnis-Einstellung.

Hinweis

Der Block wird erweitert, wenn sein Inhalt mehr Platz benötigt, als das ausgewählte Verhältnis zulässt. So wird verhindert, dass Text und Schaltflächen abgeschnitten werden.

Banner-Hintergrund

Diese Gruppe steuert die Hintergrunddarstellung des Banners selbst. Verwenden Sie sie, um die Haupt-Bildebene hinter dem Vordergrundinhalt hinzuzufügen.

Sie können ein Bild oder Video verwenden, bei Bedarf mit separaten mobilen Versionen. Das ist besonders hilfreich, wenn Desktop-Motive auf kleineren Bildschirmen ungünstig zugeschnitten werden oder Sie eine leichtere, fokussiertere mobile Komposition wünschen.

Die Anpassung der Hintergrundbildanpassung steuert, wie Bildmedien den Bannerbereich ausfüllen. Cover ist in der Regel die beste Wahl für immersive Motive, während Contain besser ist, wenn das vollständige Bild sichtbar bleiben muss.

Vermeiden Sie es, wesentliche Texte oder Produktdetails in das Hintergrundmotiv zu platzieren, es sei denn, Sie haben geprüft, wie es auf Desktop und mobil zugeschnitten wird.

Wenn Sie Video verwenden, halten Sie es kurz und visuell schlicht, damit der Vordergrundinhalt lesbar bleibt. Hinweise zu Dateien und praktische Einrichtungstipps finden Sie unter using video.

Banner-Vordergrund

Diese Gruppe steuert den Inhalt, der über dem Hintergrund angezeigt wird. Jedes Feld, das Sie leer lassen, bleibt ausgeblendet, wodurch der Block leicht minimal gehalten werden kann.

Verwenden Sie die horizontale und vertikale Ausrichtung, um den Inhalt dort zu platzieren, wo er sich innerhalb des Banners am natürlichsten anfühlt. Zentrierte Layouts eignen sich in der Regel für einfache Nachrichten, während unten oder am Rand ausgerichtete Layouts oft besser für bildorientierte Promotions funktionieren.

Sie können ein Icon, eine Beschriftung, eine Überschrift und eine Unterüberschrift kombinieren, um eine klare Inhalts-Hierarchie aufzubauen. In Icon-Feldern können Sie ein Emoji oder einen Icon-Namen eingeben; unterstützte Verwendung finden Sie im icon guide.

Wählen Sie den Überschriftstyp basierend auf der Rolle des Banners auf der Seite. Eine stärkere Überschriftenebene eignet sich für eine primäre Werbebotschaft, während ein leichterer Textstil besser ist, wenn das Banner eher unterstützend als dominant ist.

Die Schaltflächeneinstellungen steuern die Hauptaktion des Banners, einschließlich Text, Icon-Darstellung, Größe und Layout. Eine mobile Schaltfläche mit voller Breite kann die Tippbedienung verbessern, wenn das Banner primär auf Aktionen ausgerichtet ist.

Der Linkstil ändert, wie klickbar das Banner wird. Ein Link über den gesamten Block kann Werbebanner leichter interaktiv machen, wirkt sich jedoch auf Links innerhalb des Textbereichs aus.

Achtung

Linkstile über den gesamten Block entfernen Links aus dem Unterüberschrift-Text. Verwenden Sie sie nur, wenn das gesamte Banner auf ein Ziel verweisen soll.

Öffnen Sie Links nur in einem neuen Tab, wenn dieses Verhalten die Customer Journey klar unterstützt, etwa beim Verlinken auf eine externe Kampagne oder eine unterstützende Ressource.

Banner-Vordergrundmedien

Verwenden Sie Vordergrundmedien, wenn Sie ein zusätzliches Bild mit dem Text anzeigen möchten, etwa ein Logo, ein Badge, einen Produktausschnitt oder eine Kampagnen-Grafik. Das funktioniert gut, wenn der Hintergrund atmosphärischer ist und das Werbebild scharf und kontrolliert bleiben soll.

Der Bildstil hilft Ihnen, die visuelle Gestaltung an den Rest des Banners anzupassen. Mit der Breiten-Einstellung können Sie das Bild dezent halten oder stärker hervorheben, und wenn Sie sie auf 0 setzen, kann es sich über den verfügbaren Platz ausdehnen.

Sie können dem Vordergrundbild auch einen Link hinzufügen. Wenn der Block bereits eine starke primäre Schaltfläche oder einen Link über den gesamten Block hat, halten Sie das Klickverhalten einfach, damit die Hauptaktion klar erkennbar bleibt.

Banner-Farben

Diese Einstellungen überschreiben die standardmäßige Farbdarstellung des Banners nur für diesen Block. Verwenden Sie sie, wenn ein Banner kampagnenspezifisches Styling, stärkeren Kontrast oder eine benutzerdefinierte Overlay-Darstellung benötigt. Zu den Einstellungsdetails siehe die Company XYZ-Dokumentation zu Banner-Farbeinstellungen.

Sie können Hintergrund-, Rahmen-, Überschriften-, Icon-, Unterüberschriften-, Text- und Overlay-Farben anpassen, einschließlich Verlaufsoptionen. In den meisten Fällen ist die wichtigste Entscheidung, ob der Vordergrundinhalt über den gewählten Hintergrundmedien lesbar bleibt.

Die Overlay-Deckkraft ist besonders nützlich, wenn das Hintergrundbild oder Video unruhig ist. Ein etwas stärkeres Overlay verbessert die Lesbarkeit oft sauberer, als jede Textfarbe aggressiv anzupassen.

Standard-Block-Einstellungen

Sichtbarkeitseinstellungen

Verwenden Sie Sichtbarkeitssteuerungen, um den Block auf allen Geräten, nur auf Desktop oder nur auf mobil anzuzeigen. Das ist nützlich, wenn Sie getrennte Banner-Layouts oder Motive für unterschiedliche Bildschirmgrößen wünschen. Zu den Einstellungsdetails siehe die Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen.

Wenn Sie separate Desktop- und mobile Versionen erstellen, halten Sie Nachricht und Ziel konsistent, damit Kunden keine widersprüchlichen Aktionen sehen. Zu den Grundlagen des Editors siehe die Shopify-Dokumentation zum Theme-Editor

Nutzungshinweise

1. Wählen Sie das Verhältnis nach dem Zweck. Verwenden Sie ein festes Verhältnis für visuelle Promotionen und eine flexiblere Konfiguration, wenn das Banner längeren Text oder mehrere Inhaltselemente enthält.
2. Planen Sie mobile Medien separat. Fügen Sie mobilspezifische Bilder oder Video hinzu, wenn der Desktop-Hintergrund schlecht zugeschnitten wird oder auf kleineren Bildschirmen zu unruhig wirkt.
3. Halten Sie eine Hauptaktion fest. Verwenden Sie Schaltflächen, verlinkte Vordergrundmedien und Links über den gesamten Block mit Bedacht, damit das Banner weiterhin einen klaren Klickpfad hat.
4. Priorisieren Sie die Lesbarkeit. Passen Sie Overlay-Stärke und Textfarben gemeinsam an, bis die Botschaft über alle Hintergrundmedien hinweg leicht lesbar bleibt.
5. Verwenden Sie die Geräte-Sichtbarkeit gezielt. Erstellen Sie getrennte Desktop- und mobile Banner nur dann, wenn sich das Layout oder Motiv tatsächlich ändern muss.
6. Prüfen Sie beide Ansichten. Überprüfen Sie Ausrichtung, Medienzuschnitt und Sichtbarkeit der Steuerelemente auf Desktop und mobil vor der Veröffentlichung, da sich jedes Layout unterschiedlich verhalten kann.
7. Bewahren Sie nach Möglichkeit die Fallback-Stilgebung. Lassen Sie Farbfelder ungesetzt, wenn das Banner den umgebenden Stil übernehmen soll; verwenden Sie explizite Farben, Verläufe oder Medienüberschreibungen nur dann, wenn sich das Banner abheben muss.
8. Halten Sie Formularzustände lesbar. Wenn das Banner Kundeneingaben enthält, stellen Sie sicher, dass leere, übermittelte, Validierungs- und Fehlerzustände auf den gewählten Medien gut erfassbar bleiben.