So funktioniert es
Alva Courses gestaltet den Kursplayer auf zwei Ebenen. Shopweite Einstellungen unter Einstellungen → Erscheinungsbild gelten für alle Kurse. Im Tab Einstellungen → Erscheinungsbild eines Kurses legen Sie fest, ob er ihnen folgt oder eine eigene Farbe und Schriftart verwendet. Gespeicherte Änderungen erreichen die Teilnehmer, sobald sie eine Kursseite das nächste Mal laden oder aktualisieren.
| Einstellung | Shopweit | Pro Kurs |
|---|---|---|
| Akzentfarbe | Standardfarbe | Markenfarben, Erweiterte Farbanpassung |
| Schriftart | Standardschriftart | Default Font |
| Mobiles Menü | Mobile Menüart | Keine |
| Eigenes CSS | Benutzerdefinierte Stile | Keine |
So gestalten Sie den Kursplayer
1. Standardfarbe festlegen
Öffnen Sie in Ihrem Shopify-Admin Alva Courses → Einstellungen → Erscheinungsbild. Geben Sie unter Standardfarbe einen Hex-Wert ein oder klicken Sie auf Farbe auswählen, um im Fenster Color Preview eine Farbe zu wählen. Klicken Sie auf Close und dann in der Speicherleiste auf Speichern.
Ein Kurs verwendet diese Farbe nur, wenn bei ihm Use global color angehakt ist. Andernfalls behält er seine eigene Farbe (Schritt 4).
2. Standardschriftart wählen
Wählen Sie unter Standardschriftart eine Schriftfamilie: Arial, Courier New, Georgia, Montserrat, Poppins, Times New Roman, Trebuchet MS oder Verdana. Montserrat und Poppins werden von Google Fonts geladen; die übrigen nutzen Schriften, die auf dem Gerät des Teilnehmers installiert sind.
Die Schriftart gilt für jeden Kurs ohne eigene Schriftart und für Kurse mit angehaktem Use global font. Systemstandard legt keine shopweite Schriftart fest. Speichern Sie.
3. Stil des mobilen Menüs wählen
Wählen Sie unter Mobile Menüart, wie Teilnehmer auf Bildschirmen, die schmaler als 1.024 Pixel sind, die Lektionsliste öffnen. Die Storefront-Vorschau darunter zeigt Ihre Auswahl.
- Hamburger (Standard): eine quadratische Schaltfläche in Ihrer Akzentfarbe, die die Lektionsliste einblendet.
- Pille (Akzentfarbe): eine abgerundete Schaltfläche Kursmenü in Ihrer Akzentfarbe, die beim Scrollen oben angeheftet bleibt.
- Brotkrümel-Header: eine Leiste in voller Breite mit dem aktuellen Abschnitt und der aktuellen Lektion, die die Lektionsliste darunter aufklappt. Ebenfalls oben angeheftet.
- Schwebend unten rechts: eine Schaltfläche Kursmenü, die in der unteren rechten Ecke fixiert ist, wo sie mit Chat-Widgets kollidieren kann.
Speichern Sie. Um Kursmenü umzuformulieren, nutzen Sie die Shop-Texte.
4. Einem Kurs eine eigene Farbe und Schriftart geben
Öffnen Sie den Kurs und gehen Sie zu Einstellungen → Erscheinungsbild. Entfernen Sie unter Markenfarben den Haken bei Use global color und wählen Sie eine Farbe. Entfernen Sie unter Default Font den Haken bei Use global font und wählen Sie eine Font Family. Use global font ist ausgegraut, bis Sie eine shopweite Schriftart festlegen.
Für feinere Kontrolle klicken Sie unter Erweiterte Farbanpassung auf Aktivieren. Es öffnet sich ein Farbeditor, in dem Sie getrennte Farben für Seitenleiste, Inhalt, Schaltflächen, Fortschrittsbalken, Eingabefelder und Rahmen festlegen; mit Edit Colors öffnen Sie ihn später erneut. Aktivieren ist nicht verfügbar, solange Use global color angehakt ist. Speichern Sie den Kurs.
Eigenes CSS hinzufügen
Mit eigenem CSS gestalten Sie alles um, was die obigen Einstellungen nicht abdecken. Geben Sie unter Einstellungen → Erscheinungsbild Regeln in das Feld Benutzerdefiniertes CSS unter Benutzerdefinierte Stile ein und speichern Sie. Alva Courses fügt sie der Kursliste und jeder Kursseite hinzu, wo sie die Farb- und Schriftart-Einstellungen überschreiben.
Alva Courses begrenzt Ihr CSS nicht auf den Player. Es wird genau so, wie Sie es eingeben, in die Storefront-Seite eingefügt; ein einfacher Selektor wie h2 gestaltet daher auch Ihr Theme um. Beginnen Sie jeden Selektor mit #alva-courses, dem Stammelement des Players, oder mit einer Player-ID wie #alva-course-sidebar.
Ein Banner Warnungen zum Selektor-Geltungsbereich listet bis zu fünf Selektoren ohne diesen Geltungsbereich auf, und das Feld markiert CSS, das sich nicht parsen lässt. Beides sind nur Warnungen: Das CSS wird so gespeichert, wie Sie es eingeben, und das Feld hat keine Längenbegrenzung.
Schließen Sie jede Deklaration mit !important ab, da der Player viele seiner Stile selbst so setzt. Der Link CSS-Selektor-Leitfaden unter dem Feld listet die IDs und Klassen auf, die Sie ansprechen können. Zwei sichere Beispiele:
#alva-courses .lesson-content p { line-height: 1.7 !important; }vergrößert den Zeilenabstand der Lektionsabsätze.#alva-course-sidebar h2 { font-size: 22px !important; }ändert die Größe des Kurstitels oben in der Seitenleiste.
Für eine Schriftart außerhalb der Liste Schriftfamilie setzen Sie ganz oben eine Google-Fonts-@import-Zeile oder eine @font-face-Regel mit einer absoluten Schrift-URL ein (Liquid funktioniert hier nicht). Nennen Sie die Schriftart dann in einer begrenzten Regel.
Was Lernende sehen
Teilnehmer sehen Ihre Akzentfarbe bei der ausgewählten Lektion, den Abschluss-Häkchen, dem Fortschrittsbalken, den Lektionslinks, der Schaltfläche Abschließen und fortfahren und im mobilen Menü. Ihre Schriftart erscheint beim Kurstitel, bei den Lektionstiteln und im Lektionstext.
Häufige Fragen
Warum hat sich die Standardfarbe bei einem Kurs nicht geändert?
Ein Kurs folgt der Standardfarbe nur, wenn im Tab „Erscheinungsbild“ des Kurses „Use global color“ angehakt ist. Andernfalls behält er seine eigene Farbe. Setzen Sie den Haken, speichern Sie den Kurs und laden Sie die Kursseite neu.
Kann ich eigenes CSS nur für einen Kurs hinzufügen?
Nein. „Benutzerdefinierte Stile“ ist eine einzige shopweite Einstellung, die Alva Courses der Kursliste und jeder Kursseite hinzufügt. Damit ein Kurs anders aussieht, geben Sie ihm im Tab „Erscheinungsbild“ eine eigene Farbe und Schriftart.
Verändert mein eigenes CSS den Rest meines Themes?
Das kann passieren. Alva Courses fügt Ihr CSS so, wie Sie es eingeben, in die Storefront-Seite ein; ein einfacher Selektor wie h2 gestaltet daher auch die Überschriften Ihres Themes um. Beginnen Sie jeden Selektor mit #alva-courses, damit er im Kursplayer bleibt.
Wann sehen Teilnehmer meine Änderungen?
Beim nächsten Laden der Seite. Alva Courses liest Ihre Einstellungen zum Erscheinungsbild bei jedem Laden des Kursplayers, daher müssen Sie nichts veröffentlichen. Eine bereits geöffnete Seite behält das alte Aussehen, bis sie aktualisiert wird.
Weitere Artikel
War dies hilfreich?
Zuletzt aktualisiert 2026-10-09