Wenn Sie herausfinden möchten, was Webflow alles kann und ob es die richtige Plattform für Ihre nächste Unternehmenswebsite ist, sind Sie hier richtig. In diesem Beitrag gebe ich einen umfassenden Überblick und stelle die wichtigsten Funktionen vor.

Wenn ich Webflow in wenigen Worten beschreiben sollte, würde ich es so zusammenfassen: Webflow ist eine vielseitige Plattform zur Erstellung professioneller Webseiten jeder Art. Sie richtet sich an Nutzer mit den unterschiedlichsten Kenntnissen und Anforderungen und stellt zahlreiche Tools bereit. Mit diesen können Webseiten nicht nur gestaltet und entwickelt, sondern auch flexibel erweitert, optimiert und analysiert werden.

Um nur einige Beispiele zu nennen: Ein Copywriter kann ohne technische Barrieren schnell und einfach neue Blogposts erstellen. Ein Webflow-Entwickler setzt Webdesigns effizient in responsive Webseiten um. Ein Marketer baut in kürzester Zeit ansprechende Landingpages, um Kampagnen umzusetzen. Ein E-Commerce-Manager verwaltet seine Produkte unkompliziert, inklusive Zahlungsoptionen und Versandmethoden. Selbst ein Einzelunternehmer kann mit einem Webseiten-Template und wenigen Anpassungen eigenständig seine Unternehmenswebsite erstellen und in kürzester Zeit online gehen.

Webflow hat im Rahmen ihrer jährlichen Konferenz “Webflow Conf.” am 15. Oktober 2024 bekannt gegeben, dass sie sich künftig als “Website Experience Platform” (WXP) positionieren. Dieser Begriff war bisher in der Branche nicht gebräuchlich und Webflow möchte damit deutlich machen: “Wir bieten mehr!” Aus meiner Sicht war dieser Schritt längst überfällig, denn es war schon lange nicht mehr nur eine “Visual Development Platform” oder ein Webseiten-Baukasten. Die neuen Features unterstreichen das.

Als jemand, der Webflow täglich nutzt, ist mir eines aufgefallen: Webflow hat spürbar an Fahrt aufgenommen! Die Updates kommen nicht nur häufiger, sondern sie haben auch oft eine sehr hohe Relevanz. Schon ab dem ersten Tag ihrer praktischen Anwendung sind sie für mich unverzichtbar geworden. Im Folgenden gehe ich auf neue, aber auch bewährte Funktionen und Möglichkeiten ein:

4 Möglichkeiten der Bearbeitung Ihrer Webseite für Sie oder Ihr Team in Webflow

Ich habe noch nie erlebt, dass eine Webseite erstellt wird und über Jahre unverändert bleibt. Vielmehr werden bestehende Seiten regelmäßig angepasst oder neue hinzugefügt. Das kann zum Beispiel passieren, wenn Sie Ihre Zielgruppe besser verstehen und Ihre Ansprache optimieren möchten, Ihre Produktpalette erweitern oder durch einen Blog zusätzliche SEO-Maßnahmen umsetzen wollen. In der Praxis hat sich eines als besonders effektiv erwiesen: Wenn die Verantwortlichen diese Änderungen eigenständig und direkt umsetzen können. Hier sind vier Wege, wie das gelingt:

1. Das Webflow-CMS für Blogartikel und andere wiederkehrende Inhalte

Das integrierte Content-Management-System (CMS) von Webflow ist ein Bereich innerhalb der Plattform, in dem Sie, vereinfacht gesagt, Formulare anlegen können. Diese Formulare können verschiedene Elemente enthalten, wie Text, Bilder, Video-Links, Zahlen und vieles mehr. Diese sogenannten CMS-Collections bilden dann die Grundlage für wiederkehrende Elemente oder Seiten auf Ihrer Webseite mit den zuvor angelegten Inhalten.

Ein/e Webflow-Entwickler/in könnte Ihnen dann beispielsweise eine Blogartikel-Seite umsetzen, ähnlich wie diese Seite, auf der Sie gerade diesen Artikel lesen. Dafür wird auf die Felder der CMS-Collection zurückgegriffen. Für einen Blogartikel gehören dazu mindestens die Hauptüberschrift, ein Hauptfoto und der sogenannte Rich-Text. Dieser enthält den Artikelinhalt und bietet zusätzlich Optionen für Formatierungen und weitere Elemente wie Überschriften, Links, Bilder oder Videos.

