Webflow Test 2023: CMS & Homepage-Baukasten in einem?

Die „Code-Barriere durchbrechen“ – so lautet die Mission des innovativen Homepage-Baukastens Webflow. Mit intuitiven Tools und vorgefertigten Schablonen vereinfacht er die Erstellung und Verwaltung professioneller Websites. Ähnliche Versprechen machen alle anderen Website-Builder auch. Was Webflow so besonders macht, verrät unser Test.

Webflow* ist ein einzigartiger Hybrid aus Homepage-Baukasten und CMS. Anders als herkömmliche Website-Builder reduziert der Dienst Webdesign nicht auf den kleinsten gemeinsamen Nenner, sondern verlangt seinen Nutzern ein gewisses Verständnis für Programmier-Vorgänge ab.

Webflow ist somit etwas komplexer als anfängerfreundliche Baukästen wie Wix oder Squarespace. Nutzer, für die CSS und HTML keine Fremdsprachen sind (und all jene, die zum Lernen bereit sind) können mit dem vielseitigen Werkzeugkasten für Fortgeschrittene dynamische Websites erstellen, designen und verwalten, wobei visuelle Tools mühsame Coding-Arbeit abnehmen.

Wir haben uns Webflow einmal genauer angesehen und verraten, wem wir den Baukasten empfehlen würden.

Bei Webflow ist nicht nur Programmier-Erfahrung von Vorteil, auch Englisch-Kenntnisse sollten Sie mitbringen. Eine deutsche Lokalisierung des Tools gibt es bisher nämlich nicht. Die ersten Minuten bei Webflow stehen dabei unter dem Motto „Sign up – Set up – build“. Nach der blitzschnellen Registrierung müssen Sie zunächst ein paar Fragen zu Ihrer Erfahrung und dem Ziel Ihrer Website beantworten.

Im Anschluss landen Sie im Webflow-Editor, wo ein kurzes Tutorial die Grundlagen erklärt. Spätestens hier wird klar, dass Sie mit dem Website-Builder zwar das Coding umgehen können, den komplexen Zusammenhängen des Programmierens aber nicht ganz entkommen.

Auch im Baukasten müssen Sie sich beispielsweise mit dem „Box-Modell“ auseinandersetzen, das beim Website-Design eine wichtige Rolle spielt: Jedes Element in Webflow sitzt in einem Container, in den Sie andere Inhalte per Drag-and-drop ziehen. Die Website, die am Ende herausspringt, ist also eine Ansammlung verschiedener Container, die auf- und ineinander gestapelt sind.

Nach dem Tutorial können Sie mit dem Aufbau Ihrer Website beginnen. Dabei haben Sie die Wahl, ein von Webflow vorgeschlagenes Template auszuwählen oder ganz ohne Vorlage loszulegen.

Visualisiertes Programmieren

Container sind wie erwähnt die Grundlage Ihrer Webflow-Website. Statt deren Inhalte mit Code zu verwalten, erlaubt Ihnen Webflow, per Drag-and-drop zum gleichen Ergebnis zu kommen.

Dabei wird schnell wird klar, dass Webflow weitaus komplexer als vergleichbare Homepage-Baukästen ist. Mit einer Benutzerfläche, die an Photoshop erinnert, programmieren Sie sozusagen visuell auf der Frontend-Leinwand, während das Programm Ihre Pinselstriche im Backend automatisch in Code verwandelt. Prinzipiell trifft das auch auf andere Website-Builder zu, doch Webflow bleibt wesentlich näher an der Philosophie des Programmierens.

Die Lernkurve bei Webflow ist also wesentlich steiler als bei Programmen wie Wix oder Squarespace. Wenn Ihnen das Box-Modell, Hierarchien, Floating und andere Grundkonzepte des Webdesigns kein Begriff sind, wird Sie der Editor besonders anfangs stark herausfordern. Das kurze Tutorial zu Beginn geht zudem nur auf die absoluten Grundlagen ein. In der hauseigenen Lernplattform gibt es dafür zahlreiche Video-Kurse, die die komplexeren Features von Webflow erklären.

Webflow ist also für Anfänger nicht wirklich geeignet. Wer etwas Verständnis für Webdesign mitbringt, oder bereit ist, Zeit ins Lernen zu investieren, erhält dafür ein mächtiges Tool zur Website-Gestaltung, das im Vergleich zu anderen Baukästen kaum Einschränkungen mit sich bringt. Schade ist die fehlende deutsche Lokalisierung, die weniger erfahrenen Nutzern ein weiteres Hindernis in den Weg legt.

Webflow ist Webhoster, CMS und Homepage-Baukasten in einem, wobei das Baukasten-Element mit seiner innovativen Visualisierung komplexer Coding-Prozesse das Herzstück der Software ist. Sehen wir uns die Teilbereiche des mächtigen Website-Builders einmal genauer an.

