If you want to find out what Webflow is capable of and whether it is the right platform for your next company website, you are in the right place. In this article, I provide a comprehensive overview and introduce the most important features.

In a few words, I would describe Webflow like this. It is a versatile platform for creating professional websites of any kind. These are built visually in the browser, allowing you to see and review all changes in real time before they go live.

At its annual Webflow Conf in October 2024, Webflow announced that the company will position itself as a “Website Experience Platform,” or WXP. This term was not previously common in the industry, but it fits very well, because even before that, Webflow had long been more than just a “Visual Development Platform” or a website builder.

Webflow is a versatile platform for creating professional websites of any kind.

As someone who works with Webflow on a daily basis, I have noticed that the platform has gained significant momentum in recent years. Updates are not only released more frequently, but are also increasingly relevant. Overall, Webflow is steadily evolving into the go to tool to use when building a new website. Below, I cover both new features and long established capabilities and use cases.

The video is from 2023, which is why it still uses the term “Visual Development Platform.” However, it still describes very accurately what Webflow is all about:

The four biggest advantages of Webflow

1. Technical foundation: The structure and nesting of individual elements exactly reflect the underlying HTML structure. Applied styling is translated one to one into CSS, resulting in a website that is technically on the same level as one written directly in HTML and CSS, without limitations. This clearly sets Webflow apart from classic website builders and makes websites powerful, scalable, and future ready.
2. Design: Websites with high design standards can be built precisely and efficiently thanks to the visual interface. Powerful animation tools also make it easy to add motion and create a modern, polished experience.
3. Content management system: The Webflow CMS acts as a database. Content follows the same structure and can be stored at scale and dynamically integrated into the web design. Classic examples include blog posts, frequently asked questions, or testimonials.
4. Additional features: Many challenges that usually arise with website builders or custom development are already built into Webflow and ready to use. These include multilingual support, SSL certificates, SEO and AEO features, collaboration tools, hosting, and much more.

Who is Webflow for?

Webflow is used by individuals as well as by international companies such as Dell Technologies, Rakuten, and Dropbox Sign, all of which are already working with Webflow in real world production.

As an example, here is a success story from Lattice:

‍

Webflow also caters to users with a wide range of skill levels and requirements, providing different or adapted tools depending on their needs. As a result, websites can not only be designed and developed, but also flexibly extended, optimized, and analyzed.

Webflow is designed for individuals as well as international enterprises and users with a wide range of skill levels and requirements.

As a result, a copywriter can independently create and publish new blog posts. A Webflow developer efficiently translates web designs into responsive websites while ensuring clean, well structured code. A marketer can build compelling landing pages with components and their instances in a very short time to launch campaigns. An ecommerce manager manages products. Even a solo entrepreneur can use a website template with just a few adjustments to create a company website independently and get it online quickly.

In this context, it is recommended to use the different access permissions so that users are only given access to the tools they actually need and can use safely. Otherwise, this can quickly become overwhelming or, in the worst case, lead to parts of the website being unintentionally damaged.

In general, setting up a Webflow website without a Webflow developer is not recommended. However, if the site is properly structured by professionals and visually built using suitable components, content can later be created, analyzed, optimized, and maintained independently.

What to consider when creating a new website in Webflow

To create a website in Webflow, you first create an account at www.webflow.com and are then taken to the dashboard, which shows an overview of all projects in your workspace. At this point, it already makes sense to involve a Webflow developer. While it is possible to create a completely blank site, this is generally not the recommended approach. Instead, working with a framework or a template is common practice.

A framework as the foundation of a Webflow website

A framework is a kind of foundational structure on which a website is built. In Webflow, this means that certain structures, CSS classes, and sometimes components are predefined and used in almost every website. Examples include headings, colors and spacing, or a system for working with columns.

This is not about being given a predefined design, but about being able to translate the web design you want to implement into clean code quickly and efficiently. With a framework, you do not have to start from scratch every time, which helps keep the website consistent, well structured, and easy to maintain. Custom structures and styles, such as CSS classes, are then added on top of this foundation.

It also makes handoff to another developer easier, since frameworks usually have documentation available online, and the other person may already be familiar with the framework, reducing the need for extensive onboarding.

A framework does not provide a prebuilt web design, but instead helps translate a custom designed website into clean code quickly and efficiently.

Instead of creating an empty project in Webflow, you typically go to the framework’s website, where you will usually find a button labeled something like “Clone Styles.” This takes you to a Webflow project that you can then copy into your own workspace for free and use as the foundation for the new website.

Using frameworks makes sense for any website. At Kataloop, we use the Mast framework for websites, which is also used by Webflow itself.

