Hero - Basic

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Shopify-Dokumentation zum Anpassen von Abschnitten
3. Company XYZ-Dokumentation zu Farbeinstellungen
4. Company XYZ-Dokumentation zu Abschnitts-Innenabstand-Einstellungen
5. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
6. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
7. Company XYZ-Dokumentation zu Breiten-Einstellungen für Layouts

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Hero - Basic hebt den Seitentitel und wichtige ergänzende Details oben auf Artikel- und Blogseiten hervor. Es kann außerdem das Beitragsbild einbinden, wenn eines verfügbar ist, und erleichtert so das Erstellen eines stärkeren visuellen Headers, ohne zusätzliche Inhaltsblöcke hinzuzufügen. Einen Überblick darüber, wie Theme-Abschnitte organisiert sind, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Diese Einstellungen bestimmen die Gesamtstruktur des Heroes und legen fest, wie viele ergänzende Informationen um den Titel herum angezeigt werden.

1. Platzierung des Beitragsbilds bestimmt die visuelle Wirkung des Headers. Verwenden Sie ein Hintergrundbild für einen immersiveren Look, wählen Sie die Platzierung links oder rechts, wenn Sie eine klarere Trennung zwischen Bild und Text wünschen, oder entfernen Sie das Bild vollständig für ein einfacheres, redaktionelles Layout.
2. Textausrichtung beeinflusst, wie formell, dramatisch oder gut lesbar der Header wirkt. Eine linksbündige Ausrichtung lässt sich bei Artikelinhalten in der Regel am einfachsten erfassen, während zentrierter Text für eine stärker gestaltete Darstellung gut funktionieren kann.
3. Seitendetails ermöglichen es Ihnen, Elemente wie Breadcrumbs, Autor, Datum, Tags, Teilen und Drucken ein- oder auszublenden. Aktivieren Sie nur die Details, die Besucher:innen dabei helfen, die Seite zu verstehen oder zu nutzen, damit der Header fokussiert bleibt.
4. Anzeige des Excerpts fügt eine kurze Zusammenfassung hinzu, wenn Excerpt-Inhalt vorhanden ist. Die aufklappbare Option ist nützlich, wenn Sie mehr Kontext einfügen möchten, ohne dass eine lange Zusammenfassung den oberen Seitenbereich dominiert.

Wenn Sie sowohl einen langen Excerpt als auch mehrere Metadaten-Elemente anzeigen, kann der Hero schnell überladen wirken. Wenn der Titel bereits beschreibend ist, funktioniert eine kürzere Zusammenfassung in der Regel besser.

Farbeinstellungen

Farbeinstellungen ermöglichen es Ihnen, die Standard-Farbgebung des Abschnitts nur für diesen Hero zu überschreiben. Das ist besonders nützlich, wenn das Beitragsbild oder die Hintergrundgestaltung stärkeren Kontrast benötigt als der Rest des Seitendesigns. Siehe Company XYZ-Dokumentation zu Farbeinstellungen.

1. Farbe von Überschrift und Text sollte gemeinsam angepasst werden, damit der Titel das stärkste Element bleibt, während sekundäre Details gut lesbar bleiben.
2. Symbolfarbe hilft dabei, dass Funktionselemente wie Teilen- oder Druck-Aktionen sichtbar bleiben, ohne den Hauptinhalt zu überlagern.
3. Overlay-Farbe, Verlauf und Deckkraft sind besonders wichtig, wenn das Beitragsbild als Hintergrund verwendet wird. Verwenden Sie sie, um die Lesbarkeit zu verbessern und gleichzeitig genug Bilddetail zu erhalten, um das Design zu unterstützen.

Tipp

Beginnen Sie damit, die Overlay-Stärke festzulegen, bevor Sie die Textfarben ändern. In den meisten Fällen löst ein ausgewogenes Overlay Lesbarkeitsprobleme sauberer als die Verwendung von zu hellen oder zu dunklen Textfarben.

