Dieser Kurs ist der einfachste Weg, den visuellen Editor von Webflow zu beherrschen.

Von den Grundlagen über beeindruckende Animationen bis hin zur Veröffentlichung und Übergabe an deine Kunden.
Lerne individuelle Webseiten ohne Programmierkenntnisse zu realisieren.

kreative Freiheit

Dieser Onlinekurs ist für

Check Icon

Designer aus dem digitalen Bereich, die ihre Layouts bisher immer an externe Entwickler abgegeben haben und endlich selbst mehr verdienen möchten

Check Icon

Print-Designer, die Webdesign anhand eines klaren Prozesses lernen wollen, um ihren Kunden mehr anbieten zu können

Check Icon

Agenturen und Studios, die ihr Team auf ein effizientes Tool umstellen wollen

Check Icon

Programmierer, die schneller arbeiten und grandiose Interaktionen im Handumdrehen realisieren möchten

Reale Kundenaufträge und echte Szenarien

Du lernst Schritt für Schritt anhand von realen Kundenaufträgen und wunderschön gestalteten Beispiel-Layouts, so dass du am Ende viele mögliche Szenarien und Komponenten selbst bauen kannst.

Webflow Website LayoutiPad
Webflow iPhone Sceen LayoutiPhone
Webflow iPhone Sceen LayoutiPhone
Webflow Website LayoutiPad
Webflow Website LayoutiPad
Webflow iPhone Sceen LayoutiPhone
Webflow iPhone Sceen LayoutiPhone
Webflow Website LayoutiPad

Kommt dir das bekannt vor?  

Bei mir war es genauso: Programmierer haben meine Layouts einfach nie genau so umgesetzt wie ich sie übergeben habe.

Der Grund: Die Website wurden nicht mit dem Auge programmiert, mit dem ich sie erstellt habe. Ein ewiges Hin und Her bis wichtige Details und Animationswünsche endlich implementiert wurden.

Spare dir diese wertvolle Zeit und realisiere Webseiten von vorne bis hinten selbst für deine Kunden. Es ist unglaublich wie viel schneller du mit Webflow zum Ziel kommst und dabei sogar noch mehr verdienst.

PS: Responsive Design geht mit Webflow on the fly. Du musst dafür also nichts stundenlang in deinem Layout Programm vorbereiten!

Check Icon

Lerne von überall und mit jedem Gerät

Check Icon

Lebenslanger Zugang

Check Icon

4k Video Aufnahmen

Check Icon

14 Tage Geld Zurück Garantie

Check Icon

Beispiele anhand realer Kundenaufträge

Check Icon

Alle zukünftigen Updates enthalten

Check Icon

Mehr als 80 Videos und über 13 Stunden Material

Check Icon

Nutze Vorlagen für deine Kundenaufträge

Tine S.

UI/UX Designerin

Fabian R.

Webdesigner

Tom S.

Cross Creative

Alle Module

Dieser Kurs ist bis oben hin vollgepackt mit den besten Informationen zur Erstellung großartiger visueller Webseiten.

Einleitung

Willkommen und wie du am meisten aus diesem Online Kurs rausholen kannst

03:31

Was ist Webflow eigentlich?

03:19

Elemente aus anderen Webflow Projekten kopieren

05:06

Shortcuts und Webflow Finder nutzen

04:09

Grundlagen

Webflow Designer im Schnelldurchlauf

14:18

HTML und CSS verstehen

08:56

Das Box-Model verstehen

05:40

Hierarchien und Vererbungen im Webdesign

09:10

Selektoren und CSS Klassen

19:13

Logische Benennungen von Selektoren

12:43

Verschiedene Einheiten (Units) verstehen – vw, vh, %, px, em

16:35

Einführung in Grid – Magazin Layouts

23:00

Einführung in Flexbox – Elemente positionieren

11:53

Elemente Positionieren (Position)

13:59

Bilder richtig aufbereiten und importieren

15:38

Icons und SVG Vektorgrafiken richtig aufbereiten und einbinden

06:48

