Erstelle einfach eine Webseite oder Online-Shop mit Webflow. Im Gegensatz zu anderen Homepage-Baukästen, ist Webflow näher am Code, aber trotzdem noch für nicht-Programmierer geeignet. Welche tollen Möglichkeiten du damit alles hast und wie du eine Webseite erstellst, erkläre ich dir ausführlich in dieser Tutorial Serie.

In diesem Artikel schauen wir uns an, was Webflow genau ist und wie es sich von anderen Homepage Baukästen bzw. CMS System unterscheidet. Wir richten anschließend gemeinsam ein Konto ein und schauen uns die Account-Oberfläche im Detail an, wo wir darauf eingehen, wie du Projekte verwalten kannst, wie es preislich aussieht und wie man mit Vorlagen, Hilfe und verfügbaren Inspirationen umgeht. Abschließend gehen wir noch auf die Teams Funktion ein und die Account-Einstellungen. Dieser Artikel ist der erste Teil einer 4-teiligen Miniserie, welchen du dir unbedingt anschauen solltest, wenn du Webflow richtig verstehen willst. In den folgenden Teilen schauen wir uns an, wie du eine Webseite, CMS oder Online-Shop erstellen kannst.

Dieser Artikel ist Teil der Webflow Tutorial Serie.
Hier kannst du dir alle Folgen kostenlos anschauen

1. Was ist Webflow?

Webflow bietet eine einzigartige Weise, Webseite für das Internet zu erstellen. Es ist dabei eine Mischung zwischen Homepage-Baukasten, CMS und selbst programmierte Seite. Man muss um Webflow verwenden zu können nicht Code können, da du alles visuell im Editor umsetzen kannst. Hier hast du aber im Vergleich zu CMS und Homepage-Baukästen mehr Freiheiten, da du näher am Code bist. Deswegen ist der Einstieg in Webflow schwerer, auf jeden Fall für Personen, die mit Webseiten oder Designen nicht viel am Hut haben. Es bietet sich optimal für Designer an, welche zwar nicht Coden können, aber sich mit Designgrundlagen auskennen und die Mechanismen verstehen, wie eine Webseite funktioniert. Webflow bietet sich an für komplexere Online-Shops oder Webseiten, die stark individualisiert werden sollen, aber nicht von Grund auf selbst programmiert. Falls du einfach eine persönliche statische Webseite erstellen willst oder kleine Projekte umsetzen willst, bieten sich Homepage-Baukästen oder CMS System wie WordPress mehr an, da sie einfacher zu verstehen, handhaben und günstiger sind. Das heißt aber natürlich nicht, dass man das nicht auch mit Webflow machen kann. Für Designer die für mehrere Kunden Projekte umsetzen, ist es auch sehr praktisch, durch die Projekt und Team Verwaltung, welche wir uns in diesem Video noch genauer anschauen werden. Webflow ist aktuell nur in englischer Sprache verfügbar, also solltest du gewisse englische Grundkenntnisse mit bringen, um einen einfachen Start zu gewährleisten.

2. Einrichten (Account anlegen)

Wir können Webflow aktuell ausschließlich als Web-App über die offizielle Webseite am Computer verwenden. Dort können wir uns auch einen kostenlosen Account erstellen und müssen erst ab einer gewissen Projektanzahl oder bestimmte Funktionen etwas bezahlen. Über den diesen Link kommst du direkt zu der Account Erstellung. Hier kannst du dich einfach mit einem Google Konto oder per E-Mail-Adresse registrieren. Bei Letzterem musst du anschließend auch ein Passwort erstellen. Jetzt beginnen wir mit der Account Einrichtung, wo wir erst einmal einen Namen festlegen müssen, wie uns Webflow nennen soll und wir einen kleinen Fragebogen ausfüllen sollen, wo es um unseren Beruf und die Verwendung von Webflow, sowie Erfahrung mit Webseitenstellung angeben müssen. Diese Informationen werden dafür genutzt, dass wir über personalisierte Angebote oder neue relevante Funktionen informiert werden, was wir über den letzten Hacken auch ausschalten können. Klicken wir auf weiter, werden wir direkt in den Webseitenbuilder weitergeleitet, wo wir direkt loslegen können unsere Webseite zu erstellen. Diesen schauen wir uns aber erst im nächsten Video genauer an, deswegen verlassen ich diesen wieder und wechseln auf das Dashboard, welches auch immer geöffnet wird, wenn wir uns mit unserem Webflow Account anmelden.

