Visuell und ohne eine einzige Zeile Code schreiben zu müssen.
Von den Grundlagen über beeindruckende Animationen bis hin zur Veröffentlichung und Übergabe an deine Kunden.
Du lernst individuelle Webseiten ohne Programmierkenntnisse zu realisieren.
Dieser Kurs ist bis oben hin vollgepackt mit den besten Informationen zur Erstellung großartiger visueller Webseiten.
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
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
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
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
Domain verknüpfen
08:28
Datenschutzerklärung generieren und Seite anlegen
15:40
Webflow Data Processing Agreement ausfüllen
03:08
DSGVO Cookie Banner 1: Cookiebot 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
DSGVO Cookie Banner 2: Cookie-Script integrieren und anpassen
41:23
Bonus
Ab März
Einführung in das Webflow CMS
06:53
Was unterscheidet das Webflow CMS von anderen
08:19
Nach welchem Prinzip funktioniert das CMS
08:34
FAQ Liste erstellen – CMS Beginner
08:31
„Pinterest” Bilder Grid erstellen – CMS Beginner
06:29
Reihenfolge der CMS Inhalte selbst bestimmen
02:37
Blog erstellen – CMS
23:08
Blog Archiv mit Tags und Filter anlegen – CMS
13:05
CMS Content ohne Page Reload filtern (fortgeschritten)
14:21
Kunden Tabellen ausfüllen lassen und Inhalte als CSV Datei importieren
16:32
Elemente basierend auf CMS Inhalten ein/ausblenden oder umgestalten
07:55
Verschachtelte CMS Elemente
06:52
Slideshow mit CMS Content
11:03
CMS Inhalte in eigenem Code verwenden – Embed Element (fortgeschritten)
11:40
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
Mit Animationen arbeiten – Einführung
08:13
Button und Links animieren (Grundlagen)
14:52
Textelemente beim Scrollen rein animieren (einfach)
15:59
Einfache Parallax Scroll Effekte mit Bildern
10:33
Lottie Animationen einsetzen
26:04
Logo Karussell in Endlosschleife
13:13
Seitenübergang animieren (Page Transitions erstellen)
23:13
Einen Pre-Loader erstellen
15:23
Eigene Webflow Slider Animationen
18:37
Einen Teil deiner Website horizontal scrollen lassen
22:41
Eigenes Hamburger Menü ab Desktop erstellen
33:15
Umfangreiche Scroll Animation erstellen (fortgeschritten)
1:01:12
Bild während des Scrollens wachsen lassen
09:27
Individuelle Seiten-Lade-Animation
16:41
3 monatliche Zahlungen
175
€
210€
Ratenzahlung für drei Monate.
Inklusive lebenslangem Zugang und allen zukünftigen Updates.
Einmalzahlung
499
€
599€
Bezahle im Voraus und spare zusätzlich 26€ gegenüber der Ratenzahlung. Inklusive lebenslangem Zugang und allen zukünftigen Updates.
Webdesign Bundle
783
€
854€
Hole dir meinen Webdesign Angebote erstellen Onlinekurs im vergünstigten Paketpreis mit dazu und spare 71€!
Für alle Selbstständigen sind das nur 658€ netto.
Inklusive lebenslangem Zugang und allen zukünftigen Updates.
Alle Preise inkl. 19% Umsatzsteuer.
Du erhältst eine Rechnung, die du als Werbungskosten in deiner Steuererklärung absetzen kannst (Fortbildungskosten).
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
Ich selbst habe viel von den Tutorials aus der Webflow University gelernt. Mir alles selbst anzueignen so, wie ich Webflow heute beherrsche, hat allerdings Jahre gebraucht. Der Kurs bietet dir die Möglichkeit das ganze in einer Woche zu lernen. Hier sind ein paar weitere Vorteile:
Lese dir ansonsten gerne noch ein paar Testimonials durch 😊
https://www.webflow-lernen.de/bewertungen
Du hast lebenslang Zugang zu diesem Kurs.
Sobald du den Kurs kaufst, hast du alle vergangenen und auch zukünftigen neuen Inhalte und Updates inklusive. Du musst nicht nochmal was extra zahlen.
Bei Interesse bitte per Mail bei mir melden:
Ja. Der Kurs bildet alles ab, was man braucht, um alleine einen Kundenauftrag von der weißen Seite bis zur Verknüpfung der Domain, umzusetzen.
Natürlich ist es hier und da etwas technisch, aber viele sind ja auch mit einem Design-Programm wie Sketch, Figma, Adobe XD etc. vertraut und ich versuche hier auch die Brücke zu schlagen.
Ja den gibt es. Du bekommst 125€ Rabatt (25%).
Bitte sende mir dazu einfach eine Nachricht und schreibe mir kurz, wie dein Studiengang bzw. deine Ausbildung heißt und auf welcher Schule du bist:
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 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!
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.
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.
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.
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.
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.
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.
Lebenslang! Du erhältst sogar kostenlos alle Updates und Lern-Module, die ich zukünftig hinzufügen werde.
Auf jeden Fall!
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.
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.
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.
Ja, es gibt eine 14 Tage Geld-Zurück-Garantie.
Frage: Wenn ich einem Kunden ein funktionierendes CMS weitergeben möchte, welche Schritte müssen dafür mit exportiertem Code gemacht werden? Hat dieser Code immer noch eine CMS-Bearbeitungsfunktion oder muss man dann den Code in ein anderes CMS importieren bzw. einpflegen? Welches Tool wäre dann dafür geeignet?
Gibt es das Webflow-Hosting / CMS auch bei Anbietern und Servern in der Schweiz/Deutschland?
Antwort: Ich würde immer empfehlen, das Webflow CMS in Verbindung mit Webflow Hosting zu nutzen. Sobald du damit anfängst, willst du auch nicht mehr weg weil es so einfach ist und bearbeitet werden kann 😊 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. Nichts per FTP hochladen. Keine Fehler suchen oder überlegen, warum was nicht mehr kompatibel ist… Du hast immer die neueste Version des Webflow Designers und des Webflow CMS.
Du kannst das Webflow CMS nicht auf einem eigenen Server nutzen oder exportieren. Alles, was mit den Webflow CMS Collections erstellt / Verknüpft ist, wird bei einem Code Export nicht mit exportiert!
Webflow nutzt für das Hosting Amazon AWS Services. Die sind weltweit verteilt und individuell je nach Standort. Für uns In Deutschland ist das momentan ein Server in Irland, also in der EU.
Ja. Animationen, Aufbau mehrere Unterseiten, Texte, Bilder und Inhalte. Alles wird genau so dargestellt und funktioniert wie im Webflow Designer erstellt. Was allerdings NICHT mit exportiert werden kann, sind CMS Daten. Sobald du also mit dem CMS Arbeitest, musst du auch bei Webflow hosten bzw. diese Bereiche werden beim export einfach leer gelassen.
Kann eine im Webflow erstellte Webseite mit allen Funktionen (auch Animationen) und dem Design vollständig per Code exportiert werden (mit dem entsprechenden Abonnement) und kann diese dann ohne komplizierte Anpassungen bei einem normalen Hosting hochgeladen und direkt wiederverwendet werden?
Ja, der Code, der exportiert wird, beinhaltet einen Ordner mit allem, was mit der erstellten Website zu tun hat. Inklusive JavaScript und responsive Bildern in mehrere Größen. Du kannst diesen Ordner 1:1 auf einen eigenen Server hochladen und die Domain an die index.html weiterleiten.
Was allerdings NICHT mit exportiert wird, sind CMS Daten. Sobald du also mit dem CMS Arbeitest, musst du auch bei Webflow hosten. Bzw. diese Bereiche/Elemente werden bei einem Export einfach leer gelassen.
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.
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.
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.
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.
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.
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.
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