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.

Webflow in wenigen Worten beschreibe ich so: Es ist eine vielseitige Plattform zur Erstellung professioneller Webseiten jeder Art. Diese werden visuell im Browser programmiert, wodurch man alle Änderungen in Echtzeit sieht und überprüfen kann, bevor sie live gehen.

Im Rahmen ihrer jährlichen Konferenz „Webflow Conf“ im Oktober 2024 hat Webflow bekannt gegeben, dass sich das Unternehmen künftig als „Website Experience Platform“ (WXP) positioniert. Dieser Begriff war bisher in der Branche nicht gebräuchlich, ist aber sehr passend, denn Webflow war auch davor schon lange nicht mehr nur eine „Visual Development Platform“ oder ein Webseiten-Baukasten.

Als jemand, der täglich mit Webflow arbeitet, ist mir aufgefallen, dass die Plattform in den letzten Jahren spürbar an Fahrt aufgenommen hat: Die Updates erscheinen nicht nur häufiger, sondern haben auch zunehmend hohe Relevanz. Insgesamt entwickelt sich Webflow immer mehr zu dem Go-to-Tool, das man für eine neue Website nutzen sollte. Im Folgenden gehe ich auf neue, aber auch auf lang bewährte Funktionen und Möglichkeiten ein.

Hier eine kurze Einführung als Video in unter zwei Minuten. Das Video stammt aus dem Jahr 2023, weshalb darin noch der Begriff „Visual Development Platform“ verwendet wird. Er beschreibt aber nach wie vor sehr treffend, worum es bei Webflow geht:

Die vier größten Vorteile von Webflow

1. Technischer Anspruch: Die Struktur und Verschachtelung einzelner Elemente spiegelt exakt die HTML-Struktur wieder, und angewendetes Styling wird 1:1 in CSS übersetzt, wodurch die Webseite technisch gleich hochwertig ist wie eine Webseite, die direkt als HTML- und CSS-Code geschrieben wird, ohne Einschränkungen. Das unterscheidet Webflow von klassischen Website-Baukästen und macht die Webseite leistungsfähig, skalierbar und dadurch zukunftssicher.
2. Design: Websites mit einem hohen Designanspruch lassen sich dank der visuellen Oberfläche pixelgenau und effizient umsetzen. Die starken Animations-Tools ermöglichen es zudem, Bewegung rein zu bringen und die Webseite modern erscheinen zu lassen.
3. Content-Management-System: Das Webflow-CMS übernimmt die Rolle einer Datenbank. Inhalte, die derselben Struktur folgen, können massenhaft gespeichert und dynamisch ins Webdesign integriert werden. Klassische Beispiele sind Blogartikel, häufig gestellte Fragen oder Testimonials.
4. Sonstige Funktionen: Viele Hürden, die bei Website-Baukästen oder individueller Programmierung auftreten, sind in Webflow schon integriert und direkt nutzbar: Mehrsprachigkeit, SSL-Zertifikate, SEO-Funktionen, Kollaboration, Hosting und vieles mehr.

An wen richtet sich Webflow?

Webflow richtet sich an Einzelpersonen genau wie an internationale Konzerne wie beispielsweise Dell Technologies, Rakuten SL oder Dropbox Sign, die tatsächlich alle bereits Webflow verwenden.

Als Beispiel eine Erfolgsgeschichte von Lattice:

‍

Webflow richtet sich zudem an Nutzer mit den unterschiedlichsten Kenntnissen und Anforderungen und stellt je nachdem andere oder modifizierte Tools bereit. So können Webseiten nicht nur gestaltet und entwickelt, sondern auch flexibel erweitert, optimiert und analysiert werden.