3. Oberfläche

Schauen wir uns jetzt mal an, wie die normale Oberfläche außerhalb des Editors von Webflow aussieht und was dort alles möglich ist. Wir haben hier ganz oben, dass Menü, wo wir gleich alle Bereich nach und nach durchgehen werden. Am rechten Rand sehen wir aber auch unser aktuell angemeldetes Profil oder falls wir abgemeldet sind, müssen wir uns da anmelden. Klicken wir auf Account, können wir auch auf unser öffentliches Profil zugreifen und dieses Bearbeiten, worüber wir in unsere Accounteinstellungen kommen, später noch mehr dazu. Das öffentliche Profil von uns bei Webflow, können andere Nutzer bspw. über die Showcase-Funktion aufrufen, wo sie dann sehen, was für Projekte wir mit Webflow gemacht haben. So hat man quasi ein internes Social-Media zu Webflow, wo man sich mit anderen austauschen und vernetzen kann. Neben unserem öffentlichen Profil und den Accounteinstellungen, können wir unter Account auch noch unsere Abos, bzw. Premium Pläne verwalten, auf die Team-Funktion zugreifen und alle letzten Updates von Webflow sehen. Webflow wird stetig weiter an Funktionen erweitert, wo wir auch, falls es neue Funktionen gibt, beim ersten Mal einloggen, mit einem Pop-Up Fenster darüber informiert werden. Falls wir dieses weggeklickt haben, können wir alle Informationen zu Neuigkeiten hier abrufen. Zu guter Letzt können wir uns hier natürlich auch mit unserem aktuellen Account ausloggen. Klicken wir jetzt im oberen Menü auf “Dashboard” kommen wir in unsere Projektübersicht, wo wir alle unsere Webseiten, welche wir mit Webflow erstellen, verwalten können. Im nächsten Kapitel noch mehr dazu. Neben dem Dashboard können wir jetzt unter Showcase, auch Projekte von anderen Leuten, welche sie mit Webflow umgesetzt haben ansehen. Hier sehen wir bei jedem Projekt auch wie viele Aufrufe, Likes und Kommentare es hat und von wem es erstellt wurde, sowie den Namen. Klicken wir auf eins, können wir auf alle Informationen wie Beschreibung, Tags und Kommentare zugreifen und natürlich die Seite auch öffnen. Der Showcase ist super praktisch um sich Inspirationen zu holen, was man alles mit Webflow machen kann und wie verschiedene Sachen umgesetzt werden können. Über das Navigationssymbol kommen wir dann auch wieder zurück in den Showcase. Hier können wir auch eine unserer eigenen Seiten mit einem Premiumplan veröffentlichen, damit andere diese sehen können. Dieses wird dann über unser öffentliches Webflow Profil gepostet, was wir uns gerade im Menü schon angeschaut haben. Hier müssen wir dann unser Projekt auswählen, sowie einen Titel, Beschreibung und Tags hinzufügen und festlegen, ob das Projekt von anderen kopiert werden kann. Wir können nach kopierbaren Projekten auch im Showcase filtern, wo wir dann über die Projektseite, die Webseite kopieren können, um sie dann in unserem Dashboard zu finden und diese individuell bearbeiten zu können. Im Showcase, können wir auch nach Projekten filtern, von Personen, denen wir folgen oder kürzlich veröffentlichen Projekten. Wir können Personen über ihre öffentlichen Profile bei Webflow folgen. Sind wir auf einem Profil, sehen wir oben im Menü, dass wir uns nicht mehr im Showcase, sondern im Bereich “Designers” befinden. Den Webflow ermöglicht es auch direkt über ihre integrierte Plattform Web Designer zu buchen, für Webflow Projekte. D.h. hier kannst du nach Personen filtern, die anbieten, deine Seite gegen Bezahlung zu programmieren. Du kannst diese dann über ihr Profil eine Nachricht senden, mit deiner Anfrage. Du kannst natürlich in deinen Accounteinstellungen auch dich selber als Designer anbieten, wo dich dann andere im Designers Bereich finden können. Neben diesem Bereich haben wir jetzt unter “Learn” auch die Webflow University. Hier gibt es umfangreiches Wissen zu den vielen verschiedenen Webflow Funktionen. Diese ist aktuell leider nur auf Englisch verfügbar, aber trotzdem praktisch, falls man etwas Bestimmtes umsetzen möchte oder nicht versteht, kann man hier einfach danach suchen und wird oft fündig. Hier werden dir die meisten Sachen in Form von Videos erklärt und man kann auch richtige Kurse abschließen, was alles komplett kostenlos ist. Als letzten Menüpunkt haben wir jetzt noch Resources, wo wir ebenfalls auf die Preise zugreifen können, aber bspw. auch auf Templates, welche das Erstellen von Webseiten enorm vereinfachen. Dazu aber später noch mehr. Auch auf eine Webflow Community können wir hier zugreifen, wo wir mit anderen Nutzern kommunizieren können. Wir finden hier auch kostenlose eBooks von Webflow, zum Thema Webdesign und Webdevelopment, falls wir tiefer in die Materie einsteigen wollen und zu guter Letzt finden wir hier auch den Webflow Blog, Support und Forums, wo wir Hilfe und News über spannende Themen zu Webflow bekommen. Links neben unserem Account haben wir dann auch noch einen Benachrichtigungsbereich, wo wir über alle wichtigen Dinge zu unseren Projekten und Co. immer auf dem Laufenden gehalten werden und ggf. daneben können wir auch ein neues Projekt im Showcase hochladen.