Sobald Ihr CMS-Template fertiggestellt ist, können Sie oder Ihr Team sehr einfach beliebig viele Artikel erstellen und diese jeweils unter individuellen URLs veröffentlichen. Dafür stehen Ihnen zwei Optionen zur Verfügung: Entweder bearbeiten Sie Ihre Inhalte direkt in der Formularansicht des Webflow CMS oder Sie nutzen die visuelle Ansicht Ihres Blogartikels. In der visuellen Ansicht können Sie direkt auf das Element klicken, das Sie ändern möchten, und Ihre Anpassungen innerhalb der Seitenstruktur vornehmen. Diese Funktion, die 2024 eingeführt wurde, bietet einen besseren Eindruck davon, wie der Artikel online letztendlich aussehen wird.

Das Webflow-CMS ist jedoch nicht nur für komplette Seiten mit eigener URL geeignet, sondern auch für wiederkehrende Elemente, die auf regulären Seiten eingebunden werden. Beispiele hierfür sind Kundentestimonials, Abschnitte mit häufig gestellten Fragen oder die Vorstellung von Teammitgliedern. 

2. Der Edit-Mode in Webflow

Auch der Edit Mode wurde erst 2024 eingeführt. Er beschränkt die Bearbeitungsfunktionen im Herzstück der Plattform, dem Webflow Designer, und kann sowohl auf CMS-Seiten als auch auf regulären Seiten aktiviert werden. 

Das hat viele Vorteile, denn wie ich bereits im Artikel “Website-Builder, WXP oder individuelle Entwicklung: Ein Vergleich für die richtige Wahl bei Ihrer nächsten Webseite” erklärt habe, ist Ihre Webseite vor allem eines: Code. Wechseln wir im Webflow Designer nun vom Edit-Mode in den Design-Mode, kann die Webseite visuell in HTML, CSS und JavaScript programmiert werden. Als Nutzer entsteht durch die klar strukturierte Benutzeroberfläche oft die Illusion, dass hier Änderungen schnell und einfach möglich seien. Doch das ist meistens nicht der Fall. 

Ein Beispiel: Wenn Sie im sogenannten “Style-Panel” einen Abstand vergrößern, wird diese Anpassung überall übernommen, wo die entsprechende CSS-Klasse verwendet wird. Das kann dazu führen, dass andere Seiten fehlerhaft dargestellt werden. Zusätzlich können auch die Breakpoints derselben Seite, also die Ansichten für verschiedene Geräte wie Tablets oder Smartphones, unerwünschte Auswirkungen zeigen. Solche Arbeiten sollten daher nur von Personen mit fundierten Kenntnissen in HTML und CSS durchgeführt werden, die genau wissen, was sie tun.

Kehren wir zum Edit-Mode zurück: Hier können Sie Elemente ganz einfach anklicken und nach Bedarf bearbeiten, ohne befürchten zu müssen, die Webseite zu beschädigen. Die Nutzung des Edit-Modes wird nicht nur für reguläre Seiten empfohlen, sondern auch für die zuvor beschriebenen CMS-Template-Seiten wie Blogartikel. Wenn möglich, sollten Sie Team-Mitgliedern, die ausschließlich Inhalte bearbeiten sollen, den Zugriff auf den Design-Modus verwehren. Stattdessen können Sie ihnen durch passende Nutzerrolle eine eingeschränkte Bearbeitungsfunktion zuweisen.

3. Komponenten und Seiten-Templates (Webflow Page Building)

Beim Einsatz von Komponenten und Seitentemplates, was Webflow offiziell als “Page Building” bezeichnet, können Sie und Ihr Team auf vorgefertigte Elemente und Seiten zugreifen, die zuvor von einem Webflow-Entwickler/Designer erstellt wurden. Das ermöglicht eine effiziente und konsistente Gestaltung, ohne jedes Mal von Grund auf neu starten zu müssen. 

Bei Nr. 1 bin ich bereits auf die CMS-Templates eingegangen, welche Inhalte abbilden, die zuvor als CMS-Einträge in CMS-Kollektionen angelegt wurden. Bei klassischen Seitentemplates und Komponenten hingegen sind wir nicht auf die Elemente des CMS beschränkt. Stattdessen können wir auf sämtliche Elemente zugreifen, die Webflow insgesamt bietet, welche sich im „Add Elements“-Panel befinden.

