Wie erstelle ich mit dem Design-Editor ein Design für ein Konto?

Als Admin können Sie den Design-Editor verwenden, um benutzerdefinierte Designs für Ihre Institution zu erstellen. Designs werden aus bestehenden Canvas-Vorlagen erstellt. Jedes Design, das auf das Konto angewendet wird, gilt auch für alle Unterkonten. Der Design-Editor kann aber auch verwendet werden, um Designs für einzelne Unterkonten zu erstellen. Sobald Sie ein Design erstellt und gespeichert haben, können Sie es jederzeit auf Ihr Konto anwenden. Sie können auch neue Designs erstellen, die auf früheren Designs basieren. Erfahren Sie, wie Sie gespeicherte Designs verwalten können.

Sehen Sie sich ein Video über den Design-Editor an.

Vererbung von Themen

Das benutzerdefinierte Branding wird auf Kontoebene gehostet und standardmäßig an Unterkonten und die zugehörigen Kurse vererbt. Sie können Unterkonten jedoch die Verwendung des Design-Editors erlauben. Alle Elemente, die nicht speziell geändert werden, werden dennoch vom Hauptkonto vererbt.

Einschreibungen von Benutzer*innen werden auf Kontoebene assoziiert und Kurse auf der Ebene des Unterkontos. Eine Einschreibung wird erstellt, wenn ein(e) Benutzer*in und ein Kurs miteinander verbunden werden. Wenn ein(e) Benutzer*in in keinem Kurs eingeschrieben ist, zeigt das Dashboard das Branding des Kontos an. Dieser Algorithmus gilt auch für Seiten, die nicht mit einem Kurs verknüpft sind, wie z. B. Benutzerkonto und Einstellungen, Kalender und Konversationen. Benutzerdaten werden immer auf der Ebene des Kontos gehostet, weshalb sie das Branding des Unterkontos nicht übernehmen können.

Wenn ein(e) Benutzer*in in einem Kurs des Kontos eingeschrieben ist, zeigt das Dashboard das Branding des Kontos an. Wenn ein(e) Benutzer*in in einem Kurs innerhalb eines Unterkontos eingeschrieben ist, zeigt das Dashboard das Branding des Unterkontos an. Wenn ein(e) Benutzer*in für Kurse in mehreren Unterkonten eingeschrieben ist oder wenn sich einer der Kurse im Konto befindet, zeigt das Dashboard das Branding des Kontos an.

Komponenten des Design-Editors

Einzelheiten zu den Komponenten des Design-Editors, einschließlich der Komponenten, die in Canvas-Anwendungen angezeigt werden, finden Sie im Dokument Komponenten des Design-Editors in Canvas. Hilfe zu Bildvorlagen finden Sie im Dokument Bildvorlagen im Design-Editor in Canvas. Logos, Bilder und Wasserzeichen sind für Benutzer*innen, die in den Benutzereinstellungen die Option „Hochkontrastige Stile“ aktivieren, nicht sichtbar.

CSS/JS-Dateien

Benutzerdefinierte Cascading Style Sheets (CSS) oder JavaScript (JS)-Dateien sind nicht erforderlich, aber Überschreibungsdateien werden im Design-Editor ebenfalls unterstützt. Die Funktionalität für CSS/JS-Dateien muss von Ihrem Kundenerfolg-Manager aktiviert werden. Bevor Sie benutzerdefinierte CSS- oder JS-Dateien hochladen, sollten Sie sich der damit verbundenen Risiken bewusst sein. Benutzerdefinierte Dateien können zu Problemen bei der Zugänglichkeit oder zu Konflikten mit zukünftigen Canvas-Updates führen. Erfahren Sie mehr über die Einschränkungen für benutzerdefinierte CSS/JS-Dateien.

 