4. Projekte verwalten

Das wichtigste bzw. für den Start relevanteste, finden wir in unserem Dashboard, nämlich unsere erstellten Webseiten, welche wir mit dem Webflow Editor erstellen. Hier können wir jetzt über die blaue Schaltfläche am oberen rechten Rand, direkt eine neue Webseite, bzw. Projekt erstellen. Wie das geht, schauen wir uns im nächsten Video an. Haben wir jetzt eine Seite erstellt, sehen wir sie hier in unserer Dashboard-Übersicht. Hier haben wir neben dem Namen, auch eine Vorschau und können über diese auch das Projekt weiterbearbeiten, im Editor. Hier haben wir zusätzlich über die drei Punkte am unteren rechten Rand, die Möglichkeit das Projekt auch wieder zu löschen, duplizieren also kopieren, zu einem bestimmten Ordner hinzufügen, oder teilen, im Editor öffnen oder direkt die Einstellungen des Projektes öffnen. Haben wir die Webseite veröffentlicht können wir am untern Rand, die Veröffentlichung auch wieder rückgängig machen oder das Projekt im Showcase präsentieren. Haben wir jetzt mehrere Webseiten erstellt, kann das Dashboard, schnell unübersichtlich werden. Hier haben wir zum Glück am oberen rechten Rand die Möglichkeit einen Ordner zu erstellen, umso unsere Projekte im Dashboard besser sortieren zu können. Klicken wir in einen Ordner, sehen wir am oberen linken Rand, auch den Dateipfad und kommen darüber auch wieder zurück in unsere Hauptübersicht. Hier haben wir ganz links auch unsere Namen über welchen wir auch einfach zu Teams, welche mit unserem Webflow Projekt verbunden sind, wechseln können um diese Projekte sowie unsere eigenen bearbeiten und verwalten zu können. Neben der Projekterstellungsschaltfläche können wir auch nach einem bestimmten Projekt suchen und neben den Ordnern, auch die Übersicht nach verschiedenen Kriterien filtern. Mit einem kostenlosen Webflow Account können wir max. zwei Projekte erstellen. 

5. Abos & Preise

