Erfolgreich
Trennlinie
Erstellen Sie responsiven Abstand zwischen Blöcken, mit optionaler Trennlinie für klarere Inhaltsabschnitte.
Verwenden Sie den Separator-Block, um zusätzlichen Abstand zwischen nah beieinander liegenden Inhalten hinzuzufügen oder um eine einfache Trennlinie zwischen zwei Seitenbereichen zu platzieren. Er eignet sich gut, wenn ein Layout eine klarere Rhythmik, deutlichere Trennung oder einen anderen Abstand auf Desktop und Mobile benötigt. Weitere Einstellungen finden Sie im Trennlinie.
Für einen umfassenderen Überblick darüber, wie Blöcke im Editor funktionieren, sehen Sie sich die Shopify-Dokumentation zu Abschnitten und Blöcken an.
Grundeinstellungen
Abschnitt betitelt „Grundeinstellungen“Die Haupt-Einstellungen steuern zwei Dinge: wie viel Abstand der Block hinzufügt und ob dieser Abstand eine sichtbare Linie enthält.
Legen Sie die Höhe für Desktop und Mobile separat fest, damit der Abstand auf größeren Bildschirmen angenehm bleibt, ohne dass kleinere Bildschirme zu stark gedehnt wirken. In den meisten Layouts profitiert der Abstand auf Mobile von einem niedrigeren Wert als auf Desktop.
Mit dem Linienstil können Sie zwischen leerem Raum und einer sichtbaren Trennlinie wählen. Verwenden Sie eine Linie, wenn Sie unterschiedliche Inhaltstypen voneinander absetzen oder einen stärkeren Übergang signalisieren möchten, und verwenden Sie None, wenn der Abstand allein ausreicht.
Die Trennlinienfarbe ändert die Farbe der Trennlinie, wenn ein Linienstil aktiviert ist. Wenn Sie die Farbe transparent lassen, verwendet der Block die Theme-Rahmenfarbe, was in der Regel der einfachste Weg ist, die Trennlinie visuell konsistent zu halten.
Standard-Block-Einstellungen
Abschnitt betitelt „Standard-Block-Einstellungen“Sichtbarkeitseinstellungen
Abschnitt betitelt „Sichtbarkeitseinstellungen“Verwenden Sie die Sichtbarkeitssteuerungen, um diesen Block auf allen Geräten anzuzeigen oder auf Desktop oder Mobile auszublenden. Das ist besonders nützlich, wenn Sie für kleinere Bildschirme unterschiedliche Abstandsmuster benötigen oder wenn eine Trennlinie nur ein Layout verbessert. Weitere Informationen finden Sie unter Sichtbarkeitseinstellungen.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Passen Sie jede Viewport an. Prüfen Sie die Trennlinie auf Desktop und Mobile, da sich Abstand, Ausrichtung, Sichtbarkeit und medienbezogenes Verhalten zwischen Bildschirmgrößen unterscheiden können.
- Verwenden Sie mobilen Abstand mit Bedacht. Verringern Sie zuerst die mobile Höhe, wenn die Seite auf kleineren Bildschirmen zu locker wirkt.
- Behalten Sie nach Möglichkeit das Fallback-Styling bei. Lassen Sie die Farbe transparent oder verwenden Sie Standardwerte, wenn die Trennlinie in das Standard-Styling des Themes übergehen soll.
- Setzen Sie Überschreibungen gezielt ein. Verwenden Sie explizite Farben, Verläufe oder medienbasierte Überschreibungen nur, wenn der Bereich der Trennlinie stärker aus dem umgebenden Inhalt hervorstechen soll.
- Verwenden Sie Linien bewusst. Fügen Sie eine Trennlinie nur hinzu, wenn Sie eine stärkere visuelle Abgrenzung benötigen, als Abstand allein bieten kann.
- Erwarten Sie eine Mindestlücke. Verlassen Sie sich nicht auf eine 0-Höhe-Einstellung, wenn zwischen Blöcken vollständig bündiger Abstand erzielt werden soll.