Theme
Design-System und Bildschirmgrößen
Ab welcher Breite eine Website als Smartphone, Tablet oder Desktop gilt.
Unter Gestaltung → Theme → Design-System legst du die Grundlagen fest, die überall gelten: die Bildschirmgrößen, die Abstände und die Effekte für die ganze Website.
Bildschirmgrößen
Websites passen sich der Breite des Bildschirms an. Damit das geordnet passiert, gibt es feste Stufen – vom schmalen Smartphone bis zum breiten Monitor. Die erste Tabelle auf der Seite zeigt diese Stufen mit ihren Kurznamen (sm, md, lg …) und der Breite, ab der sie gelten.
Die Stufen wirken an vielen Stellen:
- Schriftgrößen und Abstände haben je Stufe einen eigenen Wert.
- Spalten können je Stufe nebeneinander oder untereinander stehen.
- Redakteure können Blöcke für einzelne Stufen ausblenden.
- Das Burger-Menü erscheint unterhalb einer bestimmten Breite.
Ändere die Breiten nur, wenn du einen guten Grund hast. Die mitgelieferten Werte passen zu den gängigen Geräten, und viele Einstellungen hängen an ihnen.
Vorschau der Bildschirmgrößen
Mit dem Button Anzeigen neben der Überschrift öffnest du eine Vorschau über den ganzen Bildschirm. Sie zeigt die Stufen in echter Größe auf deinem Monitor, von der Mitte aus – so wie eine zentrierte Website.
- Klicke auf Anzeigen.
- Oben siehst du, wie breit dein eigener Bildschirm ist und in welche Stufe er fällt.
- Ziehe die Grenzen zwischen den Stufen, um die Breiten zu ändern.
- Mit − und + verkleinerst oder vergrößerst du die Ansicht, um auch Stufen zu sehen, die breiter als dein Bildschirm sind.
- Schließe die Vorschau und klicke auf Speichern.