Webflow ist kein kostenloser Services, was man vielleicht auf den ersten Blick denkt. Den bspw. über diesen Link, kannst du einen kostenlosen Account erstellen. Der Account an sich, ist auch komplett kostenlos, aber sobald wir mehrere Webseiten erstellen wollen und diese veröffentlichen, müssen wir ein Abo abschließen. Was für Abos es da jetzt gibt und wie es preislich aussieht, zeige ich dir jetzt im Detail. Unter Resources im Menü, finden wir alle Preisinformationen und über unseren Account oder eine Webseite, können wir dann die Abos abschließen. Grundsätzlich teilen sich die Abos aber in zwei Bereiche. Einmal die Abos, welche man für einzelne Webseiten abschließen kann und die Account-Abos, welche wir für unseren allgemeinen Webflow-Account abschließen können. Wir haben ja gerade erfahren, dass wir mit einem kostenlosen Account nur zwei Projekte erstellen und die Webseiten damit auch nicht veröffentlichen können. Wollen wir jetzt mehr Webseiten erstellen, müssen wir ein Premiumplan für unseren Account abschließen. Hier haben wir einmal die Lite Version für 16$ pro Monat im Jahresabo oder 24$ pro Monat im Monatsabo. Hier können wir bis zu 10 Projekte erstellen und auch mehr Unterseiten und CMS Elemente. Das wichtigste ist hier aber, dass wir den Code, der Webseiten auch exportieren können, um diese dann bspw. selber hosten zu können oder die Projekte zu Webflow Teams oder anderen Accounts weitergeben zu können, was Sinn macht, wenn du Webseiten für Kunden erstellst. Mit dem Pro-Plan für 35$ pro Monat im Jahresabo können wir dann zusätzlich unsere Seiten mit einem Passwort versehen und können jegliche Form von Webflow Logos aus Kundenrechnungen und Co. entfernen. Diese Premium-Abos für Accounts sind sinnvoll, wenn du professionell mit Webflow als Designer arbeiten möchtest und mit deinem Webflow Account für Kunden Webseiten erstellst. Hier hast du den Vorteil direkt auch die Bezahlung über Webflow machen zu können und so alles zu den Projekten, an einem Ort hast. Neben den Einzelaccountabos gibt es auch noch spezielle Abos für Teams, welche pro Person so viel kosten wie das Pro-Account-Abo. Hier haben wir dann zusätzlich noch das Team Dashboard, wo dann jedes Teammitglied über seinen eigenen Webflow Account, auf die gemeinsamen Webseite-Projekte zugreifen kann. 

Neben den Account-Abos gibt es jetzt aber auch die Webseitabos, welche sich auf eine einzelne Webseite bezieht. Den, wenn wir eine Seite veröffentlichen wollen, müssen wir ein Abo für dieses abschließen. Sowas ist normal und ist bei jedem anderen Webseitenanbieter auch so, da die Seite dann von Webflow selbst gehostet wird. Hier können wir unsere Seite ab 12$ pro Monat im Jahresabo veröffentlichen, wo wir dann eine eigene Domain verbinden können, sowie bis zu 100 Seiten, 25.000 monatliche Aufrufe, 500 Formulareinträge haben und eine schnell lade Technik der Seite verwenden können. Für 4$ mehr im Monat, können wir auch bis zu 100000 Seitenaufrufe  und 1000 Formulareinträge, sowie zusätzlich 2000 Elemente in unsere CMS Database, sowie eine limitierte API Schnittstelle, bis zu 3 weitere Nutzer die Inhalte auf der Seite bearbeiten können und eine Suchfunktion innerhalb unserer Seite hinzufügen. Für 36$ im Monat im Jahrsabo, können wir das ganze noch auf 1 Mio. Seitenaufrufe, 10000 CMS Elemente, und unlimiterte Formulareinträge erweitern. Sowie auf 10 Benutzer die Inhalte bearbeiten können. Wer noch mehr Funktionen braucht, kann sich auch ein individuelles Angebot einholen. Jetzt wird hier zu guter letzt auch zwischen einer normalen Webseite und einem Online SHop, also wo man Waren verkauft unterschiedenen. Für Online-Shops gibt es dann nochmal besondere Abos, wo nach Anzahl der Produkte und Funktionen was die Shoppingseiten und Bezahlung angeht variieren. Hier ist die Preisspannen zwischen 29$ bis 212$ pro Monat im Jahresabo unterschiedlich. Webflow ist grundsätzlich nicht der Günstigste Anbieter auf dem Markt. Es ist aber sehr komfortabel als Designer alles an einem Ort zu haben und dann auch das Hosting über Webflow abrechnen zu können, was man direkt an seine Kunden weitergeben kann. Eine günstigere Alternative Webflow zu nutzen ist es sich ein Account Abo zu holen und die Seiten, dann einfach zu exportieren und bei günstigeren Anbietern zu hosten. Hier ist es dann aber natürlich schwerer in Zukunft Veränderungen an Seiten vorzunehmen. Über diesen Link kommst du direkt zu den Webflow Preisplänen und kannst dir dort nochmal alle in Ruhe anschauen und dir alle Konditionen durchlesen. Hier wähle am besten den Plan, welcher die Funktionen, die du benötigst, beinhaltet.