Webflow Designer

Die erste Spritztour durch den Designer erinnert an Anfangsversuche mit Adobe Photoshop oder Premiere: Der ganze Bildschirm steckt voller Funktionen, die sicherlich allesamt wichtige Antworten liefern – auf Fragen, die man noch gar nicht kennt. Bei Webflow können Sie nicht, wie bei anderen Programmen, einfach loslegen, und ohne Plan und Kontext via Drag-and-drop Elemente auf die Oberfläche ziehen. Die Programmier-Logik, in der jedes Element seinen Platz im HTML oder CSS-Code finden muss, greift auch im Baukasten.

Auf alle Funktionen des Editors einzugehen, würde ein ganzes Buch füllen, deshalb konzentrieren wir uns im Folgenden nur auf ein paar Grundlagen. In der Bedienleiste ganz links können Sie mit einem Klick aufs Plus-Symbol neue Elemente hinzufügen. Natürlich gibt es auch bei Webflow viele vorgefertigte Content-Blöcke, Buttons, Formulare und mehr. Statt einzelner Inhalte können Sie auch ganze Layouts hinzufügen, wie eine Galerie oder ein Kontaktformular.

Stil und das Layout Ihrer Elemente lassen sich im Style-Panel auf der rechten Bildschirmseite bearbeiten. Im Navigator-Panel können Sie Ihre Elemente auf dem Bildschirm per Drag-and-drop anrichten.

In der oberen Menüleiste können Sie mit einem Klick auf die Geräte-Icons überprüfen, wie Ihr Design auf unterschiedlichen Oberflächen zur Geltung kommt. Zur Vorschau Ihrer Seite gelangen Sie mit einem Klick auf das Augen-Symbol oben links.

Wieder lautet das Fazit: Der Webflow-Designer ist ein Editor für Programmierer und jene, die es werden möchten. Er automatisiert bestimmte Coding-Vorgänge und macht es durch seine Visualisierungstools einfacher, ansprechende Websites mit sauberem Code zu erstellen. Nutzer ohne CSS- oder HTML-Erfahrung werden allerdings nur an der Oberfläche des Editors kratzen können und sind mit anderen Lösungen besser bedient.

Webflow CMS

Webflow ist nicht nur ein Homepage-Baukasten, sondern auch ein vollwertiges Content-Management-System (CMS) wie Drupal oder WordPress. Gerade Letzterem hat Webflow den Kampf angesagt: Der eigene Service sei eine Alternative, die noch vielseitiger ist als der Marktführer, weil sie klassisches Content-Management mit innovativen Visualisierungstools kombiniert.

Im Webflow CMS erstellen Sie „Collections“ unterschiedlicher Content-Typen, die jeweils aus verschiedenen Feldern bestehen. So können Sie beispielsweise eine „Blog-Collection“ anlegen, die Sie mit einer Überschrift und Permalinks versehen, und danach mit Inhalt füllen.

Oder Sie erstellen eine „Autoren-Collection“ für Ihre Teammitglieder, mit Feldern für Fotos, Kurzbios oder Links zu Social Media-Profilen. Ihre Collections können Sie dann miteinander verbinden, etwa um Blogbeiträge Ihren Autoren zuzuordnen.

Webflow Editor

Wenn Sie in bestehenden „Collections“ Ihrer veröffentlichten Websites neue Inhalte hinzufügen oder Content auf statischen Seiten bearbeiten möchten, können Sie dafür den Webflow-Editor verwenden. Jenen erreichen Sie (sobald Sie Ihre Website veröffentlicht haben) per Klick auf das Webflow-Logo oben links, das einem Hamburger-Menü weicht.

Im Editor lassen sich Texte direkt bearbeiten und Bilder per Mausklick hochladen. So können Sie inhaltliche Änderungen vornehmen, ohne sich durch komplizierte Backend-Systeme plagen zu müssen.

Auch Blogs lassen sich im Editor anlegen und verwalten, wobei Webflow alle wichtigen Funktionen abdeckt. Wenn Sie ein Team an Redakteuren haben, bietet Webflow sogar Kollaborationstools und Sie können nachvollziehen, wer woran arbeitet.

Integrationen mit Zapier

Einen richtigen App-Marktplatz gibt es bei Webflow nicht, dafür können Sie via Zapier tausende Drittanbieter-Integrationen einbinden.

Das Zusammenspiel aus Webdesign und Content-Management macht Webflow zu einem weitaus mächtigeren Tool als die meisten Homepage-Baukästen dieser Testreihe. Seiner Zielgruppe ermöglicht der leistungsstarke Hybrid-Service, im Handumdrehen und in Eigenregie dynamische Websites mit zahlreichen Features zu erstellen, die ohne die Assistenz-Tools eine Mammutaufgabe wären.