The advantages and disadvantages of frameworks summarized

Advantages: The implementation time of a website is reduced and results in well structured HTML and CSS. This also has a positive impact on website performance. In addition, it makes it easier for other people to get familiar with the project.

Disadvantages: Implementing a framework at a later stage is either not possible or only possible to a very limited extent, because in Webflow variables cannot be copied from one project to another.

A template as the foundation of a Webflow website

Another option is to use a website template from the Webflow Marketplace as the starting point for your own site. Templates can also be based on a framework, but in addition they already include many predefined sections, layouts, and pages. The idea is that you mainly just replace colors, fonts, text, and images.

This leads to a fundamentally different workflow compared to professional, scalable company websites. In those cases, the web design adapts to what the company wants to communicate. With a template, however, it must be evaluated whether the desired content fits into the predefined structure of the template design. You could therefore say that the process is reversed.

With this approach, the visual shell is evaluated first. As a result, the underlying code can be somewhat overlooked. This can lead to an unnecessarily complex structure, which in turn makes changes difficult, especially when new sections or entire pages need to be added later on.

To use a template, you select one from the Marketplace and then, after payment if required, have the option to copy it into one of the workspaces you have access to, such as your own.

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. Sie können textliche Anpassungen direkt in Webflow vornehmen, auch in mehreren Sprachen, sofern Ihre Webseite mehrsprachig aufgebaut ist. Im weiteren Verlauf dieses Blogartikels gehe ich näher darauf ein, wo sich Texte befinden und wie Sie diese bearbeiten.

Einschränkungen gibt es nur dort, wo das Design beispielsweise eine bestimmte Textlänge vorsieht, Sie diese aber verlängern möchten, oder wo Texte zu Animationszwecken ausgeblendet sind. Sprechen Sie dann mit Ihrer/Ihrem Webflow-Entwickler/in.

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.

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

Das Style-Panel lädt geradezu dazu ein, mit verschiedenen Einstellungen zu experimentieren. Wenn Sie jedoch nicht genau wissen, welche Auswirkungen diese Änderungen haben, können Sie dabei unwissentlich Bereiche Ihrer Webseite beschädigen.

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. So wird die farbliche Änderung des Buttons oder das Verschieben des Bildes von rechts nach links mit einem Klick möglich. Mehr dazu unter: Komponenten und Seiten-Templates.

Kann ich Animationen auf meiner Webseite ändern?

Für die Veränderung von Animationen auf Ihrer Webflow-Webseite ist eine gewisse Lernkurve erforderlich, ähnlich wie bei der Veränderung von Styles.

Da Animationen oft aus mehreren miteinander verknüpften Schritten bestehen, sollten Änderungen nur vorgenommen werden, wenn Sie genau wissen, welche Elemente beteiligt sind und wie die Auslöser funktionieren. Selbst kleine Anpassungen können sonst unbeabsichtigte Auswirkungen auf andere Bereiche der Webseite haben oder bestehende Abläufe stören. Daher empfehle ich, Änderungen an Animationen nur von eine/m Webflow-Entwickler/in vornehmen zu lassen.

Weitere Informationen unter „Webflow Interactions“.

Die drei Modi „Design“, „Edit“ und „Build“ zur Bearbeitung von Inhalten in Webflow

Sobald der Edit- oder Build-Mode aktiviert ist, werden die Bearbeitungsmöglichkeiten im Herzstück der Plattform, dem Webflow Designer, eingeschränkt.

Insgesamt gibt es die folgenden drei Modi:

• Design: Ermöglicht visuelle Programmierung und uneingeschränkte Bearbeitungen.
• Build: Erlaubt die Erstellung von neuen Seiten nur mit Seiten-Templates und der Nutzung von Komponenten. Inhalte wie Bilder und Texte können ebenfalls bearbeitet werden.
• Edit: Erlaubt ausschließlich die Bearbeitung von Inhalten wie Bildern und Texten.

Nutzer, die nicht über HTML- und CSS-Kenntnisse verfügen, sollten sich immer im Build- oder Edit-Mode befinden.

Die Einschränkung von Funktionen hat viele Vorteile, denn wie ich bereits in diesem Artikel und im Artikel „Website-Builder, WXP oder individuelle Entwicklung (...)” erklärt habe, ist Ihre Webseite vor allem eines: Code. Haben wir im Webflow Designer nicht den Edit-/Build-Mode, sondern den Design-Mode aktiviert, kann die Webseite visuell in HTML, CSS und JavaScript programmiert werden. Wie bereits erwähnt sollten Sie diese Änderungen nicht vornehmen, wenn Sie dazu nicht über ausreichend Kenntnisse verfügen.

