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

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

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

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

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 Layout
Webflow iPhone Sceen Layout
Webflow iPhone Sceen Layout
Webflow Website Layout
Webflow iPhone Sceen Layout
Webflow iPhone Sceen Layout
Webflow Website Layout

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!

Lerne von überall und mit jedem Gerät

Lebenslanger Zugang

4k Video Aufnahmen

14 Tage Geld Zurück Garantie

Beispiele anhand realer Kundenaufträge

Alle zukünftigen Updates enthalten

Mehr als 80 Videos und über 13 Stunden Material

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

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

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

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

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.

Dein Investment

Was kostet der Kurs?

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.

FAQ

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.

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 mithilfe von Webflow meinen Prozess um etliche Tage verkürzt und setze mittlerweile individuelle Layouts in wenigen Tagen anstatt Wochen um.

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.

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.

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.

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.

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.

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.