Erstellen und Verwalten von Widget-Seiten

Haftungsausschluss: Einige Inhalte in diesem Artikel beschreiben die Verwendung von Funktionen, die möglicherweise nicht in allen Plänen verfügbar sind. Wenden Sie sich an Ihren Account Manager (falls diese Option in Ihrem Plan enthalten ist) oder kontaktieren Sie Docebo über das Hilfecenter Ihrer Plattform, um ein Upgrade für Ihren Plan zu erhalten.

Einführung

Widget-Benutzerdefinierte Seiten sind vollständig konfigurierbare Seiten, mit denen ein Seitenlayout entweder von Grund auf neu erstellt wird (ausgehend von einer leeren Seite) oder indem vordefinierte Vorlagen verwendet werden, die sofort einsatzbereit, aber auch anpassbar sind.

Jede von Ihnen erstellte Seite ist automatisch sowohl für den Desktop als auch für das Handy verfügbar. Sie können bis zu 1.000 Seiten und 200 Menüs erstellen, einschließlich integrierter Seiten und des Standardmenüs.

In diesem Artikel wird erläutert, wie Sie eine benutzerdefinierte Widget-Seite erstellen und konfigurieren können. Nachdem Ihre Seite konfiguriert ist, müssen Sie sie zu den entsprechenden Menüs hinzufügen, sodass Ihre Benutzer darauf zugreifen können. Wie das erfolgt, erfahren Sie im Artikel Seiten und Menüs für Benutzer sichtbar machen > Eine Seite für Ihre Benutzer sichtbar machen.

Erstellen von benutzerdefinierten Widget-Seiten

Um eine Widget-Seite zu erstellen: 

1. Wählen Sie Admin-Menü > Einstellungen > Seiten verwalten aus. Drücken Sie dann die Plus-Schaltfläche in der oberen rechten Ecke.  
2. Wählen Sie im Bedienfeld Neue benutzerdefinierte Seite die Option Benutzerdefinierte Widget-Seite aus und klicken Sie auf Weiter.
3. Geben Sie auf der Registerkarte Details den Seitennamen ein. Sie können auch optional eine Beschreibung der Seite sowie einen Code als eindeutige Kennung für Ihre Seite hinzufügen.
   → Verwenden Sie keine Codes, die mit DOC_ oder doc_ beginnen, da diese Präfixe für die Verwendung durch die Plattform reserviert sind.

Klicken Sie auf Weiter, um mit der Seitenkonfiguration fortzufahren.

Wählen Sie auf der Registerkarte Vorlage entweder eine Vorlage aus der Liste aus, um ein vordefiniertes Seitenlayout zu verwenden, oder wählen Sie die Option Leer, um Ihre Seite von Grund auf neu zu gestalten. Drücken Sie dann Erstellen und Bearbeiten. Sie werden auf die Registerkarte Eigenschaften weitergeleitet.

Verwenden Sie die untere Leiste, um den Status Ihrer Seite festzulegen. Standardmäßig werden neue Seiten veröffentlicht. Wenn Sie die Veröffentlichung aufheben, können Benutzer sie nicht in ihren Plattform- und mobilen Benutzermenüs sehen, selbst wenn sie sichtbar sind. Die Seite wird im Benutzermenü ausgeblendet, bis sie erneut veröffentlicht wird. Die untere Leiste für die Veröffentlichung ist immer sichtbar, wenn Sie sich durch die Registerkarten des Bereichs Seiten verwalten bewegen.

Öffnen Sie auf der Registerkarte Eigenschaften das Menü Grundeinstellungen, um die Details zu überprüfen und zu bearbeiten, die Sie beim Erstellen der Seite im Slideout-Menü konfiguriert haben. Wählen Sie ein Symbol aus, um Ihre Seite zu identifizieren, indem Sie auf das vorhandene Symbol klicken und im rechten Bedienfeld ein anderes auswählen. Sie können optional nach dem Symbolnamen suchen, aber denken Sie daran, dass die Suche nur auf Englisch funktioniert. Das Symbol wird vor dem Seitennamen im Menü angezeigt. Wählen Sie das Symbol im Slideout-Bedienfeld und drücken Sie Bestätigen.

Markieren Sie im Abschnitt Zusätzliche Seitenschaltflächen, ob Sie die Schaltfläche Inhalt teilen und die Schaltfläche Experten fragen in der oberen rechten Ecke Ihrer Seite anzeigen möchten. Wenn diese Schaltflächen angezeigt werden, können Benutzer Assets hochladen und / oder Experten direkt von dieser Seite aus Fragen stellen, indem sie die entsprechenden Schaltflächen verwenden. Bitte beachten Sie, dass diese Optionen nur verfügbar sind, wenn das Discover, Coach & Share-Modul auf Ihrer Plattform aktiv ist.

