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 - No Code Conference 2021
Updates
Erfahren Sie mehr über die Ankündigungen und wie die wichtigsten Funktionen in einer Plattform zusammen geführt werden.
Informationen zur No Code Conference
Bubble.io Erfahrungen aus Kundensicht und Anwendersicht
Allgemein
Wir haben die Bubble.io Erfahrungen mehrerer Anwender und Endnutzer gesammelt und diese aufbereitet. So können Sie sich selbst ein direktes Bild von Bubble.io und der Arbeit mit dem Programm machen.
Erfahrungen im Überblick
Bubble.io Review & Test in 2021
Tools und Anwendungen
Bubble.io eröffnet technischen Laien die Möglichkeit, Web-Applikationen ohne Kodierungsvorkenntnisse zu entwickeln. Der folgende Bubble.io Test zeigt, welches Potential die Plattform hat und ob sich die Verwendung lohnt.
Bubble.io Test und Review 2021
Bubble.io: Eine Einführung in das No-Code-Tool
Tools und Anwendungen
Mit unserer Bubble.io Einführung möchten wir Ihnen den Werkzeugkasten Bubble.io mit seinen vielen unterschiedlichen Möglichkeiten näherbringen.
Einführung in Bubble.io
10 interessante Fakten über Bubble.io
Allgemein
Bubble.io begeistert schon seit einiger Zeit die Tech-Welt. Dennoch gibt es einige Fakten, die nicht jedem bekannt sind. Wir zeigen die wichtigsten Fakten rund um Bubble.io.
10 Bubble.io Fakten
Webflow lernen - Mit Schulungen die Webflow Hilfe optimieren
Für Unternehmen
Webflow Lernen - Warum Online-Schulungen für mehr Webflow Hilfe sorgen
Webflow lernen
Umzug von Wordpress zu Webflow - Worauf muss man achten?
Allgemein
Wer einen WordPress Umzug plant und zu Webflow wechseln möchte, sollte im Vorfeld ein paar Punkte beachten.
Wordpress Umzug
Hilfestellung: Webflow Agentur oder Webflow Freelancer?
Allgemein
Webflow Agentur oder Webflow Freelancer? Es gibt erhebliche Unterschiede, die es als Unternehmen zu beachten gilt.
Agentur oder Freelancer
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
10 wichtige Fakten über Webflow
Allgemein
Webflow wird immer beliebter. 10 wichtige Fakten um mehr über Webflow zu lernen und das Tool besser zu verstehen
10 Webflow Fakten
Webflow Templates - Was Sie über den Einsatz der verschiedenen Templates wissen sollten
Tools und Anwendungen
Der Einsatz von Webflow Templates macht die Erstellung komplexer Websites deutlich einfacher. Dennoch ist die Hilfe einer Agentur von Vorteil.
Webflow Templates
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 Webflow? CMS oder Entwickler Software?
Für Unternehmen
Immer wieder stellt sich die Frage, ob Webflow ein CMS oder ob Webflow eine Entwickler Software ist. Diese Frage lässt sich nicht so einfach beantworten.
CMS oder Entwickler Software
Der große CMS-Vergleich - welche Webflow Alternative eignet sich für wen?
Allgemein
Mit Hilfe von Content-Management-Systemen wie Webflow, kurz CMS, lassen sich einfach und schnell Internetseiten erstellen - und das oft ohne Vorkenntnisse.
Webflow Alternativen
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
Einführung in die Low-Code Entwicklung
Allgemein
Low-Code Entwicklung wird bei vielen Unternehmen immer wichtiger. Wir zeigen Ihnen, worum es sich bei der Low-Code Entwicklung handelt.
Low-Code Entwicklung
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