Standard-Abschnittseinstellungen

Wenn Sie einen umfassenderen Überblick über die Abschnittssteuerungen im Theme-Editor wünschen, siehe Shopify-Dokumentation zum Anpassen von Abschnitten

Padding-Einstellungen

Padding-Einstellungen steuern den Platz oberhalb und unterhalb des Hero-Inhalts auf Desktop und Mobilgeräten. Verwenden Sie mehr Padding, wenn der Abschnitt ein Hintergrundbild oder ein Excerpt enthält, damit der Header bewusst gestaltet und nicht beengt wirkt. Reduzieren Sie das Padding, wenn Sie einen kompakteren, stärker auf Funktion ausgerichteten Seiten-Header wünschen.

Trennlinien-Einstellungen

Trennlinien-Einstellungen ermöglichen es Ihnen, oberhalb oder unterhalb des Abschnitts eine Linie hinzuzufügen. In diesem Hero funktionieren Trennlinien gut, wenn Sie eine klarere Trennung zwischen dem Seiten-Header und dem umliegenden Inhalt wünschen. Wenn Sie die Farbe der Trennlinie transparent lassen, wird das Standardverhalten der Rahmenfarbe des Themes verwendet.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das kann hilfreich sein, wenn ein bildlastiger Header auf größeren Bildschirmen wirkungsvoll ist, auf kleineren jedoch zu hoch wirkt. Stellen Sie sicher, dass die Seite auf jedem Gerät, auf dem der Hero ausgeblendet ist, weiterhin einen klaren Titelkontext hat.

Breiten-Einstellungen

Breiten-Einstellungen steuern die maximale Breite des Inhalts und die äußere Breite des Abschnitts selbst. Schmalere Inhaltsbreiten können die Lesbarkeit von Titeln und Excerpts verbessern, während breitere Abschnittsbreiten eine stärkere Wirkung erzielen, wenn Sie ein Hintergrundbild verwenden. Prüfen Sie Breitenänderungen nach Möglichkeit in der Live-Seitenansicht, da die Editor-Darstellung Abstände anders wirken lassen kann.

Nutzungshinweise

1. Wählen Sie die Platzierung des Bilds bewusst. Hintergrundbilder erzeugen eine stärkere visuelle Aussage, während eine Platzierung seitlich oder kein Bild den Titel und die Details leichter erfassbar macht.
2. Halten Sie ergänzende Details selektiv. Zeigen Sie nur die Metadaten und Funktion-Aktionen an, die einen echten Mehrwert bieten, damit der Header nicht mit dem Seiteninhalt konkurriert.
3. Verwenden Sie Excerpts für Kontext, nicht zur Wiederholung. Ein guter Excerpt sollte eine hilfreiche Zusammenfassung hinzufügen, statt den Titel in längerer Form zu wiederholen.
4. Priorisieren Sie den Kontrast. Wenn Sie ein Hintergrundbild verwenden, passen Sie Overlay- und Textfarben gemeinsam an, damit die Überschrift über die gesamte Bildfläche gut lesbar bleibt.
5. Prüfen Sie das mobile Layout sorgfältig. Überprüfen Sie Abstand, Sichtbarkeit und Excerpt-Länge auf kleineren Bildschirmen, damit der Header ausgewogen wirkt und den Hauptinhalt nicht zu weit nach unten schiebt.
6. Vergleichen Sie beide Darstellungsbereiche. Desktop- und Mobilsteuerungen können unterschiedliche Ausrichtung, Sichtbarkeit und Medienverhalten erzeugen, daher sollten Sie den Hero vor der Veröffentlichung auf beiden Bildschirmgrößen prüfen.
7. Verwenden Sie lokale Überschreibungen sparsam. Leere Werte oder Werte im Standardstil bewahren in der Regel das Fallback-Design, während explizite Farben, Verläufe oder Medienauswahlen diesen Hero unabhängiger vom Rest der Seite wirken lassen.