30 neue Webflow-Features, die du kennen musst (aus Q4 2024)
Level:
In diesem Video geht es um 30 spannende Webflow-Updates aus den letzten Monaten. Du erfährst, wie sich Variablen jetzt flexibler anpassen lassen, was es mit neuen AI-Funktionen im Webflow Designer auf sich hat und wie du globale Komponenten für verschiedene Projekte nutzen kannst. Außerdem gibt’s Infos zu neuen Möglichkeiten mit Formularen, einer verbesserten Figma-Integration und weiteren Optimierungen für einen effizienteren Workflow.
30 Webflow-Updates im Überblick
1. Bilder direkt im Asset Panel ersetzen
Du kannst ein bestehendes Bild nun direkt über „Replace“ austauschen, ohne ständig neue Varianten hochladen zu müssen. Das spart dir Zeit und vermeidet unnötige Duplicate-Assets.
2. Verbesserter Popover im Asset Panel
Das Popover wurde überarbeitet und bietet nun mehr Platz für zukünftige Funktionen. Aktuell siehst du hier zum Beispiel deutlich, wie viel deine Bildkomprimierung gebracht hat.
3. Variablen mit Breakpoint-Überschreibungen (Modes)
Endlich kannst du Variablen so anlegen, dass sie sich automatisch pro Breakpoint anpassen. Für unterschiedliche Gerätegrößen musst du nicht mehr alles manuell überschreiben, sondern legst mehrere Werte direkt nebeneinander an.
4. Automatische oder manuelle Variablen-Modi
Ob du deine neuen Werte ab Tablet oder Mobile automatisch anwenden lässt oder lieber manuell steuerst, kannst du jetzt selbst entscheiden. Das gibt dir mehr Kontrolle auch bei einzelnen Sektionen, etwa für spezielle Farbmodi wie Light und Dark.
5. AI-Textbearbeitung im Designer
Mit einem Klick lässt du Texte kürzen, umformulieren oder in eine andere Sprache übersetzen. Die integrierte KI erkennt automatisch die Ausgangssprache und schlägt dir passende Varianten vor.
6. Komponenten direkt aus CMS-Items erstellen
Wenn du in einer Collection List ein Element wie eine Card hast, kannst du es jetzt sofort in eine Komponente umwandeln. Webflow richtet die nötigen Overrides für Bild- und Textfelder automatisch ein.
7. Geteilte Libraries für Komponenten und Variablen
Erstelle dir eine Library und teile sie in deinem gesamten Workspace. So kannst du etwa ein Set an Brand-Farben, Buttons oder ganzen Sektionen immer wieder in neuen Projekten nutzen, ohne alles neu zu bauen.
8. Überarbeitete Figma-zu-Webflow-Integration
Die Figma-App für Webflow erkennt jetzt besser deine in Figma erstellten Komponenten und Variablen. So importierst du Layout- und Farb-Styles deutlich schneller in dein Webflow-Projekt.
9. Neues Formular-Panel im Designer
Markierst du den kompletten Form-Block, bekommst du rechts eine kompakte Übersicht aller Felder. Das macht es leichter, einzelne Felder in der Reihenfolge zu ändern oder zu bearbeiten.
10. Form-Benachrichtigungen gezielt verwalten
Entscheide direkt im Designer, wer eine E-Mail-Benachrichtigung bekommt, wenn ein Formular abgeschickt wird. Du sparst dir den Umweg über die allgemeinen Site Settings.
11. Component Style Variants
Leg verschiedene Stilvarianten für eine einzige Komponente an, etwa Primary und Secondary Buttons. Statt zwei separater Komponenten verwaltest du nur eine und wechselst einfach die Style-Variante.
12. Page Slots für einfacheres Seiten-Building
Gib deinen Kunden oder Teammitgliedern bestimmte Slots vor, in die sie nur ausgewählte Komponenten ziehen dürfen. So bewahrst du ein konsistentes Design und verhinderst wilde Layout-Experimente.
13. Neue Text Decoration Styles
Die Unterstreichung deiner Texte kannst du jetzt exakt anpassen. Wähle die Strichstärke, Farbe, den Abstand zur Schrift und mach deine Links oder Überschriften optisch individueller.
14. Client Payments als Nachfolger von Client Billing
Webflow hat ein eigenes Zahlungsmodul eingeführt. Du kannst Hosting und Co. an deine Kunden weiterberechnen, ohne dass sie Zugriff auf deine Webflow-Account-Einstellungen bekommen.
15. Entwürfe für mehrsprachige Unterseiten
Wenn deine Seite in mehreren Sprachen verfügbar ist, musst du unvollständige Sprachversionen nicht mehr sofort live stellen. Setze die entsprechende Unterseite einfach auf „Draft“, bis du fertig bist.
16. Neue Variablen-Typen für Zahlen und Prozentwerte
Neben allgemeinen Einheiten wie PX, EM oder REM kannst du nun auch Variablen für Font-Weights, prozentuale Größenangaben und andere nummerische Werte anlegen.
17. Variablen im Handumdrehen sortieren
Zieh deine Variablen in der Liste einfach per Drag-and-Drop an die gewünschte Position. So behältst du gerade bei vielen angelegten Werten den Überblick.
18. Überarbeitete Top-Navigation im Designer
Die Hauptleiste wurde neu strukturiert und wirkt aufgeräumter. Breakpoints liegen jetzt am unteren Rand und du erkennst in der Mitte klarer, welche Ebene oder Ansicht du gerade bearbeitest.
19. Slash Commands im Rich Text
Ähnlich wie in Notion oder anderen Markdown-Tools lässt du ab sofort Überschriften, Links oder Trennlinien mit einfachen Zeichenkombinationen wie „##“ oder „-“ anlegen.
20. Webflow Analytics
Wenn du deine Website direkt über Webflow tracken möchtest, kannst du das neue Analytics-Tool verwenden. Es zeigt dir Pageviews und Nutzerverhalten ohne zusätzlichen Code oder externe Services.
21. Styles für verschiedene Sprachen lokalisieren
Du kannst pro Sprache einzelne Style-Anpassungen vornehmen. Das ist hilfreich, wenn etwa eine RTL-Sprache (z. B. Arabisch) anders formatiert werden soll oder du besondere Schriftarten nutzt.
22. Rive-Support im Designer
Neben Spline kannst du jetzt auch Rive-Dateien mühelos einbinden. Rive ermöglicht interaktive Vektor-Animationen, die sich für ausgefallene Scroll-Effekte oder animierte Icons eignen.
23. KI-gesteuerte Dummy-Inhalte im CMS
Legst du eine neue Kollektion an, hilft dir die integrierte KI dabei, Beispieltexte automatisch zu erstellen. Das beschleunigt deinen Projektstart und du siehst sofort, wie das Layout gefüllt aussieht.
24. Pre-Tags in Code-Blöcken stylen
Wenn du Code-Beispiele oder Snippets einbaust, kannst du nun die Pre-Elemente direkt im Designer anpassen. Farbgebung, Schriftgröße oder Hintergrund sind so ohne Custom-Code definierbar.
25. Verbesserte CMS-Entwurfs- und Veröffentlichungslogik
CMS-Einträge kannst du gezielt aus dem Live-Bestand nehmen, ohne gleich die komplette Website neu zu publizieren. Das erlaubt dir eine feinere Steuerung, wann neuer CMS Content online geht.
26. Projekte im Dashboard sortieren und als Liste anzeigen
Damit du in zahlreichen Projekten nicht die Übersicht verlierst, kannst du deine Websites nun in einer Listenansicht darstellen und zum Beispiel nach „zuletzt aktualisiert“ sortieren.
27. Komponenten in Gruppen organisieren
Erstelle Kategorien für deine Komponenten wie „Buttons“, „Sektionen“ oder „Icons“. So findest du schneller das, was du brauchst, und behältst auch bei größeren Projekten den Überblick.
28. Vorschau für Komponenten
Du siehst eine Miniaturansicht deiner Komponente, wenn du in der Seitenleiste darüber hoverst. Gerade bei vielen Komponenten hilft diese visuelle Vorschau enorm beim schnellen Auswählen.
29. Drop Shadow Filter für transparente Grafiken
Ein normaler Box-Shadow berücksichtigt bei PNGs und SVGs oft nur das rechteckige Format. Mit dem Drop Shadow Filter wird der Schatten passend zu den transparenten Bereichen angewendet.
30. AVIF-Format für Bilder
Zusätzlich zu WebP kannst du AVIF als Format nutzen. Es bietet hohe Kompression bei guter Bildqualität. Webflow wandelt deine Bilder dabei automatisch um, wenn du es möchtest.