Rich text

Ausgewählte Links

1. Company XYZ-Dokumentation zum Rich-text-Block
2. Company XYZ-Dokumentation zu Icons
3. MDN Web Docs
4. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
5. Company XYZ-Dokumentation zur Verwendung von Videos
6. Company XYZ-Dokumentation zu Farbeinstellungen
7. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
8. Shopify-Dokumentation zu Abschnitten und Blöcken
9. Shopify-Dokumentation zum Anpassen von Themes

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie diesen Block, um einen kompakten Nachrichtenbereich mit optionalem Symbol, Überschrift, Rich-Text und Schaltfläche hinzuzufügen. Er eignet sich für kurze Werbetexte, Markenbotschaften, Feature-Hinweise und unterstützende Inhalte zwischen stärker visuellen Blöcken. Einen Funktionsüberblick finden Sie in der Rich text reference.

Inhaltseinstellungen

Diese Einstellungen steuern die Nachricht selbst und ihre Darstellung. Die klarsten Setups verwenden eine einfache Struktur: optionale Beschriftung, Überschrift, unterstützender Text und nur dann eine einzelne Aktion, wenn der nächste Schritt offensichtlich ist.

Textausrichtung und Symbolposition bestimmen, wie sich der Block im Layout anfühlt. Zentrierter Inhalt eignet sich gut für kurze Werbebotschaften, während links ausgerichteter Inhalt meist leichter zu lesen ist, wenn der Text länger wird.

Das Symbolfeld akzeptiert entweder ein Emoji oder einen Symbolnamen. Lassen Sie es leer, wenn die Nachricht keinen zusätzlichen visuellen Hinweis benötigt. Hilfe zu Symbolen finden Sie unter icons und in der unterstützten icon name library

Wählen Sie den Überschriftentyp auf Grundlage der Rolle des Blocks in der Seitenhierarchie und nicht nur auf Grundlage der gewünschten visuellen Größe. Eine stärkere Überschriftenebene hilft diesem Block, einen neuen Inhaltsbereich einzuleiten, während eine leichtere Ebene besser funktioniert, wenn er benachbarten Inhalt unterstützt.

Das Rich-Text-Feld unterstützt Links und grundlegende Formatierungen, sodass Sie Hervorhebungen hinzufügen können, ohne dass der Block überladen wirkt. Halten Sie die Gestaltung dezent, damit die Nachricht leicht erfassbar bleibt.

Schaltflächeneinstellungen gelten nur für die integrierte Schaltfläche dieses Blocks. Verwenden Sie sie für einen klaren Call to Action und wählen Sie einen Stil, der zur Wichtigkeit der Aktion passt. Schaltflächenlayouts nur mit Symbol funktionieren am besten, wenn die Bedeutung aus dem nahen Text bereits klar ist.

Fügen Sie Schaltflächentext und Schaltflächenlink immer zusammen hinzu. Eine Schaltfläche ohne klare Beschriftung oder Ziel ist leicht zu übersehen oder misszuverstehen.

Wenn die meisten Klicks auf kleineren Bildschirmen erfolgen, kann die mobile Option für eine Schaltfläche in voller Breite die Aktion leichter sichtbar und leichter antippbar machen.

Standard-Block-Einstellungen

Blockhintergrund-Einstellungen

Verwenden Sie diese Einstellungen, um dem Block eine eigene visuelle Fläche mit einem Hintergrund aus Farbe, Farbverlauf, Bild oder Video zu geben. Das kann helfen, die Nachricht hervorzuheben, aber stärkere Hintergründe können auch das visuelle Gewicht und den Abstand des Blocks im Layout verändern. Siehe Abschnittshintergrund-Einstellungen. Für den zugehörigen Überblick über die Shopify-Struktur sehen Sie Shopify-Dokumentation zu Abschnitten und Blöcken

Farbverlaufs-Einstellungen überschreiben flache Hintergrundfarben, und Overlay-Farbverläufe überschreiben flache Overlay-Farben. Wenn Sie einen Bild- oder Videohintergrund verwenden, sind Overlays besonders hilfreich, um den Text lesbar zu halten.

