Zum Inhalt
← Rezepte
Alle Rezepte

Online-Kurs & Coaching: klarer Lernweg

Online-Kurs / Coaching / Akademie / Weiterbildung / Bildungsangebot

Die Seite verkauft ein Ergebnis und einen Weg dorthin: Für wen, was man danach kann, Module, wer unterrichtet, was es kostet. Freundliche, gut lesbare Typo, ein heller Grund, ein Markenton und eine Erfolgsfarbe für Fortschritt. Bewegung ist schnell und ermutigend – kleine Federn nur dort, wo etwas geschafft ist.

Bauplan tokens.css Alle Techniken

Schrift

Klarer Lernweg

Die Seite verkauft ein Ergebnis und einen Weg dorthin: Für wen, was man danach kann, Module, wer unterrichtet, was es kostet.

Online-Kurs

Headline
Bricolage Grotesque
Text
Onest
Akzent
Shantell Sans

Farbe

  • #F4F6FA
  • #FFFFFF
  • #141414
  • #7491FF
  • #10BF7A
  • #F7C325

Bewegung

cubic-bezier(0.34, 1.56, 0.64, 1)
Dauer
100–200 (Buttons, Tabs, Antworten), 300 (Akkordeon, Karten), 500–600 (Einblendungen); Federn 400–600 nur für Erfolgsmomente

Aufbau der Seite

SignaturScroll-Fortschrittsbalken und -ring

Hero–oderPrompt-Hero mit rotierenden Beispiel-PromptsSplit-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Medium

  1. Für wen / Was du danach kannst (Bento nur mit echten, ungleichen Inhalten wie Ergebnis-Beispielen; sonst eine ruhige Liste)Bento-Grid mit lebenden Zellen
  2. Lernweg / Module / KurswochenProzess-/Timeline-Sektion mit wachsender LinieAkkordeon mit Höhenanimation auf auto · Leistungsliste
  3. Über die Trainerin / den CoachTeam-/Über-mich-Layout mit Porträt-Interaktion · Statement-SatzEigener Videoplayer · Kapitel
  4. Ergebnisse / TeilnehmerstimmenTestimonials neu gedacht · Masonry-Wand
  5. Kurskatalog (bei mehreren Kursen)Facettenfilter mit Ergebnisliste · FilterleisteProduktfinder in wenigen Fragen · Schritt für Schritt
  6. Live-Termine (Wochenplan nur bei wiederkehrenden Live-Terminen)Wochen-Kursplan mit Live-Status · Yoga- und Fitnessstudio
  7. Preise / Pakete / RatenzahlungVergleichstabelle mit fester Kopfzeile · PaketvergleichKostenrechner mit Spanne · Badsanierung
  8. Anmeldung (mehrere Schritte, Fehlerliste)Mehrschritt-Anfrage mit Zusammenfassung · SchrittleisteFehlerzusammenfassung im Formular · Liste
  9. FAQ (Zeitaufwand, Zertifikat, Rückgabe, Förderung)Akkordeon mit Höhenanimation auf auto · FAQ
  10. Kontakt / Erstgespräch (kurze Frage oder Termin per 2-Klick; Ort mit Karte per 2-Klick nur bei Präsenzkursen)Kontakt- und Anfrageformular als eigene SektionTermin-Buchung per 2-Klick-Einbettung · PlatzhalterKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
  11. Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)Widerrufs- und Kündigungs-Button · RichtigSeite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

