Studio Editor: Über Breakpoints hinweg designen

Im Studio Editor kannst du Websites pro Breakpoint anpassen, damit sie immer großartig aussehen. Breakpoints sind Bildschirmgrößen und stehen für die möglichen Bildschirme und Geräte, die Besucher nutzen (z. B. Tablet, Handy).

Das Design, das du auf dem Desktop erstellst, wird auch auf Tablet und Mobile angezeigt. Du kannst jedoch Overrides erstellen, um das Design an kleinere Bildschirme anzupassen. Klicke oben auf ein Breakpoint-Symbol, um loszulegen.

Der Studio Editor verfügt über 3 integrierte Breakpoints, die du jederzeit anpassen und neu definieren kannst:

Du definierst die Breakpoints separat für jede Website-Seite und jeden globalen Abschnitt. Das bedeutet, dass ein globaler Abschnitt und die Seite, auf der er sich befindet, völlig unterschiedliche Breakpoints haben können.

Für die folgende Seite sind beispielsweise 5 Breakpoints definiert:

... Während für die globale Kopfzeile auf dieser Seite 3 Breakpoints definiert sind:

Der Studio Editor verwendet ein kaskadierendes Konzept, wenn es um das Design über Breakpoints hinweg geht. Änderungen, die du an größeren Breakpoints vornimmst, wirken sich auch auf kleinere Breakpoints aus, aber Änderungen an kleineren Breakpoints wirken sich nicht auf größere Breakpoints aus.

So ist beispielsweise ein Button, der auf dem Desktop lila sein soll, automatisch auf Tablet und Mobile lila. Wenn du die Farbe auf Mobile änderst, ist der Button auf Tablet und Desktop weiterhin lila.

Einige Aktionen gelten automatisch für alle Breakpoints und können nicht an einen bestimmten Viewport angepasst werden.

Wenn du den Inhalt eines Elements bearbeitest, änderst du effektiv seine Daten. Wenn du zum Beispiel den Link eines Elements oder die Quelle eines Bildes änderst, gilt diese Änderung für alle Breakpoints.

Ein weiteres Beispiel ist, wenn du Elemente auf der Seite ersetzt oder löschst. In diesen Fällen wird das Element an allen Breakpoints automatisch ersetzt oder gelöscht.

Hiermit sind Änderungen der Position eines Elements in der Hierarchie deiner Seite gemeint. Wenn du zum Beispiel Elemente stapelst oder ein Element in eine andere Zelle verschiebst, änderst du die Seitenstruktur, was sich auf allen Breakpoints widerspiegelt.

Overrides treten auf, wenn du an einem bestimmten Breakpoint das Design eines Elements änderst. Das heißt, es werden keine Designwerte mehr von dem größeren Breakpoint darüber gezogen. Diese Overrides wirken sich allerdings auf kleinere Breakpoints aus.

Es gibt 2 Arten von Overrides, die du erstellen kannst:

Du kannst das Design und Layout eines Elements jederzeit auf seine Eigenschaften am größten Breakpoint zurücksetzen.

Die Eigenschaften des Elements an kleineren Breakpoints sind nicht betroffen, nur der Breakpoint, der das Element enthält, das du zurücksetzt. Wenn du beispielsweise Overrides auf einem Tablet entfernst, wirkt sich das nicht auf Mobile aus.