Mit Symbolen arbeiten (components)

08:20

Symbole Baukasten erstellen – Fallbeispiel Kundenprojekt

05:46

Pfeil nach rechts Icon

Alle anzeigen

Layout Umsetzung

Intro

01:53

Schriftart und Font einbinden

06:26

Projekt-Template und Styleguide anlegen

21:21

Abstände global anlegen

12:19

Container und Maximalbreiten nutzen

14:57

Seiten ordentlich strukturieren

12:26

SEO beim Thema Headlines beachten

08:54

Hauptnavigation mit Dropdown und Sprachenwechsler erstellen

33:03

Full-Screen Mobile Navigation erstellen

20:18

Text auf Bild

11:17

Video in Popup öffnen

04:54

Slideshow – Einfach

10:54

Slideshow – Fortgeschritten

28:08

Galerie in Overlay Lightbox

12:58

Rich Text Element

06:13

Google Maps Karten einbinden

06:30

Formulare erstellen und automatisiert versenden

15:58

Suchfunktion einbinden

07:12

SEO Seiteneinstellungen (Suchmaschinen-Optimierung)

10:24

Eine Seite responsive machen

46:11

Eigene responsive Breakpoints anlegen

06:19

Elemente bei bestimmten Geräten oder Größen ausblenden bzw. ersetzen

06:27

Pfeil nach rechts Icon

Alle anzeigen

Realer Kundenauftrag

Intro

01:43

Übersicht, Analyse und Aufbereitung des Layouts

14:22

Webflow Projekt anlegen

05:20

Custom Font hinzufügen

12:25

Font Größen und Styleguide anlegen

15:18

Font Größen responsive machen

09:02

Icon Font erstellen und einbinden

10:21

Container und Maximalbreiten definieren

05:12

Haupt-Navigation bauen - OnePager

14:48

Mobile Navigation bauen (mit Lottie Animation)

11:25

Hero Section erstellen (Text auf Bild)

10:26

Hintergrundvideos einbinden (Text auf Video)

06:40

Globale Abstände definieren und wiederverwenden

12:08

SEO freundliche Headlines und Stile definieren

07:52

Hero Section mit zwei Bildern nebeneinander

07:06

Textboxen nebeneinander anordnen (eigenes Grid)

17:41

Bild Slideshow erstellen

09:01

Verschiedene Inhalte in Tabs verschachteln

16:00

Alle Inhalte aus dem Layout einarbeiten

01:22

Weitere Anpassungen

03:28

Footer und Impressum/Datenschutz Unterseiten

15:56

Seite responsive machen

41:56

Einfache Bild Scroll-Animations Effekt erstellen

08:39

Einfache SlideUp Effekt auf Textelemente

08:53

Pfeil nach rechts Icon

Alle anzeigen

Website Launch

Domain verknüpfen

08:28

Datenschutzseite generieren und anlegen

15:40

Webflow Data Processing Agreement ausfüllen

03:08

DSGVO Cookie Banner generieren und integrieren (kostenlos)

15:06

Checkliste vor Website Launch

12:20

Individuelle Weiterleitungen von alten und neuen Links anlegen (SEO)

03:40

Impressumsseite anlegen und generieren

03:01

Google Analytics einrichten

04:08

Google Search Console einrichten und Sitemap hochladen (SEO)

06:41

Pfeil nach rechts Icon

Alle anzeigen

Bonus

Kommt 2021

Einführung CMS

Einführung in das Webflow CMS

FAQ Liste erstellen – CMS

Blog erstellen – CMS

Verschachtelte CMS Elemente

„Pinterest” Bilder Grid erstellen – CMS

Zusammenarbeit mit Kunden

Kunden von Webflow überzeugen

04:15

Der richtige Webflow-Plan für dich und deine Kunden

09:57

Webflow Code exportieren

04:32

Hosting bei Webflow – Vorteile

08:57

Kunden Editor Zugang einrichten

02:27

Wie Kunden die Website bearbeiten können

04:58

Thema DSGVO, Kunden und Webflow

13:38

Schulung aufnehmen und Website an Kunden übergeben

03:15

Layout Animation

Bonus

Kommt 2021

Mit Animationen arbeiten – Einführung

Button animieren

Einfache Parallax Scroll Effekte mit Bildern und Texten

Textelemente beim Scrollen animieren (einfach)

Lottie Animationen einsetzen

Seitenübergang animieren (Page Transitions erstellen)

Individuelle Seiten-Lade-Animation

Einen Pre-Loader erstellen

Eigenes Popup erstellen und animieren (Video in Overlay)

Logo-Karussell umsetzen

Timo L.

Webdesigner

Marty B.

Webdesigner

Matthias H.

Digitaler Konzepter

Jonas Arleth

Erfahre mehr über mich

Ich arbeite mittlerweile seit über 10 Jahren selbstständig als Webdesigner für eigene Kunden.

Noch vor einigen Jahren habe ich mich ausschließlich auf individuelle Konzepte und den Design-Part einer Website fokussiert. Zugegeben: Ich genoss die Zeit und konzentrierte mich darauf, ein starker Designer im digitalen Bereich zu werden.

Aber dann kam Webflow ins Spiel und ich lernte, wie viel Spaß es macht, mit genau dem gleichen Auge für's Detail meine Layouts zum Leben zu erwecken.  
Ich fing also an bei ein paar kleineren Projekten nicht nur das Design anzubieten, sondern auch die Umsetzung und realisierte, wie viel effizienter ich dem Kunden zu seinen Zielen verhelfen konnte. Und noch viel besser: Wie viel mehr Einnahmen ich dadurch generierte.

Heute realisiere ich Projekte, für die wir früher als kleines Team aufgetreten wären, von Anfang bis Ende komplett alleine.

In diesem Onlinekurs steckt alles, was du brauchst, um Webflow zu lernen und für dich damit genauso zusätzliche Umsätze zu generieren.

In den letzten Jahren habe ich Projekte für viele Unternehmen realisiert

Dein Investment

Was kostet der Kurs?

Der Preis für den Kurs steigt um 100€ am 31.01.2021.
Danach wird das Lern-Modul „Layout Animation” freigeschalten.

00
Tage
00
Stunden
00
Minuten
00
Sekunden

3 monatliche Zahlungen

109

159€

Ratenzahlung für drei Monate.
Inklusive lebenslangem Zugang und allen zukünftigen Updates.

Einmalzahlung

299

449€

Bezahle im Voraus und spare zusätzlich 28€ gegenüber der Ratenzahlung. Inklusive lebenslangem Zugang und allen zukünftigen Updates.

Studio Lizenzen

1295

2045€

Spare 200€ gegenüber dem Einzelplan. Enthalten sind 5 Gutschein-Lizenzen für dein Team.
Inklusive lebenslangem Zugang und allen zukünftigen Updates.

Alle Preise inkl. 16% Umsatzsteuer.

Kunden zahlen für die Entwicklung einer Website mehr als für das Design

Mit diesem Kurs geht ab jetzt alles in deine Tasche!

Als Designer musst du deine Layouts nicht mehr von anderen Entwicklern umsetzen lassen. Das hat mir persönlich meine Einnahmen verdoppelt!
Und da du in Webflow mit einem visuellen Design-Programm arbeitest, musst du auch keine responsive Design Vorlagen mehr für Programmierer vorbereiten. Das erledigst du direkt in Webflow. Du sparst also eine Menge Zeit und verdienst dabei auch noch mehr!

FAQ

Häufige Fragen zum Onlinekurs

Bekomme ich mein Geld zurück, wenn mir der Kurs nicht gefällt?

Ja, es gibt eine 14 Tage Geld-Zurück-Garantie

Muss ich was für Webflow zahlen?