Viele Dinge, die mit weniger technischen Homepage-Baukästen wesentlich einfacher wären – das Erstellen mehrsprachiger Websites beispielsweise – sind bei Webflow dafür recht kompliziert. Um die Möglichkeiten des Dienstes auszuschöpfen, ist also ein gewisses Level an Expertise notwendig. Wer diese nicht mitbringt, ist bei der Konkurrenz besser aufgehoben.

Webflow stellt Nutzern mehr als 500 Templates zur Verfügung, von denen 45 völlig kostenlos sind. Die Kosten für Premium-Templates variieren stark – zwischen 19 und 149 USD. Es gibt Schablonen für alle möglichen Website-Typen: Portfolios, Blogs, Events, Dienstleistungen und mehr. Je nach Art der Website sind Features wie dynamische Seiten mit CMS oder Shops, in die Sie nur noch Produkte einfügen müssen, bereits voreingestellt.

Die Wahl eines Templates bindet Sie aber nicht an einen Look, der wie bei anderen Homepage-Baukästen manchmal alles gleich aussehen lässt. Webflow-Templates sind auf Flexibilität ausgelegt und geben Ihnen oft bereits zu Beginn die Wahl zwischen verschiedenen Layouts.

Viel Gestaltungsfreiheit

Im Template selbst können Sie im Designer dann so gut wie alle Elemente der vorgefertigten Website bearbeiten: Farbe, Hintergrund, Effekte, Positionen, Schriftgröße, etc. Anders als bei anderen Baukästen benötigen Sie allerdings ein gewisses Auge für Design, denn im komplexen Editor können Sie wirklich jeden Winkel der Website Ihren Wünschen anpassen.

Die meisten Anpassungen führen Sie mit dem Design-Werkzeugkasten rechts durch, wo Sie beispielsweise verschiedene Layouts für Ihre Container wählen, die Ausrichtung von Elementen bearbeiten oder Effekte hinzufügen.

Etwas schade ist die fehlende Einbindung von Stockfoto-Anbietern, wie es sie bei vielen anderen Website-Baukästen gibt. An Bild- und Videomaterial hat Webflow von sich aus nicht allzu viel zu bieten.

Wieder gilt: Wer Talent für Webdesign und ein Verständnis für die Grundlagen des Programmierens bereits mitbringt, bekommt seiner Kreativität von Webflow kaum Grenzen gesetzt.

Ein weiteres Flaggschiff von Webflow ist die E-Commerce-Seite des Hybrid-Dienstes. Wenn Sie Ihrer Website einen Online-Shop hinzufügen, erstellt das CMS automatisch neue Collections für Produkte und Kategorien.

Eine Art Tutorial führt Sie zudem Schritt für Schritt zum fertigen Online-Shop. Webflow erklärt Ihnen, welche Angaben Sie machen und welche Elemente Sie hinzufügen müssen, um einen voll funktionsfähigen Shop zu erhalten.

Im Produktmenü können Sie mit wenigen Klicks neue Produkte hinzufügen, die Sie Ihren manuell erstellten Kategorien zuweisen. Weitere Felder gibt es für Produktbilder, Maße, Steuerangaben, Bestandsverfolgung und mehr. Toll ist, dass Sie nicht nur physische Produkte, sondern auch digitale Produkte oder Dienstleistungen anbieten können. Produktvarianten sind natürlich ebenfalls möglich.

Von Produkten und Kategorien bis zu benutzerdefinierten Einkaufswägen und Checkout-Optionen: Webflow ermöglicht seinen Nutzern ein Ausmaß der Kontrolle, das in anderen CMS-Systemen mit entsprechenden Shop-Erweiterungen weitaus mehr Arbeit erfordert.

Insgesamt erfindet Webflow das Rad nicht neu, doch die bequeme Einbindung in den eigenen Hybrid-Service macht die Erstellung eines vollwertigen Shop-Systems ist im Vergleich zu anderen Baukästen vielfältiger, im Vergleich zu anderen CMS weniger aufwendig.

Etwas mehr drin wäre beim Marketing: Sie können Rabatte erstellen, doch umfangreichere Marketing-Features oder E-Mail-Marketing sind nicht dabei. Dafür lohnt sich natürlich ein Blick zu den vielen Integrationen und Drittanbieter-Apps.

SEO & Analytics

SEO-Funktionen sind bei Webflow direkt in den Editor gebaut, sodass keine externen Plugins benötigt werden. Dort können Sie alle relevanten Einstellungen, beispielsweise zu Metatiteln und Beschreibungen, vornehmen.

Auch die Einbindung externer Analytics- und Marketing-Tools wie Google Analytics, Facebook Pixel, Matomo, Hotjar, Zapier oder Integromat funktioniert problemlos.

