Banner

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zur Verwendung von Videos
3. Company XYZ-Dokumentation zu Icons
4. Company XYZ-Dokumentation zu Banner-Farbeinstellungen
5. Company XYZ-Dokumentation zu Abschnitts-Innenabstand-Einstellungen
6. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
7. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
8. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
9. Company XYZ-Dokumentation zu Breiten-Einstellungen für Layouts
10. Shopify-Dokumentation zum Anpassen von Abschnitten
11. Shopify-Dokumentation zum Theme-Editor

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie Banner, um ein einzelnes Promotion-Feature mit übereinanderliegenden Medien, Text und einer optionalen Handlungsaufforderung zu erstellen. Es eignet sich gut für Hero-Abschnitte, Ankündigungen, saisonale Kampagnen und Markenbotschaften, und es kann sich vergrößern, wenn Ihr Inhalt mehr Höhe benötigt, als das ausgewählte Seitenverhältnis bietet. Für einen umfassenderen Überblick siehe Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Die wichtigsten Layout-Einstellungen steuern die Form des Banners auf Desktop und Mobilgeräten. Wählen Sie ein festes Seitenverhältnis, wenn Sie einen starken visuellen Rahmen wünschen, oder verwenden Sie das Standardverhältnis, wenn sich die Inhaltslänge ändern kann und das Banner sich natürlicher anpassen soll.

Mobil kann ein eigenes Seitenverhältnis verwenden, was nützlich ist, wenn der Desktop-Zuschnitt auf kleineren Bildschirmen zu flach wirkt. Ein höheres Mobilverhältnis gibt Texten, Gesichtern und Produktdetails oft mehr Raum, ohne dass ein separates Bild erforderlich ist.

Tipp

Wenn wichtige Teile des Hintergrunds auf Mobilgeräten beengt wirken, versuchen Sie vor dem Ersetzen des Assets ein höheres Mobilverhältnis.

Banner-Hintergrund

Diese Gruppe steuert den eigenen Hintergrundbereich des Banners, getrennt vom äußeren Abschnittshintergrund. Sie können ein Bild oder Video verwenden und bei Bedarf mobile-spezifische Medien bereitstellen, wenn die Desktop-Version auf kleineren Bildschirmen nicht gut zugeschnitten wird.

Die Anpassung an das Hintergrundbild bestimmt, ob das Medium den Bannerbereich ausfüllt oder vollständig innerhalb davon sichtbar bleibt. Verwenden Sie eine Fill-Variante, wenn der Banner immersiv wirken soll, und eine enthaltene Variante, wenn es wichtiger ist, das gesamte Artwork zu erhalten als eine Kanten-zu-Kanten-Abdeckung.

Wenn Sie Vordergrundinhalte hinzufügen, denken Sie daran, dass der Banner höher werden kann, um sie aufzunehmen. Diese zusätzliche Höhe kann ändern, wie der Hintergrund beschnitten wird.

Prüfen Sie Banner mit längerem Text oder hinzugefügten Vordergrundmedien sowohl auf Desktop als auch auf Mobilgeräten, da sich die Inhaltshöhe deutlich auf den Hintergrundzuschnitt auswirken kann.

Bei Video-Hintergründen sollten die Clips kurz und visuell klar sein, damit die Botschaft auch ohne Ton funktioniert. Hinweise zu Videodateien finden Sie in Company XYZ-Dokumentation zur Verwendung von Videos.

Banner-Vordergrund

Diese Gruppe steuert die Inhalte, die über dem Hintergrund liegen. Sie können ein Symbol, eine Beschriftung, eine Überschrift, unterstützenden Text und eine primäre Aktion kombinieren, und nicht verwendete Inhalte bleiben ausgeblendet.

Horizontale und vertikale Ausrichtung helfen dabei, die Botschaft im Banner zu positionieren. Eine Ausrichtung unten eignet sich oft für bildzentrierte Banner, während eine zentrierte Platzierung in der Regel am besten für einfache Werbebotschaften funktioniert.

Wählen Sie den Überschriftentyp entsprechend der Rolle des Banners auf der Seite. Verwenden Sie eine Überschriftenebene, wenn das Banner einen wichtigen Abschnitt einleitet, und verwenden Sie einen Absatzstil, wenn der Text eher dekorativ ist oder an anderer Stelle wiederholt wird.

Die Schaltflächeneinstellungen steuern Beschriftung, Symbol, Größe und Layout. Vollbreite Mobile-Schaltflächen können die Bedienung per Tippen verbessern, wenn der Banner als zentraler Einstiegspunkt dient.

Der Link-Stil bestimmt, wie viel vom Banner anklickbar ist. Full-block-Stile können die Nutzung des Banners erleichtern, entfernen aber Links aus dem Unterüberschriftentext.

Achtung

Wenn Ihre Unterüberschrift wichtige Textlinks enthält, vermeiden Sie einen Full-block-Link-Stil, damit diese Links nutzbar bleiben.

Für Symbole können Sie Emojis oder unterstützte Symbolnamen verwenden. Hinweise zu Symbolen finden Sie in Company XYZ-Dokumentation zu Symbolen.

Banner-Vordergrundmedien

Verwenden Sie Vordergrundmedien, wenn der Banner eine zusätzliche visuelle Ebene wie ein Logo, Badge, einen Produkt-Ausschnitt oder ein sekundäres Bild benötigt. Diese Medien erscheinen neben dem Textinhalt und nicht dahinter.

Der Bildstil hilft dabei, die Medien entweder redaktioneller oder eher badge-artig wirken zu lassen. Abgerundete oder kreisförmige Darstellungen eignen sich oft für Logos und Porträts, während der Standardstil normalerweise besser für Produktbilder ist.

