Hero

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zur Verwendung von Video
3. Company XYZ-Dokumentation zu Farbeinstellungen
4. Company XYZ-Dokumentation zu Heading
5. Company XYZ-Dokumentation zum Rich-text-Block
6. Company XYZ-Dokumentation zum Button-Block
7. Company XYZ-Dokumentation zum Breadcrumbs-Block
8. Company XYZ-Dokumentation zum Icon with text-Block
9. Company XYZ-Dokumentation zum Image-Block
10. Company XYZ-Dokumentation zum Search-Block
11. Company XYZ-Dokumentation zum Separator-Block
12. Company XYZ-Dokumentation zum Share/print UI-Block
13. Company XYZ-Dokumentation zum Video-Block
14. Shopify-Dokumentation zum Theme-Editor
15. Company XYZ-Dokumentation zu Abschnitts-Innenabstandseinstellungen
16. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
17. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
18. Company XYZ-Dokumentation zu Layout-Breiten-Einstellungen

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Hero ist ein flexibler, blockbasierter Banner-Abschnitt, der für wirkungsvolle Seiteneinführungen konzipiert ist. Sie können Inhalte, Aktionen, Hilfselemente und Medien kombinieren und anschließend die gesamte Darstellung mit abschnittsbezogenen Bildelementen, Overlay-Farben, Abständen und Breiten-Steuerungen anpassen. Einen umfassenderen Überblick darüber, wie bearbeitbarer Theme-Inhalt organisiert ist, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Bildeinstellungen

Diese Gruppe steuert die wichtigste visuelle Darstellung des Heros. Sie können das hervorgehobene Bild hinter dem Inhalt platzieren, es links oder rechts positionieren oder Abschnittsbilder vollständig entfernen, wenn die Blöcke das Layout allein tragen sollen.

Ein separates Mobilbild hilft Ihnen, die Komposition auf kleineren Bildschirmen beizubehalten. Wenn Sie keines hinzufügen, verwendet die mobile Ansicht das wichtigste hervorgehobene Bild.

Sie können auch ein hervorgehobenes Video für eine eindrucksvollere Darstellung verwenden. Da es stumm automatisch abgespielt wird, eignet es sich besser als visuelle Begleitung als für Inhalte, die von Audio abhängen. Hinweise zu Videos finden Sie in der Company XYZ-Dokumentation zur Verwendung von Video.

Wenn Text über Bild- oder Videoinhalten liegt, verwenden Sie die Overlay-Einstellungen, um die Lesbarkeit zu schützen. Komplexe Medien benötigen in der Regel ein stärkeres Overlay als einfache oder kontrastarme Bilder.

Farbeinstellungen

Diese Einstellungen überschreiben breitere Farbauswahlen nur für diesen Abschnitt. Verwenden Sie sie, wenn der Hero seine eigene Symbol-, Überschriften-, Text- oder Overlay-Darstellung benötigt, ohne den Rest der Seite zu beeinflussen.

Overlay-Farbe, Verlauf und Deckkraft sind die wichtigsten Steuerungen, wenn Inhalte über Medien erscheinen. Erhöhen Sie die Overlay-Stärke, wenn die Botschaft schwer lesbar wirkt, und verringern Sie sie, wenn das Medium sichtbarer bleiben soll. Zum gemeinsamen Farbverhalten finden Sie in der Company XYZ-Dokumentation zu Farbeinstellungen weitere Informationen.

Unterstützte Blocktypen

1. Breadcrumbs
2. Button
3. Heading
4. Icon with text
5. Image
6. Rich text
7. Search
8. Separator
9. Share/print UI
10. Video

Blocktypen

Überschrift

Verwenden Sie den Heading-Block für die zentrale Hero-Botschaft oder eine unterstützende Überschrift. Er umfasst Überschriftenebene, Ausrichtung, optionales Symbol und Farbsteuerungen auf Blockebene. Weitere Informationen finden Sie in der Überschrift.

Halten Sie den Wortlaut kurz und direkt. Auf den meisten Seiten lässt sich eine auffällige Überschrift zusammen mit einem kurzen Textblock leichter erfassen als mehrere große Überschriften untereinander.

Achtung

Vermeiden Sie mehrere H1-Überschriften auf derselben Seite. Reservieren Sie die höchste Überschriftenebene bei Bedarf für den primären Seitentitel.

Rich text

Verwenden Sie Rich text für unterstützende Texte, kurze Einleitungen, verlinkte Texte oder kurze erläuternde Inhalte unter der Hauptüberschrift. Weitere Informationen finden Sie in der Company XYZ-Dokumentation zum Rich-text-Block.