Dadurch kann beispielsweise ein Copywriter eigenständig neue Blogposts erstellen und publizieren. Ein Webflow-Entwickler setzt Webdesigns effizient in responsive Websites um und sorgt dabei für sauberen, strukturierten Code. Ein Marketer baut in kürzester Zeit ansprechende Landingpages mit Komponenten (bzw. deren Instanzen), um Kampagnen zu launchen. Ein E-Commerce-Manager verwaltet Produkte. Selbst ein Einzelunternehmer kann mit einem Webseiten-Template und wenigen Anpassungen eigenständig seine Unternehmenswebseite erstellen und in kürzester Zeit online gehen.

Dabei empfiehlt sich die Nutzung der verschiedenen Seitenrollen und Zugriffsrechte, damit Nutzer nur die Tools freigeschaltet bekommen, die sie tatsächlich benötigen und sicher bedienen können. Andernfalls kann das schnell überfordern oder im schlimmsten Fall dazu führen, dass Bereiche der Webseite unbeabsichtigt beschädigt werden.

Grundsätzlich ist das Aufsetzten einer Webflow-Webseite ohne Webflow-Entwickler/in nicht empfohlen. Ist die Seite jedoch von Fachleuten strukturiert vorbereitet und mit passenden Bausteinen visuell programmiert, können Inhalte anschließend selbstständig angelegt, analysiert, optimiert und gepflegt werden.

Was es bei der Erstellung einer neuen Webseite in Webflow zu beachten gibt

Um in Webflow eine Webseite anzulegen, erstellt man zunächst einen Account auf www.webflow.com und wird anschließend auf das Dashboard weitergeleitet, das eine Übersicht aller Projekte im eigenen Workspace zeigt. Ab diesem Zeitpunkt lohnt es sich bereits, eine/n Webflow Entwickler/in einzubeziehen. Zwar gibt es die Möglichkeit, direkt eine leere Seite zu erstellen, jedoch ist das in der Regel nicht die Vorgehensweise, die für die effiziente Umsetzung empfehlenswert ist. Stattdessen ist die Arbeit mit einem Framework oder einem Template üblich.

Ein Framework als Grundlage einer Webflow-Webseite

Ein Framework ist eine Art Grundgerüst, auf dem eine Webseite aufbaut. In Webflow bedeutet das, dass bestimmte Strukturen, CSS-Klassen und manchmal auch Komponenten vordefiniert sind, die in fast jeder Webseite zur Anwendung kommen. Einige Beispiele sind Überschriften, Farben und Abstände, oder ein System zur Nutzung von Spalten.

Es geht dabei nicht darum, ein Design vorgegeben zu bekommen, sondern das Webdesign, welches man umsetzen möchte, schnell und sauber in Code übersetzen zu können. Denn mit einem Framework muss man nicht jedes mal bei Null beginnen und sorgt dafür, dass die Website einheitlich, übersichtlich und leicht zu pflegen bleibt. Eigene Strukturen und Styles (CSS-Klassen) kommen dann auf das Grundgerüst dazu.

Es erleichtert auch die Übergabe an eine/n andere/n Entwickler/in: denn Frameworks haben Dokumentationen online einsehbar, und vielleicht kennt die andere Person das Framework schon, sodass sie sich nicht lange einarbeiten muss.

Statt ein leeres Projekt in Webflow zu erstellen geht man also auf die Webseite des Framworks und findet dort in der Regel einen Button, der beispielsweise "Clone Styles" heißt. Dieser führt zu einem Webflow-Projekt, welches man dann kostenlos in den eigenen Workspace kopieren und als Grundlage für die neu zu erstellende Webseite nutzen kann.

Die Nutzung von Frameworks macht für jede Webseite Sinn. Bei Kataloop nutzen wir für Webseiten das Framework Mast, welches übrigens auch Webflow selbst verwendet.

Die Vor- und Nachteile von Frameworks zusammengefasst

Vorteile: Die Umsetzungszeit einer Webseite wird beschleunigt und sorgt für ein strukturiertes HTML und CSS. Das beeinflusst auch die Performance der Webseite. Es vereinfacht zudem die Einarbeitung anderer Personen in das Projekt.