Webflow ist für 2 Projekte kostenlos. Du kannst dir also parallel zu diesem Online Kurs einen Account anlegen und alle Lern-Module mit verfolgen bzw. nachbauen. Es gibt vereinzelt Funktionen, die in dem kostenlosen Plan nicht enthalten sind, aber diese sind für dich auch erst relevant, wenn du Webflow bei einem realen Projekt einsetzt. Generell kannst du auch für jeden zukünftigen Auftrag immer erstmal einen kostenlosen Account eröffnen und deine Kunden zahlen dann für den Plan, der für das Projekt benötigt wird. Du als Webdesign zahlst dafür nicht.

Muss ich programmieren können?

Nein. Dieser Online Kurs vermittelt dir das Wissen, was du brauchst, um danach selbstständig komplette Webseiten erstellen zu können, ohne davor je programmiert zu haben. Webflow ist das perfekte Tool, um genau das für dich im Hintergrund zu erledigen. Du bedienst lediglich ein User Interface.

Kann ich nach diesem Online-Kurs meine eigene Website bauen?

Ja, absolut. Der Kurs zeigt dir alles was du brauchst in einem Schritt für Schritt Prozess um am Ende deine eigene Website mit vielen Funktionen selbst umzusetzen. Am besten nutzt du einen realen Kundenauftrag nebenher um das Gelernte direkt anzuwenden. Solltest du keinen haben, aktualisiere mal wieder deine eigene Website oder baue dir ein starkes Portfolio.

Wie lange habe ich Zugang zu diesem Kurs?

Lebenslang! Du erhältst sogar kostenlos alle Updates und Lern-Module, die ich zukünftig  hinzufügen werde.

Lerne ich UI/UX Design in diesem Online-Kurs?

Auch wenn ich hier und da Design-Prinzipien durchscheinen lasse, geht es im Kern doch eher darum, wie du ein bestehendes Layout, welches dir als Vorlage dient, pixelgenau in Webflow umsetzt. Das kann dein eigenes Layout sein, aber genauso auch das von einem anderen Designer*in. Es ist also eher kein Design-Kurs.
Allerdings dienen mir als Vorlage für viele Lektionen reale Fallbeispiele und Layouts, die ich für Kunden in meinem Design-Programm erstellt habe. Anhand dessen analysieren und setzen wir Bereiche um. Du siehst also genau, welche Prinzipien ich von meinen Designs in Webflow übertrage.

Ich habe keinen Design Hintergrund, ist der Kurs trotzdem was für mich?

Viele Lektionen bringen dir neben dem Erstellungsprozess auch Design-Grundlagen näher. Trotzdem muss ich ganz klar sagen, dass es nicht als Design-Kurs gedacht ist. Es geht hier um die Umsetzung und Realisierung von Webseiten, damit du sie am Ende bedienen kannst.
Da Webflow ein visueller Editor ist, kannst du damit aber auch einfach „drauf loslegen” und ohne Design-Hintergrund Webseiten erstellen.

Worin unterscheidet sich dieser Kurs von anderen Webflow Onlinekursen?

Bisher gibt es für Webflow online viele englischsprachige Lerninhalte. Mir war es wichtig alles verständlich und in einem klaren Prozess auf deutsch für dich zusammenzufassen. Außerdem habe ich stark darauf geachtet, dass ich Website Bereiche anhand von meinen vergangenen realen Kundenaufträgen erkläre. Neben den Grundlagen des Webdesigns wirst du zudem viele Lektionen finden, die dir spezifische Elemente erklären, die du in der Praxis direkt anwenden kannst: Wir bauen Slideshows, Gallerien, Navigationen, Blogs, Styleguides, Animationen etc. Auch wenn du bisher noch nicht selbstständig Webseiten für Kunden umsetzt, kannst du das nach diesem Online Kurs ohne Probleme tun.

Wie lange brauche ich pro Woche für diesen Kurs?

Ich empfehle dir jeden Tag zwei Lektion anzuschauen um am Ball zu bleiben und schnell Ergebnisse zu sehen. Eine halbe Stunde solltest du auch neben Kundenaufträgen oder deinem Job gut unterbekommen. Die meisten Videos gehen 8-15 Minuten. Das macht also 2-4 Stunden pro Woche. Alternativ könntest du den kompletten Kurs auch in 2 Tagen durch rocken. Da du aber dein Leben lang auf diesen Kurs zugreifen kannst, kannst du genauso in deiner Geschwindigkeit lernen.

