Erfahren Sie, wie Sie eine Studentenseite erstellen, die das Lernerlebnis verbessert.

Die Studentenoberfläche ist die Heimatbasis Ihres Kurses. Ein klares, benutzerfreundliches Design hält die Studenten fokussiert und motiviert und verwandelt gelegentliche Besucher in engagierte Lernende.

Mit benutzerdefinierten Themes und Einstellungen können Sie das Erscheinungsbild Ihrer Studentenseite anpassen und in nur wenigen Klicks ein ansprechendes und professionelles Design erstellen. Diese Anleitung zeigt Ihnen, wie Sie diese Seite effizient konfigurieren und sie in einen zentralen Hub verwandeln, der den Stil Ihres Kurses widerspiegelt und gleichzeitig ein nahtloses Lernerlebnis gewährleistet.

Was ist eine Studentenseite?
Innerhalb der Mavibot-Plattform ist die Studentenseite ein personalisiertes Dashboard, das als primärer Arbeitsbereich für Ihren Kurs dient. Es bündelt alle Werkzeuge, die ein Lernender benötigt, und ermöglicht es ihnen:

  • Auf alle Kursinhalte und -materialien zuzugreifen,
  • Ihren Fortschritt durch Module und Lektionen zu verfolgen,
  • Lektionen abzuschließen und Aufgaben einzureichen,
  • Mit Kursleitern oder Moderatoren zu interagieren.

Diese integrierte Umgebung soll die Lernreise optimieren und die Studenten fokussiert, organisiert und motiviert halten.

Warum ist die Studentenseite wichtig?

Die Studentenseite strukturiert und optimiert den Lernprozess. Sie ermöglicht es den Studenten:

  • Benötigte Materialien schnell zu finden und ihr Studium genau an der Stelle fortzusetzen, an der sie aufgehört haben.
  • Ihren Fortschritt einfach zu überwachen und zu sehen, welche Aufgaben erledigt und welche noch ausstehend sind.
  • Feedback von Kursleitern zu erhalten, was eine persönlichere und effektivere Lernreise ermöglicht.

Wo die Studentenseite eingerichtet wird

Der Kurs-Builder ist mit dem „Business“-Abonnementplan verfügbar.

Um zu beginnen, gehen Sie zum Bereich „Kurse“ in MaviBot.

Wählen Sie als Nächstes den Kurs aus, für den Sie die Studentenseite einrichten möchten, und gehen Sie zu dessen Einstellungen.

Sie werden dann zur Hauptseite der Kurseinstellungen weitergeleitet, wo Sie den Reiter „Studentenseite“ öffnen müssen.

Um nun mit der Anpassung der Studentenseite zu beginnen, suchen Sie das Zahnradsymbol, um das Einstellungsmenü zu öffnen.

Wenn Sie auf das Zahnradsymbol klicken, öffnet sich ein Menü mit Einstellungen für das Standard- (benutzerdefinierte) Theme, Ihr eigenes (bearbeitbares) Theme sowie zusätzliche Einstellungen und die Option, benutzerdefinierte Schaltflächen hinzuzufügen.

Haupt-Theme

Das Haupt-Theme der Studentenseite besteht aus vorinstallierten, fertigen Themes, mit denen Sie die Seite in nur wenigen Klicks anpassen können.

Schritt 1: Wählen Sie ein Farbschema für das Haupt-Theme

Sie können aus 7 hellen Themes und 2 dunklen Themes wählen.

Wenn ein benutzerdefiniertes Theme angewendet wird, werden die Farben aller Hauptseitenelemente aktualisiert, einschließlich:

  • Hintergründe (Titelbilder, Seitenhintergrund, Fortschrittsbalken, Lektionsblöcke)
  • Schaltflächen
  • Fortschrittsbalken-Füllung
  • Rahmen, Umrisse usw.

Schritt 2: Wählen Sie den Grad der Rahmenabrundung

a) Nullradius – alle Ecken und Seitenelemente erscheinen eckig.

b) Mittlerer Radius – Ecken und Elemente erscheinen abgerundet oder oval.

c) Maximaler Radius – alle Ecken und Seitenelemente haben vollständig abgerundete Kanten.

Ausgezeichnet!

Jetzt wissen Sie, wie Sie schnell das Haupt-Theme Ihrer Studentenseite einrichten.

Wenn Sie zusätzliche Schaltflächen hinzufügen, ein benutzerdefiniertes Titelbild hochladen oder Ihr eigenes, einzigartiges Farbschema auf die Seite anwenden möchten, empfehlen wir Ihnen, mit den nächsten Abschnitten dieses Artikels fortzufahren.

Benutzerdefiniertes Theme

Die Einstellungen im Reiter „Benutzerdefiniertes Theme“ ermöglichen es Ihnen, Ihre eigenen, einzigartigen und abwechslungsreichen Farbschemata auf die Elemente der Studentenseite anzuwenden.

Bitte beachten Sie

Das Haupt-Theme und das benutzerdefinierte Theme können zusammen verwendet werden.