Hier kommen der Edit-Mode oder Build-Mode in's Spiel. Dort können Sie Elemente ganz einfach anklicken und nach Bedarf bearbeiten, ohne befürchten zu müssen, die Webseite zu beschädigen (mehr dazu im nächsten Abschnitt). Die Nutzung dieser eingeschränkten Modi wird nicht nur für reguläre Seiten empfohlen, sondern auch für die nachfolgend beschriebenen CMS-Template-Seiten wie Blogartikel. Sie können ihn also dauerhaft aktiviert lassen.

Während Sie in einem Admin-Zugang immer darauf achten müssen, im Build-Mode zu bleiben, können Sie externe Bearbeiter bei der Einladung zum Projekt direkt auf einen der Modi beschränken. Dabei bekommt ein Marketer Zugriff zum Build-Mode und ein Content Editor Zugriff zum Edit-Mode:

Öffnen und Bearbeiten von Seiten in Webflow

In Webflow findet man die Liste aller Seiten im Projekt links oben unter dem Webflow-Logo (im Build-Mode) bzw. unter dem Plus-Zeichen (im Design-Mode). Dieses Panel ist auch mit dem Shortcut "P" zu erreichen.

Wenn Sie Inhalte editieren möchten, klicken Sie einfach auf die gewünschte Seite und scrollen dann auf der sich geöffneten visuellen Ansicht so weit hinunter, bis Sie die zu verändernde Stelle erreichen. Diese klicken Sie dann einfach an und nehmen anschließend Ihre Änderungen vor.

Ich empfehle weiterhin, dabei im Build-Modus und außerdem in der Desktopansicht zu arbeiten. Letztere finden Sie in Webflow oben rechts:

Wichtig zu wissen: Die visuelle Benutzeroberfläche in Webflow, in der Sie sich dann befinden, zeigt den sogenannten „Initial State“ der Webseite. Das ist der Zustand, bevor interaktive Elemente wie Tabs, Slider oder Akkordeons geklickt wurden oder sich Animationen abgespielt haben.

Um das etwas besser zu verdeutlichen, nehmen wir beispielsweise einen Slider: Sicher kennen Sie das beliebte Element, welches nacheinander Bilder und/oder Texte einblendet. Wenn dieser Slider beispielsweise fünf Ansichten („Slides“) hat, wird im Initial State, also der visuellen Ansicht, nur der erste Slide angezeigt. Die anderen vier Slides bleiben im Build-/Edit-Mode verborgen und Sie können gewünschte Änderungen nicht vornehmen.

Es könnte zudem sein, dass Elemente im „Initial State“ ausgeblendet und auf 0% Sichtbarkeit stehen, da sie später über Animationen wieder eingeblendet werden. Auch dann können Sie Elemente im Webflow Designer (also der visuellen Bearbeitungsoberfläche) nicht bearbeiten.

Die visuelle Benutzeroberfläche in Webflow zeigt den Zustand bevor interaktive Elemente geklickt wurden oder sich Animationen abgespielt haben. Eventuell ist dadurch ein Teil der Inhalte nicht sichtbar.

Da Standard-Seiten ausschließlich in dieser visuellen Ansicht bearbeitet werden, könnte es sinnvoll sein, dass Ihr/e Webflow-Entwickler/in komplexere Elemente (falls möglich) als CMS-Inhalte oder Komponenten anlegt. Diese beiden Funktionen bieten jeweils eine zusätzliche Bearbeitungsoberfläche und ermöglichen dadurch, dass auch verborgene Texte im Build- oder Edit-Mode zugänglich sind.

CMS-Inhalte haben neben der visuellen Ansicht noch die Formularansicht zur Bearbeitung verfügbar, und die Instanzen von Komponenten kann man in einem zusätzlichen Panel (auf der rechten Seite) editieren. Prüfen Sie daher, ob Inhalte bereits als CMS-Inhalte oder Instanzen angelegt wurden. Mehr dazu unter: Das Webflow-CMS für wiederkehrende Inhalte wie Blogartikel und Webflow-Komponenten.

Für die Editierung von Inhalten in einer Sprache schauen Sie unter: Weitere Sprachen auf Ihrer Webseite hinzufügen und bearbeiten.

Sollten Sie nach wie vor Ihre Inhalte nicht finden, die Sie bearbeiten möchten, sprechen Sie mit Ihrer/Ihrem Webflow-Entwickler/in. Am schnellsten ist es meistens, wenn diese Person die neuen Inhalte dann selber einsetzt. Alternativ kann geprüft werden, ob die verborgenen Inhalte in CMS-Inhalte oder Komponenten umgewandelt werden können, um die Bearbeitung zu ermöglichen. Jedoch macht das nicht in jedem Fall Sinn, da Komponenten und CMS-Inhalte manchmal auch Einschränkungen mitbringen.

