---
title: "Design und Theme"
description: "Leg Farben, Schriften und Rundungen für den ganzen Kurs fest, wähl eine Design-Vorlage, richte den Player ein und pflege die Kurseigenschaften."
canonical_url: "https://docs.ols.yonn.online/de/build/design-and-theme"
---
# Design und Theme

> Leg Farben, Schriften und Rundungen für den ganzen Kurs fest, wähl eine Design-Vorlage, richte den Player ein und pflege die Kurseigenschaften.

Das **Design** (auch Theme genannt) gibt deinem ganzen Kurs ein einheitliches Aussehen: dieselben Farben, Schriften und Rundungen auf jeder Folie. Du änderst es einmal, und alle Folien ziehen mit. Diese Seite behandelt:

- **Das Fenster Design**: Vorlagen, Farben, Schriften und Eckenradius.
- **Schriften ersetzen** im ganzen Kurs.
- **Den Player**: den Rahmen um deine Folien mit Menü, Knöpfen und Fortschritt.
- **Kurseigenschaften**: Titel, Autor und Sprache.

![Das Fenster Design mit den Vorlagen Standard, Werkstatt, Wald, Ozean, Nacht und Klassisch, den neun Farben, Schriften und einer Live-Vorschau](https://docs.ols.yonn.online/screenshots/de/design-and-theme-design-dialog.png)

## Dem Kurs in 3 Schritten einen neuen Look geben

<procedure>

### Design öffnen

Klick auf <ui-path path="Design > Design">



</ui-path>

. Das Fenster **Design** öffnet sich mit einer Vorschau rechts.

### Vorlage wählen

Klick unter **Vorlagen** auf **Standard**, **Werkstatt**, **Wald**, **Ozean**, **Nacht** oder **Klassisch**. Farben, Schriften und Rundung ändern sich sofort.

### Anpassen und schließen

Ändere bei Bedarf einzelne Farben oder Schriften. Die Vorschau zeigt Überschrift, Text, Schaltflächen und Antwort-Feedback. Klick auf **Fertig**.

</procedure>

## Das Fenster Design

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      Was es macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Vorlagen
      </strong>
    </td>
    
    <td>
      Ein Klick setzt Farben, Schriften und Rundung auf einmal. Danach kannst du alles einzeln anpassen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Primär
      </strong>
    </td>
    
    <td>
      Hauptfarbe, zum Beispiel für Schaltflächen wie „Weiter“.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Sekundär
      </strong>
    </td>
    
    <td>
      Zweitfarbe, zum Beispiel für „Zurück“ oder Rahmen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Akzent
      </strong>
    </td>
    
    <td>
      Zum Hervorheben, zum Beispiel Symbole und Markierungen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Hintergrund
      </strong>
    </td>
    
    <td>
      Hintergrund der Folien.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Fläche
      </strong>
    </td>
    
    <td>
      Flächen und Kacheln auf der Folie.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Text
      </strong>
    </td>
    
    <td>
      Normale Schriftfarbe.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Gedämpft
      </strong>
    </td>
    
    <td>
      Nebentöne für Hinweise und Untertitel.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Richtig
      </strong>
      
       und <strong>
        Falsch
      </strong>
    </td>
    
    <td>
      Farben des Feedbacks bei richtigen und falschen Antworten.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Überschriften
      </strong>
      
       und <strong>
        Fließtext
      </strong>
    </td>
    
    <td>
      Die beiden Schriften des Kurses. Sie gelten für alle Texte, bei denen du keine eigene Schrift gewählt hast.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Eckenradius
      </strong>
    </td>
    
    <td>
      Wie rund Schaltflächen, Kacheln und Formen sind. 0 ist eckig.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Vorschau
      </strong>
    </td>
    
    <td>
      Zeigt deine Auswahl live.
    </td>
  </tr>
</tbody>
</table>

<hint-box kind="note" title="Deine eigenen Änderungen bleiben">

Design-Änderungen gelten sofort für alle Folien, die noch die Designwerte nutzen. Farben, Schriften und Rundungen, die du an einzelnen Objekten von Hand gesetzt hast, bleiben erhalten. Um ein Objekt wieder ans Design anzugleichen, klick es mit rechts an und wähl **Auf Design zurücksetzen**.

</hint-box>

<hint-box kind="tip" title="Guter Kontrast">

Halt Text dunkel auf hellem Hintergrund (oder umgekehrt), mit einem Kontrast von mindestens 4,5 zu 1. Mach **Primär** und **Sekundär** dunkel genug für weiße Schrift. Zeig Wichtiges nie nur über die Farbe.

</hint-box>

## Eine Schrift überall ersetzen

<ui-path path="Start > Schriften">



</ui-path>

 ersetzt eine Schrift im ganzen Kurs durch eine andere, zum Beispiel nach einem Wechsel eurer Hausschrift. Eigene Schriften (WOFF, WOFF2, TTF, OTF) lädst du vorher in die [Mediathek](https://docs.ols.yonn.online/de/build/media).

## Der Player

Der **Player** ist der Rahmen, den Lernende um deine Folien sehen: das Menü an der Seite, die Knöpfe unten, der Fortschritt. Seine Einstellungen öffnest du über <ui-path path="Start > Player">



</ui-path>

 oder <ui-path path="Ansicht > Player">



</ui-path>

.

![Das Fenster Player im Tab Funktionen mit den Schaltern für Seitenleiste und Steuerleiste](https://docs.ols.yonn.online/screenshots/de/design-and-theme-player.png)

### Funktionen

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      Was es macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Seitenleiste anzeigen
      </strong>
    </td>
    
    <td>
      Die Seitenleiste mit Menü, Ressourcen und Glossar. Auf Handys klappt sie als Schublade aus. <strong>
        Position
      </strong>
      
      : <strong>
        Links
      </strong>
      
       oder <strong>
        Rechts
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Menü
      </strong>
    </td>
    
    <td>
      Die Folienliste, sortiert nach Szenen. Ab 6 Folien mit Suche.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Ressourcen
      </strong>
    </td>
    
    <td>
      Links und Dateien zum Nachschlagen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Glossar
      </strong>
    </td>
    
    <td>
      Fachbegriffe mit Erklärungen.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Notizen
      </strong>
    </td>
    
    <td>
      Foliennotizen als Transkript.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Kurstitel
      </strong>
    </td>
    
    <td>
      Titelzeile über der Folie.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Abspielen / Pause
      </strong>
    </td>
    
    <td>
      Lernende können die Folie anhalten.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Lautstärke
      </strong>
    </td>
    
    <td>
      Ton aus und Lautstärkeregler.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Untertitel
      </strong>
    </td>
    
    <td>
      Schalter für die Untertitel von Videos, Audio und Sprechertext.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Zurück / Weiter
      </strong>
    </td>
    
    <td>
      Die Navigationsknöpfe. Auch die Pfeiltasten blättern nur, wenn das an ist.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Vollbild
      </strong>
    </td>
    
    <td>
      Wird auf dem iPhone automatisch ausgeblendet.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Fortschrittsanzeige
      </strong>
    </td>
    
    <td>
      Zeigt „Folie 3 von 12“.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Wiedergabegeschwindigkeit
      </strong>
    </td>
    
    <td>
      Lernende wählen 0,75x bis 2x.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Menü Barrierefreiheit
      </strong>
    </td>
    
    <td>
      Textgröße, weniger Bewegung, deutlicher Fokus, Untertitel und Tastenkürzel.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Absenden-Schaltfläche in der Steuerleiste
      </strong>
    </td>
    
    <td>
      Für Freiform-Fragen ohne eigenen Absenden-Knopf auf der Folie.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Zeitleiste
      </strong>
    </td>
    
    <td>
      Der Fortschrittsbalken der Folie: <strong>
        Ausgeblendet
      </strong>
      
      , <strong>
        Nur anzeigen
      </strong>
      
      , <strong>
        Ziehbar
      </strong>
      
       oder <strong>
        Ziehbar nach Abschluss der Folie
      </strong>
      
      .
    </td>
  </tr>
</tbody>
</table>

### Weitere Tabs

<table>
<thead>
  <tr>
    <th>
      Tab
    </th>
    
    <th>
      Was du dort einstellst
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Navigation
      </strong>
    </td>
    
    <td>
      Welche Folien Lernende im Menü erreichen: <strong>
        Frei
      </strong>
      
       (alle, jederzeit), <strong>
        Eingeschränkt
      </strong>
      
       (besuchte Folien und die nächste) oder <strong>
        Gesperrt
      </strong>
      
       (nur über die Knöpfe des Kurses). <strong>
        Beim erneuten Start fortsetzen
      </strong>
      
      : <strong>
        Nachfragen
      </strong>
      
      , <strong>
        Immer fortsetzen
      </strong>
      
       oder <strong>
        Nie fortsetzen
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Darstellung
      </strong>
    </td>
    
    <td>
      <strong>
        Skalierung
      </strong>
      
       (<strong>
        An Fenster anpassen
      </strong>
      
       oder <strong>
        Feste Größe
      </strong>
      
      ), <strong>
        Farbschema
      </strong>
      
       (<strong>
        Hell
      </strong>
      
       oder <strong>
        Dunkel
      </strong>
      
      ), <strong>
        Akzentfarbe
      </strong>
      
       und ein <strong>
        Logo
      </strong>
      
       oben in der Seitenleiste.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Texte
      </strong>
    </td>
    
    <td>
      Jeder Text im Player, zum Beispiel für eine andere Sprache oder eure eigene Ansprache. Leere Felder zeigen den Standardtext.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Ressourcen
      </strong>
    </td>
    
    <td>
      Links und Dateien (PDFs aus der Mediathek), die Lernende jederzeit in der Seitenleiste öffnen können.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Glossar
      </strong>
    </td>
    
    <td>
      Begriffe und Definitionen zum Nachschlagen.
    </td>
  </tr>
</tbody>
</table>

Einzelne Folien können diese Einstellungen unter **Player auf dieser Folie** im Tab Format der Folie überschreiben, zum Beispiel Weiter ausblenden, bis eine Aufgabe gelöst ist. Lernende können den Player auch per Tastatur bedienen: <key-combo keys="Leertaste">



</key-combo>

, die Pfeiltasten, <key-combo keys="C">



</key-combo>

, <key-combo keys="M">



</key-combo>

, <key-combo keys="F">



</key-combo>

 und <key-combo keys="?">



</key-combo>

.

## Kurseigenschaften

<ui-path path="Ansicht > Kurs">



</ui-path>

 öffnet die Grunddaten deines Kurses.

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      Was es macht
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Titel
      </strong>
    </td>
    
    <td>
      Steht im Player und als Name des Lernpakets in Moodle.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Beschreibung
      </strong>
    </td>
    
    <td>
      Eine interne Notiz für dich und dein Team. Lernende sehen sie nicht.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Autor oder Organisation
      </strong>
    </td>
    
    <td>
      Optional.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Sprache
      </strong>
    </td>
    
    <td>
      Die Sprache deiner Kurstexte. Hilft Screenreadern und steuert Silbentrennung und Datumsformat. Übersetzt aber nichts.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        JavaScript erlauben
      </strong>
    </td>
    
    <td>
      Nur nötig für Trigger mit „JavaScript ausführen“. Siehe <a href="https://docs.ols.yonn.online/de/interact/triggers-and-variables">
        Trigger und Variablen
      </a>
      
      .
    </td>
  </tr>
</tbody>
</table>

## Wenn etwas nicht klappt

<table>
<thead>
  <tr>
    <th>
      Problem
    </th>
    
    <th>
      Was du tun kannst
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Eine Design-Änderung wirkt bei manchen Objekten nicht
    </td>
    
    <td>
      Ihre Farben oder Schriften wurden von Hand gesetzt. Klick sie mit rechts an und wähl <strong>
        Auf Design zurücksetzen
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Meine eigene Schrift fehlt in der Liste
    </td>
    
    <td>
      Lad die Schriftdatei zuerst in die Mediathek.
    </td>
  </tr>
  
  <tr>
    <td>
      Lernende können im Menü nicht frei springen
    </td>
    
    <td>
      <strong>
        Navigation
      </strong>
      
       steht auf <strong>
        Eingeschränkt
      </strong>
      
       oder <strong>
        Gesperrt
      </strong>
      
      . Wähl <strong>
        Frei
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Menü oder Glossar fehlen im Player
    </td>
    
    <td>
      Prüf die Schalter im Tab <strong>
        Funktionen
      </strong>
      
      , auch <strong>
        Seitenleiste anzeigen
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Der Kurstitel in Moodle stimmt nicht
    </td>
    
    <td>
      Ändere den <strong>
        Titel
      </strong>
      
       in den Kurseigenschaften und veröffentliche neu.
    </td>
  </tr>
</tbody>
</table>


## Sitemap

See the full [sitemap](https://docs.ols.yonn.online/sitemap.md) for all pages.