Die Webflow University setzt einen neuen Standard für Support-Bereiche, die sich an Autodidakten und Selbsthelfer richten. In dieser Online-Universität warten Hunderte Kurse und Videos, sinnvoll in aufeinander aufbauende Lektionen unterteilt, mit denen Sie nach und nach die Funktionen von Webflow, aber auch allgemeine Prinzipien des Webdesigns und Programmierens kennenlernen können.

Wenn Sie doch einmal persönliche Hilfe benötigen, können Sie ein Support-Ticket aufmachen. Das Webflow-Team ist von Montag bis Freitag 12 Stunden am Tag aktiv und gibt sein Bestes, sich innerhalb von 24 bis 48 Stunden zu melden.

Im Test erhielten wir eine Antwort nach rund sieben Stunden. Jene war ausführlich und personalisiert: Der Mitarbeiter nahm sich Zeit, auf jede unserer Fragen einzugehen und Beispiele zu nennen.

Ein Live-Chat wäre natürlich wie immer schön, aber die exzellente Webflow University und hilfsbereite Support-Mitarbeiter machen Webflow trotzdem zu einem Vorreiter in Sachen Kundensupport.

Gratis basteln und fürs Hosting bezahlen: Nach diesem bewährten Prinzip operiert auch Webflow. Sie können kostenlos zwei Projekte auf Webflow-Subdomains veröffentlichen, alles Weitere kostet.

Ganz allgemein unterscheidet Webflow zwischen Tarifen für Seiten und Accounts. Bei Ersteren bezahlen Sie pro Projekt, also für jede Website, bei Letzteren für Ihren Gesamt-Account mit mehreren Projekten.

In beiden Preisschichten gibt es wiederum unterschiedliche Tarife, aufgeteilt in jeweils drei Website- und E-Commerce-Tarife bei den Seiten-Tarifen, sowie drei individuelle und zwei Team-Pläne bei den Account-Tarifen.

Für Unternehmen gibt es schließlich besondere Enterprise-Tarife, die individuell abgestimmt werden.

Die Preisstruktur von Webflow wirkt etwas kompliziert und die Unterschiede und Gemeinsamkeiten der verschiedenen Tarife könnten etwas besser erklärt werden. Eine aktuelle Preisübersicht finden Sie hier:

Wichtig ist natürlich auch, wie Webflow preislich im Vergleich zu anderen Homepage-Baukästen dasteht. Um die Tarife vergleichbar zu machen, haben wir alle Anbieter aus unserem Test in der folgenden Tabelle anhand ihres jeweils günstigsten werbefreien Tarifs inklusive Domain verglichen. Webflow ist dabei der teuerste im Bunde:

Eine Geld-zurück-Garantie bietet Webflow leider nicht.

Code-Barrieren brechen bedeutet für Webflow nicht, so zu tun, als wären Websites nicht das Ergebnis komplexer Programmier-Vorgänge. Im Gegenteil: Webflow visualisiert diese Vorgänge, um sie so eng mit dem Frontend zu verbinden wie möglich.

Das bedeutet, dass Webflow für Anfänger und solche, die dem Programmieren aus dem Weg gehen möchten, nur bedingt geeignet ist. Doch für seine eigentliche Zielgruppe ist Webflow als Hybrid-Baukasten überaus nützlich und findet eine elegante Lösung, Design und Coding zu kombinieren.

Den Design-Möglichkeiten sind kaum Grenzen gesetzt, die E-Commerce-Einbindung ist lückenlos und Ihre fertige, dynamische Website können Sie und Ihr Team mit einem leistungsstarken CMS verwalten. Der gerade anfangs steilen Lernkurve wirkt das Programm mit der hauseigenen Lernplattform Webflow University entgegen.

WordPress wurde bereits oft herausgefordert – und konnte sich bisher immer behaupten. Webflow schickt sich an, dem CMS-Marktführer echte Konkurrenz zu machen.

Ein einziges Review kann unmöglich auf alle Facetten eines so komplexen Programms wie Webflow eingehen. Deshalb lohnt sich der Blick zu Bewertungsportalen, wo Kunden basierend auf ihren umfangreichen Erfahrungen täglich ihre Meinung zum Programm kundtun.

Weil sich Webflow als WordPress-Konkurrent verkauft, ist das bekannteste aller Content-Management-Systeme natürlich die offensichtlichste Alternative.

Ansonsten steht Webflow als Hybrid zwischen CMS und Baukasten aber ziemlich alleine da. Wer kein Interesse an Coding und Webdesign hat, ist mit weniger komplexen Homepage-Baukästen besser bedient. Hier konnte uns unser Testsieger Wix besonders überzeugen.

Die besten Alternativen finden Sie hier: