In der Welt des Online-Lernens spielt die einfache Navigation eine Schlüsselrolle bei der Gewinnung und Bindung von Nutzern. Anpassbare Kurskarten sind eine großartige Möglichkeit, Ihre Website interaktiver und informativer zu gestalten.
Diese Karten ermöglichen es Besuchern, schnell die gewünschten Programme zu finden und mit nur einem Klick einfach zu den Kursseiten zu navigieren. In diesem Artikel sehen wir uns an, wie Sie einen Bereich mit anpassbaren Kurskarten einrichten, um die Benutzerfreundlichkeit Ihrer Website zu verbessern und Nutzern zu helfen, ihre Bildungsziele schneller zu erreichen.
Anstatt Online-Karteikarten zu verwenden, können Sie der Website-Seite eine Lektionsliste hinzufügen: Wählen Sie einfach den gewünschten Kurs im Bereich aus, und alle Lektionen werden angezeigt.
So fügen Sie den Bereich „Kurskarten“ hinzu
Um den Bereich „Kurskarten“ hinzuzufügen, klicken Sie im Bearbeitungsmodus Ihrer Website auf „+“.
Suchen Sie dann im sich öffnenden Menü den Bereich „Kurskarten“ und klicken Sie darauf, um den Bereich zu Ihrer Website hinzuzufügen:
Der Bereich wird zu Ihrer Website hinzugefügt, und das Menü zur Inhaltseinstellung öffnet sich für Sie:
Inhaltsbereich
Die Konfiguration des Inhalts des Bereichs „Kurskarten“ besteht darin, einen oder mehrere Kurse auszuwählen, die bereits im Projekt erstellt wurden, um sie auf der Website anzuzeigen, und die Kartenelemente anzupassen.
Wie Sie Kurse auf der Mavibot-Plattform erstellen, wird im Abschnitt „Online-Kurse“ beschrieben.
Kurs auswählen
Wählen Sie die Kurse aus, die Sie auf Ihrer Website präsentieren möchten:
Aktivieren Sie dazu das Kontrollkästchen mit dem Namen des gewünschten Kurses.
Die ausgewählten Kurse werden sofort auf Ihrer Website-Seite mit dem Cover angezeigt, das Sie in den Kurseinstellungen festgelegt haben.
Anpassung
Nachdem Sie die erforderlichen Kurse ausgewählt haben, fahren Sie mit der Anpassung der Kartenelemente fort:
- Schatten
Für Kurskarten im Bereich können Sie die Schattenintensität anpassen:
a) ohne Schatten:
b) leichter Schatten:
c) starker Schatten:
Farbeinstellungen für Kartenelemente
Passen Sie das Erscheinungsbild der Karte an, indem Sie Farben für verschiedene Elemente anpassen. Sie können auch interaktive Hover-Effekte hinzufügen.
- Textfarbe: Ändert die primäre Textfarbe auf der Karte (ohne Schaltflächen).
- Kartenhintergrund: Legt die Hintergrundfarbe der Karte fest.
- Randfarbe: Definiert die Farbe der Umrandung oder des Rahmens der Karte.
- Schaltflächentext: Legt die Farbe des Textes innerhalb der Schaltfläche fest (statischer Zustand).
- Schaltflächenhintergrund: Legt die Hintergrundfarbe der Schaltfläche fest.
Interaktive Hover-Effekte (optionaler Bereich):
Aktivieren Sie Hover-Effekte, um die Farbe dieser Elemente dynamisch zu ändern, wenn der Benutzer den Cursor über die Karte bewegt.
Jetzt wissen Sie, wie Sie die verfügbaren Kurse auf Ihrer MaviBot-Website mit dem Bereich „Kurskarten“ anzeigen können.
Informationen zu Hintergrund- und Anzeigeeinstellungen finden Sie im Artikel „Globale Bereichseinstellungen“.
So fügen Sie den Block „Lektionen“ hinzu
Um einen Block zum Anzeigen der Lektionsliste im Kurs hinzuzufügen, wechseln Sie in den Bearbeitungsmodus der Website, bewegen Sie den Mauszeiger über den Arbeitsbereich und klicken Sie dann auf „+“:
Rechts öffnet sich ein Menü mit den verfügbaren Bereichen der Website, in dem Sie den Block „Lektionen“ finden müssen:
Klicken Sie auf „Kurskarten“, und dann öffnet sich ein Menü zur Konfiguration des Blockinhalts:
Sie müssen lediglich den gewünschten Kurs, der bereits in Mavibot erstellt wurde, im Dropdown-Menü auswählen und auf „Speichern“ klicken.
Gehen Sie dann zu den Einstellungen, um den Blockinhalt anzupassen:
Anpassung
Wenn Sie auf die Schaltfläche „Einstellungen“ klicken und den Mauszeiger über den Bereich bewegen, öffnen sich die Einstellungen zum Anpassen des Inhalts und des Blocks selbst:
Welche Einstellungen sind verfügbar?
- Stil der Lektionsliste
Standardmäßig wird der Stil der Lektionsliste in einem neuen Format angezeigt. Bei Bedarf können Sie eine prägnantere Version des klassischen Formats einstellen:
- Nummerierungsstil
Der Nummerierungsstil ist für einen neuen Stil der Anzeige der Lektionen des Kurses verfügbar. Die Nummerierung ändert sich in der Lektionskarte selbst:
- Lektionssymbole
Sie werden angezeigt, wenn Sie in den Kurseinstellungen eine Vorschau innerhalb der Lektion selbst hinzugefügt haben.
So fügen Sie Symbole hinzu
Schritt 1. Gehen Sie zu den Lektionseinstellungen:
Wechseln Sie dazu in den Kurseinstellungsmodus und suchen Sie den Tab „Lektionen“:
Klicken Sie dann auf „Bearbeiten“, woraufhin die Lektionsseite zur Bearbeitung geöffnet wird.
Schritt 2. Öffnen Sie die Einstellungen der Lektionsseite.
Gehen Sie in den Einstellungen der Lektionsseite zum Abschnitt „Allgemein“:
Schritt 3. Laden Sie die Lektionsvorschau hoch
Erweitern Sie die Liste der Bildeinstellungen in den Grundeinstellungen:
Laden Sie ein Bild für die Lektionsvorschau hoch:
Speichern Sie die Einstellungen.
Erledigt! Jetzt werden Lektionsvorschauen als Symbole im Bereich „Lektionen“ auf der Website angezeigt.
- Hintergrundmuster
Es verleiht Ihren Lektionskarten Volumen und Einzigartigkeit:
- Elementabrundung
Der Wert wird in Pixeln festgelegt und rundet die Ecken der Lektionskarten ab.
- Stil der Lektionskarte
Es hilft, Lektionskarten in einer Reihe oder in einer Reihe mit oder ohne Zeilenumbruch anzuordnen.
- Hintergrund- und Textfarbe
Es steht eine umfangreiche Farbpalette zur Verfügung, um die Hintergrundfarbe der Karte und die Schriftfarbe auf der Lektionskarte festzulegen:
Jetzt wissen Sie, wie Sie Lektionslisten zu Ihrer Website hinzufügen und den Inhalt des Bereichs anpassen.
Informationen zu Hintergrund- und Anzeigeeinstellungen finden Sie im Artikel „Globale Bereichseinstellungen“.