Geht es in diesem Lernprogramm nur um Webseiten oder auch um Apps?

In diesem Onlinekurs geht es primär um die Umsetzung von responsive Website Layouts für Desktop, Tablet und Mobile Geräte. Darüber hinaus könntest du Webflow aber auch genauso dazu nutzen, um App-Layouts zu realisieren und den Code anschließend zu exportieren.

Gibt es einen Weg mit Jonas zu sprechen, wenn ich irgendwo nicht weiter komme?

Während des Online Kurses kannst du zu jederzeit die Kommentarfunktion nutzen, die unter jeder Lektion integriert ist. Darauf werde ich schnellstmöglich antworten. Taucht darüber hinaus ein Problem auf oder du kommst irgendwo gar nicht mehr weiter, kannst du mich als Kursteilnehmer*in auch direkt kontaktieren.

Wenn ich den Kurs kaufe, kann ich dann auch in einem oder zwei Jahren noch Fragen stellen?

Ja klar kannst du das. Jederzeit! Ich bekomme täglich Fragen zugesendet und bisher konnte ich immer alle beantworten (auch wenn es manchmal einige Tage dauert 😉)

Ich habe schon einen anderen Webflow Onlinekurs gekauft. Lohnt sich deiner dann noch?

Ich habe z.B. auch den Kurs von Ran Segall durchgemacht (Flux Academy) und klar gibt es ein paar Themen, die in diesem Kurs auch vorkommen (müssen), trotzdem habe ich eine andere Richtung und Art Webflow zu erklären.

Mein Kurs ist auf jeden Fall handfester und orientiert sich mehr daran, wie du für Kunden Webseiten mit Webflow sehr effizient strukturierst und aufbaust. Enthalten sind jahrelange Optimierungen, die ich von meinen Kundenprojekten mit integriert habe. Zudem schauen wir uns sehr viele reale Use Cases an. Definitiv sind auch alle Inhaltlichen Elemente dabei, die eine Moderne Webseite heutzutage so braucht.

Die Frage, ob sich der Kurs trotzdem lohnt, haben mir schon einige gestellt und du wirst sicherlich viele Einblicke bekommen, die neu für dich sind und deine Arbeit beschleunigen. Zumindest war das die Rückmeldung von denjenigen, die meinen Kurs noch on top gekauft haben.

Hängt natürlich davon ab auf welchem Level du gerade bist. Wenn du dich überall schon stark findest, dann eher nicht. Aber allein, dass du drüber nachdenkst, zeigt, dass du noch mehr dazulernen möchtest. Und das ist etwas Gutes!

Mach’s doch einfach so: Hole dir einen Zugang wann immer du möchtest und wenn aus deiner Sicht nichts Neues dabei ist, überweise ich dir dein Geld zurück. Ohne Fragen zu stellen. Versprochen!

Ich habe schon Programmierkenntnisse, lohnt sich dieser Onlinekurs für mich?

Webflow bietet dir nicht nur die Möglichkeit extrem schnell und visuell deine Website aufzubauen, sondern auch hoch professionelle Animationen und Interaktionen zu realisieren, die von Hand nur schwer zu coden wären. Ich habe mit Hilfe von Webflow meinen Prozess um etliche Tage verkürzt und setze mittlerweile individuelle Layouts in wenigen Tagen anstatt Wochen um.

Häufige Fragen zu Webflow

Benötige ich eine Lizenz zum Arbeiten mit Webflow?

Es gibt einen kostenlosen Plan mit dem du zwei Projekte mit max. 2 Unterseiten anlegen kannst. Für den Start oder zum Ausprobieren neben dem Onlinekurs ist das ausreichend.

Für meine Kunden erstelle ich quasi immer einen kostenlosen Webflow Account und sie bezahlen dann einen Site-Plan um die Website zu einer Domain verknüpfen zu können. Darin enthalten sind dann weitere Funktionen und die Möglichkeit noch mehr Unterseiten anzulegen oder ggf. das Webflow CMS zu nutzen. Weitere Infos: https://webflow.com/pricing#site

