Webflow 101 - Der Webflow Designer

Recap Masterclasses

Cedrik Dudek
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.

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
Webflow 101 - Der Webflow Designer
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.

Das könnte Sie auch interessieren

Webflow Review & Test in 2021
Allgemein
Das Website-Design-Tool Webflow im Test. Review über Features, Funktionen und Kundenbewertung. Alles auf einen Blick und informativ aufbereitet.
Zum Webflow Review
Webflow - Erfahrungen von Nutzern, Admins und Anwendern
Tools und Anwendungen
Wir werfen einen Blick auf die Webflow Erfahrungen von allen Nutzern. Wir geben einen detaillierten Blick auf die verschiedenen Webflow Erfahrungen.
Mehr zu Webflow Erfahrungen
Webflow CMS 101 - Eine Einführung in das Webflow CMS
Tools und Anwendungen
Webflow CMS bietet enorm viel Potenzial für dynamische Inhalte. Wir zeigen Ihnen, worauf Sie grundsätzlich achten sollten.
Mehr zu Webflow 101
Was ist ein Citizen Developer?
Für Unternehmen
Citizen Developer sollen Abhilfe schaffen und die digitale Transformation der Unternehmen vorantreiben.
Mehr zum Thema Citizen Developer
Low-Code vs. No-Code
Für Unternehmen
Low Code und No Code sind Entwicklungs-Ansätze in der IT, die mit wenig oder keiner Programmierung auskommen. Was unterscheidet die beiden Ansätze?
Mehr zu Low Code und No Code
Top 10 der Low-Code Tools
Tools und Anwendungen
Dank verschiedener Low-Code-Tools können kleine und mittelständische Unternehmen schneller passende Software-Lösungen erstellen.
Mehr zu Low Code Tools
Low-Code: Chancen und Möglichkeiten
Für Unternehmen
Die digitale Transformation ist ein herausfordernder Prozess, der besonders den Mittelstand vor hohe Anforderungen stellt. Low Code bietet neue Lösungen.
Erfahre alles über Chancen
Webflow vs. Wordpress
Allgemein
Webflow vs Wordpress - In diesem Webflow vs WordPress Vergleich lernst du alles was du wissen musst.
Mehr zum Webflow Vergleich
Webflow & Shopify - Buy Button Integration
Für Unternehmen
Durch die Integration von Shopify und Webflow können wir ganz neue Nutzererlebnisse schaffen und nachweislich mehr Umsatz für unsere Kunden erzeugen.
Mehr zu Webflow und Shopify
Vorstellung: Amazon Honeycode
Tools und Anwendungen
Hier erfahren Sie worum es dabei geht und wie man Honeycode am besten einsetzen kann.
Mehr zu Amazon Honey Code
Was ist Low-Code und wer kann es nutzen?
Allgemein
Was ist Low Code und welche Rolle spielen Webflow und andere Anbieter in der Digitalisierung.
Rund um Low Code

Weitere Themen und Artikel

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.
Chat Icon
1
Close Icon
Unsere Erstberatung ist kostenlos!

Geschätzte Antwortzeit: innerhalb eines Tages