Felder für Hintergrundbild und Video auf Mobilgeräten ermöglichen es Ihnen, für kleinere Bildschirme ein anderes Asset zu verwenden. Wenn sie leer bleiben, verwendet Mobilgeräte das Haupt-Hintergrundasset. Prüfen Sie beide Ansichtsgrößen, wenn Sie unterschiedliche Medien für Desktop und Mobilgeräte festlegen, da sich Zuschnitt, Ladeverhalten und Lesbarkeit ändern können.

Achtung

Unruhige Bilder und Videos können die Lesbarkeit schnell verringern. Wenn dieser Block längeren Text oder eine Schaltfläche enthält, verwenden Sie Overlays oder einfachere Medien, damit der Inhalt klar bleibt.

Hinweise zur Videoeinrichtung finden Sie unter using video.

Farbeinstellungen

Diese Einstellungen überschreiben nur die Standardfarben des Themes für diesen Block. Verwenden Sie sie, wenn der Block stärkeren Kontrast, einen Markenakzent oder eine bessere Abstimmung mit einem benutzerdefinierten Hintergrund benötigt. Siehe Farbeinstellungen. Einen umfassenderen Überblick über die Theme-Anpassung finden Sie in der Shopify-Dokumentation zum Anpassen von Themes

Passen Sie Überschrift, Zwischenüberschrift und Fließtext gemeinsam an, damit der Inhalt weiterhin als ein System wirkt. Wenn Sie auch das Symbol oder den Rahmen gestalten, sollten diese Akzente den Inhalt unterstützen und nicht stärker hervortreten als die Nachricht selbst.

Leere, transparente oder Standardwerte lassen den Block meist näher am Fallback-Look des Themes, während explizite Farben, Farbverläufe oder Medienüberschreibungen den Block eigenständiger wirken lassen.

Sichtbarkeitseinstellungen

Verwenden Sie Sichtbarkeitssteuerungen, um diesen Block je nach Gerätegröße ein- oder auszublenden. Das ist hilfreich, wenn Sie eine kürzere Version für Mobilgeräte, eine großzügigere Version für den Desktop oder eine andere Inhaltsanordnung über verschiedene Layouts hinweg möchten. Siehe Sichtbarkeitseinstellungen.

Tipp

Wenn Sie diesen Block auf einer Gerätegröße ausblenden, stellen Sie sicher, dass dieselbe Nachricht oder Aktion an anderer Stelle weiterhin erscheint, wenn sie wichtig ist.

Nutzungshinweise

1. Halten Sie die Nachricht fokussiert. Verwenden Sie diesen Block für eine zentrale Idee, statt mehrere konkurrierende Botschaften in einen kleinen Bereich zu packen.
2. Passen Sie die Überschrift an die Seitenstruktur an. Wählen Sie einen Überschriftentyp, der zur umgebenden Inhaltshierarchie passt, nicht nur zum visuellen Stil.
3. Verwenden Sie Symbole sparsam. Fügen Sie ein Emoji oder Symbol nur hinzu, wenn es die Nachricht schnell unterstützt und nicht mit der Überschrift konkurriert.
4. Begrenzen Sie den Call to Action. Verwenden Sie die integrierte Schaltfläche für einen klaren nächsten Schritt und berücksichtigen Sie eine mobile Darstellung in voller Breite, wenn Klicks auf kleinen Bildschirmen wichtig sind.
5. Prüfen Sie den Kontrast auf jedem Gerät. Wenn Sie benutzerdefinierte Farben, Farbverläufe oder Medien verwenden, überprüfen Sie die Lesbarkeit und die Sichtbarkeit der Schaltfläche auf Desktop und Mobilgeräten.
6. Prüfen Sie separate Medien sorgfältig. Wenn Sie unterschiedliche Hintergründe für Desktop und Mobilgeräte festlegen, bestätigen Sie den Zuschnitt, das Ladeverhalten und die Lesbarkeit des Textes in jeder Ansichtsgröße.