Neuesten Webflow Features und Updates 2024

Es gibt einige spannende Neuerungen für Webflow, die die Plattform noch weiter verbessern und die Möglichkeiten für Webseiten-Ersteller erweitern. Es ist Ende Q1 2024 und heute werfen wir einen Blick auf die bisher neuesten Updates und Features 2024, und erläutern die Vorteile für Webflow-User und Agenturen.

Visuelle Lokalisierung ohne Code: Länderflaggen und eigene Icons für die Sprachumschaltung 

Webflow macht die Mehrsprachigkeit Ihrer Webseite jetzt noch einfacher! Mit dem Update können Sie beim Wechseln der Spracheganz ohne Code individuelle Bilder hinzufügen, beispielsweise Landesflaggen oder eigene Symbole.

Vorteile:

• Vereinfachte Lokalisierung: Bilder wie Flaggen sorgen für eine intuitive Benutzerführung und erleichtern die Navigation zu den Sprachversionen Ihrer Webseite.
• Verbesserte Benutzerfreundlichkeit: Visuelle Elemente machen die Sprachumschaltung für Nutzer aller Sprachkenntnisse verständlicher.‍
• Professionelles Erscheinungsbild: Individuelle Icons können Ihr Branding unterstreichen und die gesamte Webseite optisch aufwerten.

Verbesserte Verwaltung von API-Tokens: Mehr Kontrolle und Übersicht

Webflow führt eine verbesserte API-Token-Verwaltung ein, die mehr Kontrolle bietet: Gezielte Zugriffsberechtigungen, mehrere Token pro Webseite und die Möglichkeit zur Benennung der Tokens.

Vorteile:

• Verbesserte Sicherheit: Gezielte Zugriffsberechtigungen minimieren das Risiko von ungewolltem Datenzugriff.
• Effizientere Zusammenarbeit: Benannte Tokens vereinfachen die Kommunikation im Team und sorgen für mehr Klarheit im Projekt.
• Zukunftssichere Integrationen: Die Aktualisierung auf die neue v2-API-Suite garantiert die langfristige Funktionalität Ihrer externen Anbindungen.

Neue Features im Rich-Text-Editor: Code-Einbindung, Textformatierung & verbesserte Listen

Endlich! Bislang wurde das Rich-Text-Element von Webflow ja eher stiefmütterlich geupdated. Viele unserer Kunden sind immer noch etwas enttäuscht, wenn Sie von Wordpress kommen und von umfangreichen Funktionen verwöhnt sind. Bisher bietet Webflow hier leider immer noch sehr wenig. Aber nun kommen endlich neue Funktionen: Webflow erweitert den Rich Text Editor um drei Funktionen: 

1. Code direkt in Rich Text Elemente einfügen
2. Text formatieren als Code 
3. Verbesserte Listenfunktionen (Bulletpoint-List)

Vorteile:

• ‍Einfache Code-Einbindung: Im Dezember hat Webflow das Codeblock-Element veröffentlicht – ein eigenständiges Element zum Einbetten von Code auf einer Webseite.

• Bisher war das umständlicher. Ab sofort können Sie einfach Codeblöcke direkt in Rich-Text-Elemente auf der Arbeitsfläche und in Rich-Text-Felder des Content-Management-Systems einfügen.

• ‍Erweiterte Textformatierung: Textpassagen können jetzt direkt im Rich Text Editor als Code formatiert werden, was die Darstellung von Quellcode auf Ihrer Webseite vereinfacht.

• Verbesserte Listenverwaltung: Die Bearbeitung von Listen in Rich Text Elementen wird durch Symbole zum Wechseln des Listentyps (geordnet/ungeordnet) und Einrückungsfunktionen (Tab/Shift+Tab) zum Ein- und Ausrücken von Listenelementen optimiert.

Neue Layout-Steuerung im Style Panel: Intuitives Design und optimierte Workflows

Webflow führt eine verbesserte Layout-Steuerung im Style Panel ein und bietet damit ein höheres Maß an Designflexibilität. Die neuen Funktionen vereinfachen die Erstellung benutzerfreundlicher und leistungsstarker Layouts und optimieren den Design-Prozess.

Vorteile:

• Intuitive Navigation: Die klar beschrifteten Steuerelemente und Icons im Layout-Bereich sorgen für eine einfache Navigation und schnelles Verständnis der Funktionen.
• Vereinfachte Darstellung: Textbezeichnungen für komplexe Konzepte wie Flexbox und Grid ersetzen Icons und erleichtern die Handhabung für Einsteiger.
• Effiziente Steuerung: Die wichtigsten Optionen sind zentral angeordnet und bieten direkten Zugriff, während zusätzliche Funktionen über ein Dropdown-Menü erreichbar sind. Diese Updates reduzieren die kognitive Belastung und fördern die effiziente Nutzung der Funktionen.
• Präzise Steuerung für Flexbox: Die neue Ausrichtungsbox und die X/Y-Achsen-Steuerung ermöglichen sowohl Designern als auch Entwicklern eine präzise Kontrolle über die Anordnung von Flexbox-Elementen.
• Optimierte Grid-Optionen: Die Steuerung von Grid-Layouts wurde für eine verbesserte Benutzerfreundlichkeit in das Style Panel integriert. Das neue Interface bietet weiterhin umfassende Anpassungsmöglichkeiten.
• Feinabstimmung der Abstände: Die verbesserte Abstandsregelung (Gap Control) mit linearem Schieberegler und manueller Eingabe ermöglicht eine präzise Anpassung der Abstände in Flexbox- und Grid-Layouts.

Figma to Webflow: Schnellerer Website-Start mit neuer Companion App & Design System Sync

Webflow verbessert die Übertragung von Designs aus Figma in Webflow mit der Einführung einer neuen Companion App und der Funktion "Design System Sync" im bestehenden Figma-Plugin. Diese Updates ermöglichen einen optimierten Workflow, verbesserte Kontrolle und eine nahtlose Synchronisierung.

Vorteile:

• Effizienterer Prozess: Die Companion App im Webflow Apps Panel bietet eine direkte Synchronisierung mit Webflow, wodurch Zwischenschritte reduziert und die Produktivität gesteigert wird.
• Verbesserte Design-System-Synchronisierung: Die neue "Design System Sync"-Funktion innerhalb des Plugins synchronisiert Komponenten und Variablen aus Figma mühelos mit Webflow, was die Designkonsistenz zwischen den Plattformen garantiert.
• Vorschau und Prüfung: Änderungen an bereits verknüpften Komponenten oder Variablen lassen sich direkt in der App in der Vorschau betrachten. Zusätzlich können die vorgenommenen CSS-Anpassungen geprüft werden.
• Genehmigungsprozess: Mit der neuen Genehmigungsfunktion in Webflow können Änderungen vor der finalen Veröffentlichung überprüft und freigegeben werden. Dies gewährleistet mehr Kontrolle und Genauigkeit beim Deployment der Designs (Approval queue).
• Skalierbare Design-Systeme: Die Companion App und die Design System Sync fördern die Nutzung skalierbarer Design-Systeme in Webflow. Dies ermöglicht konsistente und effiziente Workflows von Designs bis zum Code und gibt Designern mehr Zeit für kreative Aufgaben und die Pflege einer einheitlichen Designsprache.
• Einfache Einrichtung: Die Companion App ist bereits in der Installation des Figma to Webflow Plugins aus der Figma Community enthalten. Benutzer mit bestehender Plugin-Installation erhalten die App automatisch nach der nächsten Plugin-Authentifizierung oder Anmeldung. Nach der Aktualisierung des Plugins kann die Companion App über das Apps Panel im Webflow-Projekt aufgerufen werden. Die Synchronisierung startet dann über das Plugin in Figma.

Neue Möglichkeiten für fortgeschrittene Designs: Benutzerdefinierte CSS-Eigenschaften und Werte

Webflow führt eine umfangreiche Erweiterung der unterstützten CSS-Eigenschaften und Werte ein und bietet damit Designern mehr kreative Freiheit und optimierte Workflows.

Vorteile:

• Erweiterte Design-Möglichkeiten: Die Unterstützung von nahezu 90 % aller verfügbaren CSS-Eigenschaften ermöglicht detailliertere und nuanciertere Designs direkt innerhalb der visuellen Webflow-Oberfläche.
• Reduzierter Custom Code Bedarf: Benutzerdefinierte CSS-Eigenschaften und Werte verringern die Abhängigkeit von zusätzlichem Code und machen den Designprozess intuitiver und effizienter.

Webflow Enterprise: Detaillierte Webseite-Änderungsverfolgung per API

