Konfigurieren des Brandings und Designs Ihrer Plattform

Einführung

Das Design Ihrer Plattform besteht aus einer Reihe von Schnittstellenelementen, die Sie als Superadmin anpassen können, um das Lernerlebnis und die allgemeine Benutzererfahrung Ihrer Plattform sowohl auf dem Desktop als auch auf Mobilgeräten zu optimieren. Diese Elemente können global oder für einzelne Extended Enterprise-Kunden festgelegt werden. Einige dieser Elemente umfassen die Kopf- und Fußzeile, benutzerdefinierte CSS, welche Schaltflächen auf der Anmeldeseite angezeigt werden, und mehr.

In diesem Artikel wird beschrieben, wie Sie das Branding und das Design Ihrer Desktop-Plattform konfigurieren. Erfahren Sie mehr über die Konfiguration für Mobilgeräte.

Zugreifen auf Ihre Branding- und Design-Einstellungen

Um zum Branding- und Design-Bereich Ihrer Plattform zu gelangen, rufen Sie das Navigationsmenü auf, finden Sie Personalisierung (Formen-Symbol) und klicken Sie dann auf Branding und Design. Die Seite zeigt standardmäßig die Registerkarte Desktop an. Gehen Sie durch jeden Abschnitt der Konfigurationsseite, um das Thema wie gewünscht anzupassen.

Hinweise zu hochgeladenen Bildern oder Medien

In vielen Einstellungen für das Plattform-Design können Sie Bilder oder andere Mediendateien hochladen. Dazu gehören das Logo und das Favicon in der Kopfzeile, das Hintergrundbild oder -video für die Anmeldeseite, der Hintergrund des Kurs-Players und das Titelbild der Kursübersichtsseite. 

Nachdem Sie eine Datei hochladen, sehen Sie ein rotes Papierkorbsymbol, mit dem Sie sie falls nötig entfernen können. Beachten Sie bitte, dass damit das Bild sofort gelöscht wird, auch wenn Sie ihre Änderungen nicht speichern.

Anpassen von Kopfzeilen

Im Abschnitt Kopfzeile können Sie die Plattform mit Titel, Kopfzeilenmeldung, Logo und Favicon anpassen. Bitte beachten Sie, dass Sie die Textfelder in diesem Abschnitt in mehreren Sprachen erstellen können, indem Sie die Mehrsprachenauswahl verwenden, die über das Globussymbol in der oberen rechten Ecke des Abschnitts zugänglich ist. Erfahren Sie mehr über die Mehrsprachenauswahl.

Beginnen Sie im ersten Abschnitt, Seitentitel. Verwenden Sie das entsprechende Textfeld, um den Titel Ihrer Plattform einzugeben. Er wird in den Registerkarten des Browsers und in der oberen Leiste auf der Startseite Ihrer Plattform angezeigt. Bitte beachten Sie, dass es für dieses Textfeld ein Limit von 1000 Zeichen gibt, bevor es durch eine Ellipse abgeschnitten wird.

Markieren Sie dann die Option, um eine Kopfzeilenmeldung im entsprechenden Abschnitt zu aktivieren. Wenn diese Option aktiviert ist, können Sie Ihre Kopfzeilenmeldung in das Textfeld unten eingeben. Dies könnte Ihr Firmenslogan, Ihre Vision usw. sein. Über die Symbolleiste oben im Textfeld kann der Text beliebig bearbeitet werden. Die Kopfzeilenmeldung wird unter Ihrem Logo auf Ihrer Plattform sowie auf der Anmeldeseite angezeigt. Bitte beachten Sie, dass es für dieses Textfeld ein Limit von 340 Zeichen gibt, bevor es durch eine Ellipse abgeschnitten wird.