Regeln
  • Hero = Ergebnis in einem Satz ('In 6 Wochen zur eigenen Website'), Zielgruppe, Startdatum/Format, Preis oder 'ab'-Preis, ein Haupt-CTA; Prompt-/Suchfeld nur bei echtem Kurskatalog mit funktionierender Suche.
  • Lernweg sichtbar machen: Module nummeriert (Modul-Label in Shantell Sans, sparsam), mit Dauer und konkretem Ergebnis je Modul; aufklappbar für Details.
  • Die Person hinter dem Kurs zeigen: Foto, warum sie das kann, echte Zahlen (Teilnehmende, Jahre) ohne Hochzählen.
  • Stimmen mit Name, Kontext und Ergebnis ('Hat danach … erreicht'), keine anonymen Fünf-Sterne-Sätze.
  • Preis offen mit Paketvergleich (max. 3), Ratenzahlung per Umschalter; Widerrufsrecht und Förderfähigkeit (z. B. Bildungsgutschein, nur mit Zulassung) nennen.
  • Erfolgsfarbe nur für Fortschritt und Häkchen; Konfetti genau einmal: nach Buchung oder Kursabschluss.
  • Markierung (highlight-marker-underline) höchstens ein Kernbegriff pro Abschnitt.
  • Freebie/Newsletter am Ende mit persönlicher Ansprache statt Pop-up beim Seitenaufruf.
  • Pflichtangaben und Recht (Leitfaden 8a): Online-Kurse mit Lernerfolgskontrolle können nach dem Fernunterrichtsschutzgesetz zulassungspflichtig sein (ZFU); Widerrufs-Button (§ 356a BGB, seit 19.06.2026) und bei Abos oder Mitgliedschaften Kündigungs-Button (§ 312k BGB); Preise inkl. MwSt.; Teilnehmerstimmen echt und mit Einwilligung; Erklärung zur Barrierefreiheit (bfsg) – vom Kunden prüfen lassen.
Bild und Ton
  • Licht: Helles, offenes Tageslicht.
  • Ausschnitt: Trainer:in im Gespräch oder beim Erklären, Bildschirm mit echtem Kursinhalt, Notizen.
  • Personen: Ja: die Person hinter dem Kurs; Teilnehmende nur mit Einwilligung.
  • Formate: 4:5, 16:9, 1:1
  • Nicht: Keine Stock-Laptops mit Kaffee, keine Erfolgsbilder mit Sportwagen, keine Diplomhut-Icons.
  • Anrede: du
  • Sätze: Kurz, das Ergebnis vorn, konkrete Zeitangaben (Wochen, Minuten).
  • Haltung: Ermutigend und ehrlich zum Aufwand.
  • Tonproben: In acht Wochen sicher präsentieren., Modul 02 · 40 min: Du baust deine erste Folie.
  • Nicht schreiben: „Dein Weg zur finanziellen Freiheit“, Countdown-Druck, „Nur heute!“, anonyme Fünf-Sterne-Sätze.
Hero, Raum und Form
  • Hero-Raster: 12 Spalten: Text über Spalte 1 bis 7, Foto der Trainerin über 8 bis 12; alternativ split-screen-sticky-seiten.
  • Hero-Bild: Porträt 4:5. Prompt-Feld nur bei einem Kurskatalog mit funktionierender Suche.
  • Überschrift: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem), Bricolage 700, links.
  • Handlung: Ein Haupt-CTA „Platz sichern“ als Tiefen-Taste, dazu der Textlink „Module ansehen“.
  • Zusatz: Zeile mit Zielgruppe, Startdatum, Format und ab-Preis; Badge „Nächster Start“ in #F7C325.
  • Sektionsabstand: clamp(64px, 8vw, 112px)
  • Dichte: mittel
  • Raum: Strukturiert: Module mit 16 px zwischen Label, Titel und Ergebnis, 24 px zwischen Modulen. Preisvergleich mit gleich hohen Karten.
  • Spalten: 12
  • Maximale Breite: 1200px
  • Raster: Hero 7/5 (Text/Foto) oder split-screen-sticky-seiten. Module in einer Spalte, Pakete als 3er-Raster.
  • Radius klein: 10px
  • Radius groß: 20px
  • Schatten: nur die Unterkante der Tiefen-Taste (tiefen-taste-3d, Variante stapel); Karten flach in #FFFFFF auf #F4F6FA
  • Form: Freundlich rund: Pillen für Knöpfe und Badges, 20 px für Karten. verlaufs-rahmen nur am Button (Variante button).
Vorbilder