6. Inspirationen, Vorlagen & Hilfe

Schauen wir uns jetzt noch an, wie man den Einstieg in Webflow noch einfacher als Designer bekommt. Wir haben uns im Oberflächen-Kapitel ja schon den Showcase angeschaut, wo man teilweise Webseiten einfach klonen kann, um sie dann selbst zu bearbeiten und für eigene Projekte verwenden zu können. Hier kann ich nur das UI Kit von Avo empfehlen. Das kann einiges an Zeit ersparen. Hier finden wir unter Ressourcen jetzt aber auch die Templates. Das sind richtige Designvorlagen, welche man kostenlos oder einmalig kostenpflichtig erwerben kann und dann für seine Webseite verwenden kann. Diese Vorlagen sind von Webflow selbst oder Designer erstellt worden. Hier können wir direkt nach einem bestimmten Thema Suchen aber oben im Menü auch nur kostenlose, beliebte, CMS Designs oder Online-Shop Designs filtern. Klicken wir eine Vorlage an, bekommen wir mehr Details und weitere Vorschaubilder und können auch eine Vorschau der endgültigen Seite oder des Editors mit der Seite abrufen. So können wir uns alles vorher anschauen, bevor wir eine Vorlage kaufen. Haben wir uns für eine entschieden, können wir anhand dieser ein neues Projekt erstellen und dann die Vorlage komplett individuell bearbeiten. Sowas spart enorm viel Zeit, was das Erstellen von grundlegenden Elementen angeht und man hat direkt ein durchgezogenes Design was man einfach auf bspw. die eignen Farben und Grafiken anwenden kann. Sowas ist auch für den Einstieg in Webflow praktisch, wenn man bspw. einfach eine kostenlose Vorlage verwendet, um anschaulich im Editor sehen zu können, wie man bestimmte Elemente erstellen und verwenden kann. Falls du mal nicht wissen solltest, wie du etwas Bestimmtes in Webflow umsetzt, kannst du auch einfach unter Learn den Hilfebereich von Webflow durchsuchen oder eine Frage im Forum stellen. Solltest du keine Hilfe zu deinem Problem finden, kannst du schlussendlich auch dem Support eine Nachricht senden, die antworten in der Regel auch innerhalb von 2 Tagen.

Du brauchst paar coole Inspirationen für Webdesigns? Dann schau doch mal auf meinem Instagram-Account: @simontutorial vorbei, dort habe ich dir einige meiner Lieblingsshowace und Template-Projekten vorgestellt. Dort findest du auch zu jedem Tutorial kostenlose Bonusinhalte, also abonniere diesen doch, um nichts mehr zu verpassen.

7. Teams

Neben den eigenen Projekten, die man erstellen kann, kann man, wie schon zuvor erwähnt auch zusammen mit einem Team, Projekte gemeinsam in Webflow verwalten. Dafür braucht jedes Teammitglied einen eigenen Webflow Account. Im Menü unter Account > Teams können wir jetzt ein neues Team erstellen oder alle bestehenden, von denen wir Teilnehmer sind, hier verwalten. Erstellen wir ein neues Team, müssen wir einen Namen und E-Mail-Adresse angeben, an welche die Rechnungen gesendet werden sollen. Falls wir ein Team für eine bestimmte Firma erstellen, können wir diese hier auch verlinken und müssen abschließend ein Preismodell auswählen. Teams sind nämlich nur über eine Bezahlversion verfügbar, wo man pro Person ab 35 $ pro Monat zahlen muss. Haben wir das alles eingestellt, müssen wir dann noch die anderen Mitglieder über die E-Mail-Adressen mit welchen diese einen Webflow Account haben, zum Team hinzufügen. Werden wir zu einem Team hinzugefügt, bekommen wir eine Benachrichtigung und müssen das dann akzeptieren. Wir finden dann in unserem Dashboard über unseren Namen, unsere Teams und alle Projekte, die sich in einem Team befinden, können von allen Teammitgliedern gesehen, bearbeiten und verwaltet werden. Persönliche Projekte, welche wir in unserem Account erstellen, können wir zwar auch teilen aber diese können dann von anderen Personen nur angeschaut werden aber nicht bearbeitet. Also falls wir anderen ermöglichen wollen unser Projekt ebenfalls zu bearbeiten, müssen wir dies über ein Team machen. Wir können dann, falls wir ein Team erstellt haben im Dashboard ein persönliches Projekt in den Team-Bereich transferieren, damit alle darauf zugreifen können. Innerhalb eines Teams kann man auch eigene Templates erstellen, welche dann alle aus dem Team für die Teamprojekte verwenden können. Du merkst, die Teamfunktion hat einige Vorteile, wenn man gemeinsam an einem Projekt arbeiten möchte.

