Rich text

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zu Symbolen
3. Company XYZ-Dokumentation zu Farbeinstellungen
4. Company XYZ-Dokumentation zum Button-Block
5. Company XYZ-Dokumentation zu Innenabstand-Einstellungen für Abschnitte
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 Layout-Breiten-Einstellungen

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Verwenden Sie Rich text, um einen einfachen, textbasierten Inhaltsbereich mit optionalen Symbolen, unterstützendem Text und Handlungsaufforderungen hinzuzufügen. Einen breiteren Überblick darüber, wie Abschnitte in einem Theme aufgebaut und angeordnet werden, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken. Er eignet sich gut für Einleitungen, Werbeaktionen, Markenbotschaften, Richtlinienhinweise oder jeden kurzen Inhaltsblock, der mehr Kontrolle über die Darstellung benötigt.

Inhaltseinstellungen

Hier erstellen Sie die Hauptbotschaft des Abschnitts. Sie können eine Beschriftung, Überschrift, Rich-Text-Inhalt und ein optionales Symbol kombinieren, um alles von einer kompakten Ankündigung bis hin zu einem redaktionelleren Inhaltsblock zu erstellen.

Die Textausrichtung legt die allgemeine Leserichtung für den Abschnitt fest und ist daher in der Regel die erste Layoutentscheidung. Der Überschriftstyp hilft dabei, den Abschnitt natürlicher in die Seitenstruktur einzufügen, ganz gleich, ob der Titel wie eine Hauptüberschrift oder wie eine leichtere Beschriftung wirken soll.

Das Symbol-Feld akzeptiert entweder ein Emoji oder einen Symbolnamen. Positionen oben und unten eignen sich gut für gestapelte, zentrierte Layouts, während links und rechts bei kürzerem Text oder handlungsorientierten Inhalten meist klarer wirken. Hilfe zu Symbolen finden Sie im Symbolleitfaden.

Das Rich-Text-Feld unterstützt Links und grundlegende Formatierungen, wodurch es sich für kurze erklärende oder werbliche Texte eignet. Wenn Sie zusätzlich eine Schaltfläche einfügen, halten Sie den Text knapp, damit die Handlungsaufforderung klar bleibt.

Abschnittsweite Schaltfläche

Sie können direkt im Abschnitt eine integrierte Schaltfläche für eine primäre Aktion hinzufügen, die mit der Hauptbotschaft verknüpft ist. Dies ist die einfachste Option, wenn Sie nur eine einzige Handlungsaufforderung benötigen.

Der Schaltflächenstil steuert die Hervorhebung, während das Schaltflächenlayout bestimmt, wie Symbol und Beschriftung zusammen angezeigt werden. Ausgefüllte Stile eignen sich in der Regel am besten für primäre Aktionen, leichtere Stile funktionieren besser für sekundäre Aktionen, und Layouts nur mit Symbol sollten am besten für sehr eindeutige Aktionen reserviert werden.

Diese Schaltflächeneinstellungen gelten nur für die integrierte Abschnittsschaltfläche. Sie wirken sich nicht auf hinzugefügte Button-Blöcke aus.

Eine mobile Schaltfläche in voller Breite kann die Antippbarkeit verbessern und die Aktion auf kleineren Bildschirmen stärker hervorheben. Dies ist besonders nützlich für Werbeabschnitte, in denen die Schaltfläche leicht zu erkennen und zu verwenden sein sollte.

Farbeinstellungen

Diese Einstellungen überschreiben nur für diesen Abschnitt die üblichen Theme-Farben. Sie sind nützlich, wenn der Inhalt markanter, stärker werblich oder deutlicher vom umgebenden Abschnitt abgesetzt wirken soll. Weitere Informationen zum Farbverhalten finden Sie in der Referenz zu Farbeinstellungen.

Sie können Farben für Rahmen, Symbole, Überschriften, Beschriftungstext und Fließtext separat anpassen. Wenn Sie benutzerdefinierte Textfarben mit einem benutzerdefinierten Hintergrund kombinieren, prüfen Sie die Lesbarkeit sorgfältig, damit der Abschnitt weiterhin klar und ausgewogen wirkt.

Tipp

Wenn Sie sowohl benutzerdefinierte Textfarben als auch Hintergrundmedien verwenden, prüfen Sie den Abschnitt auf Mobilgeräten ebenso wie auf dem Desktop, um sicherzustellen, dass der Kontrast stark bleibt.

Unterstützte Blocktypen

1. Button

Schaltfläche

Verwenden Sie Button-Blöcke, wenn Sie zusätzlich zu der integrierten Abschnittsschaltfläche weitere Handlungsaufforderungen benötigen. Das eignet sich gut für kombinierte Aktionen wie einen primären Kaufpfad und einen leichteren unterstützenden Link. In den Schaltfläche finden Sie blockspezifische Einstellungen.