Webflow bietet Enterprise-Kunden jetzt die Möglichkeit, über einen neuen API-Endpunkt auf die Protokolle ihrer Website-Aktivitäten (Site Activity Logs) zuzugreifen.

Vorteile:

• Automatische Änderungsüberwachung: Greifen Sie automatisch auf Protokolle zu, die detaillierte Informationen über Design- und Inhaltsänderungen auf Ihrer Webseite enthalten.
• Vereinfachte Compliance-Prüfungen: Nutzen Sie die Site Activity Logs, um Audit- und Compliance-Workflows in Ihrer Organisation zu optimieren.
• Verbesserte Transparenz: Behalten Sie stets den Überblick über wichtige Änderungen an Ihrer Webseite, einschließlich Stilmodifikationen, Textänderungen, Veröffentlichungsinformationen und mehr.

Webflow Enterprise: Sicheres Arbeiten mit Seitenzweigen (pages as branches) und Komponentenbearbeitung

Webflow Enterprise bietet zwei neue Funktionen, die die Zusammenarbeit und Sicherheit im Team verbessern: Seitenzweige und Komponentenbearbeitung in Zweigen.

Vorteile:

• Seitenzweige für sicheres Design: Erstellen Sie neue Seiten in isolierten Zweigen und führen Sie den gesamten Überprüfungsprozess durch, ohne Gefahr, unfertige oder nicht genehmigte Seiten zu veröffentlichen.
• Komponentenbearbeitung in Zweigen: Nehmen Sie Änderungen an globalen Komponenten in einem Zweig vor, ohne die Live-Version Ihrer Webseite zu beeinflussen. Testen und überprüfen Sie die Auswirkungen, bevor Sie die Änderungen auf die gesamte Webseite übernehmen.
• Effizientere Zusammenarbeit: Lassen Sie Teams sicher zusammenarbeiten und Änderungen an Seiten und Komponenten testen, bevor sie auf der Live-Seite veröffentlicht werden. Dies führt zu einem schnelleren und sichereren Design- und Entwicklungsprozess.

Webflow Enterprise: Eigenständige Staging-Domain für sichere Tests

Webflow Enterprise bietet jetzt die Möglichkeit, eine eigene Domain für die Staging-Umgebung Ihrer Webseite zu verwenden.

Vorteile:

• Vereinfachte Tests: Nutzen Sie Ihre eigene Domain für die Staging-Umgebung und vermeiden Sie Verwechslungen mit der Live-Website.
• Verbesserte Sicherheit: Durch die Trennung der Staging-Umgebung von der Webflow-Subdomain wird die Sicherheit während der Entwicklungsphase erhöht.
• Konsistente Darstellung: Verwenden Sie im gesamten Workflow – von der Entwicklung bis zum Test – eine einheitliche Domain für Ihre Website.

Bessere Organisation im Designer: Gruppieren von Komponenten-Eigenschaften

Webflow führt die Möglichkeit ein, Eigenschaften von Komponenten im Designer zu gruppieren.

Vorteile:

• Vereinfachte Navigation: Gruppieren Sie zusammengehörige Eigenschaften, um die Navigation im Eigenschaftenfenster zu erleichtern.
• Verbesserte Übersicht: Mit Gruppierungen behalten Sie den Überblick über komplexe Komponenten mit vielen Eigenschaften.
• Effizienteres Arbeiten: Finden Sie schneller die gewünschten Eigenschaften und arbeiten Sie effizienter im Designer.

Fazit: Webflow 2024 – mehr Kontrolle und erweiterte Designmöglichkeiten für optimierte Websites

Webflow hat sich zu einer der besten Plattformen für die Erstellung von Websites entwickelt. Mit seinem intuitiven No-Code-Ansatz und der Vielzahl von leistungsstarken Features und Updates ermöglicht Webflow sowohl Einsteigern als auch erfahrenen Entwicklern, professionelle Websites ohne Programmierkenntnisse zu erstellen.

Falls Sie professionelle Hilfe bei der Erstellung Ihrer Website benötigen, marketer UX ist Deutschlands führende Webflow Agentur mit über 7 Jahren Erfahrung. Lernen Sie uns kennen & vereinbaren Sie ein unverbindliches Beratungsgespräch. Unsere Webflow-Experten unterstützen Sie gerne bei der Umsetzung Ihrer Vision!