Hinweise:

  • Der Design-Editor ist für Free-For-Teacher-Konten nicht verfügbar.
  • Wenn Sie Administrator eines Unterkontos sind und der Link „Designs“ in der Kontonavigation nicht sichtbar ist, wurde das Design für Unterkonten nicht aktiviert. Wenn die Registerkarte „CSS/JS hochladen“ nicht sichtbar ist, wurde das Hochladen von Dateien für Unterkonten nicht aktiviert.
  • Um das Branding des Design-Editors in der Vorschau zu sehen, müssen Sie die kontrastreiche Benutzeroberfläche deaktivieren.
  • Standardmäßig erben die Unterkonten des Konsortiums das Design des übergeordneten Kontos. Ein Konsortialunterkonto kann jedoch ein neues Design für das Unterkonto erstellen.

Konto öffnen

Konto öffnen

Klicken Sie in der globalen Navigation auf den Link Admin [1] und dann auf den Namen des Kontos [2].

Designs öffnen

Themen-Editor öffnen

Klicken Sie dazu in der Kontonavigation auf den Link Themes (Designs).

Hinweis: Wenn Designs für Unterkonten aktiviert wurden, enthält jedes Unterkonto auch einen Link zu Themes (Designs). Um den Design-Editor für ein Unterkonto zu öffnen, klicken Sie auf den Link Sub-Accounts (Unterkonten), um das Unterkonto zu finden und zu öffnen, und klicken Sie dann auf den Link Themes (Design) des Unterkontos.

Design-Vorlage öffnen

Wenn Sie noch kein Canvas Design für Ihr Konto erstellt haben, verwenden Sie eine Vorlage, um ein neues Design zu erstellen. Sie haben die Wahl zwischen der Standard-Canvas-Vorlage, einer minimalistischen Vorlage und einer State U. Vorlage. Wenn Ihr Kundenerfolg-Manager die K12-spezifische Option aktiviert hat, erscheint das K12-Design ebenfalls als Vorlage.

Um ein neues Design zu erstellen, fahren Sie mit dem Mauszeiger über eine Vorlage und klicken Sie auf die Schaltfläche Open in Theme Editor (Im Design-Editor öffnen) [1], oder klicken Sie auf die Schaltfläche Add Theme (Design hinzufügen) [2] und wählen Sie eine Vorlage aus der Liste.

Gespeichertes Design öffnen

Gespeichertes Design öffnen

Sobald Sie ein Design erstellt und gespeichert haben, können Sie es jederzeit bearbeiten. Gespeicherte Designs werden im Abschnitt „Meine Designs“ angezeigt. Um ein gespeichertes Design zu öffnen, bewegen Sie den Mauszeiger über den Namen des Designs und klicken Sie auf die Schaltfläche Open in Theme Editor (Im Design-Editor öffnen) [1].

Um ein neues Design auf der Grundlage eines gespeicherten Designs zu erstellen, klicken Sie auf die Schaltfläche Add Theme (Design hinzufügen) [2] und wählen den Namen des gespeicherten Designs aus der Liste [3]. Mit dieser Option können Sie vermeiden, dass Ihr zuvor gespeichertes Design überschrieben wird.

Design-Editor anzeigen

Der Design-Editor zeigt eine Musterseite an, auf der Sie eine Vorschau Ihres benutzerdefinierten Designs sehen können. Diese Komponenten ändern sich mit den Farben und dem Branding, die Sie mit dem Design-Editor hinzufügen.

Registerkarte „CSS/JS hochladen“ anzeigen

Registerkarte „CSS/JS hochladen“ anzeigen

Wenn für Ihr Konto das Überschreiben mit benutzerdefinierten Cascading Style Sheets (CSS) oder JavaScript (JS)-Dateien aktiviert wurde, zeigt die Seitenleiste des Design-Editors die Registerkarten Edit (Ändern) [1] und Upload (Hochladen) [2] an. Der Design-Editor ist standardmäßig auf die Registerkarte „Ändern“ eingestellt und zeigt alle Komponenten des Design-Editors an. Auf der Registerkarte „Hochladen“ können Sie benutzerdefinierte Dateien hochladen.

Komponenten finden

Komponenten finden

Der Design-Editor verfügt über die vier Komponentengruppen Globales Branding, Globale Navigation, Wasserzeichen und andere Bilder sowie Anmeldebildschirm. In der Seitenleiste des Design-Editors wird standardmäßig die Gruppe „Globales Branding“ angezeigt.