8. Account-Einstellungen

Werfen wir jetzt abschließend noch einen Blick in unsere Webflow-Accounteinstellungen, welche wir im Menü unter Account finden. Hier können wir unter Profil alles zu unserem öffentlichen Profil einstellen, was andere ggf. über den Showcase oder Designerbereich von uns sehen können. Hier können wir bspw. auch unsere Webseite verlinken, aber auch eine kurze Beschreibung hinzufügen oder mit einem Premium-Account auch einstellen, dass wir Jobangebote annehmen. Wenn wir nicht wollen, dass ein öffentliches Profil von uns existiert, können wir das ganz unten auch einstellen, bzw. standardmäßig ist unser Profil privat und wir müssen es hier als öffentlich manuell einstellen, falls wir das möchten. Unter Plans können wir jetzt alle unsere Account oder Teamabos verwalten oder ein neues abschließen. Unter Billing können wir dann auch noch Einstellungen zu den Rechnungen die wir erhalten machen, wo wir einen Firmennamen eingeben können und unsere Zahlungsmethoden verwalten. Hier werden grundsätzlich nur Kreditkarten unterstützt. Wir haben bei Webflow auch die Möglichkeit bei unseren Schriftarten auf einer Webseite, auf die Schriftarten von Adobe Fonts zuzugreifen. Diese können wir über Integrationen mit einem API-Schlüssel für unseren Account freischalten. Auch Drittanbieter Templates, welche wir über Webflow erwerben und ggf. exportieren können, sehen wir hier, sowie Drittanbieter Apps. Unter Billing Tools haben wir jetzt die Möglichkeit Rechnungsaccounts für unsere Kunden zu erstellen. Also falls wir eine Seite für einen Kunden erstellt haben und diese dann mit einem Webflow Webseitenabo gehostet wird, kannst du den monatlichen preis direkt an den Kunden weiterleiten, wenn du hier die entsprechenden Informationen eingibst. So werden die Zahlungen nicht über dich gehen und du hast weniger Buchhaltungsaufwand. Unter Purchases, siehst du alle Käufe welche du bei Webflow getätigt hast, sein es Abos oder Templatekäufe. Hier kannst du dich auch mit Themeforest verbinden, falls du darüber Templates gekauft hast und diese in Webflow verwenden möchtest. Bei den E-Mail Einstellungen, können wir dann unsere E-Mail-Adresse auch ändern, sowie festlegen, über was wir per Mail benachrichtigt werden wollen. Als letztes haben wir dann noch die Sicherheit, wo wir unser Passwort ändern können, sowie eine zwei Schritte Verifizierung, welche ich immer einstellen würde, erst recht, wenn du Webseiten für Kunden erstellst und verwaltest. Hier kannst du auch sehen, wann du dich das letzte Mal mit deinem Account angemeldet hast und ganz unten kannst du auch deinen Account löschen. Hier musst du ggf. den Support kontaktieren, den falls du Webseiten für Kunden verwaltest, kannst du den Account nicht so einfach löschen.

Im nächsten Artikel schauen wir uns dann den Webflow Editor an, wie wir dort eine eigene Webseite erstellen und bearbeiten können. Du kommst hier zu allen Teilen der Webflow Tutorial Serie. Über das Teilen des Artikels freue ich mich immer sehr. Falls du noch Fragen oder Feedback haben solltest, kannst du es gerne in den Kommentaren hinterlassen. Bis zum nächsten Mal.

Kommentar verfassen