Die maximale Bildbreite ist das wichtigste Mittel, um die Medien im Verhältnis zum Text zu halten. Wenn das Bild den Banner zu stark dominiert, verringern Sie die Breite, bevor Sie Ihren Text kürzen.

Sie können dem Vordergrundbild auch einen Link hinzufügen. Das ist nützlich, wenn das Bild eine hervorgehobene Marke, Kollektion oder ein Produkt darstellt und als eigener visueller Einstiegspunkt dienen soll.

Banner-Farben

Diese Einstellungen überschreiben die üblichen Farbauswahlen des Banners nur für diesen Abschnitt. Verwenden Sie sie, wenn der Banner eine kampagnenspezifische Palette, stärkeren Textkontrast oder eine benutzerdefinierte Overlay-Behandlung benötigt.

Overlay-Farbe und Deckkraft sind besonders nützlich, wenn das Hintergrundbild oder Video visuell unruhig ist. In vielen Fällen verbessert die Anpassung des Overlays die Lesbarkeit sauberer, als jede Textfarbe zu ändern.

Wenn Sie sowohl eine Volltonfarbe als auch einen Farbverlauf verwenden, hat der Farbverlauf dort Vorrang, wo dies anwendbar ist. Das Gleiche gilt für Overlay-Farbverläufe.

Hinweise zu Farben für Banner finden Sie in Company XYZ-Dokumentation zu Banner-Farben.

Standard-Abschnittseinstellungen

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Banner-Abschnitts. Verwenden Sie geringere Abstände, wenn der Banner eng mit benachbarten Inhalten verbunden sein soll, und großzügigere Abstände, wenn er sich als besonderer Moment abheben soll.

Da Banner oft visuell dominant sind, können kleine Änderungen am Padding einen großen Einfluss auf den Seitenrhythmus haben. Prüfen Sie die Abstände sowohl auf Desktop als auch auf Mobilgeräten.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen betreffen den äußeren Abschnitts-Wrapper und nicht den Banner selbst. Das ist nützlich, wenn der Banner in einem breiteren gerahmten Bereich liegen soll oder wenn der umgebende Abschnitt ein eigenes Bild, Video, eine Farbe oder ein Overlay benötigt.

Seien Sie vorsichtig, wenn Sie einen äußeren Abschnittshintergrund mit den eigenen Hintergrundmedien des Banners kombinieren. Beides zusammen kann unruhig wirken, sofern Sie nicht bewusst ein geschichtetes oder eingerücktes Design erstellen.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen am oberen oder unteren Rand des Abschnitts eine Linie hinzu. Sie helfen dabei, den Banner zu definieren, wenn er zwischen Abschnitten mit ähnlichen Farben oder ähnlichem Abstand steht.

Halten Sie Trennlinien dezent, wenn der Banner bereits starke Bilder, Rahmen oder Kontraste enthält. Zu viele visuelle Kanten können das Layout schwer wirken lassen.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen ermöglichen es Ihnen, diesen Abschnitt je nach Gerätegröße anzuzeigen oder auszublenden. Das ist hilfreich, wenn Sie ein separates Banner-Layout für Desktop und Mobilgeräte wünschen.

Wenn Sie gerätespezifische Versionen erstellen, halten Sie die Botschaft und das Ziel konsistent, damit Besucher je nach Bildschirmgröße keine unterschiedlichen Werbeaktionen sehen.

Breiten-Einstellungen

Breiten-Einstellungen steuern sowohl die Inhaltsbreite innerhalb des Banners als auch die Breite des Abschnitts-Wrapper. Verwenden Sie die Inhaltsbreite, um die Lesbarkeit zu steuern, und die Abschnittsbreite, um zu entscheiden, ob der Banner enthalten, vollbreit oder Kante-zu-Kante wirken soll.

Diese Änderungen können im Editor anders aussehen als auf der Live-Seite, insbesondere in breiteren Layouts. Prüfen Sie Breiten-Änderungen im Storefront, bevor Sie sie abschließen. Für Editor-Steuerelemente siehe Shopify-Dokumentation zum Anpassen von Abschnitten und Shopify-Dokumentation zum Theme-Editor

Nutzungshinweise

1. Passen Sie das Seitenverhältnis an die Botschaft an. Verwenden Sie feste Seitenverhältnisse für bildzentrierte Kampagnen, und verwenden Sie das Standardverhältnis, wenn längerer Text oder zusätzliche Medien eine flexible Höhe benötigen.
2. Planen Sie den mobilen Zuschnitt frühzeitig. Fügen Sie ein mobiles Seitenverhältnis oder ein mobiles Medien-Asset hinzu, wenn der Desktop-Hintergrund wichtige Brennpunkte auf kleineren Bildschirmen verdeckt.
3. Prüfen Sie beide Haltepunkte. Desktop- und Mobilgeräte-Steuerelemente können unterschiedliche Ausrichtung, Sichtbarkeit und Medienverhalten erzeugen, daher sollten Sie den Banner vor der Veröffentlichung in beiden Ansichtsgrößen prüfen.
4. Verwenden Sie Overlays für bessere Lesbarkeit. Passen Sie die Overlay-Farbe und Deckkraft des Banners an, bevor Sie Texte umschreiben oder mehrere Textfarben ändern.
5. Halten Sie die Aktion klar. Verwenden Sie eine starke Schaltfläche und wählen Sie Full-block-Link-Stile nur dann, wenn der gesamte Banner zu einem einzigen Ziel führen soll.
6. Prüfen Sie das tatsächliche Breitenverhalten. Kontrollieren Sie die Live-Seite nach Änderungen an Breite oder Hintergrund-Einstellungen, da Editor-Vorschauen Änderungen bei Abständen und Zuschnitt unterschätzen können.