Dieser Kurs ist der einfachste Weg, den visuellen Designer 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.
Erfahre mehr unter: formburg.com/webflow-onlinekurs
Course plan
Einleitung
Wie du am meisten aus diesem Online Kurs rausholen kannst
Elemente aus anderen Webflow Projekten kopieren
Webflow Finder und Shortcuts nutzen
Grundlagen
Webflow Designer im Schnelldurchlauf
Was macht Webflow für uns im Hintergrund? HTML und CSS verstehen
Das Box-Model verstehen
Hierarchien und Vererbungen im Webdesign
Selektoren und CSS Klassen
Logische Benennungen von Selektoren
Verschiedene Einheiten (Units) verstehen – vw, vh, %, px, em
Einführung in Grid und Quick-Stack – Magazin Layouts
Einführung in Flexbox – Elemente horizontal und vertikal positionieren
Position relative, absolute und fixed verstehen
Übung Positionierung
Position sticky – Elemente mitscrollen lassen
Bilder richtig exportieren und verarbeiten
Mit Icons und SVG Vektorgrafiken arbeiten (3 Wege)
Mit Komponenten arbeiten
Elemente, die du verloren hast, wiederherstellen
Layout Umsetzung
Intro
Warum wir mit REM anstatt Pixel arbeiten
Font und Schriftarten einbinden
Effizient mit Variablen arbeiten
Styleguide definieren und durchgehen
Globales Custom CSS File
Fluid Design anlegen und verstehen
Seiten professionell strukturieren
Container verstehen und richtig einsetzen
Effizient mit Abständen arbeiten
SEO beim Thema Headlines beachten
Einfache standard Hauptnavigation erstellen
Dropdown zu einer Navigation hinzufügen
Text auf Bild – Hero Sektion erstellen
Webflow Slideshow – alles was du wissen musst
Webflow Slideshow fortgeschritten
Galerie in Overlay Lightbox
Video Popups und Modal Overlays – 3 Möglichkeiten
Formulare erstellen und automatisiert versenden
Mit externen Libraries arbeiten
Suchfunktion einbinden
Teilen Button in eine Website integrieren
Responsive Design Prozess
Eine Seite responsive machen – allgemeines Vorgehen
Schriftgrößen und den Styleguide responsive machen
Eigene responsive Breakpoints anlegen
Elemente bei bestimmten Geräten oder Größen ausblenden bzw. ersetzen
Lösungen für Texte, die auf mobile nicht umbrechen
CMS
Einführung in das Webflow CMS
Was unterscheidet das Webflow CMS von anderen
Nach welchem Prinzip funktioniert das CMS
FAQ Liste erstellen – CMS Beginner
Tabellen ausfüllen lassen und Inhalte als CSV Datei importieren
Pinterest Bilder Grid mit CMS erstellen
Webflow Slideshow mit CMS Inhalten
Verschachtelte Inhalte – Reference Fields erklärt
CMS Inhalte sortieren: Reihenfolgen selbst bestimmen
Blog Übersichtsseite erstellen
Blog Detailseite erstellen
Blog Archiv mit Tags und Filter anlegen
CMS Inhalte ohne Page Reload filtern (fortgeschritten) – Finsweet Attributes
Variable Layouts auf basis gleicher CMS Inhalte
CMS Inhalte in eigenem Embed Code (fortgeschritten)
Layout Animation
Mit Animationen arbeiten – Grundlagen Übersicht
Button und Links animieren – Grundlagen
Textelemente beim Scrollen rein animieren lassen
Der eine Trick, der deine Animationen Premium macht
Individuelle Seiten-Lade-Animation
Parallax Scroll Effekte
Mit Lottie Animationen arbeiten
Horizontales Bilder-Karussell / Logo-Karussell in Endlosschleife
Individuelle Typo-Scroll-Animation
Bild während des Scrollens wachsen lassen
Variablen mit Webflow Interaktionen animieren
3D Objekte in Spline vorbereiten
3D Objekte in Webflow integrieren und animieren
Eigenes Hamburger Menü ab Desktop erstellen
Eigene Webflow Slider Animationen
Seitenübergang animieren (Page Transitions erstellen)
DSGVO
Wann brauchst du einen Cookie-Banner, wann eine Datenschutzerklärung?
Datenschutzerklärung generieren und anlegen (kostenlose Variante)
Datenschutzerklärung größere Kunden (kostenpflichtige Variante) – datenschutz-generator.de
Auftragsverarbeitungsvertrag (AVV) mit Webflow abschließen (mit Vorlage)
Wichtige Cookie Banner Grundlagen
Wie kannst du überprüfen, welche Cookies gesetzt werden
Cookie Banner Variante 1: cookie-script.com integrieren (kostenlose und bezahlte Version)
Cookie Banner Variante 2: Finsweet Webflow Cookie Consent integrieren (kostenlos)
Alternative zu Google Analytics ohne Cookies
Google Maps Karten einbinden (DSGVO konform)
Website Launch
SEO Seiteneinstellungen (Suchmaschinenoptimierung)
301 Redirects: SEO Kunden-Rankings nicht verlieren
Website optimieren für besseren Google Pagespeed
Impressum anlegen und generieren
Domain verknüpfen
Google Search Console einrichten und Sitemap hochladen (SEO)
Checkliste vor Website Launch
Zusammenarbeit mit Kunden
Kunden von Webflow überzeugen
Der richtige Webflow-Plan für dich und deine Kunden
Webflow Code exportieren
Hosting bei Webflow – Vorteile
Kunden Editor Zugang einrichten
Wie Kunden die Website bearbeiten können
Schulung aufnehmen und Website an Kunden übergeben
Kurs Änderungs-Logbuch
Änderungs-Logbuch
ARCHIV
Umsetzung Realer Kundenauftrag
Intro
Übersicht, Analyse und Aufbereitung des Layouts
Webflow Projekt anlegen
Custom Font hinzufügen
Font Größen und Styleguide anlegen
Font Größen responsive machen
Icon Font erstellen und einbinden
Container und Maximalbreiten definieren
Haupt-Navigation bauen - OnePager
Mobile Navigation bauen (mit Lottie Animation)
Hero Section erstellen (Text auf Bild)
Hintergrundvideos einbinden (Text auf Video)
Globale Abstände definieren und wiederverwenden
SEO freundliche Headlines und Stile definieren
Hero Section mit zwei Bildern nebeneinander
Textboxen nebeneinander anordnen (eigenes Grid)
Bild Slideshow erstellen
Verschiedene Inhalte in Tabs verschachteln
Alle Inhalte aus dem Layout einarbeiten
Weitere Anpassungen
Footer und Impressum/Datenschutz Unterseiten
Seite responsive machen
Einfache Bild Scroll-Animations Effekt erstellen
Einfache SlideUp Effekt auf Textelemente