Suchen Sie die Komponente, die Sie anpassen möchten. Sie können Gruppen erweitern und reduzieren, indem Sie auf das Pfeilsymbol neben der Gruppenüberschrift klicken.

Farbe über CSS auswählen

Farbe über CSS auswählen

Der Standardwert für jede Komponente ist im Textfeld eingeblendet.

Um eine Farbkomponente festzulegen, geben Sie eine neue CSS-Farbe in das Textfeld der Komponente ein. Sie können Farben als Hex-Code, RGB-Wert oder gültigen Farbnamen eingeben.

Hinweis: Eingegebene Farben werden konvertiert und als Hexadezimalcode angezeigt.

Farbe über den Farbwähler auswählen

Farbe über den Farbwähler auswählen

In Browsern, die native Farbeingaben unterstützen, kann der Farbwähler verwendet werden, um einen Wert auszuwählen. Suchen Sie die Komponente und klicken Sie auf das Farbfeld. Der Farbwähler wird in einem neuen Fenster angezeigt.

Farbauswahl

Farbauswahl

Wählen Sie eine Farbe im Fenster der Farbauswahl [1]. Sobald Sie eine Farbe ausgewählt haben, zeigt die Komponente die neue Farbe im Feld [2] an. Die Hex-Farbe der Komponente wird ebenfalls mit dem neuen Farbwert aktualisiert.

Bilder hinzufügen

Bilder hinzufügen

Für Komponenten, die Bilder benötigen, suchen Sie die Komponente und klicken Sie auf den Link Select Image (Bild auswählen). Die Bildbeschreibung enthält die unterstützten Dateitypen.

Vorschau des Designs

Vorschau des Designs

Um eine Vorschau Ihres Designs anzuzeigen, klicken Sie auf die Schaltfläche Preview Your Changes (Vorschau Ihrer Änderungen).

Canvas generiert die Vorschau der Komponenten auf der Grundlage Ihrer Änderungen an der Vorlage. Nehmen Sie bei Bedarf weitere Änderungen vor und sehen Sie sich Ihr Design erneut an.

Thema speichern

Thema speichern

Wenn Sie mit den Änderungen an der Vorlage zufrieden sind, speichern Sie Ihr Design, indem Sie auf die Schaltfläche Save Theme (Design speichern) klicken.

Names des Designs erstellen

Names des Designs erstellen

Wenn Sie ein Design anhand einer Vorlage geändert haben, erstellt der Design-Editor eine Kopie des Designs. Vorlagen können nicht direkt bearbeitet werden. Geben Sie in das Feld Theme Name (Name des Designs) [1] den Namen für Ihr Design ein. Klicken Sie auf Save Theme (Design speichern) [2].

Hinweis: Wenn Sie ein zuvor gespeichertes Design bearbeitet haben, wird beim Speichern des Designs die vorherige Version des Designs überschrieben und derselbe Designname verwendet.

Design anwenden

Design anwenden

Um Ihr Design auf Ihr Konto anzuwenden, klicken Sie auf die Schaltfläche Apply theme (Design anwenden) [1].

Um das Design zu verlassen und zur Seite Themen zurückzukehren, klicken Sie auf die Schaltfläche Exit (Beenden) [2]. Sie können das Design jederzeit wieder öffnen und es auf Ihr Konto anwenden.

Anwendung des Designs überprüfen

Um das Design auf Ihr gesamtes Konto anzuwenden, klicken Sie auf die Schaltfläche OK [1]. Um zum Design-Editor zurückzukehren, klicken Sie auf die Schaltfläche Cancel (Abbrechen) [2].

Hinweis: Wenn Ihr Konto die Möglichkeit bietet, dass Unterkonten ihre eigenen Designs anpassen können, werden alle vorgenommenen Änderungen auch auf alle zugehörigen Unterkonten übertragen. Canvas zeigt den Status Ihrer Aktualisierungen im Design-Editor an. Wenn der Prozess für jedes Unterkonto abgeschlossen ist, wird das Unterkonto nicht mehr im Fortschrittsfenster angezeigt. Wenn alle Unterkonten aktualisiert wurden, kehrt der Design-Editor zur Seite „Designs“ zurück.