Überschrift

Ausgewählte Links

1. Company XYZ-Dokumentation zu Header-Einstellungen
2. Company XYZ-Dokumentation zu Abschnitts-Innenabstand-Einstellungen
3. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
4. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
5. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
6. Company XYZ-Dokumentation zu Layout-Breiten-Einstellungen
7. Shopify-Dokumentation zu Abschnitten und Blöcken
8. Shopify-Dokumentation zum Theme-Editor

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie diesen Abschnitt, um überall dort eine gestaltete Überschrift hinzuzufügen, wo Sie einen klareren Inhaltsbruch, eine stärkere Einleitung oder einen einfachen Call-to-Action benötigen. Er ist besonders nützlich auf Landingpages und in umfangreichen Layouts, bei denen die Überschriftenstruktur Besucher beim Scannen der Seite unterstützt. Einen umfassenderen Überblick darüber, wie Abschnitte aufgebaut sind, finden Sie in Shopify-Dokumentation zu Abschnitten und Blöcken

Verwenden Sie auf einer Seite nur eine H1. Wenn die Seite bereits einen Haupttitel hat, wählen Sie hier H2 oder niedriger.

Farbeinstellungen

Diese Einstellungen überschreiben nur für diesen Überschriftenbereich die üblichen Theme-Farben. Sie sind besonders nützlich, wenn der Abschnitt auf einem benutzerdefinierten Hintergrund liegt oder einen stärkeren Kontrast als die umgebende Seite benötigt.

Passen Sie die Farben für Icon, Überschriftentext und Unterüberschrift gemeinsam an, damit der Abschnitt bewusst gestaltet wirkt. Wenn Sie hellere oder gedämpfte Farben verwenden, sehen Sie sich diese auf dem Mobilgerät ebenso wie auf dem Desktop in der Vorschau an, damit der Text weiterhin gut lesbar bleibt.

Standard-Abschnittseinstellungen

Header-Einstellungen

Header-Einstellungen steuern den Inhalt und das Layout dieses Abschnitts, einschließlich Ausrichtung, Icon, Beschriftung, Überschrift, Unterüberschrift und der optionalen Schaltfläche. Verwenden Sie sie, um alles von einem einfachen Abschnittstitel bis zu einem stärker werblichen Einleitungs-Block zu gestalten. Einrichtungdetails im Theme-Editor finden Sie in Shopify-Dokumentation zum Theme-Editor

Wählen Sie den Überschriftentyp auf Grundlage der Seitenstruktur und nicht nur des Erscheinungsbilds. Verwenden Sie die Beschriftung für kurzen Kontext, die Unterüberschrift für kurze unterstützende Texte und die Schaltfläche nur dann, wenn es einen klaren nächsten Schritt für Besucher gibt.

Wenn Sie eine Schaltfläche hinzufügen, achten Sie auf ihre Position auf Desktop und Mobilgeräten. Wenn Sie sie unter den Text verschieben, kann das einen klareren Lesefluss schaffen, während eine Mobilgeräte-Schaltfläche mit voller Breite die Aktion leichter antippbar macht.

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb der Überschrift. Verwenden Sie mehr Padding, wenn die Überschrift für sich stehen soll, und weniger, wenn sie visuell mit benachbartem Inhalt verbunden bleiben soll.

Unterschiedliche Abstände auf Desktop und Mobilgeräten können dazu beitragen, dass der Abschnitt auf allen Geräten ausgewogen wirkt. Wenn die Überschrift eine Unterüberschrift oder Schaltfläche enthält, lassen Sie genug Platz, damit der Inhalt nicht gedrängt wirkt.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, die Überschrift auf einem Hintergrund aus Farbe, Verlauf, Bild oder Video zu platzieren. So kann aus einer einfachen Überschrift ein stärkerer visueller Trenner oder eine bannerartige Einleitung werden.

Overlays sind nützlich, wenn Text auf Medien liegt und mehr Kontrast benötigt. Da Hintergründe beeinflussen können, wie Abstände und Breite wirken, sehen Sie sich den Abschnitt vor der Veröffentlichung auf mehreren Bildschirmgrößen in der Vorschau an.