Sie können beispielsweise die Einstellungen im Reiter „Benutzerdefiniertes Theme“ verwenden, um nur einigen Elementen Farben zuzuweisen, während der Rest der Seite gemäß dem ausgewählten Haupt-Theme gestaltet bleibt.

Hintergrundfarbe

Diese Einstellung ändert die Hintergrundfarbe der gesamten Seite, mit Ausnahme einzelner Elemente.

Klicken Sie auf das Quadrat, um die Farbpalette zu öffnen und die gewünschte Farbe auszuwählen.

Zusätzlich zu einer breiten Farbpalette für jedes Element können Sie die Farbintensität auch über die Transparenzskala anpassen.

Hintergrund-Overlay-Farbe

Verwenden Sie die Einstellungen für den Hintergrund-Overlay, um eine einheitliche Farbe auf die wichtigsten visuellen Container der Seite anzuwenden:

a) Der Fortschrittsbalken;

b) Einzelne Lektionsblöcke;

c) Der Bereich des Kurs-Titelbildes.

Akzentfarbe

Die Akzentfarbeinstellungen ermöglichen es Ihnen, das Farbschema der wichtigsten hervorgehobenen Elemente auf der Studentenseite zu ändern, darunter:

a) Navigationsschaltflächen für Lektionen;

b) Die Fortschrittsbalken-Füllung;

c) Rahmen, Hintergründe von Lektionsnummern und ähnliche Elemente.

Textfarbe des Seitenhintergrunds

Diese Einstellung ermöglicht es Ihnen, ein ansprechendes Farbschema für den Text zu wählen, der auf dem Seitenhintergrund angezeigt wird.

Overlay-Textfarbe

Diese Einstellung ermöglicht es Ihnen, die Textfarbe für die Hauptelemente auf der Studentenseite zu ändern, die über Hintergrund-Overlays erscheinen.

Akzent-Textfarbe

Verwenden Sie diese Einstellung, um die Textfarbe (Schriftfarbe) für jedes Element zu definieren, das auf einem akzentfarbenen Hintergrund liegt, einschließlich Hinweisboxen und interaktiven Schaltflächen.

Zusätzliche Einstellungen

In den zusätzlichen Einstellungen der Studentenseite können Sie ein Bild hochladen, das als Seiten-Titelbild verwendet wird.

Bitte beachten Sie

Das als Studentenseiten-Titelbild von Ihrem Gerät hochgeladene Bild darf eine Größe von 15 MB nicht überschreiten.

Schritt 1: Ein Bild hochladen

Sie können ein Bild direkt von Ihrem Computer hochladen.

Oder laden Sie ein Bild über einen Link aus Ihrem Dateispeicher hoch.

Der Vorteil des Hochladens eines Bildes über einen Link aus dem Dateispeicher besteht darin, dass Sie ein Bild beliebiger Größe als Titelbild verwenden können.

Weitere Informationen zur Nutzung des Dateispeichers finden Sie im Artikel „Dateispeicher“.

Schritt 2: Titelbildhöhe

Nach dem Hochladen des Bildes legen Sie die entsprechende Titelbildhöhe auf der Studentenseite fest.

Schritt 3: Bildposition

Sie können die voreingestellten Positionierungsoptionen verwenden, um das Bild zentriert, links, rechts oder unten auszurichten, oder benutzerdefinierte Einstellungen wählen.

Durch Bewegen des Kreisreglers können Sie das Bild genau nach Ihren Wünschen positionieren.

Schritt 4: Bildgröße

Das Bildgrößenfeld akzeptiert Werte wie contain / cover sowie numerische Werte in Pixeln (px) und Prozent (%).

1) contain/cover-Werte

2) numerische Werte

Schritt 5: Bildwiederholung

Das Bild kann entlang der Y-Achse, d.h. vertikal; entlang der X-Achse, d.h. horizontal oder ohne Wiederholung wiederholt werden.

Schritt 6: Kontrollkästchen

Um das Studentenerlebnis auf ihrer persönlichen Seite zu verbessern, können Sie die Anzeige von:

  • dem Fortschrittsbalken,
  • der Anzahl der abgeschlossenen Lektionen und
  • der Anzahl der genehmigten Hausaufgaben aktivieren.

Wenn Sie diese Elemente nicht auf der Seite verwenden möchten, können Sie die Kontrollkästchen deaktivieren.

Schaltflächen

Die Studentenseite enthält eine Funktion zum Hinzufügen benutzerdefinierter Call-to-Action-Schaltflächen unterhalb des Fortschrittsbalkens. Sie können diese Schaltflächen mit externen Websites, Dokumenten oder anderen wichtigen Seiten verlinken.

Um eine Schaltfläche hinzuzufügen, öffnen Sie den entsprechenden Reiter in den Studentenseiten-Einstellungen.

Klicken Sie dann auf „Schaltfläche hinzufügen“.

Daraufhin öffnet sich ein modales Fenster zur Konfiguration der Schaltfläche, in das Sie einen Schaltflächentext eingeben.

Geben Sie nun den Ziellink (URL) für diese Schaltfläche an.