Nachteile: Die Implementierung eines Frameworks ist nachträglich nicht mehr, oder nur noch stark eingeschränkt möglich, da man in Webflow keine Variablen von einem Projekt in ein anderes Projekt kopieren kann.

Ein Template als Grundlage einer Webflow-Webseite

Eine weitere Möglichkeit besteht darin, ein Webseiten-Template aus dem Webflow Marketplace als Ausgangspunkt für die eigene Seite zu verwenden. Auch Templates können auf einem Framework basieren, enthalten darüber hinaus jedoch bereits viele vordefinierte Abschnitte, Layouts und Seiten. Der Gedanke dahinter ist, dass man im Wesentlichen nur noch Farben, Schriften, Texte und Bilder austauscht.

Das führt zu einem grundlegend anderen Workflow als bei professionellen, skalierbaren Unternehmenswebseiten. Während sich das Webdesign dort an das anpasst, was das Unternehmen kommunizieren möchte, muss bei einem Template geprüft werden, ob sich die gewünschten Inhalte in die bereits vorgegebene Struktur des Template-Designs einfügen lassen. Man könnte also sagen, dass der Prozess umgekehrt ist.

Bei dieser Herangehensweise wird also die visuelle Hülle beurteilt. Das führt auch dazu, dass der zugrunde liegende Code ein wenig vergessen wird. Es kann dann passieren, dass die Struktur unnötig kompliziert ist. Das wiederum macht Änderungen schwierig, besonders dann, wenn später doch neue Abschnitte oder ganze Seiten auf der Webseite hinzugefügt werden sollen.

Um ein Template zu nutzen sucht man sich eines im Marketplace aus und hat dann (ggf. nach der Bezahlung) die Möglichkeit, dieses in einen der Workspaces zu kopieren, zu denen man Zugriff hat, wie zum Beispiel den eigenen.

Die Vor- und Nachteile von Templates zusammengefasst

Vorteile: Wenn das Template alle benötigten Abschnitte und Seiten enthält und man nur Texte und Bilder anpassen möchte, lässt sich eine Webseite mit wenig Webflow-Erfahrung und möglicherweise ohne oder mit nur wenig Unterstützung durch eine/n Webflow-Entwickler/in veröffentlichen.

Nachteile: Die Einarbeitung in die Struktur des Templates kostet Zeit, und möglicherweise ist das HTML und CSS nicht so sauber und effizient aufgebaut, wie es sein könnte. Dadurch werden spätere Anpassungen oft aufwendiger als nötig. Langfristig spart man also keine Zeit, sondern investiert mehr davon. Wenn bereits Personen ohne HTML- oder CSS-Kenntnisse Änderungen vorgenommen haben, kann sich das Problem so weit verschärfen, dass ein Neuaufsetzen der Webseite empfehlenswert wird. Hinzu kommt, dass auch andere Unternehmen dasselbe Template verwenden könnten.

Welche Inhalte kann ich auf meiner Webflow-Webseite selber ändern?

Kurz gesagt: Wenn Sie eine professionelle Webseite wünschen, jedoch keine Kenntnisse in HTML und CSS haben, sollten Sie nur textliche Inhalte auf Ihrer Webflow-Webseite ändern und mit vordefinierten Bausteinen arbeiten (Instanzen, CMS-Einträge und Seiten-Templates).

Kann ich Texte auf meiner Webflow-Webseite ändern?

Ja! Und das ist auch ausdrücklich gewünscht. Auch in mehreren Sprachen, sofern Ihre Webseite mehrsprachig aufgesetzt ist.

Kann ich Bilder auf meiner Webflow-Webseite ändern?

Jein. Wenn Sie die folgenden Fragen nicht beantworten können, würde ich empfehlen, sich mit diesen Themen zunächst detailliert auseinanderzusetzen, oder die Bilder von einer Fachperson einsetzen zu lassen:

• Was ist Retina und wie funktioniert es im Web?
• Was ist der Unterschied zwischen WebP, JPG und PNG und wann kommt welches Format zum Einsatz?
• Was ist ein guter Kompromiss zwischen Dateigröße und Qualität?
• Falls KI- oder Suchmaschinenergebnisse für Sie relevant sind: Was sind Alt-Texte und was gibt es bei ihnen zu beachten?

Zwar erzeugt Webflow automatisch komprimierte Versionen Ihres Bildes, dennoch basieren diese auf der ursprünglichen Datei, und auch das Original kann weiter ausgespielt werden. Ist dieses Original sehr groß, kann das zu längeren Ladezeiten führen. Das wirkt sich negativ auf die Nutzererfahrung, das Ranking in Suchmaschinen und die Performance Ihrer Webseite aus.

Dazu ein älteres, aber nach wie vor sehr relevantes Video von Webflow:

Kann ich Styles in Webflow ändern, zum Beispiel einen Button farblich verändern oder ein Bild links statt rechts positionieren?

Neben eventuell vorhandenen Corporate-Design-Richtlinien, die beachtet werden müssen, sollten Designanpassungen auch technisch sehr bewusst vorgenommen werden. Denn dadurch, dass Änderungen im Webflow Style-Panel 1:1 in CSS übersetzt werden, sollten Sie wissen, wie CSS-Klassen im Allgemeinen bzw. speziell in Webflow funktionieren.

Die Zugänglichkeit zur einfachen Editierung von CSS ist hier einerseits ein Vorteil, andererseits ein Nachteil: Denn das Style-Panel lädt geradezu dazu ein, auf bestimmte Einstellungen zu klicken und Änderungen vorzunehmen.

Aber Achtung! Wenn Sie nicht genau wissen, wie sich diese Änderungen auswirken, könnten Sie Bereiche Ihrer Webseite kaputt machen.

Nehmen wir beispielsweise an, Sie möchten den Abstand zwischen einem Text und einem Bild verändern. Sie klicken auf das Bild und ändern bei „Spacing“ die untere Null in „100“. In der visuellen Ansicht sieht das Ergebnis für Sie gut aus, und Sie publizieren die Änderung auf Ihre Live-Webseite. Auch online sieht das Ergebnis gut aus. Was Sie zum Beispiel nicht gesehen haben:

• Dass die CSS-Klasse, die Sie verändert haben, auch auf zehn weitere Bilder angewendet ist, die über die Webseite verteilt platziert sind. An den anderen Stellen sieht das Design nun nicht mehr richtig aus, da Elemente zu weit auseinandergerückt oder teilweise abgeschnitten dargestellt werden.
• Dass Sie nicht im Base-Breakpoint (Desktop) gearbeitet haben, sondern im nächstgrößeren Monitor („1280px and above“), und die Änderung auf den meisten Computern und mobilen Geräten gar nicht vorgenommen wurde. Oder dass Sie zwar im Base-Breakpoint gearbeitet haben, der Abstand auf Mobile jedoch übernommen wurde und nun viel zu groß wirkt.
• Dass Sie eine Pixel-Angabe gemacht haben, obwohl Ihre Webseite auf relativen Einheiten wie Prozent oder REM basiert.

Die gute Nachricht: Auch wenn Sie keine HTML und CSS-Kenntnisse haben, können diese Änderungen für Sie möglich werden. Ein/e Webflow Entwickler/in könnte sogenannte Komponenten für Sie erstellen, die verschiedene Versionen anbieten: sogenannte Komponenten-Varianten. Dabei achtet diese Person darauf, dass von der CSS-Struktur alles sauber angelegt ist und das Design auch auf allen Breakpoints funktioniert. Mehr dazu unter: Komponenten und Seiten-Templates.

Das Webflow-CMS für wiederkehrende Inhalte wie Blogartikel

