Webflow allgemein

Anleitung: Fluid Design in Webflow nutzen (mit Kalkulator)

Level:
Das Video kann nur angezeigt werden, wenn Cookies erlaubt sind.
Cookies akzeptieren und Medien laden

Schon mal von Fluid Design gehört? Ich beschreibe es gerne als ein Upgrade für Responsive Design. Es ermöglicht dir bei einem bestimmten Breakpoint dein Website Layout zu skalieren. Gerade bei dem Desktop Breakpoint in Webflow sieht das Design schnell mal gequetscht aus, wenn man es bis auf 991 Px Breite kleiner macht. Das kannst du umgehen, indem du genau dann das Fluid Design aktivierst.

Wir schauen uns zum einen die Wizardry Methode von Timothy Ricks und genauso auch die Client First Varianten von Finsweet an. Zudem hast du ab 9:04 eine Schritt für Schritt Anleitung, wie du den Fluid Design Kalkulator für dein Layout anwendest und das Ganze dann auch in die Website einbindest (Beispiel anhand von einem Client First Template mit REM Einheiten).

Wichtig! Diese Methode funktioniert nur, wenn du mit REM oder EM arbeitest!

Wizardry Methode: https://wizardry-technique.webflow.io
Finsweet Fluid Design Kalkulator: https://www.finsweet.com/client-first/docs/fluid-responsive

Ergebnis anschauen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Affiliate Link
Icon für einen externen Link