Wenn Ihre Seite ein Katalog-Widget enthält, legen Sie fest, ob die Schaltfläche Diese Ansicht teilen aktiviert werden soll, damit Benutzer den Seitenlink in ihre Zwischenablage kopieren können, um die gefilterten Ergebnisse ihrer Suche im Katalog für andere Benutzer zu teilen. Erfahren Sie mehr über das Teilen von gefilterten Seiten-Deplinks und über die Konfiguration des Kataloge-Widgets.

Hinweis: Die Option zum Anzeigen der Schaltfläche Diese Ansicht teilen im Abschnitt Zusätzliche Seitenschaltflächen gilt nur für Desktopseiten und wird auf mobilen Seiten nicht unterstützt. Dies bedeutet, dass in der mobilen App die Schaltfläche zum Teilen der Ansicht nicht verfügbar ist. Beachten Sie jedoch, dass der über diese Schaltfläche geteilte Link geöffnet und die verknüpfte Seite auch in der App angezeigt werden kann.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern und wechseln Sie zur Registerkarte Composer, um das Seitenlayoutschema anzuzeigen.

Seiten werden immer auf der Registerkarte Composer erstellt und dann auf der Registerkarte Mobiles Layout automatisch für Mobilgeräte verfügbar gemacht, jedoch nur, wenn mindestens eines der Widgets, aus denen die Seite besteht, auch für Mobilgeräte verfügbar ist.

Definieren des Layouts Ihrer Seite

Auf der Registerkarte Composer wird das Layoutschema Ihrer Widget-Seite angezeigt, das das Layout der ausgewählten Vorlage widerspiegelt. Wenn Sie beim Erstellen der Seite den Seitentyp Leer ausgewählt haben, ist es leer.

Jede Seite besteht aus einer oder mehreren horizontalen Zeilen. Eine Zeile ist ein Bereich der Seite, der in Spalten von eins bis drei unterteilt ist. Spalten sind Container für Widgets. Wenn Sie mit Vorlagen arbeiten, werden Zeilen automatisch mit den für den Zweck der Vorlage erforderlichen Widgets konfiguriert. Sie können sie jedoch bearbeiten oder der Seite zusätzliche Zeilen hinzufügen.

Drücken Sie die runde durchgezogene Plus-Schaltfläche, um der Seite eine Zeile hinzuzufügen. Wählen Sie das Zeilenlayout im Slideout-Bedienfeld aus und klicken Sie auf Erstellen. Sie können das Zeilenlayout jederzeit bearbeiten, indem Sie auf das Menüsymbol am Ende der Zeile klicken und die Option Zeilenlayout ändern auswählen. Wählen Sie im Slideout-Bedienfeld die für Sie am besten geeignete Layout-Option aus und drücken Sie dann zur Bestätigung auf die Schaltfläche Layout ändern.

Wenn Sie das Layout auf eine kleinere Größe ändern (z. B. von einem Zeilenlayout mit 1/3 - drei Spalten zu einem Zeilenlayout mit 1/2 - halber Breite wechseln), werden die Widgets in der entfernten Spalte ganz nach rechts verschoben die restlichen Spalten. Um Zeilen auf der Seite zu verschieben, bewegen Sie die Maus über die Zeilenüberschrift, bis ein Kreuzsymbol angezeigt wird. Klicken und ziehen Sie nun die Zeile und legen Sie sie dort ab, wo Sie sie platzieren möchten.

Breite der Widgets

Das folgende Schema stellt die Breite der Spalten in Pixeln bei einer 100%igen Vergrößerung des Bedienfelds in einem Browser dar. Bitte beachten Sie, dass bei kleineren Bildschirmen (weniger als 1400 Pixel Breite) die Spaltengrößen entsprechend verkleinert werden.

Empfohlene Bildgrößen für Seiten-Widgets

Um sicherzustellen, dass die Bilder auf allen Bildschirmen scharf aussehen, sollte die empfohlene Bildbreite doppelt so groß wie die Breite des Widgets sein (2x-Regel).

Standard-Widgetbreiten bei 100%-Zoom (auf 1400px- oder breiteren Bildschirmen):

• Volle Breite-Widget: 1320px → Die Bildbreite sollte 2640px betragen
• 2/3 widget: 888px → Die Bildbreite sollte 1776px betragen
• 1/2 widget: 660px → Die Bildbreite sollte 1320px betragen
• 1/3 widget: 444px → Die Bildbreite sollte 888px betragen

Unterstützte Dateitypen für Bilder sind PNG und JPG, und die maximale Dateigröße beträgt 4MB. Wenn Sie sich über die Größe Ihres Bildes unsicher sind, überprüfen Sie die Dateieigenschaften auf Ihrem Gerät oder wenden Sie sich an das Support-Team Ihres Systems.