Drücken Sie im Abschnitt Logo auf die Schaltfläche Ihr Logo hochladen, um ein Bild für das Logo auszuwählen. Um gute Leistungen beim Laden von Seiten zu gewährleisten und Probleme mit Funktionen wie Berichten zu vermeiden, empfehlen wir, ein maximal 380x72px Logo-Bild hochzuladen und sicherzustellen, dass die Bildhöhe nicht kleiner als 36px ist. Die maximale Bilddateigröße beträgt 2MB und die erlaubten Formate sind JPG, PNG, JPEG und GIF. Ihr neues Logo wird dann in der oberen linken Ecke der Plattform angezeigt. Sie können auch ein benutzerdefiniertes Favicon hochladen. Dies ist das Symbol, das auf den Registerkarten des Browsers und in der oberen Leiste angezeigt wird. Drücken Sie die Schaltfläche Ihr Favicon hochladen und wählen Sie dann ein 16×16 png-Bild von Ihrem Computer aus. Bitte beachten Sie, dass es bei der Anzeige des Favicons zu Problemen kommen kann, wenn man Safari verwendet, da Safari das dynamische Laden von Favicons einschränkt.

Bitte beachten! Sie können das Globussymbol in der oberen rechten Ecke dieses Abschnitts verwenden, um die Kofpzeilenmeldung in mehreren Sprachen zu erstellen, indem Sie die Mehrsprachenauswahl der Plattform verwenden. Der Seitentitel kann jedoch nur in einer Sprache hinzugefügt werden.

Anpassen der Anmeldeseite

Markieren Sie im Abschnitt Hintergrund der Anmeldeseite, welche Art von Hintergrund Sie möchten. Wenn Sie die Option mit einem Farbhintergrund kennzeichnen, wählen Sie die Farbe mit dem Werkzeug, das unten angezeigt wird, oder geben Sie den entsprechenden HEX-Code ein.

Wenn Sie die Option zum Hinzufügen eines Hintergrundbilds in voller Breite markieren, klicken Sie auf Ihr Bild hochladen. Die unterstützten Formate sind JPG und PNG. Die empfohlene Auflösung beträgt 1280×720 px und die maximale Dateigröße beträgt 10 MB. Wenn Sie das Bild löschen möchten, wählen Sie das rote Papierkorbsymbol.

Bitte beachten! Wenn Sie einen öffentlichen Katalog auf der Registerkarte Kurskatalog im Menü Erweiterte Einstellungen aktiviert haben, beachten Sie bitte, dass nur der Farbhintergrund und das Hintergrundbild verfügbar sind, während das Hintergrundvideo nicht verfügbar ist. Wenn Sie einen öffentlichen Katalog in Ihrer Plattform aktiviert haben (oder dies planen), sollten Sie ein kleineres Bild verwenden, da der für das Hintergrundbild vorgesehene Bereich teilweise vom Katalogbereich überlagert wird.

Wenn Sie die Option zum Hinzufügen eines Hintergrundvideos in voller Breite markieren, klicken Sie auf Ihr Video hochladen. Die unterstützten Videoformate sind MP4 und H264. Die empfohlenen Spezifikationen für die Datei sind: empfohlene Dateigröße 1,5-2 MB; Bitrate: 500-800 kbps; Mindestauflösung: 1280x720 px; maximale Dateigröße: 50MB.

Sie können auch ein Fallback-Bild einfügen, das angezeigt wird, falls das Video nicht unterstützt oder nicht ordnungsgemäß geladen wird. Wenn Sie das Video oder Bild löschen möchten, wählen Sie das rote Papierkorbsymbol.

Im Abschnitt Anmeldeformular können Sie die Option markieren, das Standard-Anmeldeformular der Plattform auszublenden und nur die SSO-Buttons für die Anmeldung (Gmail, OKTA, LinkedIn usw.) sowohl auf Desktop als auch auf Mobilgeräte anzuzeigen. Bitte beachten Sie, dass Sie eine gültige SSO-Integration ordnungsgemäß konfiguriert und getestet haben sollten, bevor Sie diese Option aktivieren.

Wenn diese Option ausgewählt ist, ist die Einstellung Benutzer daran hindern, ihr Kennwort zu ändern in den erweiterten Einstellungen der Plattform, Registerkarte Benutzer, standardmäßig aktiviert und kann nur deaktiviert werden, wenn auch die Option Ausschließlich SSO-Felder anzeigen und Anmeldeformular ausblenden deaktiviert ist. Diese Konfiguration verhindert, dass Benutzer ihr Kennwort in der Plattform ändern (sowohl auf Desktop als auch auf Mobilgeräte), wodurch die Synchronisierung mit dem im Identitätsanbieter festgelegten Kennwort verloren geht.

Anpassen von Farben

