Webflow

Profi-Kurs

Fortgeschrittene Webdesign Techniken für Webflow Poweruser.

Zugang holen
Presented by
Expert
Kit.
Learn to build any Website

werde zum Experten für außergewöhnliche Websites

Neu 2025
Online Course
70+ Videos

Du kennst dich schon gut mit Webflow aus und möchtest jetzt richtig durchstarten? Dieser Kurs hilft dir, deine Skills auf das nächste Level zu bringen! Mit fortgeschrittenen Techniken zeige ich dir, wie du außergewöhnliche Websites umsetzt.

5
Kapitel
60+
Lektionen
9+
Stunden an Videos
Mit Webflow Experte
Jonas Arleth

Was wir im Kurs bauen

  • CMS Produkt-Konfigurator mit Bezahlfunktion
  • Interaktive 2D und 3D Produkt-Demonstration
  • Umsetzung von extrem individuellen Layouts
  • Kleines Shop-System (kein Webflow E-Commerce!) mit Warenkorb und Stripe-Checkout-Funktion
  • Fortgeschrittene Finsweet Attributes Integrationen
  • Profitechniken für Animationen

Inhalte

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

Einleitung

00Videos
00Stunden

Text Content

Fortgeschrittene Layouts und Animationen

00Videos
00Stunden

Text Content

2D und 3D Produkt-Demo

00Videos
00Stunden

Text Content

CMS Konfigurator

00Videos
00Stunden

Text Content

Einfacher Stripe Checkout (No-Code)

00Videos
00Stunden

Text Content

Shop-System mit Warenkorbfunktion und Stripe Checkout

00Videos
00Stunden

Text Content