Kurze Absätze funktionieren in einem Hero in der Regel am besten. Wenn Sie dem Block eine Hintergrundfarbe hinzufügen, prüfen Sie, ob er weiterhin ausgewogen mit den Abschnittsmedien und dem Overlay wirkt.

Schaltfläche

Verwenden Sie Button-Blöcke für primäre Aktionen wie Einkaufen, das Durchsuchen einer Kollektion oder das Weitergehen tiefer in die Seite. Sie können Stil, Symbol-Layout, Ausrichtung und das Verhalten der mobilen Breite steuern. Weitere Informationen finden Sie in der Schaltfläche.

Die meisten Hero-Layouts funktionieren am besten mit einer dominanten Aktion. Fügen Sie zusätzliche Schaltflächen nur hinzu, wenn sie einen klaren sekundären Pfad unterstützen.

Breadcrumbs

Breadcrumbs helfen Besuchern, ihre Position innerhalb tieferer Seitenstrukturen zu verstehen. In diesem Abschnitt stehen sie in der Regel über der Hauptbotschaft und liefern Kontext, ohne das Layout zu dominieren. Weitere Informationen finden Sie in der Company XYZ-Dokumentation zum Breadcrumbs-Block.

Verwenden Sie den optionalen übergeordneten Link, wenn der Standardpfad eine klarere Hierarchie benötigt. Halten Sie das Styling zurückhaltend, damit die Hero-Botschaft im Fokus bleibt.

Icon mit Text

Verwenden Sie Icon with text für kurze Wertpunkte, Vertrauenselemente oder knappe Highlights. Weitere Informationen finden Sie in der Icon mit Text.

Diese Blöcke funktionieren am besten, wenn jedes Element in Länge und Ton ähnlich ist. Halten Sie den Text knapp, damit die Gruppe leicht überblickbar bleibt.

Bild

Der Image-Block fügt eigenständige Medien innerhalb des Inhaltsflusses hinzu, getrennt vom hervorgehobenen Bild auf Abschnittsebene. Das ist nützlich für Logos, Produkt-Ausschnitte, Kampagnenmotive oder unterstützende visuelle Elemente. Weitere Informationen finden Sie in der Bild.

Verwenden Sie das Seitenverhältnis, die maximale Breite, die Beschriftung und die Overlay-Optionen, damit das Bild innerhalb des Heros bewusst platziert wirkt. Wenn Sie bereits starke Medien auf Abschnittsebene verwenden, fügen Sie kein weiteres Bild hinzu, das um Aufmerksamkeit konkurriert.

Suche

Der Search-Block macht den Hero zu einem suchorientierten Einstiegspunkt. Er eignet sich besonders gut für große Kataloge, hilfsorientierte Seiten oder Homepages, auf denen Besucher oft mit einer Suche beginnen. Weitere Informationen finden Sie in der Suche.

Dieser Block enthält außerdem eigene Einstellungen für Banner-ähnliche Inhalte und die Darstellung von Ergebnissen, sodass er zum zentralen Fokus-Element werden kann. Halten Sie benachbarte Hero-Inhalte minimal, wenn die Suche die Hauptaufgabe ist.

Hinweis

Vorhersagbare Ergebnisse gelten nur, wenn die erforderliche Einrichtung für die Vorhersagesuche aktiv ist. Wenn diese Einrichtung nicht vorhanden ist, wirken sich zugehörige Anzeigeoptionen nicht auf das Erlebnis aus.

Trennlinie

Verwenden Sie Separator-Blöcke, um zwischen Hero-Elementen mehr Raum zu schaffen. Sie sind hilfreich, wenn Sie mehr internen Abstand benötigen, ohne den oberen und unteren Innenabstand des Abschnitts insgesamt zu ändern. Weitere Informationen finden Sie in der Trennlinie.

Auch bei minimaler Höhe bleibt ein kleiner Abstand zwischen den Elementen erhalten. Verwenden Sie diesen Block für eine bewusste Trennung, statt zu versuchen, einen Stapel ohne Abstand zu erzeugen.

Share/print-UI

Dieser Block fügt kompakte Aktionen zum Teilen und Drucken in der Nähe des Seitenanfangs hinzu. Er ist besonders nützlich für redaktionelle, leitfadenartige oder auf Hilfsfunktionen ausgerichtete Layouts, bei denen diese Aktionen früh wichtig sind. Weitere Informationen finden Sie in der Company XYZ-Dokumentation zum Share/print UI-Block.

Platzieren Sie ihn dort, wo er verfügbar, aber nicht ablenkend wirkt. Er soll den Hero unterstützen, nicht mit dem primären Handlungsaufruf konkurrieren.

Video