Der Preview-Modus und die Veröffentlichung von Änderungen

Nachdem Sie Ihre Änderungen vorgenommen haben, können Sie vor der Liveschaltung in den anderen Ansichten wie Tablet oder Handy im Preview-Mode überprüfen, wie die Seite aussieht. Dafür klicken Sie zunächst auf den Preview-Knopf, um die Webseite zu testen. Hier lassen sich interaktive Elemente klicken und Animationen werden abgespielt, so wie sie es auch online tun würden. Schauen Sie Ihre Änderungen sorgfältig auf allen Ansichten (den sogenannten Breakpoints) durch.

Im Vorschaumodus können Sie die Breakpoints einfach durchklicken. Noch besser ist es, alle Breiten mit Hilfe des Breakpoint-Reglers durchzugehen. Dabei werden Ihnen auch Gerätelisten wie MacBook oder iPhone angezeigt, sofern Sie deren Breite erreichen. Das folgende Video zeigt, wie das geht (anhand einer Seite von Bridge of Trust, Kunde von Kataloop):

‍

Sofern alles stimmt und gut aussieht, können Sie Ihre Änderung auf Ihrer Webseite publizieren:

1. Klicken Sie auf „Publish“.
2. Klicken Sie dann auf „Publish to selected domains“.

Fertig, Ihre Änderungen sind live auf Ihrer Domain.

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 das von 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 anderen 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, welche ein/e Webflow Entwickler/in aufgesetzt hat.

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

In der Formularansicht übersehen Sie definitiv keine Inhalte, die in der visuellen Ansicht verborgen sein könnten. Auch ist es weniger fehleranfällig. Um einen neuen Eintrag in einer bestehenden CMS-Collection hinzuzufügen oder zu bearbeiten, gehen Sie wie folgt vor:

1. Sobald Sie Ihr Webprojekt geöffnet haben, klicken Sie auf „CMS“ (links oben). Dort sehen Sie eine Übersicht aller CMS-Collections, die in Ihrem Projekt existieren.
2. Klicken Sie auf die gewünschte CMS-Collection (links), zu welcher Sie neue Elemente hinzufügen oder bestehende ändern möchten.

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

In der visuellen Ansicht können Sie direkt auf das Element klicken, das Sie ändern möchten, und Ihre Anpassungen innerhalb der Seitenstruktur vornehmen, wie unter „Öffnen und Bearbeiten von Seiten in Webflow“ erklärt.

Hier ist wieder besonders wichtig: Bitte bleiben Sie im Build-/Edit-Mode, sollten Sie keine HTML-/CSS-bzw. tiefergehenden Webflow-Kenntnisse haben. Denn in der visuellen Ansicht arbeitet man direkt im Template für alle CMS Items. Das bedeutet, dass eine Änderung in der Struktur und dem Styling von Elementen sich auf alle Seiten auswirken.

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.

Weitere Sprachen auf Ihrer Webseite hinzufügen und bearbeiten 

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! Egal ob es sich um dezente Mikrointeraktionen oder aufwendige, mehrstufige Animationen handelt: mit Webflows Animations-Tools, oder der Integration von Animationen externer Tools können nahezu alle Ideen umgesetzt werden. Und das ist wichtig, denn Animationen tragen maßgeblich dazu bei, dass eine Webseite nachhaltig in Erinnerung bleibt.

Dabei bietet Webflow die folgenden Möglichkeiten:

Webflow Interactions

Animationen in Webflow werden über das sogenannte Interactions-Panel gesteuert. Dort können Sie zwischen den „Classic Interactions“ und den „Interactions with GSAP“ wählen. Mit beiden lassen sich Bewegungen, Einblendungen oder Effekte auslösen, etwa beim Scrollen, Klicken oder Laden einer Seite. Webflow schreibt das JavaScript dafür im Hintergrund.

Von einfachen Hover-Effekten bis hin zu komplexen scrollbasierten Animationen lassen diese Features eine beeindruckende Bandbreite an Möglichkeiten zu. Aus meinem Webflow-Alltag sind diese Interaktions- und Animations-Tools nicht mehr wegzudenken. Mehr Informationen finden Sie auf der Webflow-Webseite.

Animationen tragen maßgeblich dazu bei, dass eine Webseite nachhaltig in Erinnerung bleibt.

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.