Das integrierte Content-Management-System (CMS) von Webflow ist ein Bereich innerhalb der Plattform, das als Ersatz für eine Datenbank dient. Hier können Sie massenhaft Daten abspeichern und dynamisch auf der Webseite wieder ausgeben. Es ist ein Formular, das Sie immer und immer wieder ausfüllen können und das verschiedene Elemente wie Texte, Bilder, Videos, Zahlen und vieles mehr enthält. 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 beispielsweise ein Blogartikel-Template umsetzen, ähnlich wie die Grundlage dieser 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. Siehe: Beispiel einer CMS-Collection inkl. CMS Fields.

Sobald Ihr CMS-Template fertiggestellt ist, können Sie oder Ihr Team sehr einfach beliebig viele Artikel (CMS Items) erstellen und diese jeweils unter individuellen URLs veröffentlichen. Siehe: Erstellung und Bearbeitung von CMS Items.

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 Testimonials, Abschnitte mit häufig gestellten Fragen oder die Vorstellung von Teammitgliedern. 

Beispiel einer CMS Collection inkl. CMS Fields

Auch dieser Blog-Artikel basiert auf einer Webflow CMS-Collection und beinhaltet beispielsweise die folgenden Elemente (CMS Fields):

• Name (Pflichtangabe): In diesem Fall "Was ist Webflow? Eine umfassende Übersicht über Webflow und seine wichtigsten Features".
• Slug (Pflichtangabe): Der hinterste Teil der URL. Jeder "Formulareintrag" (CMS item) kann nämlich später unter einem eigenen Link erreichbar sein, falls das gewünscht ist. Im Falle von Blogposts macht das definitiv Sinn. Im Falle von Testimonials, FAQs o.ä. werden die CMS items in der Regel in andere Seiten integriert, die bereits eine URL haben.
• Header image: Das Hauptbild eines Blogartikels.
• Hero video MP4, WEBM & Poster (jpg): Falls ich statt einem Bild im oberen Bereich des Artikels ein Video zeigen möchte, kann ich hier Links zu meinen Medien eintragen, die für die Ausgabe benötigt werden. Dabei arbeite ich primär mit mp4-Dateien, hinterlege als sogenanntes “Fallback” jedoch noch eine webm-Datei und für die Vorschau oder Ladeanzeige zusätzlich ein sogenanntes “Poster” im JPG-Format. Diese integriere ich dann dynamisch in ein Element mit individueller Programmierung innerhalb meines Blogartikels, damit sie ausgespielt werden. Der Grund warum ich die Videodateien nicht direkt in meinen CMS-Eintrag hochlade ist, dass Webflow dies aktuell noch nicht ermöglicht (Stand: Oktober 2025). Der Vorteil an Webflow aber ist, dass es trotzdem immer eine Lösung gibt.
• Image caption: Die Bildunterschrift des Hauptfotos/-videos. Dieser ist als sogenannter "rich text" angelegt, damit er Links enthalten kann.
• Excerpt: Kurze Beschreibung des Artikels für die Verlinkung zum Artikel auf anderen Seiten.
• Category 1 & 2: Kategorien, die auf den Artikel zutreffen.
• Rich text: Der gesamte Artikeltext mit beispielsweise Listen, Fotos und Videos
• u.v.m.

Erstellung und Bearbeitung von CMS-Inhalten

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, welche ein/e Webflow Entwickler/in aufgesetzt hat. In der visuellen Ansicht können Sie direkt auf das Element klicken, das Sie ändern möchten, und Ihre Anpassungen innerhalb der Seitenstruktur vornehmen. In der Formularansicht verpassen Sie definitiv keine Einträge, und es ist weniger fehleranfällig.

Schritt-für-Schritt-Anleitung für die Erstellung und Bearbeitung von CMS-Inhalten in der Formularansicht

‍

Schritt-für-Schritt-Anleitung für die Erstellung und Bearbeitung von CMS-Inhalten in der visuellen Ansicht

‍

‍

Der Edit-Mode zur Bearbeitung von Inhalten 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.

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.

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.