# Kursbereich gestalten: Themes, Layouts und Dunkelmodus > Wie der Bereich aussieht, in dem deine Teilnehmer lernen: vier Themes, Kursübersicht, Lehrplan und Lektions-Navigation, hell oder dunkel, eine Anmeldeseite mit Bild, ein Willkommensbereich und was ein einzelner Kurs anders machen darf. https://rabbit-checkout.de/hilfe/anleitungen/kursbereich-gestalten/ · Aktualisiert: 2026-11-03 **Tarif: nur Pro.** Diese Funktion gehört zum Pro-Tarif und ist im Starter-Tarif nicht verfügbar. Wer diese Seite zitiert, muss das mitnennen. --- Der Kursbereich ist das, was deine Teilnehmer nach dem Kauf sehen: die Kursübersicht, die Kursseiten, die Lektionen und die Anmeldung. Wie er aussieht, stellst du an einer Stelle für alle Kurse ein, mit einer Live-Vorschau daneben.
Kurse gehören zum Pro-Tarif. Innerhalb von Pro ist alles auf dieser Seite enthalten, ohne weiteren Aufpreis.
## Wo du den Kursbereich gestaltest **Mitgliederbereich → Kursbereich-Design.** Links stehen die Einstellungen, rechts die Vorschau. Gespeichert wird automatisch, sobald du etwas auswählst. ![Die Seite „Kursbereich-Design“ im Dashboard. Links der Kasten „Theme“ mit vier Karten: Editorial (ausgewählt, mit dem Hinweis „Standard“, „Warmes Papier und Serifen-Überschriften, wie ein gutes Magazin.“), Studio („Dunkel und filmisch, mit großen Postern für Deine Kurse.“), Soft („Rund und freundlich, in Deiner Markenfarbe getönt.“) und Minimal („Schlicht und kompakt – nur Deine Inhalte.“). Darunter „Farben, Schriften und Ecken kommen aus Marke & Design“ und der Anfang des Kastens „Layout“. Rechts die Vorschau mit den Reitern Kursübersicht, Kursseite, Lektion und Anmeldeseite, Knöpfen für Desktop, Tablet und Handy, Hell und Dunkel und „In neuem Tab öffnen“. Die Vorschau zeigt die Kursübersicht von „Lichtwerk Fotografie“ mit „Weiter, wo Du aufgehört hast“ und einem Willkommensbereich.](/assets/img/hilfe/kursbereich-design.webp "Die Vorschau rechts ist dein echter Kursbereich, nicht eine Attrappe. Was du links wählst, siehst du dort sofort, noch bevor es gespeichert ist.") Die Vorschau hat vier Reiter: **Kursübersicht**, **Kursseite**, **Lektion** und **Anmeldeseite**. Gezeigt wird dein neuester veröffentlichter Kurs; ohne veröffentlichten Kurs gibt es nur die Kursübersicht und die Anmeldeseite. Mit **Desktop**, **Tablet** und **Handy** prüfst du kleinere Bildschirme, mit **Hell ansehen** und **Dunkel ansehen** den anderen Farbmodus. Diese beiden ändern nur die Vorschau, nicht den Kursbereich. **In neuem Tab öffnen** zeigt dieselbe Seite in voller Größe. Fährst du in der Vorschau mit der Maus über einen Bereich, etwa die Kopfzeile oder den Lehrplan, erscheint sein Name. Ein Klick darauf springt links zur passenden Einstellung. ## Theme Ein Theme ist ein fertiger Look. Deine Marke kommt obendrauf: Akzentfarbe, Schrift und Ecken aus [Marke & Design](/hilfe/anleitungen/marke-und-design/). Eine Farbe, die auf dem Hintergrund des Themes nicht lesbar wäre, wird dabei angepasst, damit Text und Knöpfe immer lesbar bleiben. | Theme | Wie es aussieht | Voreinstellung | | --- | --- | --- | | **Editorial** | Warmes Papier und Serifen-Überschriften, wie ein Magazin. | Der Standard für jeden Shop. | | **Studio** | Dunkel und filmisch, mit großen Postern für die Kurse. | Startet dunkel. | | **Soft** | Rund und freundlich, in deiner Markenfarbe getönt. | | | **Minimal** | Schlicht und kompakt, nur deine Inhalte. | | ![Die Kursübersicht von „Lichtwerk Fotografie“ im Theme Editorial: helle, warme Fläche, Überschrift „Hallo Anna“ in einer Serifenschrift, darunter „Du hast 15 von 21 Lektionen abgeschlossen.“ Ein großes Bild mit „Weiter, wo Du aufgehört hast – Fotografie Grundkurs“, einem Fortschrittsbalken und den Knöpfen „Weiterlernen“ und „Kurs ansehen“. Darunter ein Willkommensbereich „Schön, dass Du da bist“ und zwei Karten aus der Community: „Nächster Live-Termin“ und „Neu in der Community“.](/assets/img/hilfe/kursbereich-theme-editorial.webp "Editorial: der Standard. Der Willkommensbereich und die beiden Community-Karten stehen über den Kursen.") ![Die Kursübersicht der „Musikschule Klangwerk“ im Theme Studio: fast schwarzer Hintergrund, „Hallo Anna“, ein dunkles Poster „Klavier für Erwachsene“ mit „Weiter, wo Du aufgehört hast“ und darunter „Meine Kurse“ mit zwei hohen Posterkarten, eine davon mit dem Abzeichen „Abgeschlossen“.](/assets/img/hilfe/kursbereich-theme-studio.webp "Studio: dunkel, mit Postern statt Kacheln.") ![Die Kursübersicht von „Yogaraum“ im Theme Soft: helle Flächen in einem Salbeigrün, abgerundete Ecken, „Weiter, wo Du aufgehört hast – 21 Tage Morgenyoga“ und zwei Kurskarten in Pastelltönen.](/assets/img/hilfe/kursbereich-theme-soft.webp "Soft: die Flächen sind in der Markenfarbe des Shops getönt, hier ein Grün.") ![Die Kursübersicht der „Programmierschule“ im Theme Minimal, dunkel eingestellt: schlichte Schrift ohne Serifen, „Weiter, wo Du aufgehört hast – Python für Einsteiger“ und zwei Kurskarten mit Code-Grafiken.](/assets/img/hilfe/kursbereich-theme-minimal.webp "Minimal im Dunkelmodus. Jedes Theme gibt es hell und dunkel.") Ein Theme bringt Voreinstellungen für alles Weitere auf dieser Seite mit. Bei jeder Auswahl ist die Voreinstellung des Themes mit **Theme-Standard** markiert. Wählst du sie, folgt der Shop dem Theme, auch wenn du später das Theme wechselst. Wählst du etwas anderes, bleibt deine Wahl stehen. Schriften: Ohne eigene Schrift in Marke & Design nimmt der Kursbereich die Schrift des Themes, bei Editorial etwa eine Serifenschrift für Überschriften. Hast du eine Schrift gewählt, gilt sie auch hier. ## Layout Wie Kurse, Lehrpläne und Lektionen angeordnet sind. ![Der Kasten „Layout“ mit drei Gruppen. Kursübersicht („Die Seite mit allen Kursen.“): Raster (Theme-Standard), Liste (ausgewählt), Poster. Lehrplan („Die Kapitel und Lektionen auf einer Kursseite.“): Liste (ausgewählt, Theme-Standard), Akkordeon, Karten. Lektions-Navigation („Wie Deine Schüler zwischen den Lektionen wechseln.“): Seitenleiste links (Theme-Standard), Seitenleiste rechts (ausgewählt), Menü oben, Fokus.](/assets/img/hilfe/kursbereich-design-layout.webp "Jede Gruppe zeigt als kleine Skizze, wie die Seite danach aussieht.") | Einstellung | Möglichkeiten | | --- | --- | | **Kursübersicht** | **Raster** (mit **Kurse pro Reihe**, 2 bis 4; kleinere Bildschirme zeigen weniger), **Liste** oder **Poster** (hohe Kurskarten). | | **Lehrplan** | Auf der Kursseite: **Liste**, **Akkordeon** (Abschnitte zum Aufklappen) oder **Karten** (ein Kasten pro Abschnitt, mit dem Bild des Abschnitts). | | **Lektions-Navigation** | **Seitenleiste links**, **Seitenleiste rechts**, **Menü oben** (der Lehrplan klappt aus einem Menü auf) oder **Fokus** (keine Seitenleiste, nur die Lektion). | Angemeldete Teilnehmer sehen über ihren Kursen immer **Weiter, wo Du aufgehört hast**, mit der Lektion, bei der sie stehen geblieben sind. ![Eine Lektion im Kursbereich „Yogaraum“: links die Seitenleiste mit dem Kurs „21 Tage Morgenyoga“, Fortschritt 11 von 21, den Abschnitten „Woche 1“ bis „Woche 3“ und den Lektionen mit Häkchen und Dauer, die aktuelle „Tag 12: Krieger II und Seitwinkel“ hervorgehoben. Rechts die Lektion mit „Lektion 12 · Woche 2“, der Dauer 16:00, den Knöpfen „Als erledigt markieren“, „Zurück“ und „Weiter“ und dem Text der Lektion.](/assets/img/hilfe/kursbereich-lektion.webp "Lektions-Navigation „Seitenleiste links“. Die Dauer je Lektion trägst du im Kurseditor ein.") ### Dichte **Komfortabel** oder **Kompakt**: wie viel Luft zwischen den Elementen ist. ## Farbmodus ![Der Kasten „Farbmodus“: zwei Knöpfe, „Hell“ mit dem Hinweis Theme-Standard und „Dunkel“ (ausgewählt). Darunter der eingeschaltete Schalter „Schüler können zwischen hell und dunkel wechseln“ mit dem Hinweis „Sonne und Mond in der Kopfzeile. Die Wahl bleibt auf dem Gerät des Schülers gespeichert.“](/assets/img/hilfe/kursbereich-design-farbmodus.webp "Hell oder dunkel für alle, und auf Wunsch darf jeder Teilnehmer selbst umschalten.") - **Hell** oder **Dunkel** legt fest, was alle sehen, die den Kursbereich öffnen. - **Schüler können zwischen hell und dunkel wechseln** setzt Sonne und Mond in die Kopfzeile. Die Wahl eines Teilnehmers bleibt auf seinem Gerät gespeichert und gilt nur für ihn. ## Anmeldeseite Was deine Teilnehmer sehen, bevor sie angemeldet sind. ![Der Kasten „Anmeldeseite“ mit den Möglichkeiten „Karte“ („Das Formular, mittig auf der Seite.“) und „Mit Bild“ (ausgewählt, „Auf der einen Hälfte ein Bild, auf der anderen das Formular.“). Darunter das Feld „Bild“ mit einem hochgeladenen Bild, den Knöpfen „Bild hochladen“ und „Entfernen“ und dem Hinweis „Hochformat oder quadratisch passt am besten, mindestens 1200 Pixel hoch. Ohne Bild zeigt die Hälfte Deine Markenfarbe.“](/assets/img/hilfe/kursbereich-design-anmeldeseite.webp "„Mit Bild“ teilt die Anmeldeseite: links dein Bild, rechts das Formular.") - **Karte**: das Formular mittig auf der Seite. - **Mit Bild**: auf der einen Hälfte ein Bild, auf der anderen das Formular. Am besten im Hochformat oder quadratisch, mindestens 1200 Pixel hoch. Ohne Bild zeigt die Hälfte deine Markenfarbe. Den Text über dem Formular legst du an anderer Stelle fest: **Mitgliederbereich → Einstellungen → Lernbereich → Begrüßung auf der Anmeldeseite** (siehe [Kurs erstellen](/hilfe/anleitungen/kurs-erstellen/#login-link-zum-kursbereich)). ## Willkommensbereich Ein eigener Bereich in der Kursübersicht, über den Kursen. Du baust ihn aus denselben Blöcken wie eine Lektion: ein Video, Text, Bilder, Downloads. Er ist für Besucher und angemeldete Teilnehmer sichtbar. ![Der Kasten „Willkommensbereich“ mit dem Text „Dein eigener Bereich über den Kursen, gebaut aus denselben Blöcken wie eine Lektion: ein Video, Text, Bilder, Downloads.“, den Knöpfen „Willkommensbereich bearbeiten“ und „Entfernen“ und dem Hinweis „Erscheint in der Kursübersicht, für Besucher und Schüler. Jede Kursseite kann einen eigenen Abschnitt haben, den legst du im Kurseditor an.“](/assets/img/hilfe/kursbereich-design-willkommensbereich.webp "Gut für eine Begrüßung, das Thema der Woche oder den Link zum nächsten Live-Termin.") **Willkommensbereich anlegen** öffnet den Editor; danach heißt der Knopf **Willkommensbereich bearbeiten**. **Entfernen** nimmt den Bereich wieder heraus. Läuft in deinem Shop eine [Community](/hilfe/anleitungen/community/), stehen unter dem Willkommensbereich zwei Karten: **Nächster Live-Termin** und **Neu in der Community** mit den drei neuesten Beiträgen. Sie erscheinen nur, wenn es einen Termin oder Beitrag gibt, den der Teilnehmer sehen darf. ## Videos in Lektionen Deine Teilnehmer machen ein Video immer dort weiter, wo sie aufgehört haben. Das musst du nicht einschalten. Zwei Schalter gehen weiter: ![Der Kasten „Videos in Lektionen“ mit dem Text „Deine Schüler machen ein Video immer dort weiter, wo sie aufgehört haben. Diese beiden Einstellungen gehen noch weiter.“ und zwei ausgeschalteten Schaltern: „Lektion als erledigt markieren, sobald das Video angesehen wurde“ (Nach etwa 90 % des Videos. Deine Schüler können das wieder zurücknehmen.) und „Nächste Lektion öffnen, wenn das Video endet“ (Nie über eine Lektion hinaus, die noch nicht freigeschaltet ist.)](/assets/img/hilfe/kursbereich-design-videos.webp "Beide Schalter sind aus, bis du sie einschaltest.") - **Lektion als erledigt markieren, sobald das Video angesehen wurde** — nach etwa 90 % des Videos. Der Teilnehmer kann den Haken wieder entfernen. - **Nächste Lektion öffnen, wenn das Video endet** — aber nie über eine Lektion hinaus, die nach dem [Freigabe-Zeitplan](/hilfe/anleitungen/kurs-freigabe-planen/) noch nicht offen ist. So funktioniert das Weiterschauen: - Es gilt für das erste Video einer Lektion, wenn es von **YouTube**, **Vimeo** oder aus dem [Video-Paket](/hilfe/anleitungen/video-hosting/) kommt. Loom, Wistia und andere Videodateien merken sich die Stelle nicht. - Gespeichert wird die Stelle während des Abspielens etwa alle zehn Sekunden und wenn der Teilnehmer die Lektion verlässt. - Das Video startet nicht von selbst. Drückt der Teilnehmer auf Abspielen, springt es zur gespeicherten Stelle. Ausnahmen sind die ersten Sekunden und die letzten zehn Sekunden: Dann beginnt es von vorn. - Das gilt nur für eingeschriebene Teilnehmer, nicht für Besucher einer Gratis-Vorschau. ## Erweitert: eigene Farben für einzelne Bereiche Eine eigene Farbe für einen Bereich, über dem Theme. Die Schrift darauf wird so gewählt, dass sie lesbar bleibt. ![Der Kasten „Erweitert“ mit drei Farbfeldern, jeweils mit dem Hinweis „Standard“ und einem Farbwähler: „Kopfzeile“ (#F4E9E4, „Die Leiste oben mit deinem Logo und der Navigation.“), „Seitenleiste der Lektion“ (#FFFFFF, „Der Lehrplan neben einer Lektion.“) und „Karten und Flächen“ (#FFFFFF, „Kurskarten, der Lehrplan und jeder Kasten auf den Seiten.“).](/assets/img/hilfe/kursbereich-design-erweitert.webp "Leer heißt: die Farbe des Themes. Eingetragen wird ein Hex-Wert oder über den Farbwähler.") | Feld | Bereich | | --- | --- | | **Kopfzeile** | Die Leiste oben mit deinem Logo und der Navigation. | | **Seitenleiste der Lektion** | Der Lehrplan neben einer Lektion. | | **Karten und Flächen** | Kurskarten, der Lehrplan und jeder Kasten auf den Seiten. | Die Farben gelten im Farbmodus, den du oben gewählt hast. Wer als Teilnehmer in den anderen Modus umschaltet, sieht die Farben des Themes.
Die Kopfzeile im Kursbereich unter Marke & Design (Weiß, heller Farbton oder Akzentfarbe) gilt weiter. Eine Farbe hier unter Erweitert → Kopfzeile geht ihr vor.
## Eigenes CSS Für alles, was die Einstellungen nicht abdecken. Das CSS wirkt nur im Kursbereich, alles liegt innerhalb von `.rc-learn`. Gespeichert wird, sobald du das Feld verlässt. Was nicht erlaubt ist, wird beim Speichern entfernt, und die Seite sagt dir, was. Diese Klassen bleiben auch nach Updates gleich: `.rc-learn-header` · `.rc-learn-nav` · `.rc-learn-library` · `.rc-learn-course-hero` · `.rc-learn-curriculum` · `.rc-learn-lesson-sidebar` · `.rc-learn-lesson-body` · `.rc-learn-sign-in` ```css .rc-learn-header { border-bottom: none; } ``` ## Was ein einzelner Kurs anders machen kann Das Kursbereich-Design gilt für alle Kurse. Im Kurseditor unter **Einstellungen → Darstellung** legst du fest, was nur für diesen Kurs gilt. ![Der Abschnitt „Darstellung“ im Kurseditor mit dem Hinweis „So sieht dieser Kurs im Kursbereich aus. Alles hier ist optional.“ Darin: „Poster“ (Hochformat 2:3, zum Beispiel 800 × 1200 Pixel, wird gezeigt, wenn die Kursübersicht Poster verwendet), „Titelbild“ (Querformat, mindestens 1920 Pixel breit, das große Bild oben auf der Kursseite), „Trailer“ mit einer YouTube-Adresse, „Abschnitt auf der Kursseite“ mit den Knöpfen „Abschnitt bearbeiten“ und „Entfernen“, und die beiden Auswahlfelder „Lehrplan-Darstellung“ und „Lektions-Navigation“, beide auf „Wie im Kursbereich-Design“.](/assets/img/hilfe/kurs-editor-darstellung.webp "Alles hier ist optional. Ohne Poster und Titelbild nimmt der Kursbereich das Kursbild.") | Feld | Wofür | | --- | --- | | **Poster** | Hochformat 2:3, etwa 800 × 1200 Pixel. Erscheint, wenn die Kursübersicht **Poster** zeigt. Ohne Poster: das Kursbild. | | **Titelbild** | Querformat, mindestens 1920 Pixel breit. Das große Bild oben auf der Kursseite. Ohne Titelbild: das Kursbild. | | **Trailer** | Ein Video-Link (YouTube, Vimeo, Bunny oder eine Videodatei). Auf der Kursseite erscheint dann **Trailer ansehen**. | | **Abschnitt auf der Kursseite** | Eigene Blöcke unter der Beschreibung, für Besucher und Teilnehmer: ein Video, Bilder, Stimmen von Teilnehmern, Downloads. | | **Lehrplan-Darstellung** | Liste, Akkordeon oder Karten, statt der Wahl im Kursbereich-Design. | | **Lektions-Navigation** | Seitenleiste links oder rechts, Menü oben oder Fokus, statt der Wahl im Kursbereich-Design. | ![Die Kursseite „Songwriting Lab“ im Theme Studio: ein breites dunkles Titelbild mit Wellenform, darauf „3 Abschnitte · 9 Lektionen · 1 Std. 34 Min.“, der Kurstitel, ein Fortschrittsbalken bei 100 % und der Knopf „Trailer ansehen“. Darunter der Willkommenstext für Teilnehmer, rechts ein Kasten „9 / 9 Lektionen, 100 %“ mit „Abgeschlossen“ und „Kurs wiederholen“ und darunter „Dein Kursleiter“ mit Name und Kurzbeschreibung. Unten beginnt der Lehrplan.](/assets/img/hilfe/kursbereich-kursseite.webp "Titelbild, Trailer und die Gesamtdauer stehen oben. Die Dauer rechnet der Kursbereich aus den Lektionen zusammen.") Dazu, ebenfalls im Kurseditor: - **Bild** eines Abschnitts (im Fenster **Abschnitt bearbeiten**): erscheint, wenn der Lehrplan als **Karten** dargestellt wird. - **Dauer** einer Lektion, etwa „12“ oder „12:30“: steht im Lehrplan und über der Lektion. Die Kursseite zeigt die Summe. - **Willkommenstext für Teilnehmer**: erscheint nur für Teilnehmer, die den Kurs gekauft haben, auf der Kursseite anstelle der Beschreibung. Theme, Farbmodus, Dichte und die Farben unter Erweitert gelten immer für den ganzen Kursbereich und lassen sich pro Kurs nicht ändern. ## Mit dem KI-Assistenten Ein verbundener [KI-Assistent](/hilfe/anleitungen/ki-assistent-mcp/) liest das Design mit `learn_design_get` und ändert es mit `learn_design_update`: Theme, alle Layouts, Farbmodus und Umschalter, Dichte, Anmeldeseite, eigenes CSS, die drei Farben unter Erweitert, die beiden Video-Schalter und den Willkommensbereich. Was nur einen Kurs betrifft (Poster, Titelbild, Trailer, Abschnitt auf der Kursseite, Lehrplan-Darstellung, Lektions-Navigation), ändert er mit `courses_update`, das Bild eines Abschnitts mit `course_sections_update` und die Dauer einer Lektion mit `lessons_update`. Eine Änderung am Kursbereich-Design sehen alle Teilnehmer sofort. Lass dir vom Assistenten deshalb vorher sagen, was sich ändert. ## Häufige Fragen **Kann ich das Aussehen meines Kursbereichs ändern?** Ja, unter Mitgliederbereich → Kursbereich-Design. Du wählst eines von vier Themes (Editorial, Studio, Soft, Minimal) und darin die Darstellung der Kursübersicht, des Lehrplans und der Lektions-Navigation, hell oder dunkel, die Dichte und die Anmeldeseite. Farben, Schriften und Ecken kommen aus Design → Marke & Design. Eine Live-Vorschau zeigt deinen echten Kursbereich, während du einstellst. **Gibt es einen Dunkelmodus für den Kursbereich?** Ja. Jedes Theme hat eine helle und eine dunkle Fassung. Unter Farbmodus legst du fest, was alle sehen, und mit „Schüler können zwischen hell und dunkel wechseln“ bekommt jeder Teilnehmer Sonne und Mond in der Kopfzeile. Seine Wahl bleibt auf seinem Gerät gespeichert. **Kann ein einzelner Kurs anders aussehen als die anderen?** Teilweise. Ein Kurs darf seine Lehrplan-Darstellung und seine Lektions-Navigation selbst festlegen, im Kurseditor unter Einstellungen → Darstellung. Theme, Farbmodus und Farben gelten für den ganzen Kursbereich. **Machen Teilnehmer ein Video dort weiter, wo sie aufgehört haben?** Ja, bei Videos von YouTube, Vimeo und aus dem Video-Paket (Bunny). Die Stelle wird gespeichert, während jemand schaut, und beim nächsten Start springt das Video dorthin. Das ist immer an. Zusätzlich kannst du eine Lektion bei etwa 90 % des Videos automatisch als erledigt markieren lassen und am Ende des Videos die nächste Lektion öffnen. **Kann ich auf der Startseite des Kursbereichs eigene Inhalte zeigen?** Ja, mit dem Willkommensbereich. Er steht in der Kursübersicht über den Kursen und wird aus denselben Blöcken gebaut wie eine Lektion: Video, Text, Bilder, Downloads. Jede Kursseite kann zusätzlich einen eigenen Abschnitt unter der Beschreibung haben. ## Passend dazu - [Anleitung: Onlinekurs erstellen und verkaufen](https://rabbit-checkout.de/hilfe/anleitungen/kurs-erstellen/) - [Anleitung: Marke und Design](https://rabbit-checkout.de/hilfe/anleitungen/marke-und-design/) - [Anleitung: Lektionen zeitversetzt freigeben](https://rabbit-checkout.de/hilfe/anleitungen/kurs-freigabe-planen/)