Deinen Online-Kurs an dein Design anpassen

Mit der App "Customizing" hast du die Möglichkeit, deinen Kurs vom Design her anzupassen, entweder

• über CSS oder
• unseren Page-Builder für das Online-Kurs-Theme.

Mit CSS kannst du einmal verschiedene Klassen definieren und diese auf deinen Kursseiten dann nutzen, ohne sie jedesmal wieder zu definieren oder auch das Design für das Menü definieren und ein separates Kursbild hinterlegen.

Zu CSS findest du im Netz umfangreiche Materialien und Tutorials. In unserem Video findest du ein paar Beispiele.

Video:

Beispielquellen für CSS, Farben und Icons:

• Befehle und Codes für deine Farben
• Farbwähler
• CSS lernen
• Icons

Beispiel:

Kursbild links oben anzeigen

Normalerweise wird bei deinem Kurs links oben der Name des Kurses angezeigt. Du kannst den Namen auch ausblenden und stattdessen dein Cover-Bild dort hinterlegen.

• Gehe zu deinem Produkt und kopiere die URL von deinem Cover-Bild und speichere es temporär ab. Du brauchst es gleich in dem CSS-Code.
• Bearbeite deinen Kurs und öffne die URL von deinem Kurs in zwei verschiedenen Tabs. In dem einen bearbeitest du den Kurs, im anderen klickst du auf "Vorschau" so dass die Auswirkung direkt sehen kannst.
• Gehe zu deinem Online-Kurs-Theme zum Punkt CSS.
• Hinterlege bei "CSS für Menübereich" folgenden Beispielcode und füge den vorher kopierten Link auf dein Cover-Bild ein

Du kannst den Code dann noch anpassen z.B. die Größe oder ein abgerundetes Bild, Rahmen etc.

Code für den Kopf und das Ausblenden des Kurstitels

Bei "URL des Fotos" fügst du dann die URL deines Bilde ein, also z.B. des Cover-Bildes deines Kurses, welches du im ersten Schritt kopiert hast.

.header {
margin:15px 75px;
background-image:url(URL des Fotos) !important;
background-position:center center;
background-size:contain;
background-repeat:no-repeat;
height:100px;
}

.course-name {
display:none;
}

Gehe dann auf den Browsertab in dem du dir die Vorschau anzeigen lässt, um dir das Ergebnis anzusehen.