Webflow 101 - Der Webflow Designer

Cedrik Dudek
Co-Founder
Stand:
07/2020

Webflow wird immer beliebter. In vielen Ländern ist Webflow bei der Umsetzung von professionellen Webseiten schon deutlich beliebter als Wordpress oder andere Page Builder. Webflow erobert die Design-/Entwicklungsindustrie und gilt als Aushängeschild für Low-Code bzw. No-Code Tools. Webflow beeinflusst schon jetzt die Arbeitsweise von vielen Designer und Entwickler. Das einzige was bei Webflow immer noch anders ist als bei gängigen Page Buildern, ist die Tatsache, dass man zumindest ein wenig darüber wissen muss, wie Websites funktionieren, um mit Webflow zu arbeiten. In diesem Artikel werde ich Ihnen alle wichtigen Teile von Webflow vorstellen. Ich werden in diesem Artikel auf wenig bis gar keine technischen Details eingehen. Dafür werden wir in den nächsten Wochen weitere Artikel veröffentlichen.

Falls Sie noch nie von Webflow gehört haben, Webflow ist ein visuelles Webdesign-Tool, welches Ihre Design-Entscheidungen in präzisen, produktionsreifen Code umsetzt. Es wurde entwickelt, um es Designern und Entwicklern und praktisch jedem zu ermöglichen, vollständig responsive Websites zu erstellen. Mit Webflow kann jeder zum Entwickler werden. Webflow erschafft sogenannte Citizen Developer.

Um Citizen Developer zu werden, können Sie die Webflow University nutzen. Die Webflow University ist etwas anderes als standardmäßige Lehrvideos zu einem Software Produkt. Die Tutorials sind immer auf den Punkt gebracht, unter 5 Minuten und sehr lustig, auch wenn es manchmal technisch wird, kann man immer alles verstehen. Die Videos sind hervorragend erstellt und erklären jeden Teil von Webflow ganz genau.