Achtung

Unruhige Bilder oder Videohintergründe können Überschriften schwer lesbar machen. Wenn die Klarheit leidet, verwenden Sie ein Overlay oder wechseln Sie zu einem einfacheren Hintergrund.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen eine Linie oberhalb oder unterhalb des Abschnitts hinzu. Sie eignen sich gut, wenn Sie eine klarere Inhaltsgrenze wünschen, ohne mehr Text oder zusätzlichen Abstand hinzuzufügen.

Eine einfache Trennlinie reicht für Überschriften meist aus. Wenn die Seite bereits starke visuelle Trennungen hat, setzen Sie Trennlinien sparsam ein, um Unruhe zu vermeiden.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob diese Überschrift auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das ist hilfreich, wenn Sie für unterschiedliche Gerätegrößen unterschiedliche Überschriftenbehandlungen wünschen.

Wenn Sie den Abschnitt auf einem Gerät ausblenden, stellen Sie sicher, dass Besucher dort weiterhin eine klare Überschrift und alle wichtigen Kontextinformationen sehen. Vermeiden Sie Sichtbarkeitsänderungen, die die Inhaltshierarchie der Seite stören.

Breiten-Einstellungen

Breiten-Einstellungen steuern die maximale Breite des Inhalts und die Breite des Abschnitts selbst. Schmalere Inhaltsbreiten verbessern oft die Lesbarkeit, während breitere Abschnittsbreiten vor allem dann auffallen, wenn Sie einen Hintergrund verwenden.

Verwenden Sie die Inhaltsbreite, damit Überschrift und Unterüberschrift angenehm lesbar bleiben. Verwenden Sie die Abschnittsbreite, wenn der Hintergrundbereich begrenzt bleiben oder sich weiter über die Seite erstrecken soll.

Hinweis

Breitenänderungen können im Editor anders wirken als auf der veröffentlichten Seite. Prüfen Sie die Seitenvorschau, bevor Sie sie abschließend festlegen.

Nutzungshinweise

1. Halten Sie Überschriftenebenen logisch. Verwenden Sie H1 nur für den Haupttitel der Seite und niedrigere Ebenen, um eine klare Inhaltshierarchie zu bewahren.
2. Trennen Sie Botschaft und Detail. Platzieren Sie die Kernaussage in der Überschrift, verwenden Sie die Beschriftung für etwas Kontext und halten Sie die Unterüberschrift kurz und unterstützend.
3. Verwenden Sie Schaltflächen mit Absicht. Fügen Sie eine Schaltfläche nur hinzu, wenn die Überschrift zu einer klaren nächsten Aktion führen soll, und prüfen Sie vor der Veröffentlichung ihre Position auf Mobilgeräten.
4. Gestalten Sie zuerst auf Lesbarkeit. Wenn Sie benutzerdefinierte Farben oder Medienhintergründe verwenden, prüfen Sie den Kontrast sorgfältig, damit die Überschrift leicht lesbar bleibt.
5. Balancieren Sie Abstände und Breite gemeinsam. Passen Sie Padding und Breite als Paar an, damit der Abschnitt weder gequetscht noch vom umliegenden Inhalt abgetrennt wirkt.
6. Prüfen Sie beide Geräteansichten. Desktop- und Mobilsteuerungen können Ausrichtung, Sichtbarkeit und Medienverhalten unterschiedlich beeinflussen. Prüfen Sie den Abschnitt daher vor der Veröffentlichung in beiden Ansichten.
7. Behandeln Sie Überschreibungen als stärkere Bindung. Leere oder standardartige Werte übernehmen in der Regel die umgebende Gestaltung, während explizite Farben, Verläufe oder Medienauswahlen den Überschriftenbereich unabhängiger wirken lassen.
8. Prüfen Sie die Lesbarkeit von Medien. Wenn Sie für Desktop und Mobilgeräte unterschiedliche Medien verwenden, prüfen Sie Zuschnitt, Ladeverhalten, Fallback und Textlesbarkeit auf jeder Bildschirmgröße.