- Hilfe-Center
- Designen & bearbeiten
- Responsive und Gerätevarianten
Responsive und Gerätevarianten
Mobil- und Desktop-Fassungen eines Screens erstellen und im Gleichschritt halten.
Zuletzt aktualisiert:
Auf dieser Seite
Eine Variante erstellen
Frag sie an oder nutz das Gerätebedienelement am Screen:
Mach eine Mobilfassung der Landingpage.
Die Variante ist ein neuer Screen auf dem Canvas, angepasst an die Zielbreite — keine fließende Größenänderung. Layouts werden wirklich umgebaut: mehrspaltige Abschnitte stapeln sich, die Navigation klappt zusammen, die Schrift skaliert herunter.
Kosten
Einen Screen auf eine andere Gerätegröße umzustellen wird pro Screen zum selben Satz wie eine Neugenerierung abgerechnet, weil es eine ist. Acht Screens umzustellen kostet das Achtfache — lohnt sich, vorher das Guthaben zu prüfen.
Varianten im Gleichschritt halten
Varianten sind eigene Screens, eine spätere Änderung an der Desktop-Fassung fließt also nicht automatisch in die mobile. Zwei Möglichkeiten:
- Frag die Änderung für beide ausdrücklich an: „Ändere auf der Desktop- und der Mobil-Landingpage den CTA zu ‚Kostenlos starten‘.“
- Oder mach das Desktop-Design zuerst fertig und generier die Varianten einmal am Ende. Das ist meist die günstigere Reihenfolge.
Theme wird geteilt
Beide Varianten nutzen das Projekt-Theme, Farb- und Schriftänderungen gelten also automatisch für beide. Nur das Layout ist variantenspezifisch.
Exportierter Code
Exportierter Code bildet den Screen ab, den du exportiert hast. Wenn du eine wirklich responsive Implementierung statt zweier fester Layouts brauchst, exportier den Desktop-Screen und pass ihn an, oder exportier beide und führ sie am Breakpoint zusammen — siehe Code exportieren.
War dieser Artikel hilfreich?
Verwandte Artikel
Einen Screen bearbeiten
Die drei Wege, ein Design zu ändern — Chat, Bearbeitungsmodus und Theme — und wann welcher der richtige ist.
Themes und Styleguides
Wie das Projekt-Theme funktioniert, wie du es gefahrlos änderst und warum Farben nie Screen für Screen bearbeitet werden sollten.
Code exportieren (HTML, React, Tailwind)
Exportier einen einzelnen Screen oder ein ganzes Projekt als produktionsreifen Frontend-Code.