Das wichtigste zuerst. Der Webflow Designer.


  1. Navigator - Hier befinden sich alle Information zu der Struktur von jeder Seite. Die Struktur wird als Übersicht aller Elemente (Divs, Textblöcke, Überschriften, Bilder usw.) angezeigt. In der Navigation werden Bausteine hinzugefügt, entfernt und verändert.
  2. Seiten - Hier finden Sie eine Übersicht über alle Ihre Seiten und deren Details innerhalb des Projekts. Außerdem gibt es hier die Möglichkeit, Seiten und Ordner zu duplizieren oder neue Seiten und Ordner hinzuzufügen. Ordner sind eine gute Möglichkeit um dem Projekt mehr Struktur zu geben, aber vorsicht, wenn Ordner benutzt werden verändern sie die URL der Seiten. Die URL sieht danach so aus: ihreeigeneseite.de/ordner/seite. Bei den Seiten finden Sie außerdem alle SEO Einstellungen. Wenn Sie mit der Maus über eine Ihrer Seiten fahren, können Sie die Einstellungen öffnen. Dort finden Sie alle wichtigen SEO Einstellungen, sowie die Open Graph Einstellungen und die Möglichkeit eigene Code hinzuzufügen.
  3. CMS - Der CMS Teil von Webflow ist sehr groß und benötigt einen eigenen Blog Artikel, soviel schon vorab, es lässt sich sehr viel einstellen und das Webflow CMS kann eher mit einer Datenbank als mit einem einfachen CMS wie bei Wordpress verglichen werden. Mit dem Webflow CMS lassen sich sehr gute Blogseiten umsetzten, aber auch andere Seiten, welche oft wechselnden Inhalt haben lassen sich sehr einfach mithilfe des CMS umsetzen. 
  4. Webflow E-Commerce - Die Features von Webflow E Commerce sind noch in den Kinderschuhen, jedoch gibt es jetzt schon ausführliche Funktionen mit welchen Sie ihren Shop erweitern und schöner gestalten können, als zum Beispiel mit Shopify. Mehr zum Thema Webflow E-Commerce können Sie in weiteren Artikeln des Blogs lesen. 
  5. Assets Manager - Hier können Sie alle Ihre in Ihrem Projekt verwendeten Assets einsehen. Außerdem können Sie den Asset Manager auch als “Server” nutzen um Ihre Dokumente abzulegen und für Webseiten Besucher zur Verfügung zu stellen. Dadurch ist es ganz einfach möglich PDF oder andere Dokumente mit den Nutzern der Webseite zu teilen.
  6. Breakpoints - Webflow enthält 7 verschiedene Breakpoints um das Kundenerlebnis auf möglichst vielen verschiedenen Bildschirmgrößen zu optimieren. Webflow hat 4 voreingestellte Breakpoints: Desktop, Tablet, Mobile Landscape, Mobile Portrait. Sie haben auch die Möglichkeit, 3 größere Breakpoints hinzuzufügen: 1280px, 1440px, 1920px. Diese Funktion hilft dem Anwender dabei die Website responsive zu gestalten. In nur wenigen Stunden kann dadurch eine Website komplett für alle Breakpoint optimiert werden. Es ist wichtig das Projekt immer auf allen Breakpoints zu testen um im Nachgang keine Fehler zu übersehen.
  7. Style Panel - Das Hauptfenster für die Arbeit mit allen Elementen in Ihrem Projekt. Hier können Sie Margin und Padding, Farben oder Textgrößen hinzufügen und ändern. Oder Elemente neu positionieren, sodass alles auf den verschiedenen Breakpoints funktioniert. Ganz oben im Style Panel finden Sie auch ein Feld für den Selektor, um den Elementen eine CSS-Klasse zuzuweisen. Durch diese Funktion können Sie mehrere Elemente gleichzeitig stylen. Hier können Sie außerdem einstellen, wie sich das Element verändern soll, wenn ein Nutzer mit der Maus über das Element hovert oder es anklickt.
  8. Element Settings - Alle Einstellungen eines bestimmten Elements. Einstellungen, wie z.B. wohin der bestimmte Button verlinken soll, wie bestimmte Sammlungen Ergebnisse filtern sollen usw. - Der wichtige Hinweis, den man sich hier merken sollte, ist: dieses Panel ist nur an ein bestimmtes Element gebunden.
  9. Interactions - Einer der fortgeschrittene Teile von Webflow, wird aber häufig als einer der wichtigste Funktionen von Webflow beschrieben.Hier können Sie all die spannenden Animationen und Übergänge für Ihr Projekt erstellen. Durch die Interactions fühlt sich Ihre Webseite noch professioneller an. Für ein erstes Projekt ist dieser Teil von Webflow aber nicht unbedingt wichtig.
  10. Projekt Einstellungen - Hier können alle zusätzlichen Einstellungen wie Favicon, benutzerdefinierte Schriftarten, Hosting, SEO, Google Analytics, Custom Code usw. eingestellt und bearbeitet werden.
  11. Ansichtseinstellungen - Die Ansicht des Webflow Designer kann hier geändert werden. Es können bestimmte Elemente versteckt bzw. angezeigt werden und es gibt Funktionalitäten wie den X-Ray Mode (Eine Graustufen Ansicht der Arbeitsfläche Ihrer Website, die beim Überfahren mit dem Mauszeiger visuell den Rahmen, den Rand und die Füllung jedes Elements anzeigt.)
  12. Video Tutorials - Die Video Tutorials von Webflow sind wie Anfang schon erwähnt sehr sehenswert und helfen bei fast allen Fragen weiter. Auch aus dem Webflow Designer können die Videos immer wieder aufgerufen werden.
  13. Projekt Aktionen - Änderungen rückgängig machen oder Wiederholen, Code exportieren oder den Speicherstatus des Projekts einsehen, können hier durchgeführt werden. Gerade der Code Export ist wichtig, falls das Projekt nicht bei Webflow sondern auf einem eigenen Server gehostet werden soll. 
  14. Publish Button - Einer der wohl wichtigsten Funktionen in Webflow. Hier gibt es mehrere Funktionen. Unter anderem kann das Projekt auf einer eigenen webflow.io domain veröffentlicht werden. Hierbei fallen keine Kosten an und das Projekt kann erstmal ausgiebig getestet werden. Erst wenn man das Projekt auf einer eigenen Domain veröffentlichen will entstehen Kosten. Durch die Publish Funktion von Webflow können Änderungen direkt im Browser auf der echten Webseite angesehen werden. Von der Änderung eines Elements bis zur Live Ansicht dauert nur wenige Sekunden und bietet daher fast eine live Bearbeitung.



Das waren die meisten Funktionen des Webflow Designers in der Übersicht. Wenn Sie über einige Funktionen mehr lernen möchten, dann kontaktieren Sie uns für eine kostenlose Beratung. Wir freuen uns von Ihnen zu hören.


Diesen Beitrag weiterempfehlen:

Über den Autor

Cedrik Dudek
Co-Founder

Cedrik ist Co-Founder von 02100 und schafft es, mithilfe von Low-Code, Unternehmen bis zu 75% produktiver zu machen. 02100 bietet Custom Web-App und Website Entwicklung mit Low-Code an.

Recap Masterclasses
Webflow 101 - Der Webflow Designer
Der Webflow Designer ist das tägliche Werkzeug des Webflow Nutzers, hier finden fast alle Tätigkeiten statt. In diesem Artikel erfahren Sie alle Infos über die Kernfunktionalitäten des Webflow Designers.
Mehr erfahren...

Jetzt Kontakt aufnehmen

Vielen Dank! Wir haben deine Anfrage erhalten und melden uns bei dir.
Bitte fülle alle Felder aus um deine Anfrage zu senden.
1
Unsere Erstberatung ist kostenlos!

Geschätzte Antwortzeit: innerhalb eines Tages