0
Konfigurator – Kurs-Modul Vorschau
CMS Konfigurator
02:30
14
Stripe Checkout mit MAKE generieren
Shop-System mit Warenkorbfunktion und Stripe Checkout
13:40
12
Schneller Warenkorb: Add-to-Cart in Produktübersicht hinzufügen
Shop-System mit Warenkorbfunktion und Stripe Checkout
04:30
13
Sales-Tag mit Prozent-Berechnung aus zwei Preisen erstellen
Shop-System mit Warenkorbfunktion und Stripe Checkout
01:40
10
Quantity-Zähler mit Plus/Minus Buttons bauen
Shop-System mit Warenkorbfunktion und Stripe Checkout
07:00
8
Warenkorb Toggle und Modal Fenster Funktionalität
Shop-System mit Warenkorbfunktion und Stripe Checkout
05:50
11
Warenkorb Summe gesamt implementieren
Shop-System mit Warenkorbfunktion und Stripe Checkout
02:30
9
Custom JS Warenkorb Funktion bauen
Shop-System mit Warenkorbfunktion und Stripe Checkout
13:20
7
Warenkorb Design umsetzen
Shop-System mit Warenkorbfunktion und Stripe Checkout
08:40
6
Auf andere Produkt-Varianten verlinken
Shop-System mit Warenkorbfunktion und Stripe Checkout
03:50
5
Produkt Detailseite Design umsetzen
Shop-System mit Warenkorbfunktion und Stripe Checkout
11:50
3
Produkt Übersichtsseite als Komponente erstellen
Shop-System mit Warenkorbfunktion und Stripe Checkout
11:20
4
Finsweet Attributes CMS Filter und Sortieren Funktion einbinden
Shop-System mit Warenkorbfunktion und Stripe Checkout
11:07
2
Webflow CMS einrichten mit KI-generierten Inhalten und CSV-Import
Shop-System mit Warenkorbfunktion und Stripe Checkout
05:10
1
Für wen ist diese Lösung geeignet und für welche Kunden nicht?
Shop-System mit Warenkorbfunktion und Stripe Checkout
04:30
7
3D-Videos in Lottie konvertieren und animieren
2D und 3D Produkt-Demo
6
Lazy Loading eines Spline 3D-Objekts bei Klick mit Fullscreen-Popup-Animation
2D und 3D Produkt-Demo
11:03
5
3D-Video-Animation bei Button-Klick (besser für Performance)
2D und 3D Produkt-Demo
07:40
4
Klickbasierter Bild-Zoom-Effekt über Attribut-Koordinaten mit Popover
2D und 3D Produkt-Demo
09:50
3
3D Objekt Video-Animation anlegen und exportieren
2D und 3D Produkt-Demo
05:30
1
Umsetzung Design 3D Produkt-Showcase Sektion
2D und 3D Produkt-Demo
06:40
2
3D Spline Objekt vorbereiten und als Bild exportieren
2D und 3D Produkt-Demo
04:20
3
Stripe App in Webflow
Einfacher Stripe Checkout (No-Code)
2
Produkte und Checkout Links in Stripe Anlegen
Einfacher Stripe Checkout (No-Code)
07:10
1
Vorteile und Nachteile von Stripe gegenüber Shopify oder Webflow E-Commerce
Einfacher Stripe Checkout (No-Code)
07:20
10
Konfigurator Responsive Design
CMS Konfigurator
06:20
9
Popover Funktionalität am Produkt mit Erklärung
CMS Konfigurator
07:50
11
Optimierungen und Bug Fixes
CMS Konfigurator
09:10
8
Info-Punkt auf dem Produkt über das CMS positionieren
CMS Konfigurator
03:30
7
Eigene CSS Animation für CMS Attributes Filter System
CMS Konfigurator
06:50
6
Lichtstrahl-Farbwechsel mit dem CMS steuern
CMS Konfigurator
02:51
5
CMS Lightbox Galerie mit Slug Gruppennamen (Webflow Limitierung umgehen)
CMS Konfigurator
02:50
4
Umsetzung Design Radio Button
CMS Konfigurator
11:30
3
Filterfunktion einbinden
CMS Konfigurator
11:50
2
Umsetzung Konfigurator Design
CMS Konfigurator
11:10
1
Aufbau der CMS Kollektionen
CMS Konfigurator
06:10
26
Light / Dark Mode Toggle mit Webflow Variablen Farb-Management
Fortgeschrittene Layouts und Animationen
12:07
25
Hero Section Overscroll-Effekt
Fortgeschrittene Layouts und Animationen
09:40
24
CMS Grid mit Dialog / Modal / Popup Funktionalität
Fortgeschrittene Layouts und Animationen
14:30
23
Zahlen rein animieren on scroll
Fortgeschrittene Layouts und Animationen
03:40
22
Responsive Design Tabs
Fortgeschrittene Layouts und Animationen
07:10
20
Autoplay Tabs Button Animation
Fortgeschrittene Layouts und Animationen
04:43
21
Autoplay Tabs Layout 2 wie auf der Webflow Homepage mit Video Content
Fortgeschrittene Layouts und Animationen
16:02
18
Tab Übergang animieren mit CSS
Fortgeschrittene Layouts und Animationen
04:30
19
Autoplay Tabs Funktionalität einstellen
Fortgeschrittene Layouts und Animationen
07:10
16
Fullscreen-Tabs-Sektion Grundaufbau
Fortgeschrittene Layouts und Animationen
08:20
17
Einfacher Section-Overscroll-Effekt
Fortgeschrittene Layouts und Animationen
06:00
15
Page Load Animation Bühne
Fortgeschrittene Layouts und Animationen
5:40
14
Box Animation
Fortgeschrittene Layouts und Animationen
07:40
13
Responsive Design Bühne
Fortgeschrittene Layouts und Animationen
10:50
12
Trick Positionierung Hintergrund Bühne und Umsetzung der Tabelle
Fortgeschrittene Layouts und Animationen
07:10
11
Modal / Popup Komponente mit CSS Animation erstellen
Fortgeschrittene Layouts und Animationen
17:30
9
3D Box in Webflow bauen
Fortgeschrittene Layouts und Animationen
16:00
10
Inhalte Bühne mit Video Teaser Popup
Fortgeschrittene Layouts und Animationen
05:10
8
Badge Animation on scroll
Fortgeschrittene Layouts und Animationen
05:30
7
Gradient Grafik Bühne
Fortgeschrittene Layouts und Animationen
10:00
6
Komponenten in Haupt-Navigation einbauen und mit custom CSS anpassen
Fortgeschrittene Layouts und Animationen
07:00
5
Button Toggle mit Icon als Komponente anlegen
Fortgeschrittene Layouts und Animationen
22:10
4
Design und CSS Animation von Link-Button mit Komponent Varianten
Fortgeschrittene Layouts und Animationen
22:20
3
Hauptnavigation Animation
Fortgeschrittene Layouts und Animationen
17:30
2
Hauptnavigation responsive optimieren und wichtige zusätzliche Einstellungen
Fortgeschrittene Layouts und Animationen
09:00
1
Hauptnavigation bauen
Fortgeschrittene Layouts und Animationen
31:40
2
Styleguide Vorarbeit, CSS Variables und Grundeinstellungen durchgehen
Einleitung
04:30
1
Willkommen! Ein wichtiger Hinweis (+ Geschenk für dich)
Einleitung
02:00

Bonus

Inklusive Figma Design-Datei zum Download
Nutze die im Kurs erstellte Webflow-Vorlage frei für deine Kundenprojekte.
Über die Kommentarfunktion im Kurs kann ich dir bei Fragen direkt weiterhelfen

Tools, mit denen wir im Kurs arbeiten

Webflow
Finsweet Attributes
MAKE
Stripe
Figma
Spline

Einblicke

Umsetzung von Fortgeschrittenen Layouts und Animationen
CMS Konfigurator mit Bezahlfunktion
Shop und Warenkorb Funktion mit Stripe Checkout

Statt auf Webflow E-Commerce setzen wir auf eine individuelle Lösung mit Stripe-Anbindung. Deine Kunden zahlen lediglich die Stripe-Transaktionsgebühren. Die Produktverwaltung erfolgt über Stripe, während die Integration der Produktinfos über die API realisiert wird.

2D und 3D Produkt Demonstration

Video-Einblicke in Layouts gibts auch in dieser Playlist

Inklusive Bonusmaterial

Webflow Vorlage mit allem, was wir im Kurs bauen zur Verwendung bei deinen Kundenaufträgen

Figma Layouts als Download

531

Über 531 aus den unterschiedlichsten Branchen sind schon dabei!

Alle Bewertungen lesen
MP X ACHTVISION
Josh Alvarado
Kai
Dennis H.
Joachim
Amanda
Alexandra
+00

Ich kann den Kurs gar nicht hoch genug wertschätzen. Webflow mit Jonas´ Kurs zu lernen hat meinen beruflichen Schwerpunkt komplett verändert und Geschäftsfelder eröffnet, die bisher nicht erreichbar waren.

Sven
Diplom Designer, Webdesigner

Jonas lässt mit seinem Webflow-Kurs wirklich keine Fragen mehr offen. Obwohl ich bereits mit Webflow gearbeitet habe, konnte ich viel Neues für mich mitnehmen.

Alexander S.
Co-Founder VisualMakers

Ich mag die Videos und die Herangehensweise von Jonas sehr. Ich würde den Kurs jedem empfehlen, der Webflow wirklich verstehen und lernen will.

Sabine R.
Expertin für Marketing-Automatisierung

Webflow macht es mir möglich, meine Webprojekte als Designerin von vorne bis hinten allein umzusetzen und das genau so, wie ich mir das vorgestellt habe.

Miriam K.
Miriam K.
Kommunikationsdesignerin
Dein Investment

Hol dir dein Webflow-Boost

Alle Videos sind online!

00
Tage
00
Stunden
00
Minuten
00
Sekunden
Webflow Profi-Kurs
Webflow Profi-Kurs
Super-Deal
  • 9+ Stunden an Videomaterial
  • Lebenslanger Zugang und Updates
  • Figma Designvorlage
  • Webflow Projektvorlage mit allem was wir bauen
  • Abschlusszertifikat
499
599
Spare 17€ mit der Einmalzahlung.
Du sparst00
Webflow Komplettkurs
Webflow Profi-Kurs
Bundle – Webflow Komplettkurs + Webflow Profi-Kurs
Super-Deal
  • 9+ Stunden an Videomaterial
  • Lebenslanger Zugang und Updates
  • Figma Designvorlage
  • Webflow Projektvorlage mit allem was wir bauen
  • Abschlusszertifikat
891
1.048
Spare 15% bei diesem Bundle!
Du sparst00
Alle Preise inklusive 19% Umsatzsteuer. Du erhältst eine Rechnung, die du als Werbungskosten in deiner Steuererklärung absetzen kannst (Fortbildungskosten).
MP X ACHTVISION
Josh Alvarado
Kai
Dennis H.
Joachim
Amanda
Alexandra
+00
Mehr als 00 Personen nutzen Kurse von Formburg für ihre Weiterbildung. Rückmeldungen lesen.

Schüler oder Student?

Erhalte 25% Rabatt.
Bitte sende dazu einfach eine Mail mit der Info, wie dein Studiengang bzw. deine Ausbildung heißt und auf welche Schule du gehst an:

FAQ

Häufige Fragen zum Onlinekurs

Ich habe schon deinen Webflow Komplettkurs absolviert. Lohnt sich der Profi-Kurs für mich noch?

Im Profi-Kurs geht es um die nächste Stufe: komplexe Layouts, kreative Problemlösungen, fortgeschrittene Animationen und Techniken, die dir ermöglichen, einzigartige und anspruchsvolle Projekte umzusetzen. Diese Inhalte gehen weit über den Starter-Kurs hinaus und setzen fundierte Kenntnisse in Webflow voraus. Wenn du dich mit responsivem Design in Webflow noch unsicher fühlst, könnte es sinnvoll sein, zuerst deine Grundlagen zu festigen, bevor du dich diesem anspruchsvollen Kurs widmest.

Wie unterscheidet sich der Profi-Kurs zum Starter-Kurs

Der Profi-Kurs richtet sich an erfahrene Webflow-Nutzer und setzt grundlegende Kenntnisse sowohl in Webflow als auch im allgemeinen Website-Aufbau voraus. Statt Basiswissen zu vermitteln, konzentriert sich der Kurs darauf, anspruchsvolle Problemstellungen in Webflow effizient und kreativ zu lösen. Du lernst, komplexe Layouts umzusetzen, die optisch ansprechend und technisch herausfordernd sind, sowie beeindruckende Animationen zu erstellen. Dieser Kurs ist ideal, um dein Können auf ein neues Level zu bringen und Websites zu realisieren, die weit über den Standard hinausgehen.

Arbeite ich im Kurs mit dem Finsweet Client First System?

Ich habe den Client First Styleguide auf meine Bedürfnisse angepasst und vieles davon abgeleitet. Trotzdem hier und da auch mal was anders benannt. Aber die Struktur ist sehr ähnlich. Wenn du die Herangehensweise aus meinem Kurs verstehst, fällt es dir sehr leicht auch ein Projekt komplett nach dem Client First Prinzip aufzubauen.

Auch viele, die schon im Kurs dabei sind, arbeiten danach mit dem Client First Ansatz und nutzen den Styleguide davon als Vorlage und nicht meinen.

Sind alle zukünftigen neuen Inhalte kostenlos inklusive?

Mit dem Kauf des Kurses erhältst du lebenslangen Zugang – inklusive aller bisherigen Inhalte sowie sämtlicher zukünftiger Updates und neuer Module. Einmal zahlen, alles inklusive: Es entstehen keine zusätzlichen Kosten für dich.

Machst du auch persönliche Schulungen bei Agenturen (online oder live) um ggf. gezielt Fragen und Aufgabenstellungen zu klären?

Bei Interesse bitte per Mail bei mir melden:

Gibt es einen Rabatt für Studenten, Schüler oder Auszubildende?

Du bekommst 25% Rabatt.

Bitte sende dazu einfach eine Mail mit der Info, wie dein Studiengang bzw. deine Ausbildung heißt und auf welche Schule du gehst an:

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 einmal pro Woche antworten. Taucht darüber hinaus ein Problem auf oder du kommst irgendwo gar nicht mehr weiter, kannst du mich auch direkt über den Chat kontaktieren.

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 einer Woche durch rocken. Da du aber dein Leben lang auf diesen Kurs zugreifen kannst, kannst du genauso in deiner Geschwindigkeit lernen.

Gibt es ein Abschlusszertifikat?

Du kannst ein Abschluss-Zertifikat mit deinem Namen als PDF von mir bekommen, sobald du 80% des Kurses abgeschlossen hast.
Für das Zertifikat musst du mich kontaktieren mit dem Namen, der auf das Zertifikat soll und deiner Bestellnummer. Dann werde ich deinen Fortschritt überprüfen.

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.

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

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