Die Farben der Schaltfläche übernehmen automatisch die Palette des Haupt-Themes. Sie können dies jedoch überschreiben, indem Sie eine benutzerdefinierte Farbe für den Hintergrund und den Text festlegen.

Klicken Sie dann auf „Speichern“.

Die Schaltfläche ist nun gespeichert und aktiv. Sie wird unterhalb des Fortschrittsbalkens auf der Studentenseite angezeigt.

Sie können mehrere Schaltflächen hinzufügen – gehen Sie dazu einfach in das Einstellungsmenü und klicken Sie unterhalb der vorhandenen Schaltfläche auf „Schaltfläche hinzufügen“.

Um wichtige Ressourcen zu bewerben, können Sie der Studentenseite klickbare Banner hinzufügen. Diese Banner können auf jede von Ihnen angegebene URL verlinken, z. B. auf einen Messenger-Bot, eine Community-Gruppe, ein wichtiges Dokument oder eine externe Website.

Fahren wir mit der Einrichtung fort.

Schritt 1: Zugriff auf die Bannereinstellungen

Suchen Sie in den Kurseinstellungen den Abschnitt „Banner“ und klappen Sie ihn auf.

Klicken Sie dazu im Dropdown-Menü der Einstellungen auf den Abschnitt:

Schritt 2: Laden Sie ein Bild hoch.

Nach dem Hochladen wird das Bild im Einstellungsfeld angezeigt.

Schritt 3: Gehen Sie zu den Bildeinstellungen.

Klicken Sie dazu auf das Zahnradsymbol in der oberen linken Ecke des hochgeladenen Bildes. Daraufhin öffnet sich ein modales Einstellungsfenster:

Schritt 4: Legen Sie den Ziellink fest
Geben Sie die vollständige URL ein, zu der die Studenten beim Klicken auf das Banner weitergeleitet werden. Dies kann eine Webseite, ein Messenger-Bot oder eine andere Online-Ressource sein.

Schritt 5: Konfigurieren Sie die Bannerabmessungen
Legen Sie die Anzeigegröße des Banners fest, indem Sie Werte für Breite und Höhe eingeben.

Wichtig: Geben Sie in diese Felder nur numerische Werte ein (z. B. 300). Fügen Sie keine Einheiten wie px oder % hinzu.

Schritt 6: Speichern Sie Ihre Konfiguration
Klicken Sie auf „Speichern“, um alle Bannereinstellungen zu übernehmen.

Einrichtung abgeschlossen!
Ihr klickbares Banner ist jetzt aktiv. Es wird auf der rechten Seite der Studentenseite unterhalb des Fortschrittsbalkens angezeigt (sofern die Bannerfunktion aktiviert ist).

So fügen Sie mehrere Banner hinzu

Sie können einer einzelnen Seite mehrere Banner hinzufügen. Laden Sie dazu wie oben beschrieben ein Bild in den Einstellungen hoch und konfigurieren Sie es.

Wenn Sie unterhalb eines bereits hochgeladenen Bildes auf „Bild hinzufügen“ klicken, wird das neue Banner auf der Studentenseite unterhalb des zuvor hinzugefügten Banners angezeigt.

  1. Wählen Sie die Option zum Hochladen eines Bildes unterhalb des hinzugefügten Banners (die große Upload-Schaltfläche unten):

  1. Das Bild wurde unterhalb des zuvor hinzugefügten Banners hochgeladen.

  1. Auf der Studentenseite erscheint das Banner in der nächsten Zeile nach dem zuvor hinzugefügten.

Wenn Sie rechts neben einem bereits hochgeladenen Bild auf die Schaltfläche „+“ klicken, wird das neue Banner auf der Studentenseite in derselben Zeile wie das zuvor hinzugefügte Banner angezeigt.

  1. Klicken Sie in den Seiteneinstellungen rechts neben dem hochgeladenen Bild auf die Schaltfläche „+“.

Das neu hochgeladene Bild wird rechts platziert.

  1. Auf der Studentenseite wird das Banner in derselben Zeile wie das zuvor hochgeladene angezeigt.

Sie können Banner sowohl in derselben Zeile als auch in nachfolgenden Zeilen gleichzeitig hinzufügen.

Alles erledigt!
Jetzt wissen Sie, wie Sie die Studentenseite vollständig konfigurieren!

Seitenvorschau

Vergessen Sie nicht, nach der Konfiguration der Studentenseite Ihre Fortschritte zu speichern.

Klicken Sie nach dem Speichern der Einstellungen auf die Schaltfläche „Vorschau“.

Wählen Sie als Nächstes „Zur Studentenseite gehen“.

Sie werden zur Vorschau der Studentenseite weitergeleitet.

Im Bearbeitungsmodus können Sie im Vorschaufenster das endgültige Layout visuell überprüfen. Sie können sehen, wie alle Elemente – wie Fortschrittsbalken, Banner, Schaltflächen und Lektionsblöcke – gemäß Ihren Konfigurationen positioniert und gestaltet sind.

Bitte beachten Sie

Die Vorschau dient nur der visuellen Darstellung. Elemente in der Vorschau der Studentenseite sind nicht anklickbar und lösen keine tatsächliche Navigation oder Funktionalität aus.