Brauche ich ein Programm um mit Webflow zu arbeiten?

Nein, Webflow läuft direkt im Browser und du kannst Betriebssystem-unabhängig über ein Login mit Webflow arbeiten. Egal ob dein Gerät oder ein anderes. Alle deine Projekte sind dann dort gesammelt.

Braucht man einen Server/Host, wo die Website hochgeladen wird?

Nein. Deine Website wird automatisch auf einen ultraschnellen CDN Server geladen und ist weltweit immer zu 99,99% erreichbar. Das ist aus meiner Sicht gerade das Tolle. Das ganze Komplizierte erledigt Webflow für dich im Hintergrund. Kein hin und her kopieren mittels FTP Zugang oder ähnliches. Einfach ein neues Projekt anlegen, gestalten und zu einer Domain verknüpfen (diese muss wo anders gekauft werden) oder die kostenlose Webflow Subdomain nutzen.

Sobald Webflow mal ein Update rausbringt, steht es dir automatisch im Designer bei allen Projekten zu Verfügung. Du musst nichts dafür tun. Keine Plugins wie bei Wordpress aktualisieren, die dann ggf. nicht mehr kompatibel sind.

Ist bei Webflow ein Lizenzmodell dahinter oder kann man es unabhängig erstellen?

Du bzw. dein Kunde zahlt für Webflow monatlich bzw. jährlich. So als wenn er bei einer Wordpress Website jährlich einen Server für Hosting bezahlen muss. Dafür hast du bei Webflow immer alle zukünftigen Funktionen und Updates enthalten. Sie stehen jedem Webflow Nutzer sofort zu Verfügung.

Wenn du das Lizenzmodell nicht nutzen möchtest, kannst du auch einfach nur innerhalb von ein paar Tagen deine Website erstellen und dann den Code exportieren und auf einem eigenen Server hosten.

Kann man mit Webflow auch spezielle Effekte umsetzen (Fortgeschritten)?

Auch wenn nicht jeder Effekt explizit im Kurs enthalten ist, kann man es in Webflow für gewöhnlich umsetzen. Gerade wenn es um Animationen und Interaktionen geht. Ich habe dazu auch schon viele kostenlose Webflow Tutorials veröffentlicht. Du findest alle zusammengefasst hier: webflow-lernen.de/tutorials oder einfach meinen YouTube Kanal abonnieren.

Lerne ich wie man ein individuelles Hamburger-Menü ab Desktop Größe baut?

Ja das ist im Lern-Modul „Animation” enthalten.

Ist Webflow E-Commerce auch im Kurs enthalten?

Im Kurs ist bisher kein explizites E-Commerce Lern-Modul enthalten. Allerdings lernst du alles, was du brauchst, um einen selbst gestalteten Onlineshop in Webflow umzusetzen. Zusammen mit den Know-How wie man ein CMS aufbaut und nutzt (ist enthalten) sollte Webflow E-Commerce nicht kompliziert für dich sein. Das läuft im gleichen Prinzip ab. Hier und da gibt es eben mehr Einstellungen auszufüllen bzgl Warenkorb, Checkout etc.

Wenn ich es noch integriere, dann kommt es erst im zweiten Halbjahr 2021.

Lerne ich auch eigene Lottie-Animationen zu erstellen?

Meines Wissens nach ist für aufwendigere Animationen After Effects das beste Werkzeug und auch das Gängigste. Ich selber nutze dieses Programm aber nicht und wenn ich mal eine spezielle Animation als Lottie brauche, gestalte ich meistens die Vorlage selbst und lass es mir dann für 20€ von jemandem auf Fiverr als Lottie bauen. 

Oder ich animiere es selbst als Film und binde den Film ein. 

Im Kurs ist aber nicht enthalten, wie man Lottie Animationen mit After Effetcs erstellt. Nur wie man sie einbindet und in der Website animiert.