Anzahl der Widgets pro Seite

Die maximal zulässige Anzahl von Widgets für eine Seite (sowohl auf dem Desktop als auch auf dem Handy) hängt von der Art des Widgets ab, das Sie in die Seite einfügen möchten. Einige Widgets, die als dynamische Widgets bezeichnet werden, haben einen hohen Einfluss auf das Laden von Seiten, da ihr Inhalt kontinuierlich aktualisiert wird. Das Vorhandensein vieler dynamischer Widgets auf einer Seite kann sich auf die Ladeleistung der Seite selbst auswirken. Andere Widgets, sogenannte statische Widgets, haben nur geringe Auswirkungen auf das Laden der Seite, da sich ihr Inhalt nie ändert und es daher möglich ist, einer Seite weitere Widgets dieses Typs hinzuzufügen.

Hier ist die Liste der Widgets, unterteilt in dynamische und statische Widgets:

Widget name	Dynamisch	Statisch
Aktivitätsübersicht	x
Aktivitäten Stream	x
Kataloge	x
Kanäle	x
Kurse und Lernpläne	x
Benutzerdefiniertes Inhaltsfeld		x
Video einbetten		x
Gamifizierung	x
HTML / WYSIWYG		x
Iframe		x
Bild		x
Mein Kalender	x
Meine KPIs	x
Mein Profil	x
Meine Transaktionen	x
Frage und Antworten	x
Einschreibungscodes	x
Aufgabenliste	x

Die maximal zulässige Anzahl von Widgets pro Seite beträgt 20, die Anzahl der dynamischen Widgets darf jedoch 10 nicht überschreiten. Beispielsweise kann eine Seite 10 dynamische Widgets und 10 statische Widgets oder 5 dynamische Widgets und 15 statische Widgets oder 20 statische Widgets enthalten .

Für mobile Geräte sind dynamische Widgets nur unter den ersten 10 Widgets der Seite zulässig. Ab dem 11. Widget muss der Widget-Typ statisch sein. Beachten Sie auch, dass das HTML / WYSIWYG-Widget für Mobilgeräte als dynamisches Widget betrachtet wird.

Wenn die maximale Anzahl dynamischer Widgets für eine Seite erreicht ist, werden beim Hinzufügen eines weiteren Widgets im rechten Bedienfeld für die Widget-Erstellung nur statische Widgets aufgelistet.

Duplizieren einer Zeile

Das Zeilenlayout kann dupliziert werden, um die Konfiguration der Widget-Seite zu beschleunigen. Um ein Zeilenlayout zu duplizieren, drücken Sie auf das Menüsymbol am Ende der Zeile und wählen Sie dann die Option Zeilenlayout duplizieren. Die neue Zeile wird unterhalb der ausgewählten Zeile mit demselben Layout wie die ursprüngliche Zeile gestaltet, jedoch ohne Widgets.

Löschen einer Zeile

Um eine Zeile zu löschen, drücken Sie auf das Menüsymbol am Ende der Zeile und wählen Sie Zeile löschen. Drücken Sie im Dialogfeld auf Bestätigen und Löschen, um den Vorgang abzuschließen. Bitte beachten Sie, dass alle in der Zeile enthaltenen Widgets ebenfalls gelöscht werden und dass mindestens eine Zeile auf der Seite vorhanden sein muss. Sie dürfen eine Zeile nicht löschen, wenn sie die einzige ist, die noch übrig ist.

Hinzufügen von Widgets zu Zeilen

Um einer Zeile ein Widget hinzuzufügen, drücken Sie die Plus-Taste und wählen Sie das Widget im Folien-Bedienfeld Neues Widget hinzufügen aus. Konfigurieren Sie das Widget und klicken Sie dann auf Widget hinzufügen, um es in die ausgewählte Spalte einzufügen. Widgets können je nach Größe des Bereichs, in dem sie platziert werden, unterschiedliche Layouts haben.

Wenn ein Widget aus der Liste ausgewählt wird, wird seine Vorschau im rechten Bedienfeld angezeigt, damit Sie eine Vorstellung davon bekommen, wie es auf der Seite aussehen wird. Denken Sie daran, dass einige für den Desktop verfügbare Widgets nicht für Mobilgeräte verfügbar sind. Das Symbol für Mobilgeräte im Widget-Bereich hilft Ihnen zu verstehen, welche Widgets für Mobilgeräte verfügbar sind.

Um die Einstellungen eines Widgets zu ändern, drücken Sie auf den Menüpunkt in der oberen rechten Ecke des Widget-Bereichs und wählen Sie dann Bearbeiten. Die Widget-Einstellungen ändern sich je nach Widget. Weitere Informationen finden Sie in der vollständigen Widget-Liste.

Verschieben von Widgets und Definieren der Widgetgröße