Der Video-Block platziert Video direkt im Blockfluss, was nützlich ist, wenn das Video selbst Teil der Botschaft ist und nicht nur eine Hintergrunddarstellung. Er unterstützt Untertitel, Overlays, Autoplay-Verhalten, Vorschaubilder, Breitenbegrenzungen und responsive Seitenverhältnisse. Weitere Informationen finden Sie in der Company XYZ-Dokumentation zum Video-Block.

Kurze Clips funktionieren in diesem Bereich in der Regel am besten. Wenn Sie Autoplay oder Overlays verwenden, testen Sie sowohl den pausierten als auch den abgespielten Zustand, damit Untertitel und Steuerelemente klar bleiben.

Standard-Abschnittseinstellungen

Für Editor-Steuerelemente, die für mehrere Abschnitte gelten, sehen Sie die Shopify-Dokumentation zum Theme-Editor

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Hero-Inhalts auf Desktop und Mobilgeräten. In diesem Abschnitt beeinflusst der Innenabstand stark, wie prominent und eindrucksvoll sich der Hero anfühlt, bevor Besucher den nächsten Abschnitt erreichen.

Verwenden Sie mehr Innenabstand, wenn der Hero kampagnenorientiert oder großzügig wirken soll. Reduzieren Sie ihn, wenn der Inhalt kurz ist oder wenn Sie schneller zum darunterliegenden Seiteninhalt gelangen möchten.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen optionale Linien am oberen oder unteren Rand des Abschnitts hinzu. Sie helfen dabei, den Hero klarer zu definieren, wenn benachbarte Abschnitte ähnliche Farben oder eine ähnliche visuelle Gewichtung haben.

Wenn Sie die Farbe der Trennlinie transparent lassen, wird das Standardverhalten der Rahmenfarbe verwendet. Dezente Trennlinien funktionieren meist am besten, wenn der Hero bereits starke Bilder oder hohen Kontrast besitzt.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen ermöglichen es Ihnen, den Abschnitt auf Desktop oder Mobilgeräten auszublenden. Das ist hilfreich, wenn Sie unterschiedliche Layouts für den oberen Seitenbereich je nach Bildschirmgröße erstellen möchten.

Gehen Sie damit sorgfältig um, wenn Sie alternative Versionen derselben Botschaft erstellen. Das Ziel ist, das Layout anzupassen, nicht Inhalte unnötig zu duplizieren.

Breiten-Einstellungen

Breiten-Einstellungen steuern die maximale Inhaltsbreite und die äußere Abschnittsbreite. Im Hero beeinflusst das sowohl die Lesbarkeit des Textes als auch, wie weitläufig eine Hintergrunddarstellung wirkt.

Die Inhaltsbreite ist die wichtigste Steuerung für die Lesbarkeit. Die Abschnittsbreite ist vor allem relevant, wenn Hintergrundmedien verwendet werden oder wenn der Hero-Wrapper kompakter oder großzügiger wirken soll.

Nutzungshinweise

1. Halten Sie die Botschaft fokussiert. Verwenden Sie eine klare Überschrift, kurzen unterstützenden Text und eine primäre Aktion, damit der Hero auf einen Blick verständlich ist.
2. Wählen Sie die Medienplatzierung bewusst. Hintergrundmedien eignen sich für atmosphärische Bilder, während die Platzierung links oder rechts besser ist, wenn das Bild mehr eigenen Raum benötigt.
3. Planen Sie mobil separat. Fügen Sie ein mobilspezifisches Bild hinzu, wenn der Zuschnitt für den Desktop auf kleineren Bildschirmen nicht gut übertragbar ist, und prüfen Sie Schaltflächenbreite und Ausrichtung auf kleineren Bildschirmen.
4. Prüfen Sie beide Zustände für die Suche. Der Hero kann sich vor und nach einer Suchanfrage unterschiedlich anfühlen. Prüfen Sie daher den leeren Zustand und den Zustand mit eingegebener Suchanfrage, um sicherzustellen, dass der richtige Inhalt im Vordergrund bleibt.
5. Überprüfen Sie das responsive Verhalten. Desktop- und Mobil-Steuerungen können Ausrichtung, Sichtbarkeit und Medienpräsentation verändern, daher sollten Sie beide Darstellungen vor der Veröffentlichung in der Vorschau prüfen.
6. Schützen Sie den Textkontrast. Passen Sie Overlay-Farbe und Deckkraft an, bevor Sie alle Inhaltsfarben ändern, insbesondere bei komplexen Bildern oder Autoplay-Video.
7. Prüfen Sie Breitenänderungen auf der Live-Seite in der Vorschau. Breite und Full-bleed-Layouts können außerhalb des Editors ganz anders wirken, besonders wenn der Hero am Anfang einer Seite steht.