Jeder Button-Block hat eigene Steuerelemente für Text, Link, Stil, Symbol und Sichtbarkeit. So können Sie die Hervorhebung von Schaltflächen leicht mischen oder eine bestimmte Aktion auf Desktop oder Mobilgeräten ausblenden, ohne den gesamten Abschnitt auszublenden.

Wenn Sie mehrere Schaltflächen verwenden, halten Sie die Hierarchie klar erkennbar. Eine Aktion sollte in der Regel primär wirken, während unterstützende Aktionen dezenter gestaltet werden.

Standard-Abschnittseinstellungen

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Abschnittsinhalts auf Desktop und Mobilgeräten. Verwenden Sie engere Abstände für funktionale Inhalte und großzügigere Abstände, wenn der Abschnitt stärker hervortreten oder leichter überflogen werden soll.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, eine Farbe, einen Verlauf, ein Bild oder ein Video hinter dem Inhalt zu platzieren. Dadurch kann Rich text zu einem stärkeren Inhaltsbereich oder einem markanteren Marken-Botschaftsblock werden.

Overlay-Farben und Verläufe sind besonders hilfreich, wenn Hintergrundmedien sonst mit dem Text konkurrieren würden. Hintergrundbilder oder Videos speziell für Mobilgeräte können Ihnen außerdem helfen, unangenehme Zuschnitte auf kleineren Bildschirmen zu vermeiden.

Achtung

Hintergrundmedien können sowohl die Lesbarkeit als auch das wahrgenommene Abstandsempfinden verändern. Nachdem Sie einen Hintergrund hinzugefügt haben, prüfen Sie Kontrast, Innenabstand und Breite gemeinsam.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen am oberen oder unteren Rand des Abschnitts eine Linie hinzu, um eine klarere Abgrenzung zum Inhalt in der Nähe zu schaffen. Sie sind am nützlichsten, wenn der Inhalt einfach ist, aber dennoch eine visuelle Trennung benötigt.

Wenn Sie die Trennlinienfarbe transparent lassen, verwendet der Abschnitt das übliche Verhalten der Rahmenfarbe. Dadurch fügen sich Trennlinien natürlicher in den Rest der Seite ein.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das ist nützlich, wenn Sie auf kleineren Bildschirmen eine einfachere Botschaft, andere Abstände oder andere Handlungsaufforderungen wünschen.

Button-Blöcke enthalten auch ihre eigene Sichtbarkeitssteuerung, sodass Sie einzelne Aktionen ausblenden können, ohne den gesamten Abschnitt auszublenden.

Breiten-Einstellungen

Breiten-Einstellungen steuern die Inhaltsbreite und die äußere Abschnittsbreite. Die Inhaltsbreite ist die wichtigste Entscheidung für die Lesebreite, während die Abschnittsbreite vor allem dann relevant ist, wenn Sie eine Hintergrundfarbe, ein Bild, einen Verlauf oder ein Video verwenden.

Schmalere Inhaltsbreiten verbessern in der Regel die Lesbarkeit längerer Texte. Größere Abschnittsbreiten können eine stärkere visuelle Wirkung erzeugen, aber es ist am besten, die live Seite zu prüfen, da der Editor das endgültige Layout möglicherweise nicht vollständig widerspiegelt.

Nutzungshinweise

1. Halten Sie die Botschaft fokussiert. Verwenden Sie eine klare Überschrift, eine unterstützende Idee und eine Hauptaktion, damit der Abschnitt leicht überflogen werden kann.
2. Passen Sie die Symbolplatzierung an das Layout an. Eine Platzierung oben oder unten eignet sich für zentrierte redaktionelle Inhalte, während links oder rechts in der Regel besser für kürzere, handlungsorientierte Botschaften funktioniert.
3. Verwenden Sie die Hierarchie der Schaltflächen klar. Wenn Sie die Abschnittsschaltfläche mit Button-Blöcken kombinieren, sollte eine Aktion primär sein und die anderen als sekundär gestaltet werden.
4. Schützen Sie den Textkontrast. Prüfen Sie Überschriften, Beschriftungen und Fließtext erneut, wenn Sie benutzerdefinierte Farben, Verläufe, Bilder oder Video-Hintergründe hinzufügen.
5. Prüfen Sie Breitenänderungen im Storefront. Lesebreite und Abschnittsbreite können sich im Editor anders anfühlen als auf der live Seite.
6. Prüfen Sie beide Breakpoints. Desktop- und Mobilsteuerungen können Ausrichtung, Sichtbarkeit, Medienauswahl und Abstände auf unterschiedliche Weise verändern.
7. Achten Sie auf Fallback-Styling. Transparente oder standardmäßige Werte bewahren in der Regel das Erscheinungsbild des umgebenden Themes, während explizite Farb- oder Medienauswahlen den Abschnitt unabhängiger wirken lassen.
8. Wählen Sie Medien bewusst aus. Wenn Sie unterschiedliche Medien für Desktop und Mobilgeräte festlegen, prüfen Sie vor der Veröffentlichung den Zuschnitt und die Lesbarkeit in beiden Größen.