Um Widgets auf der Seite zu verschieben, bewegen Sie die Maus über den Widget-Bereich, bis ein Kreuzsymbol angezeigt wird. Ziehen Sie das Widget und legen Sie es in einer anderen Spalte derselben Zeile oder in einer anderen Zeile der Seite ab. Bitte beachten Sie, dass Widgets mit unendlichem Bildlauf in der unteren Zeile der Seite platziert werden sollten, ohne dass sich ein Widget darunter befindet, da das, was sich unter einem Widget mit unendlichem Bildlauf befindet, möglicherweise nicht sichtbar wird. Klicken Sie auf Änderungen speichern, wenn Sie fertig sind.

Verwenden des Mobile Layout Composer

Wenn Sie das Layout Ihrer Desktopseite aus dem Composer erstellen, wird das Layout der entsprechenden mobilen Seite automatisch auf der Registerkarte Mobiles Layout erstellt, wenn mindestens eines der Widgets, die Sie im Composer hinzugefügt haben, für die mobile App verfügbar ist. Da einige für den Desktop verfügbare Widgets nicht für Mobilgeräte verfügbar sind, enthalten mobile Seiten keine nicht unterstützten Desktop-Widgets.

Die derzeit für Mobilgeräte verfügbaren Widgets sind:

• Aktivitätsübersicht
• Aktivitäten-Stream
• Kataloge
• Kanäle
• Benutzerdefinierte Inhaltsbox (beim Rendern des Widgets in der mobilen Go.Learn-App wird die Breite an die Bildschirmbreite angepasst und die Höhe wird angewendet, indem die Box mit dem Bild gefüllt und bei Bedarf zugeschnitten wird)
• Video einbetten
• Gamifizierung
• HTML/WYSIWYG (wir empfehlen die Verwendung des WYSIWYG-Editors für mobile Seiten, da wir die Widget-Ausgabe bei Verwendung des HTML-Editors nicht garantieren können)
• Bild
• Mein Kalender
• Kurse und Lernpläne
• Mein Profil
• Fragen und Antworten
• Aufgabenliste

Die für Mobile verfügbaren Widgets sind im Widget-Bereich des Composer durch ein Mobile-Icon gekennzeichnet. Sobald Ihre Desktop-Seite fertig ist, wechseln Sie zum Bereich Mobiles Layout, um zu sehen, wie die Seite auf einem mobilen Bildschirm aussehen wird. Mobile Seiten haben eine einzige Spalte, und Widgets werden gemäß der Reihenfolge sortiert, die sie im Seitenlayout haben, beginnend mit der ersten Spalte links, von oben nach unten und dann zu den anderen Spalten.

Die Reihenfolge der Widgets auf mobilen Seiten kann nicht geändert werden, aber Sie können nicht benötigte Widgets auf der mobilen Seite ausblenden, indem Sie auf das Augensymbol klicken. Klicken Sie erneut auf das Augensymbol, um sie wieder sichtbar zu machen.

Verwenden von Vorlagen für Widget-Seiten

Wenn Sie eine der verfügbaren Vorlagen zum Erstellen einer Widget-Seite auswählen, laden der Composer und das mobile Layout die Widgets entsprechend dem Zweck der Vorlage:

• Informelles Schulungs-Dashboard. Diese Vorlage enthält den Aktivitätsdatenstrom, Kurse und Lernplan sowie meinen Kalender.
• Formelles Trainings-Dashboard. Diese Vorlage enthält die Kataloge, mein Profil, Kurse und Lernpläne sowie Kalender-Widgets.
• Formeller Trainingsstrom. Diese Vorlage enthält das Kanal-Widget.
• Kurse mit Dashboard. Diese Vorlage enthält den Kalender, das Benutzerprofil, Kurse und Lernpläne sowie Katalog-Widgets.

Widgets in Vorlagen werden mit Standardeinstellungen wie Widget-Titel, Optionen und Zeitrahmen konfiguriert. Optionen werden im Widget-Bereich in der Vorlage angezeigt.

Bitte beachten Sie jedoch, dass Vorlagen nicht gesperrt sind. Sie können die Widget-Einstellungen sowie deren Größe und Position auf der Seite ändern. Sie können der Seite auch andere Widgets hinzufügen oder vorhandene entfernen, indem Sie die in den anderen Abschnitten dieses Artikels beschriebenen Schritte ausführen.

Widgets über CSS konfigurieren

Wenn Sie über Grundkenntnisse in CSS verfügen, können Sie die Widgets, aus denen Desktopseiten bestehen, über CSS an Ihre Bedürfnisse anpassen. Jedes auf Widget-Seiten verfügbare Widget wird durch eine eindeutige ID im CSS-HTML identifiziert, die von der Plattform beim Erstellen des Widgets automatisch im folgenden Format zugewiesen wird:

#doc-widget-{widget_id}