Im Abschnitt Farben können Sie die Farben der einzelnen Schriftarten auf Ihrer Plattform auswählen. Geben Sie die HEX-Codes in die entsprechenden Textfelder ein oder wählen Sie Farben mit den Farbrädern aus.

Es gibt verschiedene Möglichkeiten, um die richtige HEX-Farbe zu ermitteln, aber wenn Sie keine spezielle Grafiksoftware haben, können Sie einfach diesen kostenlosen HTML-Farbwähler (öffnet in einer neuen Registerkarte) verwenden.

Hinweis zur Barrierefreiheit: Denken Sie beim Konfigurieren der Platformsschnittstelle auch an die Barrierefreiheit und nutzen Sie auch die im Docebo Learn-Standardfarbthema enthaltene barrierefreie Farben.

Benutzerdefinierte Stile

Wenn Sie Grundkenntnisse in CSS haben, können Sie das Layout Ihrer Desktop-Plattform auf einer höheren Ebene anpassen. Verwenden Sie die CSS-Bereiche in diesem Abschnitt, um die Elemente der Desktop-Plattform anzupassen: Schriftart, Größe, Stil usw. Bestimmen Sie das Element, das Sie ändern möchten, sowie die spezifischen Attribute. In den CSS-Textbereichen ist ein Code-Editor eingebettet, so dass Sie die Optionen des Editors selbst nutzen können.

Bewährte Verfahren zur Anpassung:

• Speichern Sie Ihre aktuellen Einstellungen in einem Dokument oder einer Datei, damit Sie sie jederzeit problemlos abrufen können.
• Testen Sie Ihre Änderungen auf Ihrem Browser-Inspektor, bevor Sie sie auf Ihre Live-Umgebung anwenden.
• Halten Sie zwei Registerkarten oder Fenster offen, eine, um Ihre Änderungen in diesem Bereich vorzunehmen, und eine andere, um alle Änderungen im Inkognito-Modus oder in einem anderen Browser anzuzeigen.

Darüber hinaus können Sie das Layout jeder einzelnen Desktopseite und jedes Widgets über CSS anpassen, da jede Plattformseite und jedes Widget durch eine eindeutige ID im CSS-HTML identifiziert wird, die automatisch von der Plattform zugewiesen wird.

Bitte beachten! Ihr angepasstes CSS könnte von neuen Versionen betroffen sein. In diesem Fall ist keine Abwärtskompatibilität mit Ihrem Code gewährleistet.

Anpassen des Kurs-Players

Im Abschnitt Kurs-Player können Sie den Kurs-Player so anpassen, dass die in diesem Abschnitt konfigurierten Einstellungen als Standardeinstellungen für alle Kurse angewendet werden. Sie können jedoch lokale Kurs-Player-Einstellungen für einzelne Kurse festlegen.

Fokusmodus

Verwenden Sie diesen Bereich, um die Standardeinstellung des Fokusmodus für den Kurs-Player bei allen Kursen und Lernplänen zu konfigurieren.

Bei aktiviertem Fokusmodus öffnet sich der Kurs-Player standardmäßig im Vollbildmodus und:

• Kurs-Widgets werden nach Bereichen gruppiert und vom Player abgedeckt, Lernende können jedoch immer darauf zugreifen, indem sie auf die Gruppennamen der Widgets unten auf der Seite klicken.
• Wenn die Lernenden den Player schließen, werden sie immer zu der Seite zurückgeleitet, aus der sie den Kurs gestartet haben, unabhängig davon, ob es sich um eine Seite mit dem Widget Kurse und Lernpläne oder um die Seite Meine Kurse und Lernpläne handelt.
• Wenn der Kurs eine einzige Schulungsunterlage enthält, werden die Einstellungen für die Sichtbarkeit des Lehrplans und die Navigation im Theatermodus ignoriert, um den Platz für den Inhalt zu maximieren. Dies bedeutet, dass der Lehrplan nicht angezeigt wird und die Navigationsschaltflächen für die im Theatermodus abgespielten Schulungsunterlagen ausgeblendet werden.
• Das Kurs-Autoplay ist automatisch aktiviert.
• Wenn der Kurs mehrere Schulungsunterlagen enthält, werden die Schaltflächen Nächster Unterricht und Vorheriger Unterricht auf der rechten Seite der Kopfzeile angezeigt, um die Navigation zwischen den Unterrichten zu erleichtern und das Lernerlebnis zu verbessern. Wenn Sie den Mauszeiger über diese Schaltflächen bewegen, zeigt ein Tooltip den Titel des folgenden Unterrichts an.
• Für Kurse innerhalb eines Lernplans ist die Navigation dynamisch und bietet Benutzern eine einfache, benutzerfreundliche Art und Weise, sich zwischen Kursinhalten und anderen Kursen im Plan zu bewegen. Sobald Lernende den letzten Unterricht eines Kurses abschließen, wechselt die Schaltfläche Nächster Unterricht zu Nächster Kurs, damit es einfacher ist, durch den Lernplan zu navigieren.
• Der Fokusmodus steht bei Schulung mit Trainer (ILT)-Kursen zur Verfügung, um die Aufmerksamkeit der Lernenden auf den wichtigsten Inhalt zu lenken: das nächste Sitzungsereignis. Wenn sie in keiner Sitzung eingeschrieben sind, können sie durchsuchen und sich in die verfügbaren Sitzungen einschreiben, ohne die Seite zu verlassen.
• Für Superadmins, Power User und Trainer ist die Schaltfläche Verwalten auf der Kopfzeile der Kursseite auf ein Zahnradsymbol ohne Text minimiert.
• Die Lernenden werden mittels der Schaltfläche Leistungen oben auf der Inhaltsseite über die Zertifikate und Zertifizierungen benachrichtigt, die für die von ihnen gerade aufgerufenen Inhalte ausgestellt werden.

Diese Konfiguration ist für ein immersives Lernerlebnis optimal und minimiert Ablenkungen.

Das Standardverhalten kann für einzelne Kurse (Registerkarte Eigenschaften > Player) sowie für einzelne Lernpläne (Registerkarte Eigenschaften > Player) außer Kraft gesetzt werden. Die auf Lernplanebene ausgewählte Fokusmodus-Einstellung wird als Standard auf alle Kurse im Plan angewendet und überschreibt eventuelle Konfigurationen auf Kursebene, um eine konsistente Navigation zu gewährleisten.

Sichtbarkeit des Lehrplans

Verwalten Sie dann die Standardsichtbarkeit des benutzerdefinierten Lehrplans für alle Kurse, indem Sie auswählen, ob er ausgeblendet oder angezeigt werden soll, wenn ein Benutzer den Kurs betritt. 

Die Sichtbarkeit des Lehrplans wird auch direkt von den Lernenden verwaltet, indem sie die Schaltflächen Kurslehrplan anzeigen - Kurslehrplan schließen oben auf dem Lehrplanbereich in der Kurs-Player-Seite verwenden.

Bei aktiviertem Fokusmodus wird der Lehrplan standardmäßig ausgeblendet, aber die Lernenden können ihn immer noch manuell einblenden.

Navigation im Theatermodus

Legen Sie fest, ob die Navigationsschaltflächen bei allen im Theatermodus abgespielten Schulungsunterlagen von E-Learning-Kursen standardmäßig ein- oder ausgeblendet werden sollen.

Bei aktiviertem Fokusmodus wird die Konfiguration für die Navigation im Theatermodus automatisch deaktiviert.

Player-Hintergrundbild

Im Abschnitt Player-Hintergrundbild können Sie ein Bild hochladen, das als Hintergrund des Kurs-Players angezeigt wird.

Legen Sie nach dem Hochladen eines Bildes fest, ob Sie das Bild auf die Größe der Seite anpassen möchten oder ob Sie das Seitenverhältnis beibehalten und das Bild auf der Seite des Kurs-Players zentrieren möchten.

Erscheinungsbild des Kurs-Players

Verwenden Sie diesen Bereich, um das Standard-Erscheinungsbild des Kurs-Players für alle Kurse festzulegen: Dunkel-Modus oder Hell-Modus. Die Einstellung kann für bestimmte Kurse in den Kurseigenschaften außer Kraft gesetzt werden. Diese Einstellung regelt die Farbe des Textes, die Kopfzeile des Kurses sowie den Bereich des Kurslehrplans für alle Lernenden.

Wenn Sie benutzerdefinierte CSS-Regeln für den Player im Abschnitt CSS für HTML-Schulungsunterlagen konfiguriert haben, haben diese Regeln Vorrang vor dieser Einstellung.

Standardmäßig wird der Kurs-Player im Dunkel-Modus angezeigt. 

Bitte beachten: Wenn Sie beim Konfigurieren des Brandings und Designs bei Extended Enterprise-Kunden die benutzerdefinierten Einstellungen für das Erscheinungsbild des Kurs-Players deaktivieren, wird der Player im Dunkel-Modus angezeigt, unabhängig von den Einstellungen auf der Stammplattform.

CSS für HTML-Schulungsunterlagen

Schließlich können Sie benutzerdefinierte CSS für Ihre HTML-Schulungsunterlagen hinzufügen.

In diesem Abschnitt können Sie Ihre CSS-Klassen kopieren und einfügen. Sie werden automatisch auf alle Ihre HTML-Seiten-Schulungsunterlagen angewendet.

Anpassen der Kursübersichtsseite

Kopfzeilenlayout

Der Abschnitt Kursübersichtsseite erlaubt die Einstellung einer Standard-Kurskopfzeile für alle Kurs- sowie Lernplänenseiten in Katalogen. Es ist möglich, diese Standard-Einstellungen auf Kursebene aus dem Abschnitt Kopfzeilenlayout auf der Registerkarte Eigenschaften des Kurses sowie auf Lernplanebene von der Registerkarte Details aus zu überschreiben.

Die zur Verfügung stehenden Optionen sind:

• Einfarbiges Layout: Verwenden Sie eine einzige Farbe, um beispielsweise Ihre Markenfarben zu betonen. Fügen Sie den HEX-Code der Farbe im Bereich Farbcode ein oder wählen Sie eine Farbe mit Hilfe des Farbrades aus. Bitte beachten Sie, dass die ausgewählte Farbe immer schwarz schattiert ist.
• Titelbild-Layout: Ein Bild auf der Kurskopfzeile hat eine starke Auswirkung auf der Kursseite. Erfahren Sie mehr über die Verwaltung von Kopfzeilenbildern für Kurse.
• Grundlegendes Seitenlayout: Wählen Sie diese Option aus, wenn Sie ein minimalistisches und sauberes Kopfzeilenlayout ohne Bilder oder Farben wünschen.

E-Learning-Startansicht

Legen Sie in diesem Abschnitt fest, ob Benutzer beim Zugreifen auf einen Kurs direkt auf der Kurs-Player-Seite oder auf der Kursübersichtsseite landen sollen. Dies gilt dann für alle E-Learning-Kurse. Die Konfiguration dieser Option kann auf Kursebene in den Kurseigenschaften, Registerkarte Player, Abschnitt Startansicht geändert werden.

Die Übersichtsseite wird vor dem Kurs-Player angezeigt und enthält Kurs- und Einschreibungsdetails, damit sich die Lernenden nur auf den Kursinhalt konzentrieren können, sobald sie den Kurs-Player aufrufen, da der Player den Schwerpunkt der Seite bildet.

Abhängig von den Kurseinstellungen und dem Anmeldestatus des Lernenden enthält die Übersichtsseite verschiedene Informationen über den Kurs und die Einschreibung des Lernenden, um eine klare Vorstellung davon zu vermitteln, was ihn erwartet.

Die Kurswidgets werden immer unter dem Kurs-Player und nicht auf der Übersichtsseite angezeigt, unabhängig davon, ob die Übersichtsseite aktiv ist oder nicht.

Bewährte Verfahren

Wenn Sie kein Grafiker sind, folgen Sie diesen einfachen Vorschlägen:

• Befolgen Sie das Design Ihrer offiziellen Website. Versuchen Sie, der gleichen Struktur und den gleichen Farben so nah wie möglich zu folgen.
• Halten Sie es lesbar. Überprüfen Sie den Kontrast zwischen Text/Hintergrund oder Logo/Hintergrund. Wenn Sie die Schriftgröße ändern, denken Sie daran, dass sie auf dem Gerät Ihres Benutzers lesbar sein sollte.
• Weniger ist manchmal mehr. Wenn Sie keinen Stilführer haben, versuchen Sie, mit den Farben Ihres Logos zu beginnen.