Webflow Seiten-Templates

Webflow-Seitentemplates sind vorgefertigte Layouts, die eine vollständige Seitenstruktur vorgeben. Sie eignen sich, um schnell neue Seiten zu erstellen, die sich perfekt in Ihr bestehendes Webdesign einfügen. Das ist besonders nützlich für Landingpages, die untereinander stärker variieren können als beispielsweise Blogartikel, für die sich das Webflow-CMS oft besser eignet.

Jede Kopie eines Seitentemplates erhält im Seiten-Panel von Webflow einen eigenen „Eintrag“ und ist anschließend uneingeschränkt editierbar, genau wie andere reguläre Seiten. Ein CMS-Template hingegen steht als nur eine einzige Seite zur Verfügung, was gewisse Einschränkungen mit sich bringen kann.

Übrigens ist es möglich, CMS-Kollektionen in Seiten-Templates zu integrieren.

Webflow-Komponenten‍

Webflow-Komponenten sind kleinere Bausteine, die wiederverwendbare Elemente innerhalb einer Seite darstellen. Beispiele hierfür sind Navigationsleisten, Footer, Call-to-Action-Blöcke oder Feature-Abschnitte. Dabei gibt es zwei zentrale Begriffe zu unterscheiden: die Komponente selbst und ihre Instanz.

Die Komponente: Die Komponente dient als Grundlage für alle Instanzen (=Kopien), die später von ihr erstellt werden. Sie kann ausschließlich im Design-Modus bearbeitet werden. Der Vorteil von Komponenten besteht darin, dass Änderungen an der Komponente automatisch auf allen Seiten übernommen werden, auf denen ihre Instanzen verwendet werden. Ändern Sie beispielsweise den Begriff „Blog“ in „Magazin“ in Ihrer Navigation, wird diese Änderung auf allen Seiten wirksam, auf denen die Navigationsleiste als Instanz der Komponente platziert ist. Grundsätzlich können Sie nahezu jedes Element in eine Komponente umwandeln und wiederverwenden. Auch Seiten-Templates können vollständig aus Komponenten erstellt werden.

Die Instanzen: Instanzen sind Kopien der ursprünglichen Komponente. Sie erlauben nur die Bearbeitung von Inhalten, die im Design-Modus von einem Webflow-Entwickler/Webflow-Designer zur Änderung freigegeben wurden. Andernfalls bleiben die Inhalte so wie in der Komponente.

Eine Navigation wird beispielsweise selten zur Bearbeitung freigegeben, da sie auf allen Seiten gleich bleiben soll. Ein Call-to-Action-Abschnitt mit einer Überschrift, einem Text und einem Button soll hingegen vielleicht immer textlich etwas anders formuliert sein. In diesem Fall können diese Bereiche zur Bearbeitung in der Instanz freigegeben werden.

Neben Texten können auch Links, Sichtbarkeiten oder andere Eigenschaften freigegeben werden. Seit Kurzem besteht zudem die Möglichkeit, Varianten von Komponenten zu erstellen. So kann beispielsweise eine „Dark Mode“-Variante der Komponente angelegt werden, auf die bei Bedarf über ein Dropdown-Menü in der Instanz zurückgegriffen werden kann. Änderungen, die an einer Instanz vorgenommen werden, wirken sich ausschließlich auf diese spezifische Kopie aus und bleiben auf andere Instanzen der Komponente ohne Einfluss.

4. Der Webflow-Editor zur Bearbeitung der Live-Webseite

Der Webflow-Editor ist ein Bearbeitungsmodus, der Ihnen die direkte Anpassung der Inhalte auf Ihrer veröffentlichten Webseite ermöglicht. Sie gelangen dorthin, indem Sie /?edit an Ihre URL anhängen und sich einloggen.

Der Editor bietet eine intuitive Möglichkeit, Texte, Bilder oder andere Inhalte direkt auf der Live-Seite zu ändern. Dies ist besonders nützlich für Content-Manager oder Teams, die keine Designänderungen durchführen, sondern sich auf die Aktualisierung und Verwaltung von Inhalten konzentrieren möchten. Die Funktionsweise des Webflow-Editors ähnelt dabei dem Edit-Mode, ist jedoch speziell für die Arbeit mit der veröffentlichten Webseite optimiert.

Hinzufügen weiterer Sprachen auf Ihrer Webseite 

Ein Teil Ihrer Zielgruppe spricht Englisch oder sonstige Sprachen? Kein Problem, in Webflow ist das nur ein Klick. Sie können beliebig viele Sprachen hinzufügen und bei Bedarf Texte sogar automatisiert übersetzen lassen. Zusätzlich können Sie in der sogenannten “Lokalisierung” auch Ihre Webseiten-URLs übersetzen und Bilder tauschen. Und das alles direkt innerhalb von Webflow, sodass Sie die visuelle Darstellung Ihrer Webseite in den verschiedenen Sprachen überprüfen können, bevor sie live geht.

Diese Mehrsprachigkeitsfunktion ist jedoch nicht in den regulären Webflow-Abo-Plänen enthalten und kostet zwischen 9 und 29 Dollar pro Monat und Sprache (bei jährlicher Abrechnung).

Moderne Animationen auf Ihrer Webseite

Moderne Webseiten leben von Bewegung und Interaktivität. Egal ob es sich um dezente Mikrointeraktionen oder aufwendige, mehrstufige Animationen handelt, mit Webflow Interactions und der Integration externer Tools können nahezu alle Ideen umgesetzt werden. Dabei bietet Webflow die folgenden Möglichkeiten:

Webflow Interactions

Das JavaScript wird im Hintergrund automatisch generiert. Von einfachen Hover-Effekten bis hin zu komplexen scrollbasierten Animationen bietet dieses Feature eine beeindruckende Bandbreite an Möglichkeiten. Für mich ist es ein unverzichtbares Tool, das aus meinem Arbeitsalltag nicht mehr wegzudenken ist.

Lottie-Animationen

Lottie-Animationen ermöglichen die Integration vektorbasierten Animationen, die in Tools wie After Effects oder Figma erstellt wurden. Webflow bietet hierfür ein spezifisches „Lottie Animation“-Element. Diese Animationen zeichnen sich unter anderem durch ihre geringe Dateigröße aus und sind besonders für illustrative Animationen geeignet. Die Erstellung einfacher Lottie-Animationen mit Figma ist übrigens im Kataloop-Abo enthalten.

Spline

Für dreidimensionale Animationen und interaktive 3D-Elemente ist Spline die ideale Lösung. Es ermöglicht die Darstellung von 3D-Modellen in Echtzeit auf Webseiten und schafft immersive Erlebnisse für Benutzer. Die Erstellung von Spline-Animationen ist aktuell im Kataloop-Abo jedoch nicht enthalten.

Webflow E-Commerce 

Mit der Power aller bisher genannten Möglichkeiten lässt sich auch Webflow Ecommerce aufsetzen. Dabei gestalten wir Produktseiten, Einkaufswagen und Checkout-Prozess für Sie individuell und passend zum Rest Ihrer Webseite. Sie oder Ihr Team können Produkte, Bestellungen und das Inventar ganz einfach über das benutzerfreundliche Dashboard verwalten. Die Plattform unterstützt zudem gängige Zahlungsanbieter wie Stripe und PayPal sowie die Konfiguration von Versandmethoden und Steuersätzen. 

Suchmaschinenoptimierung (SEO) mit Webflow

Webflow bietet eine Vielzahl an SEO-Optionen, die Ihnen dabei helfen, Ihre Webseite optimal für Suchmaschinen zu gestalten. Sie können unter anderem Titel-Tags, Meta-Beschreibungen und Schema-Markups individuell bearbeiten, Indexierungsregeln festlegen und 301-Weiterleitungen unkompliziert einrichten.

Automatisierte SEO-Funktionen für CMS-Inhalte gewährleisten konsistente Metadaten, während die einfache Verwaltung der Sitemap die Struktur Ihrer Webseite für Suchmaschinen klar und übersichtlich kommuniziert. Darüber hinaus können Sie Alt-Texte für Bilder hinzufügen, um sowohl die Barrierefreiheit Ihrer Webseite zu verbessern als auch das Verständnis von Suchmaschinen zu unterstützen.